![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
/* Name | Ai Fukuda
* Course Section | C
* Email | afukuda@andrew.cmu.edu
* Project | Final Project
*/
// ---- VARIABLES FOR FERRIS WHEEL ----
// ferris wheel color
var structureColor = 255; // white
var supportColor = 90; // grey
// speed
var speed = 160;
// ferris wheel dimensions
// note: counting circles from most inner to outermost
var centerX; // center of ferris wheel (x-coordinate)
var centerY; // center of ferris wheel (y-coordinate)
var radiusC1; // radius of circle 1
var radiusC2; // radius of circle 2
var radiusC3; // radius of circle 3 (carrying the passenger cars)
var radiusC3R; // radius of circle 3 (passenger cars rotate on it)
var radiusCar; // radius of passenger car
var radiusBolt; // radius of bolt on passenger car (detail)
var base; // base of ferris wheel
var baseW; // width of base of ferris wheel
var baseH; // height of base of ferris wheel
// ---- END OF VARIABLES FOR FERRIS WHEEL ----
// ---- VARIABLES FOR FIREWORK ----
var fireworks = [];
var particles = [];
var gravity = 0.7;
// ---- END OF VARIABLES FOR FIREWORK ----
function setup() {
createCanvas(480, 480);
frameRate(10);
strokeWeight(1);
stroke(255);
// ---- FERRIS WHEEL ----
// define ferris wheel dimensions
var h = height/1.75; // scaling ferris wheel (overall)
centerX = h/2.2;
centerY = h - h/10;
radiusC1 = h/11;
radiusC2 = h/2.8;
radiusC3 = h/1.3;
radiusC3R = h/1.4;
radiusCar = h/10;
radiusBolt = h/60;
base = h/90;
baseW = h/6.5;
baseH = 1.35*h;
// ---- FIREWORK ----
fireworks.push(new Firework());
}
function draw() {
background(36, 69, 140);
background('rgba(0,0,0, 0.1)');
// ---- FERRIS WHEEL ----
// ---- ROTATIONAL ----
// draw grey beam
push();
strokeWeight(1.1);
stroke(supportColor);
noFill();
translate(centerX,centerY);
rotate(frameCount/speed);
for (k = PI/8; k < 2*PI; k += PI/4) {
arc(0, 0, radiusC3, radiusC3, k, k + PI/4, PIE);
}
pop();
// draw white beam & circle
push();
strokeWeight(1);
stroke(structureColor);
noFill();
translate(centerX,centerY);
rotate(frameCount/speed);
for( i=0; i < 2*PI; i += PI/4) {
arc(0, 0, radiusC3, radiusC3, i, i + PI/4, PIE);
}
pop();
// draw passenger car
push();
for (k=0; k<8; k++) {
fill(72,157,206);
arc(radiusC3R/1.85*cos(frameCount/speed + (PI/4*k)) + centerX, radiusC3R/1.85*sin(frameCount/speed + (PI/4*k)) + centerY, radiusCar, radiusCar, 0, PI);
}
fill(supportColor);
translate(centerX,centerY);
rotate(frameCount/speed);
for (j=0; j < 2*PI; j += PI/4) {
ellipse(radiusC3R/1.85*cos(j), radiusC3R/1.85*sin(j), radiusBolt, radiusBolt);
}
pop();
// ---- STATIONARY ----
// circle 1
push();
strokeWeight(1.2);
stroke(structureColor);
fill(supportColor);
ellipse(centerX,centerY,radiusC1,radiusC1);
pop();
// circle 2
push();
strokeWeight(1.2);
stroke(structureColor);
noFill();
ellipse(centerX,centerY,radiusC2,radiusC2);
pop();
// support beam (base & passenger car)
push();
strokeWeight(1);
stroke(structureColor);
fill(0,0,0,0);
for(a=0; a<base; a++) {
triangle(centerX, centerY + a, centerX - baseW + a, baseH, centerX + baseW - a, baseH);
}
pop();
// ---- PIER ----
push();
strokeWeight(5);
stroke(102,51,0);
line(0,baseH, centerX*1.5, baseH);
line(centerX*1.5-10, baseH, centerX*1.5-10, height);
line((centerX*1.5-10)*2/3, baseH, (centerX*1.5-10)*2/3, height);
line((centerX*1.5-10)/3, baseH, (centerX*1.5-10)/3, height);
line(10, baseH, 10, height);
pop();
// ---- OCEAN ----
push();
drawWaveDistant(); // calling wave draw function (foreground)
drawWaveClose(); // calling wave draw function (foreground)
pop();
// ---- FIREWORK ----
push();
translate(width / 2, height);
if (random(1) < 0.10) { // probability of firework release
fireworks.push(new Firework())
}
for (var i = fireworks.length - 1; i >= 0; i--) {
if(fireworks[i].type == "Exploded") {
fireworks.splice(i,1);
}
else {
fireworks[i].draw();
}
}
for (var i = particles.length - 1; i >= 0; i--) {
if(particles[i].position.y > 0 || particles[i].brt <= 0) {
particles.splice(i,1);
}
else {
particles[i].draw();
}
}
pop();
} // ---- END OF DRAW FUNCTION -------
function Firework() {
push();
this.position = createVector(int(random(0, 0+width/3)), 0);
this.speed = createVector(random(-1,1), -random(20,24));
this.sparkler = round(random(0,1)) == 0;
this.fuse = random(-1,1);
fireworkType = int(random (0,6));
switch (fireworkType) {
case 0:
this.type = "simple";
break;
case 1:
this.type = "simple"; // used to be crackle but transformation was messing up geometry
break;
case 2:
this.type = "sparkle";
break;
case 3:
this.type = "double";
break;
case 4:
this.type = "finale";
break;
case 5:
this.type = "shooter";
break;
}
this.draw = function() { // FUNCTION 1
stroke(255);
if (this.fuse < this.speed.y) {
this.explode();
}
if (this.sparkler) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,1);
sparkleSpd = createVector(sparkleVel * cos(sparkleDir), sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(createVector(this.position.x+sparkleSpd.x, this.position.y+sparkleSpd.y), sparkleSpd.copy(),random(3,8), random(255), random(255), random(255));
particles.push(thisSparkle);
}
strokeWeight(2);
stroke(random(255), random(255), random(255));
point(this.position.x,this.position.y);
this.position.add(this.speed);
this.speed.y = this.speed.y + gravity;
} // END OF FUNCTION 1
this.explode = function() { // FUNCTION 2
switch (this.type) {
case "sparkle":
if (this.type == "sparkle") {
for (var i = 0; i < 60; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,3) + random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(3,8), random(255), random(255), random(255), "sparkle");
particles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "double": {
for (var i = 0; i < 90; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(3,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(2,4), random(255), random(255), random(255));
particles.push(thisSparkle);
}
for (var i = 0; i < 10; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,.5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(2,4), random(255), random(255), random(255));
particles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "finale": {
for (var i = 0; i < 500; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,4)+random(0,4);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(3,6), random(255), random(255), random(255));
particles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "shooter": {
for (var i = 0; i < 100; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,2)+random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(1,3), random(255), random(255), random(255),"shooter");
particles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
case "crackle": {
for (var i = 0; i < 60; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,3) + random(0,3);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(7,10), random(255), random(255), random(255),"crackle");
particles.push(thisSparkle);
}
this.type = "Exploded";
}
break;
default: {
for (var i = 0; i < 100; i++) {
sparkleDir = random(0, TWO_PI);
sparkleVel = random(0,5);
sparkleSpd = createVector(this.speed.x + sparkleVel * cos(sparkleDir), this.speed.y + sparkleVel * sin(sparkleDir))
thisSparkle = new Particle(this.position.copy(), sparkleSpd.copy(), random(1,3), random(255), random(255), random(255));
particles.push(thisSparkle);
}
this.type = "Exploded";
}
}
} // ---- END OF FUNCTION 2
pop();
}
function Particle(position, speed, fade, r, g, b, type) {
this.position = position.copy();
this.speed = speed.copy();
this.fade = (fade == undefined ? 5 : fade);
this.r = r
this.g = g
this.b = b
this.type = type;
this.brt = 70;
this.burntime=0;
this.draw = function() {
stroke(this.r, this.g, this.b);
newPositionX = this.position.x + log(this.burntime) * 8 * this.speed.x;
newPositionY = this.position.y + log(this.burntime) * 8 * this.speed.y + this.burntime * gravity;
point(newPositionX, newPositionY);
if (this.type == "shooter" & this.burntime > 1) {
line(newPositionX, newPositionY, this.position.x + log(this.burntime-2) * 8 * this.speed.x, this.position.y + log(this.burntime-2) * 8 * this.speed.y + this.burntime * gravity);(note: I uploaded my final project before the midnight deadline on Friday, however, I noticed that the visuals was not showing up on my post so I tried editing it. It is still not showing up on WordPress when it was originally.)
I changed my idea from my Final Project proposal; initially I wanted to create a storyboard that incorporated fireworks as the final landscape. But I thought a storyboard wasn’t “computational” enough and I wanted to incorporate more concepts learned in class. So that’s why I maintained creating a code for fireworks and incorporated a generative landscape of a ferris wheel. I wrote the fireworks to be multi-colored, and at random fire different styles of fireworks. One thing I struggled with is putting the ferris wheel code and the fireworks code together; the codes would affect the other and therefore I had to use push() and pop() to maintain the stylistic elements of the two components of my final project.