Link to final product:
https://editor.p5js.org/tina06c/sketches/3uIi4PaI5
Description:
For this project I intend to recreate the natural phenomenon of balloons floating in the sky. I created the class Particles which displays a balloon on the canvas. Based on which display function is called the balloon can be squared or round. In addition, the balloon also has a move() method that controls its movement and there’s a release() method that determines the whether the balloon is in the release state or not. The default state of a balloon is that it will be generated on the bottom of the canvas and moving up until it is no longer seen (at that point it is in outer space and we no longer see it). If the balloon is in release state the balloon will float down rather than up due to the lost of air inside. When the balloon enters release state its face will turn from a happy face to a sad face. In addition, a balloon in release state will shrink and become skinnier due to loss of air.
Final Result:
Coding:
The bString() function is in charge of displaying the string of the balloon if the balloon is not released. The displayCircle() and displayRect() functions are used for displaying either a round balloon or a rectangle one. The releaseAir() function is in charge of signaling the releasing of the air to the variable release which is checked within every displaying function in order to know which type of balloon is displayed on screen. The move() function is in charge of the balloon’s floating movement and the sadFace() and happy() functions are in charge of displaying the balloon’s emotions.
bString() {
if (this.release) {
//nothing
} else {
push();
translate(this.x, this.y);
stroke(0);
noFill();
beginShape();
curveVertex(this.p1, this.p1y);
curveVertex(this.p1, this.p1y);
curveVertex(this.p2, this.p2y);
curveVertex(this.p3, this.p3y);
curveVertex(this.p1, this.p4y);
curveVertex(this.p1, this.p4y);
endShape();
pop();
}
}
displayCircle() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
colorMode(HSB, 100);
fill(this.color, 20, 100);
ellipse(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}
displayRect() {
this.bString();
push();
translate(this.x, this.y);
noStroke();
rectMode(CENTER);
colorMode(HSB, 100);
fill(this.color, 20, 100);
rect(0, 0, this.w, this.h);
pop();
if (this.release) {
this.sadFace();
} else {
this.happy();
}
}
move() {
this.x += random(-2, 2);
if (this.release) {
this.y += this.ySpd;
this.p1y += this.ySpd / 100;
this.p2y += this.ySpd / 100;
this.p3y += this.ySpd / 100;
this.p4y += this.ySpd / 100;
} else {
this.y -= this.ySpd;
this.p1y -= this.ySpd / 100;
this.p2y -= this.ySpd / 100;
this.p3y -= this.ySpd / 100;
this.p4y -= this.ySpd / 100;
}
}
releaseAir() {
this.w = 40;
this.release = true;
}
sadFace() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 10, this.w * 0.3, this.w * 0.3, PI, 2 * PI);
pop();
}
happy() {
push();
translate(this.x, this.y);
fill(0);
circle(this.w * 0.3, 0, this.w * 0.05);
circle(-this.w * 0.3, 0, this.w * 0.05);
arc(0, 0, this.w * 0.3, this.w * 0.3, 0, PI);
pop();
}
Reflections:
Object-Oriented Programming is when we write code and programs using objects and classes. A class defines object properties and behaviors and is the blueprint for creating objects. An object is an instance of a class and it has all of the properties and behaviors that the class has. OOP is frequently useful in situations when we want to create things with similar behavior and features but they differ in small variable details. By programming in OOP we can avoid writing duplicating and excessive code. We usually create classes for objects that are called multiple times. I have created objects like Clouds and Balloons. The Clouds and Balloons have a display() function to show and they can move through the calling of the move() function. The Clouds and Balloons have properties such as x and y coordinates, length and width, color, and speed. I was able to make them float up, down, or bounce on the screen. The Balloons can change their facial expressions and release air when asked to do so.
Leave a Reply