Author: David Lee

Since I have already created artwork in OOP for the last assignment, I decided to modify my artwork so that it is more user-interactive. I modified the random spawn of the splashes into click-to-splash. This gives a visual feedback to users clicking the screen.

This is implemented by using the mousePressed() function. This function adds an extra object to my object array whenever the mouse is pressed.

Click the screen below

After checking that the OOP implementation is working properly, I decided to apply the same method to a very game-like work. In this work, made in a first-person shooter game theme, the bullets are implemented in object-oriented programming using an array.

Click to shoot, move your mouse to change the direction

The concept of my artwork is displaying the splash raindrops makes when it hits the puddle. I wanted circles to be created in random positions with different timings since not all raindrops drop at the same time.

First task: Creating a Circle in a random position

This task was fairly simple compared to the other one. I created my code in an object-oriented way by making an object named splash (which is stated as a function in the script). Then, I give two random variables that are used for the x and y coordinates of the circle.

for (i = 0; i < 20; i++) {splash[i] = new Splash(random(50, 350), random(50, 350), i*8);}

As a result,  I create 20 circles that have random starting x,y coordinates.

Second task: Display the circle at different timing

It was challenging to find a way to make circles appear at different timings. The solution to this problem was to give different large number indexes to every circle that will constantly decrease until 0, and let them start to be drawn when the index becomes 0. This delays the initiation of drawing and results in displaying circles at different timing.

 

The first thing I thought looking at this assignment was the game called “Blue Archive” (2021) from Nexon & Yolstar. In this game, each character has a “Memorial Lobby” where the user can interact with the live2D version of the character.

From this, I decided to create a face of myself with simple shapes and make a simple user interaction where mouse clicks resemble patting the character.

The method of the algorithm was not so complex. All I had to do was draw a different shape when the mouse is clicked and change the shapes’ coordinates according to the location of the mouse on the screen.

However, since the mouse can move anywhere on the canvas, I had to decrease the amount of movement relative to the movement of the mouse using following statement.

let moveX = (mouseX – 200) / 60;
let moveY = (mouseY – 200) / 60;
let facemoveY = (mouseY – 200) / 100;

Through this statement, eyes give a feeling of chasing the movement of the mouse cursor, and the face seems to move in the same direction as the patting.

(try clicking the face below)