Concept
Thinking of the interactivity aspect in my works, I have decided to explore video games that involve playing repetitively with similar characters. One of the first examples that came to my mind was Slither.io, so I have decided to create a work inspired by it. I started with the “Bubbles” code we have worked on in class, adding new parameters for controlling the bubbles and implementing the interaction from the user.
The final result is a reinterpretation of visuals and functionality of Slither.io – I have adjusted transparency of the background and the circles, so that the fading trace would be visible. There are three initial “snakes”, and as the user presses the mouse more of them appear on the screen. Furthermore, the bigger the radius of the circle, the faster it moves – just as the bigger snakes are more powerful in the video game.
Highlight of the code I am proud of
class Bubble {
constructor(x, y, r) {
this.x = x;
this.y = y;
// setting up the radius of the bubble
this.r = r;
// setting up a random colour choice
this.colour = [random(255), random(255), random(255)];
// setting up speed that depends on the bubble's size
this.xSpeed = map(this.r, 5, 30, 3, 7);
this.ySpeed = map(this.r, 5, 30, 3, 7);
}
// movement of the bubble
move() {
this.x += this.xSpeed;
this.y += this.ySpeed;
}
// bouncing off the canvas' edges
bounce() {
if (this.x > width - this.r || this.x < this.r) {
this.xSpeed *= -1;
}
if (this.y > height - this.r || this.y < this.r) {
this.ySpeed *= -1;
}
}
// displaying the bubble of with a trace of a certain opacity
show() {
noStroke();
fill(this.colour[0], this.colour[1], this.colour[2], 150);
ellipse(this.x, this.y, this.r*2);
}
}
Working with randomised values took some time. As I was altering the code we have worked on in class with the professor, several parts had to be adapted to match my vision. I have watched a video tutorial to figure out how to set up the radius value, read a guide on using the map() function that allowed me to work with specific ranges of values, and a guide on the array methods in JavaScript. Setting up the Bubble class was the most challenging, but a very interesting part since I have researched and learned a lot in the process.
Sketch
Image 1: One of the stages of the visuals in my interpretation
Image 2: One of the stages of Slither.io video game
Reflection
I am satisfied with the final result of my work, as it matches my initial vision of how the interpretation of the game would look like. Moreover, I have managed to include interaction from the user and have learned several new functions by myself, so I am proud of the complexity of the code at this stage. It was difficult to figure out the setup of the randomised features and their interconnectedness, as I wanted the speed to depend on the radius.
However, in the future I would like to experiment more with the movement of objects, especially with their trajectories. Setting up an object following a direction that is not simply straight and predetermined would be one interesting path to go down.
Inspiration for my project