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 – Project Planning – 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 by Chris (


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)


Our budget will have to cover building supplies as well as Arduino components. Our maximum budget is around £100 but we would like to stay below this if at all possible.

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.


Early Butterfly Code – CSS animation

GitHub Link: 


My completed CSS animation

Everyware: Design documents

Below are a few of my sketches of designs for the Icebreaker T-shirt, inspired by my previous research into how the shirt could be designed and made into a reality.

Tshirt designs.png

Multiple T-shirt designs, taking into account form as well as function.

Some of my designs included networks of singular RGB LEDs, as well as strips, panels and rings. I also considered using electroluminescent (EL) wire, as I have previous experience of using this.


Peel-off flexible LED panel design, to maximise comfort and make it washable!

I also considered fitting the circuitry into an inner pocket within the T-shirt, which could be removed for washing. This would be connected using clips and conductive thread, maximizing the re-usability.

Image (14).jpg

Framework for matches across database with NodeMCU



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: Contextual research

Since we are focusing on creating an interactive piece reflective of personality, I began to research into the concept of psychology and personality to gain an understanding of how this could be represented in an artistic sense.

Maslow’s Hierarchy of Needs

Maslow’s pyramid is a five-level model of human needs. The model works on the principle that the higher levels cannot be reached if the supporting level is not fulfilled. This level of fulfillment is deceptive, however, as ‘completing’ a level is not “all-or-nothing”. (McLeod, 2017)

maslow's hierarchy of needs five stage pyramid

Maslow’s Needs Pyramid (Simply Psychology, 2017)

CANOE Personality Model

The CANOE personality (sometimes known as OCEAN or ‘Big Five’ model) is a framework of five major personality traits used to describe an individual’s personality. (The Psychometric World, 2017)

CANOE model (ThePsychometricWorld, 2017)

The five factors in the CANOE model consists of:

  • Conscientiousness: being organised, systematic and dependable.
  • Agreeableness: being tolerant, trusting and kind.
  • Neuroticism: being anxious and irritable.
  • Openness: being curious, creative and open to new ideas.
  • Extraversion: being outgoing and social. (, 2017)

References (2017). Big Five factors. [online] Available at: [Accessed 10 Nov. 2017].

McLeod, S. (2017). Maslow’s Hierarchy of Needs. [online] Simply Psychology. Available at: [Accessed 16 Nov. 2017].

Simply Psychology (2017). Maslow’s Needs Pyramid. [image] Available at: [Accessed 10 Nov. 2017].

The Psychometric World. (2017). Big Five Plus Personality Inventory (BigFive+) – The Psychometric World. [online] Available at: [Accessed 10 Nov. 2017].

ThePsychometricWorld (2017). CANOE model diagram. [image] Available at: [Accessed 9 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 and the self.

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)


One of the first inspirations we looked at is the above animation, a fluid motion of concentric circles resembling a swimming jellyfish.This 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 – Lee Nutbean Workshop

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].