Netscapes: Art from code – Inspirations

Since we are looking into creating web-based visualizations and animations from code, I decided to research some forms of web-based animations.

Modular SVG Animation Experiment – Mandala
By Dylan Cutler

Modular SVG animation pen (Cutler, 2017)

This example is made using HTML,CSS and Javascript. (Cutler, 2017)

I find this a particularly interesting example because of all the moving parts, how they all move in relation to each other and how they layer up.

Animated Background
By Marco Guglielmelli

Animated background in action (Guglielmelli, 2017)

This piece is created with CSS/Javascript/HTML. It is interactive; moving the mouse across the screen shows new areas of animated lines and points, growing brighter or darker as you move towards or away from them. (Guglielmelli, 2017)

Hexagon Fade
By Tina Anastopoulos

Hexagon fade example on codepen (Anastopoulos, 2017)

Created using HTML/CSS/Javascript and p5.js, Hexagon fade is an example of how p5.js can be used to create simple yet effective scaling visualizations. (Anastopoulos, 2017)

Rainbow Pinwheel – p5.js
By Tina Anastopoulos

Rainbow pinwheel interactive example on codepen (Anastopoulos, 2017)

Rainbow Pinwheel is a striking example of how interactive visualizations can be created using HTML/CSS/Js, and in this case, p5.js. In this example, you click and drag to create the effect of motion. (Anastopoulos, 2017)


Cutler, D. (2017). Modular SVG Animation Experiment. [online] CodePen. Available at: [Accessed 26 Nov. 2017].

Guglielmelli, M. (2017). Animated Background. [online] CodePen. Available at: [Accessed 26 Nov. 2017].

Anastopoulos, T. (2017). Hexagon Fade. [online] CodePen. Available at: [Accessed 26 Nov. 2017].

Anastopoulos, T. (2017). Rainbow Pinwheel – p5.js. [online] CodePen. Available at: [Accessed 26 Nov. 2017].


Netscapes – Technologies

After developing our idea further, here are the technologies we are planning to use to create our project:

For storage of collected data from our app. SQL may be more appropriate for its ordered approach, but does not work easily with Phonegap.
MongoDB has plugins for Phonegap and may be considered a newer technology, thus more appropriate for our brief. (MongoDB, 2017)


We will use Phonegap to build a basic app containing input fields that users can download. Phonegap has a handy online compiler, meaning that apps can be built quickly that will work across multiple mobile OS’s. (PhoneGap, 2017)

Raspberry Pi

A Raspberry Pi will be used for input of data without the use of a mobile phone. This will be achieved by pairing it with a touchscreen hat. We will use this for presentation within the IVT.


p5.js is a javascript library with drawing functionalities. We will use p5.js for creating interactive web-based visualizations with server connections. (, 2017)

Immersive Vision Theatre (IVT)

We will use the Immersive vision theatre for the large scale presentation of our project. Users will be able to come in and view their data visualized in real time.


MongoDB. (2017). MongoDB for GIANT Ideas. [online] Available at: [Accessed 25 Nov. 2017].

PhoneGap, A. (2017). PhoneGap. [online] Available at: [Accessed 25 Nov. 2017]. (2017). p5.js | home. [online] Available at: [Accessed 25 Nov. 2017].

Netscapes – Planning & Production


Responsibilities breakdown

Here is the breakdown for our group responsibilities. This is subject to change as the project moves along.

My responsibilities are focused around programming & building the back end

Tasks Chris Steph Gintare
  • Project Management
  • Tutor Mediations
  • UX Development
  • Research: Personalities
  • Research: Animations
  • 3D model for RasPi case
  • Immersive Dome Projections
  • Databases
  • Server
  • JavaScript
  • Sockets,
  • Animations Code
  • P5.JS
  • Node.JS
  • Immersive Dome Projection
  • Phonegap Front end
  • HTML/CSS for website
  • Visual Research
  • Javascript
  • P5.JS
  • Animations
  • Research: Animations
  • Immersive Dome Projection

Equipment Orders and collation, software/ hardware (Chris,Steph)
29th Nov 17

  • Source all production materials
  • Raspberry Pi 3’s
  • Touch screens
  • Finalise final form for interface container
  • OS systems
  • Server Hosting

Back End (Chris, Stephanie)
4th Dec 17

  • Find server to host MongoDB
  • Develop a MongoDB database to store parameter of user interface inputs
  • Connect simple html/ JS to database to check CRUD works
  • Client Side and interfaces (Gintare, Stephanie, Chris)

4th Dec 17

  • Simple PHP developed to ensure client is posting data externally/ correctly
  • Prototype phone gap front end for users to input personality data
  • Simple website to host visualisations.
  • Start to look at button interface to select background for the animations

Animations (Gintare, Chris)
11th December

  • P5.JS animations as prototype  forms with some or all parameters alterable though user interfacing.

Modelling for Interface controller (Chris)
18th December

  • A prototype of the interface container to be roughed out for both the primary and seconday input (buttons for scenery changes)

To be completed as working structure 9th Jan 2018

Time planning (group / individual)

Group Time Planning

Here is our group timetable, created by Chris.

netscapes group timeline

Group time schedule


Individual Time planning:

Below is my individual timeline for this project. Most parts of this timeline are subject to change as the project goes along; such as running into difficulties or in relation to other’s completion of tasks.

Blog updates marked with * may not be required.

Week Tasks
  • Blog Update
  • Decide on visualizations
  • Set up webpage for visualizations.
  • Set up server for database (Installation)
  • Begin to source equipment
  • Begin visualization development.
  • Blog Update
  • Further visualization development
  • Create database
  • create website inputs
  • begin to build connection between visualization/app/Database
  • Blog Update
  • Finish linking Database to app & visualization
  • Finish visualization
(18/12/17 to 01/12/17) – Christmas Break
  • Blog Update*
  • Finalization of project
  • Blog Update
  • Presentation of project (IVT)
(15/01/18) – Final 2 days
  • Blog Update*
  • Finalization of documentation
  • Refinement & finalization of submission
DEADLINE: 16/01/18
  • Submit by 23:59

Resources list & Budget

Physical Resources:

  • Raspberry Pi (Supplied by me)
  • Touchscreen for RasPi (Supplied by me)
  • 3D printer & related equipment (Supplied by university)



Netscapes: Art from code – Creation

After deciding on creating visualizations of butterflies as a reflection of personality, I experimented with code to create a simple web-based animated butterfly. The animation has the potential to change colours in response to inputted data from a server (but for now, i’m inputting the colours myself).

code butterfly

Basic butterfly I created in CSS

This animation was originally intended to work in Phonegap, so naturally it had to be limited to HTML/CSS/Javascript. The wings and body are made with simple CSS shapes, and complete a “flap” cycle every 1.5 seconds.

GitHub Link: 


My completed CSS animation

Netscapes: Further Idea Development

After our session today on MongoDB databases and Node.JS, we took some time to further develop our idea and plan our next steps.

How the Visualisation will work:

  • Butterflies instead of Jellyfish – More original, not making a “copy”
    Wing & body colour determined by 5 different personality Traits
  • Total of 10 butterflies at a time maximum
  • Possibility for animation in background – such as clouds passing by.
  • Visualisation accessible on website and mobile app.
  • Real-time projection into Immersive Visual Theatre.

How the Data will be stored and Processed:

  • Names can be stored with butterflies and displayed in visualisation
  • Data will be stored with a Primary Key – easier to handle calls
  • 10 butterflies max – data is updated so it “loops” and replaces previous data as new data is added – keeps database small and lightweight

How we are going to build the app:

  • Create basic interface on phone gap – Needs to be short to keep interest (i.e. 3 to 5 questions)
  • Questions will be personality based and Inspired by the CANOE model.
  • Interface will contain sliders instead of radio buttons .etc – this allows for more variety of input (such as the body of the butterfly  being more yellow for extrovert and more purple for introvert)
  • Phone gap app on GitHub – easy collaboration & Version control

How we are going to distribute the app:

  • Cards, flyers or posters with QR code – These should have details about the display also and should follow the design/identity of the rest of the project.
  • QR links to a webpage with download links for different mobile OS’s – Must look professional and legitimate.

Everyware: Developing wearable technologies

Since I am responsible for designing and building many of the back-end technologies, I looked into how we can not only make the shirt a reality, but also maximize its re-usability.

We considered using technologies such as:

  • Lilypad arduino – a dedicated tool for wearable technologies, the Lilypad will be used to power & control the T-shirt functions.
  • Conductive thread – For connections between Lilypad/LEDs/Sensors, more robust and dedicated for the task (compared to soldering wires, which may snap under stress!)
  • RGB LEDs and LED strips – For creating lighting & light patterns within the T shirt. If strips are used, the LEDs within them need to be individually addressable.
  • Bluetooth or GPS – For tracking proximity to other T-shirts in the area and transmitting data between them.

If we decide to use the Lilypad Arduino over the NodeMCU board, we will have to consider other problems, such as internet connectivity.

Using conductive thread

The best conductive thread for machine or hand sewing is silver plated fiber. It has good sew-ability and a clean finish, and is less likely to get stuck in thread take-up of a sewing machine, unlike stainless steel fibers. For machine sewing, a “z-twist” direction should be used. For hand stitching, however, either type can be used. (, 2017)

To avoid shorts in conductive thread, power and ground lines should be kept a good distance apart. During stitching, fabric should be kept taut and flat . All thread should be tested with a multimeter prior to use. (Stern, 2017)

Waterproofing and wash-ability

Since we are making wearable technologies, we have extra points to consider, such as durability & the ability to wash it.

Washing LED T-shirts
Shirts that have an LED panel should be hand-washed only, to prevent cracking the panel. Battery packs and other water-sensitive parts should be removed prior to washing. Many of these shirts have an interior pocket that allows the wearer to remove the battery pack. (Flashion Statement, 2017)

Shirts that have non-removable electronics are generally dry clean only. (, 2017)

Conductive Thread & Washing

Silver plated fibers are not as suitable for washing as oxidation can occur, however stainless steel fibers can be washed without risk. (, 2017)

The thread has to be dried thoroughly to reduce the risks of shorting (particularly for plated fiber kinds of thread, which may stay damp inside). (Stern, 2017)


Flashion Statement. (2017). Washing Instructions – Flashion Statement. [online] Available at: [Accessed 19 Nov. 2017]. (2017). Product Care Instructions for your purchase – Christmas Jumper Company 2017. [online] Available at: [Accessed 19 Nov. 2017]. (2017). Selection Guide of Conductive Thread for Machine Sewing. [online] Available at: [Accessed 19 Nov. 2017].

Stern, B. (2017). Overview | Conductive Thread | Adafruit Learning System. [online] Available at: [Accessed 19 Nov. 2017].

Stern, B. (2017). Preventing short circuits | Conductive Thread | Adafruit Learning System. [online] Available at: [Accessed 19 Nov. 2017].



Netscapes: Art imitates life

After experimenting with different forms of artworks and exploring the limitations and expectations of the brief, we decided on creating an artwork that is a reflection of personality.

We also considered bringing in other aspects, such as Maslow’s hierarchy of needs, and using it to effect how each entity reacts within the space. (, 2017)

Our Inspirations:

Jellyfish Animation
By Marc Muller



Jellyfish Animation by Marc Muller (Muller, 2017)


Jellyfish animation is animated using a mix of HTML, JS and CSS. It can be viewed here.(Muller, 2017)

By I-DAT, 2006

Noogy is a Tamagotchi-like creature living within the PSQ building of Plymouth university. Noogy invites viewers to ask it questions using their mobile phones, which it will respond to. The piece also reacts to conditions within the building, such as water or electricity usage. (i-DAT, 2006)

Sources: (2017). Maslow’s hierarchy of needs. [online] Available at: [Accessed 19 Nov. 2017].

i-DAT. (2006). Noogy. [online] Available at: [Accessed 19 Nov. 2017].

Muller, M. (2017). Jellyfish animation still. [image] Available at: [Accessed 19 Nov. 2017].

Muller, M. (2017). Jellyfish Animation. [online] CodePen. Available at: [Accessed 19 Nov. 2017].

Netscapes: Arduino & Raspberry Pi

Today we had a session with Lee Nutbean, who gave us insight into his work with Raspberry Pi and Arduino for multiple products and projects. He talked about the different types of Arduino boards available, what they are useful for, and how he has used them in the past for his own professional projects.

by Lee Nutbean


Race by Lee Nutbean (Art in Odd Places, 2017)

Race is an installation piece consisting of an array of LEDs mounted on a board, designed to be hung in windows and moved around. The piece is connected to social media, and the lights will only turn off when mentions of the word “race” cease. The plus symbol flashes whilst it is connected to the internet, checking for the word “race” in a human categorization context. (Estes, 2017)


We looked at all the different ways you could build a single product. We did this by looking at a piece he had previously made, and planning out how we would have made it ourselves, such as what technologies we would have used, how they would work together and why we chose the technologies we did.

There are multiple ways these products could be created; some easier and some more difficult, but all valid options.

Making your own Arduino

Whilst the Arduino is great for rapid prototyping, experimentation and building, it isn’t so great for a finished product.

We looked at how you could either create your own Arduino, by either building and programming one yourself or getting a board printed.

Whilst building with an Arduino can offer many benefits, building your own can be cheaper, smaller, and more specialised to the task it was built for.


Art in Odd Places (2017). Race by Lee Nutbean. [image] Available at: [Accessed 18 Nov. 2017].

Estes, C. (2017). Art in Odd Places | 2016 RACE. [online] Available at: [Accessed 18 Nov. 2017].

Everyware: AI & Emotional Scoring

In order to test the technologies we plan on using for this project, I built a small prototype. This prototype is a reflection of what we plan to make for our final outcome, but on a smaller scale.

The technologies I used were: Amica NodeMCU board, RGB LED, MQTT & IBM Watson services (speech to text & Tone analysis).

How it works

Everyware prototype (1).png

A voice input is taken via an app. The speech input is converted to text using IBM Watson’s Speech-to-text service. This text is then inputted into IBM Watson’s tone analyser, which feeds back an emotional ID (Such as Happy, Sad, Angry .etc) and a percentage score.

This emotional ID/Score data is then then processed in Javascript/Node Red, and published across the MQTT broker on a specific channel.

The NodeMCU board is subscribed to the same channel, and recieves the processed data. This is then used to determine which colour to make the RGB LED it is connected to.

Physical Prototype

I built the basic speech to text app using phonegap, as it is an ideal solution for rapidly protoyping apps that will work on a wide range of mobile devices. It also has dedicated libraries for MQTT connections.

I programmed the NodeMCU board to receive the data from the MQTT and use that to determine what colour to make the RGB LED. Since the tone ID & score were simplified into integers earlier, all it has to do is take the returned number and use it to control the colour and brightness, such as turning it blue for sadness, and making it brighter for a high percentage.


NodeMCU with RGB LED


RGB LED turns red when Watson’s Tone analyser detects Anger

Venture Culture: Week 5 – Pitch Perfect (Mini Group Pitch)

Mini Group Pitch

Today we focused on pitching our product. This session was aimed solely at pitching (rather than the product), and how we can build on and improve our skills. We did this by first doing a single pitch, getting feedback, then going away and improving it and pitching it again.

First Pitch:

Some of the tips we were given were:

  • The scenario and aims of the product were clear, but what the product actually is was not made clear.
  • Be more clear about target audience, but also think about how it could be expanded in future (such as in a care setting)
  • be clearer on what the product is, what its for, and the USP.
  • Look up from devices, make more eye contact with audience.
  • Be clear on where the games for the device come from.
  • Lose the tablet picture from the slides – it makes it seem too close to a tablet than a mirror.
  • Think about the control system- would it have voice activation or motion controls?
  • Perhaps look at a reward system for chores?

After receiving the feedback, we set to work fixing our pitch & supporting slideshow.

Final Pitch:

View our final Pitch Script here.

What was good:

  • We defined what our product was, who it was for and how it worked much more clearly. We talked about the product in more depth, making sure the unique selling point was known, and (most importantly) setting it apart from “just an iPad in a waterproof case”.
  • Removing the kids tablet image helped break us away from the “iPad in a case” idea.
  • We set our product apart from others by being clear on the education aims of the product, rather than making it seem like a leisure device. We did this by being clear on the rewards system, and how the game controls link into the aims of the product.
  • We were more confident and knew our cues, so the whole presentation flowed better.
  • We made a scenario to try and relate to the audience, and included questions to make viewers think about the issue and how it effects them. This was difficult, however, as a large part of our audience are not our target demographic.

We could still improve by:

  • preparing so we remember our lines and cues better, making the whole pitch flow better and seem more natural.
  • Use better visuals in the presentation, this could be actual images of product prototypes (when we have a final product) as well as coming up with a better “theme” related to our product (i.e. more related to children)
  • Breaking up the speaking roles so those who are more confident have more to say.
  • Have more structure in explaining the product, by following a clear “problem to solution” structure in our pitch.
  • Having a stronger start to our pitch, with a better introduction.