Concept
For my concept, I wanted to make an interactive artwork using objects and functions. I decided to make a simple game where the user has to catch apples that randomly fall into a basket that they control using their mouse.
I wanted the artwork to have a simple, colorful, and playful appearance because I wanted it to feel more like an interactive cartoon than a realistic scene. I used a light blue sky and different shades of green for the trees and grass to create a bright outdoor environment. I also used multiple layers of leaves on the trees to give them more depth instead of making them a single flat shape.
I chose to give the apples faces because I wanted the objects the user interacts with to feel more playful and expressive. I also placed the trees toward the sides of the canvas, leaving an open area in the middle where the apples can fall and where the basket can move. This makes the gameplay easier to see while also creating a clear visual composition.
Here are my inspiration and references pictures
How this was made
I first started by creating the sky and grass (this was very simple, just rectangles and background). Next, I made the two trees, I made the trunks and branches using beginShape(), vertex(), and endShape(). For the leaves, I used ellipses of varying shapes and sizes. In order to add more dimension, I had a set of leaves behind and in front of the trees. This code was initially in my draw function, but once I had my desired trees, I moved both trees into separate functions treeL() and treeR(). Next I used loops to create the fences out of rectangles and lines. This was also moved to their own function fence() that was later called in the draw function.
Now that the backdrop was complete, I started with creating the apples. First in the draw function I drew the apple using primitive shapes. Once I was happy with that, I made a separate file called apple.js. I made the class with the constructor that contained the following variables: this.x, this.y and this.speed. For the x and y positions, these are random and the apple will appear anywhere along the x axis and as for the y, it will appear above the upper bound of the diagram. I then moved the apple drawing to a function and allowed for varying positions. I also created a fall() function which increases the apple’s y position downwards unless it hits the floor or the user catches it with their basket. In both cases, the apple’s x and y coordinates are back to the random starting points.
For the basket it was quite simple, I created a basket() function which takes the user’s mouse positions and draws a basket in that area.
I also created another class for the clouds, this follows the same logic as the Apple class. It has the same variables and functions. The only difference is that the clouds spawn on the leftmost side and move to the right, hence instead of the y position changing, it is the x position which is decreasing. The cloud disappears once it reaches the leftmost side and will respawn back on the right.
For both the apples and clouds, I made arrays to be able to store and display multiple objects from each class. I had 4 apples and 3 clouds.
Code I am proud of
I am most proud of the trees and apples. Here is the function for the tree on the left that use the vertices and ellipses:
function treeL(){
// leaves behind tree L
noStroke()
fill('#91bd42');
ellipse(30, 55, 150);
ellipse(275, 25, 70);
ellipse(120, 40, 140, 100);
ellipse(130, 80, 60, 50);
ellipse(190, 40, 80, 70);
// trunk L
stroke();
fill('#865830');
beginShape();
vertex(0, 90);
vertex(48, 90);
vertex(58, 98);
vertex(38, 180);
vertex(38, 220);
vertex(45, 250);
vertex(55, 285);
vertex(65, 315);
vertex(72, 327);
vertex(78, 345);
vertex(0, 345);
vertex(0, 90);
endShape();
arc(0, 345, 156, 40, 0, PI);
//branches
beginShape();
vertex(0, 35);
vertex(35, 35);
vertex(25, 90);
vertex(0, 90);
vertex(0, 35);
endShape();
beginShape();
vertex(25, 90);
vertex(30, 86);
vertex(35, 81);
vertex(40, 74);
vertex(45, 68);
vertex(50, 60);
vertex(55, 58);
vertex(60, 58);
vertex(80, 58);
vertex(58, 98);
vertex(25, 90);
endShape();
//leaves in front of tree L
fill('#b8dc58');
ellipse(0,0, 48, 175);
ellipse(80, 25, 130, 90);
ellipse(145, 13, 50, 33);
ellipse(210, 10, 100, 80);
ellipse(290, 0, 90, 60);
}
Here is the apple class as explained above:
class Apple{
constructor(){
this.x = random(50, 650);
this.y = random(-400, 0);
this.speed = random(1, 1.2);
}
draw(){
// apple base
strokeWeight(3);
stroke('#390102');
noFill();
arc(this.x + 20.5, this.y - 25, 15, 40, PI, PI + 1.55);
fill("#ea5973");
arc(this.x, this.y, 50, 60, HALF_PI - 0.5, HALF_PI + PI + 0.5);
arc(this.x + 27, this.y, 50, 60, HALF_PI + PI - 0.5, HALF_PI + 0.5);
noStroke();
quad(this.x + 13.5, this.y - 25, this.x + 28, this.y, this.x + 13.5, this.y + 25, this.x - 2, this.y);
stroke('#390102');
fill('#9ad76e');
arc(this.x + 10.5, this.y - 44, 23, 28, HALF_PI - 0.05, HALF_PI + 2);
arc(this.x + 0.5, this.y - 36, 23, 28, -HALF_PI + 0.05, -HALF_PI + 2);
// apple face
fill('#390102');
ellipse(this.x - 2, this.y, 10);
ellipse(this.x + 29, this.y, 10);
noFill();
arc(this.x + 13.5, this.y + 3, 8, 7, 0, PI);
}
fall() {
this.y += this.speed;
this.x += random(-0.5,0.5);
let centerX = this.x + 63.5;
let centerY = this.y + 50;
//checking to see if it reached the ground
if (this.y > 420) {
this.y = random(-400, 0);
this.x = random(30, 650);
}
//checking to see if user has caught an apple
if (dist(centerX, centerY, mouseX, mouseY) <= 40){
this.y = random(-400, 0);
this.x = random(30, 650);
}
}
}
Problems I ran into
One problem I ran into was the collision detection between the apples and the basket. This was because I passed the wrong apple coordinates to the dist() function, therefore the apples were either not being “caught” or were only sometimes being caught. I realized that the x positions of the apple was not from the center but from the left side. I had to add a constant factor (used in drawing the apple) to the x position in order to fix the problem.
Another challenge was creating the trees using beginshape(), vertex(), and endshape(). I had to experiment with the coordinates and proportions several times to get the trees to look the way I wanted them to.
Final result:
Reflection
Overall, I am quite happy with how it turned out. I believe I am getting better at executing my concepts as well as honing my creativity. In the future I would maybe add more complexity to the game. For example, the user would only have 3 lives and would lose a life for each apple missed, as well as a tally in the corner which counts how many apples the user has caught.
