Prototyping Interactive Experiences — Week 2

Matthew Cottrell
3 min readFeb 8, 2021

The code was edited at lines 12, 22, and 23

Line 12 — Changed to increase the size of the Void

Line 22 — changed to increase the angle at which the dots pulsated out from, and return to the origin point.

Line 23 — Changed to decrease the number of dots that were present around the origin point. If 75 is divided into 360, it gives you 4.8 meaning that the spacing is not perfect. If you observe the original, it shows 5 dots that are not evenly spaced. In the “Edited Code” 3 dots are observed to be spaced evenly, due to 120 dividing into 360 exactly 3 times.

The code was edited at line 13

Line 13 — While this was a simple change to the program, the effect it had could be considered drastic, as it changed the plane, single colored line into one which changed as it was moved across the void. This allowed for objects to be drawn free hand in different colors depending on where they were drawn.

The code was edited at lines 14, 19, 20, 26 and 38

Line 14 — Changed to increase the size of the Void

Line 19 — This line was changed to increase the “refresh rate” of the image. By increasing this variable it makes the image appear smoother on the screen. By decreasing this variable, the image appears more “choppy” as it moves.

Line 20 — This line changes the colour(s) that are used for the branches of the tree. The variable was changed from grey scale (0–255) to a manipulable RGB value (mouseX, mouseX, mouseY)allowig for the colour of the tree to change when the courser is moved around on the void.

Line 26 — This line changes to positioning of the base of the tree. This was changed in order to position the tree base more in the center of the void, due to its now increased size.

Line 38 — this variable was changed to increase the number of branches the tree had. By increasing the variable slightly from 0.66 to 0.75, this had a dramatic effect that can be observed in the photos.

Code was changed at Line 16

Extra code was added to “Void Setup”, “Void Draw”

Line 16 — Void size was increased to accommodate additional code.

3 additional “chain links” were added which created an additional 9 lines if code. These lines could be repeated infinitely, as they link onto the one that comes before it and are updated based on the next in the “link”

The code was altered at lines 36, and 43

Line 36 — This changes how long the particles stay on the screen for. As the number was decreased, the particles lingered around for longer.

Line 43 — This changed the colour of the particles based on the direction they were blowing. As you moved them from right to left, the colour changes accordingly.

--

--

Matthew Cottrell
0 Followers

Edinburgh Napier 3rd Year — Product Design