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