Creative Coding Project
Catch the Circle
July, 2018
The following project displays the development of a Creative Coding project I created through the programming language of JavaScript.
Inspiration
When beginning to research already existing designs as inspiration, I was quite taken aback with Casey Reas’ Process Compendium; not only with the final design, but also with the layout of his code. The use of behaviours and classes was well suited for this project as it holds the ability to continually be iterated upon. Furthermore, I was inspired by Reas’ Process Compendium demonstrates how several behaviours applied to one form can create a specific element.
Development
I began the development process of my project by creating different forms that behaviours could later be applied to create and element. My sketches consist of ideas that I had that could represent forms. I also begun exploring the behaviours that could the applied to the designs.
My sketches represent three different concepts I developed. The concept I chose was the image to the left. My resining for this was that the ellipse would be the most successful form to apply to Reas’ concept to.
Initial Design
Within my initial design I created the chosen form ‘Circles’ and applied a class where all behaviours would be applied.
The design consists of circles that jitter and when the mouse comes within 50 pixels from the centre of an ellipse, this is visualised as a line is drawn. And when this occurs, it produces a wind chimes sound effect.
When the mouse is moved quickly between the circles, it creates the illusion of a dancing spider. I used this behaviour as a base for my final design where the circles are repelled by the mouse, and the line showed me this as a visual representation.
To ensure the progression of my project would conclude with a useable and enjoyable project, I conducted a short questionnaire with 20 people. The three main points that where discovered are as follows;
The final design needs to be interactive
The jittering circles was unliked
The sound effect was well-like however, a song would be preferred.
Final Design
I was able to implement the user feedback in the following ways:
I not only made the program interactive, I gave the user the challenge to try and catch a circle
I replaced the circles jittering movement, and allowed them to flow around, and off, the screen
I kept the wind-chime noise, but gave each circle and individual ‘chime’ that plays when the mouse comes within 50px of the circle. I did this as the individual chime is more interactive than a generic song being played.
Heuristic Evaluation
A different 20 participants where interviewed for the heuristic evaluation
Heuristic
Visibility of system status
Summary
15% of users required a more detailed explanation of how to engage in the project. In future designs, I will go into greater detail to explain how to use the program or design a program with a simpler task that are easier for the user to accomplish.
Users felt they where in control of the program, however on reflection from the heuristic results, I made it too difficult to ‘catch’ a circle and many users reported they were frustrated. If I could re-design my program, I would make either the circles move slower or make it easier to catch a circle by creating a minor change in the mouseClicked function.
User Control and Freedom
Consistency and Standards
Many users did not realize that when they ‘caught’ a circle, they had to hold the mouse clicked to keep the mouseClicked function operational. Users did not realize that once they let go, the circle would run away. In reflection, I would make the instructions clearer.
A major flaw was that the sound created by the circles is continuous. It makes the sound even when the tab is not in use. Furthermore, on some computers the sound came through as a “crackling noise” and not as the harmonious wind chimes it was designed to be.
Error prevention
Help users recognize, diagnose, and recover from errors
A major flaw that I did not realize my code had, was that after a period of time, there are no circles on the screen and the user has the refresh the page. In future designs, I would make it so it that when a circle leaves the screen, it comes back across on the other side of the screen. However, in saying this all users who encountered this problem reported that they just refreshed the page and could solve it themselves.