Author: afukuda@andrew.cmu.edu

sketch

/*  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.