Project-03: Dynamic Drawing, “groovy”

kstargio03projDownload
var thickness = 20;		// <-- value for weight of image parts (element: size)
var r = 0;				// <-- value for rotation angle (element: angle)
var p = -40;			// <-- value for disco ball placement (element: position)
var b = 0;				// <-- value for brightness (element: color)

function setup() {
    createCanvas(600, 450);
    rectMode(CENTER);
}

function draw() {
    background(0);
		stroke(0);
		fill(100);
	rect(width/4, p-75, 5, 200);
	rect(3*width/4, p-75, 5, 200);
	if (int(b)==b) {		// color variation for disco ball
		fill(162+b);
	} else {
		fill(162);
	}
//disco ball:
    ellipse(width/4, p, 80, 80);
    line(width/4, p-40, width/4, p+40);
    line(width/4-5, p-40, width/4-5, p+40);
    line(width/4-10, p-40, width/4-10, p+40);
    line(width/4-15, p-40, width/4-15, p+40);
    line(width/4-20, p-40, width/4-20, p+40);
    line(width/4-25, p-40, width/4-25, p+40);
    line(width/4-30, p-40, width/4-30, p+40);
    line(width/4-35, p-40, width/4-35, p+40);
    line(width/4-40, p-40, width/4-40, p+40);
    line(width/4+5, p-40, width/4+5, p+40);
    line(width/4+10, p-40, width/4+10, p+40);
    line(width/4+15, p-40, width/4+15, p+40);
    line(width/4+20, p-40, width/4+20, p+40);
    line(width/4+25, p-40, width/4+25, p+40);
    line(width/4+30, p-40, width/4+30, p+40);
    line(width/4+35, p-40, width/4+35, p+40);
    line(width/4+40, p-40, width/4+40, p+40);
    line(width/4-40, p, width/4+40, p);
    line(width/4-40, p-5, width/4+40, p-5);
    line(width/4-40, p-10, width/4+40, p-10);
    line(width/4-40, p-15, width/4+40, p-15);
    line(width/4-40, p-20, width/4+40, p-20);
    line(width/4-40, p-25, width/4+40, p-25);
    line(width/4-40, p-30, width/4+40, p-30);
    line(width/4-40, p-35, width/4+40, p-35);
    line(width/4-40, p-40, width/4+40, p-40);
    line(width/4-40, p+5, width/4+40, p+5);
    line(width/4-40, p+10, width/4+40, p+10);
    line(width/4-40, p+15, width/4+40, p+15);
    line(width/4-40, p+20, width/4+40, p+20);
    line(width/4-40, p+25, width/4+40, p+25);
    line(width/4-40, p+30, width/4+40, p+30);
    line(width/4-40, p+35, width/4+40, p+35);
    line(width/4-40, p+40, width/4+40, p+40);
    //second disco ball:
	ellipse(3*width/4, p, 80, 80);
    line(3*width/4, p-40, 3*width/4, p+40);
    line(3*width/4-5, p-40, 3*width/4-5, p+40);
    line(3*width/4-10, p-40, 3*width/4-10, p+40);
    line(3*width/4-15, p-40, 3*width/4-15, p+40);
    line(3*width/4-20, p-40, 3*width/4-20, p+40);
    line(3*width/4-25, p-40, 3*width/4-25, p+40);
    line(3*width/4-30, p-40, 3*width/4-30, p+40);
    line(3*width/4-35, p-40, 3*width/4-35, p+40);
    line(3*width/4-40, p-40, 3*width/4-40, p+40);
    line(3*width/4+5, p-40, 3*width/4+5, p+40);
    line(3*width/4+10, p-40, 3*width/4+10, p+40);
    line(3*width/4+15, p-40, 3*width/4+15, p+40);
    line(3*width/4+20, p-40, 3*width/4+20, p+40);
    line(3*width/4+25, p-40, 3*width/4+25, p+40);
    line(3*width/4+30, p-40, 3*width/4+30, p+40);
    line(3*width/4+35, p-40, 3*width/4+35, p+40);
    line(3*width/4+40, p-40, 3*width/4+40, p+40);
    line(3*width/4-40, p, 3*width/4+40, p);
    line(3*width/4-40, p-5, 3*width/4+40, p-5);
    line(3*width/4-40, p-10, 3*width/4+40, p-10);
    line(3*width/4-40, p-15, 3*width/4+40, p-15);
    line(3*width/4-40, p-20, 3*width/4+40, p-20);
    line(3*width/4-40, p-25, 3*width/4+40, p-25);
    line(3*width/4-40, p-30, 3*width/4+40, p-30);
    line(3*width/4-40, p-35, 3*width/4+40, p-35);
    line(3*width/4-40, p-40, 3*width/4+40, p-40);
    line(3*width/4-40, p+5, 3*width/4+40, p+5);
    line(3*width/4-40, p+10, 3*width/4+40, p+10);
    line(3*width/4-40, p+15, 3*width/4+40, p+15);
    line(3*width/4-40, p+20, 3*width/4+40, p+20);
    line(3*width/4-40, p+25, 3*width/4+40, p+25);
    line(3*width/4-40, p+30, 3*width/4+40, p+30);
    line(3*width/4-40, p+35, 3*width/4+40, p+35);
    line(3*width/4-40, p+40, 3*width/4+40, p+40);
    translate(width/2, height/3);
    rotate(radians(-r));
//BODY of image:
        noStroke();
    	fill(255);
    triangle(-7, -thickness/2+1, 7, -thickness/2+1, 0, -50);	//neck
    ellipse(0, -60, 60+thickness/2, 60+thickness/2);		// head
    	fill(200+b, 100-b, 50+b);		// variable used for color change
    rect(0, 0, width/4, thickness);		// shoulders
    if (constrain(mouseX, width/10, 2*width/10) == mouseX ||	//dancing motion! for body
      constrain(mouseX, 3*width/10, 4*width/10) == mouseX || 
      constrain(mouseX, 5*width/10, 6*width/10) == mouseX || 
      constrain(mouseX, 7*width/10, 8*width/10) == mouseX || 
      constrain(mouseX, 9*width/10, width) == mouseX) {
	    quad(-thickness,0, thickness,0, width/8+5, height/3, -width/8+5, height/3);		// body
    } else {
		quad(-thickness,0, thickness,0, width/8-5, height/3, -width/8-5, height/3);		// body
    }	
		fill(255);
    quad(-width/8+1,thickness/2, -width/8+1,-thickness/2,  -width/16,-thickness+70, -width/16,+70);  // left arm   
    if (mouseX < width/2 & mouseX > width/4 || mouseX > 3*width/4) {
	    quad(width/8-1,thickness/2, width/8-1,-thickness/2,  0,-thickness+75, 0,75); //right arm
	} else {    
	    quad(width/8-1,thickness/2, width/8-1,-thickness/2,  width/4-1,-thickness-50, width/4-1,-50);    //disco baby! 	
    }	
    quad(-10,height/3-1, -10-thickness,height/3-1, -20-thickness,height/3+50, -20,height/3+50);	//left leg
    quad(10,height/3-1, 10+thickness,height/3-1, 20+thickness,height/3+50, 20,height/3+50);		// right leg 
    	fill(100);
    triangle(-20-thickness,height/3+50, -20,height/3+50, -30-thickness, height/3+65);	//left shoe
    triangle(20+thickness,height/3+50, 20,height/3+50, 30+thickness, height/3+65);		// right shoe 
    	noFill();
    	stroke(0);
    arc(0, -60, 30+thickness/2, 30+thickness/2, 0, PI);		// smile
    arc(-10, -70, 15, 15, PI, 0);		//eye
    arc(10, -70, 15, 15, PI, 0);		//eye

//rotation limits:
    if ((mouseX - width/2)/10 <= -20) {
	    r = -20;
	} else if ((mouseX - width/2)/10 >= 20) {
		r = 20;
	} else {
		r = (mouseX - width/2)/10;
	}
	
    if (mouseY/10 <= 10) {
	    thickness = 10;
	} else if (mouseY/10 >= 35) {
		thickness = 35;
	} else {
        thickness = (mouseY)/10;
	}
//color change:
    b = r*5;
//disco drop:
    if (-mouseY + 300 <= -40) {
	    p = -40;
	} else if (-mouseY + 300 >= 100) {
		p = 100;
	} else {
        p = - mouseY + 300;
    }

}

When I read the requirements for this assignment, I kept thinking about watching the shapes ‘dance’ around on the screen, which inspired the image I created.

Leave a Reply