Raining Particle – Lucas Lin's Documentation Blog

Raining Particle

Brief Description and Concept: For the 7th week of Creative Coding class, we were given the project to design a particle system “to simulate a shape, pattern, movement or a phenomenon of the physical world, such as fireworks, a starry night, raining, snowing, falling balls, a meteor shower, etc. “(7.R Particle Slides). Since I worked with rain in my previous works, (Pattern), I decided to generate rain for my project.

Demo/Visual Documentation:

Screen Recording 2022-10-30 at 10.26.55 PM

Coding:

// CCLab Mini Project - 7.R Particles Template

let raining = [];
// number of water droplets falling
let dropNum = 100;
let time;
let clouds = [];
// number of clouds flying
let numberCloud = 12;

function setup() {
createCanvas(windowWidth, windowHeight);
for (let i = 0; i < dropNum; i++) {
raining[i] = new Rain(random(width), random(height), random(1,6));
}

time = new TimeOfDay();

for (let i = 0; i < numberCloud; i++) {
clouds[i] = new Clouds(random(width),random(2*height/10,3*height/10),random(5,10),random(0.1,0.5));
}
}

function draw() {
background(255);

//Day to Night
time.display();
time.update();

//Making Rain + Waves
for(let i = 0; i < raining.length; i++) {
raining[i].display();
raining[i].update();
}

//Making Clouds
for(let i = 0; i < clouds.length; i++) {
clouds[i].display();
clouds[i].update();
}
}

//Making Rain
function mousePressed() {
raining.push(new Rain(mouseX, mouseY,random(6,10)));
}

class Rain {
constructor(x, y, s) {
this.x = x;
this.y = y;
this.dia = s;
this.ySpd = 2;
this.wSpd = 2;
this.ground = random(9 * height / 10,height - 20);

//droplets coming to contact with ground creating surface tension
this.spreadSpd = 0
}

display() {
this.wave();
this.droplet();
}

update(){
this.fall();
this.surfaceTension();
}

droplet(){
push();
translate(this.x, this.y);
noStroke();
fill(140, 223, 232);
ellipse(0, 0, this.dia, this.dia * 7/6);
triangle(0, - 2 * this.dia, -this.dia/2, 0,this.dia/2,0);
pop();
}

fall(){
this.y += this.ySpd;
if(this.y > this.ground + 10){
this.y = random(5 * height/20,3*height/10);
}
}

surfaceTension(){
if(this.y > this.ground){
this.tension();
}
}

tension(){
for(let i = 0; i < 10; i++){
fill(100, 223, 232, 100 - 20 * i);
stroke(0,100 - 20 * i);
ellipse(this.x,this.ground + i,this.dia * 2 * i + this.spreadSpd, this.dia * 2/3 * i + this.spreadSpd);
}

if(this.spreadSpd > 10){
this.spreadSpd = 0;
}

this.spreadSpd++;
}

wave(){
for(let i = 0; i < width; i+=10){
let sinVal = 20 * sin(radians(2 * i))
noStroke();
fill(40, 255, 255,10);
rect(-10 + i + this.wSpd,this.ground + sinVal -10,10,100);
}
this.wSpd+= random(-10,10);
}
}

class TimeOfDay{
constructor(){
this.MColor = 255;
this.OColor = 255;
this.xLoc = -25;
this.xSpd = 2;
this.yLoc = 0;
this.angle = 0;
}

display(){
background(this.MColor);
noStroke();
fill(255,255,this.OColor);
circle(this.xLoc,this.yLoc, 50);
}

update(){
this.moon();
this.passingDay();
}

colorChange(){
this.MColor = (1 - this.xLoc/width) * 255;
this.OColor = this.xLoc/width * 255;
}

passingDay(){
this.colorChange();

//Arc Movement
let sinVal = sin(radians(360/width*this.angle));
this.yLoc = map(sinVal,-1,1,2*height/10,height/10);

if(this.xLoc > width){
this.xLoc = -25;
this.yLoc = 0;
this.angle = 0;
}

this.angle++;
this.xLoc+=this.xSpd;
}

moon(){
if(this.xLoc > width/2){
let radius = (this.xLoc - width/2)/(width/2) * 75;

fill(this.MColor);
circle(this.xLoc + 25,this.yLoc,radius);
}
}
}

class Clouds{
constructor(StartX,StartY,Size,Speed){
this.cloudSize = Size;
this.spd = Speed
this.x = StartX;
this.y = StartY;
}

display(){
noStroke();

for(let i = 0; i < this.cloudSize; i++){
fill(255,230);
circle(10*i + this.x,this.y,20);
circle(10*i + this.x,this.y-10,15);
}
}

update(){
this.x+= this.spd

if(this.x > width){
this.x = -10*this.cloudSize;
}
}
}

Reflection/Lessons Learned Questions:

What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?
Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?
Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?
Please share it if there is any challenging and confusing aspect(s) in the OOP concepts and techniques

Answer:

Programming Terms:

Object-Oriented Programming (OOP) – It links all of an object’s characteristics/attributes and methods (functions) together into a class.
Class – A template full of methods and variables associated with a specific object.
An instance of the Class – When a specific object is created from a particular class. It is as if picking an apple out of the fruits class.

OOP is an effective tool for programmers to keep themselves organized and to make certain object codes be reusable. It is an essential tool for creating multiple copies of the same object. For instance, the water droplets in my project.

With the help of OOP, I created four to five separate objects doing their own actions. For the water droplets, I had them falling downward toward the ground in a never-ending cycle. Once they reached a range by the ground, they produced ripples. Meanwhile, I had rectangles at the bottom moving in a sinusoidal motion to imitate waves. Additionally, I created clouds moving continuously to the right at the top. Lastly, I added the sun and the changing moon on the color-changing background. There were no major challenging aspects in this project but smaller problems. For example, harmonizing the different objects together without interfering with each other.

Leave a Reply Cancel reply