Hyejo Seo – Project-03: Dynamic Art

sketch

/* 
Hyejo Seo
Section A
hyejos@andrew.cmu.edu
Project-03- Dynamic Art
*/ 

var circleY = 250;  
var cSpeed = 1; 
var sunDia = 350;

function setup() {
  createCanvas(450,500);
}

function draw() {
    background(180, mouseY + 70, mouseY + 100);
//sun
fill(255, 100, 147);
noStroke();

if(mouseY >= 150){
  sunDia = 350; 
} else {
  sunDia = mouseY /2;
}
circle(225, 290, sunDia); 
  
//smoke 
    circleY = circleY - cSpeed; 
    fill(198, 207, 220);
    noStroke();
    circle(220, circleY, 100);
    if(circleY >= height){
      circleY = -cSpeed;
     } 
    circle(250, circleY, 90);
    if(circleY > height){  
      cSpeed = cSpeed;
     }
    circle(200, circleY + 70, 80);
    if(circleY + 70 > height){    
      cSpeed = cSpeed;
    }
    circle(250, circleY + 60, 100);
    if(circleY + 50 > height){    
      cSpeed = cSpeed;
    }
    circle(210, circleY - 50, 90);
    circle(260, circleY - 50, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 100, 80);
    circle(250, circleY - 100, 90);
    if(circleY - 100 > height){
      cSpeed = cSpeed;
    } 
    circle(210, circleY - 80, 100);
    if(circleY - 50 > height){
      cSpeed = cSpeed;
    } 

    if(circleY <= -100){
      circleY = height;
    }
//Volcano
fill(234, 51, 28);
if(mouseY <= 150){
  beginShape();
  curveVertex(170, 500);
  curveVertex(170, 500);
  curveVertex(170, 280);
  curveVertex(90, 150);
  curveVertex(130, 150);
  curveVertex(150, 120);
  curveVertex(180, 145);
  curveVertex(220, 80);
  curveVertex(250, 150);
  curveVertex(280, 130);
  curveVertex(280, 170);
  curveVertex(290, 165);
  curveVertex(320, 150);
  curveVertex(380, 145);
  curveVertex(310, 250);
  curveVertex(330, 500);
  curveVertex(330, 500);
  endShape();
} else {
  endShape();
    beginShape();
    curveVertex(170, 500);
    curveVertex(170, 500);
    curveVertex(170, 280);
    curveVertex(310, 280);
    curveVertex(200, 500);
    curveVertex(200, 500);
    endShape();
}
// mountain
    fill (170, 140, 99);
    noStroke();
    quad(0, 500, 450, 500, 350, 350, 100, 350); 
    
// mountain peak
    fill(170, 140, 99);
    beginShape();
    curveVertex(100, 350);
    curveVertex(100, 350);
    curveVertex(140, 280);
    curveVertex(170, 250);
    curveVertex(210, 270);
    curveVertex(240, 260);
    curveVertex(270, 290);
    curveVertex(310, 250);
    curveVertex(350, 350);
    curveVertex(350, 350);
    endShape();

// mountain body detail 
    stroke(67,42, 29);
    strokeWeight(3);
    line(50, 500, 150, 300);
    line(140, 450, 190, 310);
    line(200, 490, 230, 300);
    line(250, 450, 245, 300);
    line(300, 500, 280, 320);
    line(350, 500, 300, 300);
}

For this project, I have created an interactive piece of a volcano explosion – from the moment of the lava boiling, which was depicted by the smoke to the explosion. I had fun and learned a lot experimenting with interactive/conditional functions.