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.