![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
For my project I drew a stick figure that is mediating. There are shapes that come off from the hand. The color, opacity, number of sides, and size of the shape are all dependent on the position of the mouse. The face of the stick figure is also dependent on the mouse.
sketch
//Nakshatra Menon
//Section C
function setup() {
createCanvas(450, 600);
background("white");
}
var size = 30;
var sides1 = 3;
var leftHandX = 84
var leftHandY = 300
var rightHandX = 401
var rightHandY = 320
var color1 = 255
var color2 = 255
var color3 = 255
var color4 = 255
var face = 1
function draw() {
background("black");
stroke("white");
strokeWeight(1);
// carpet
color4 = (mouseX)/4
fill(color4);
ellipse(232, 430, 438, 176);
// stick figure drawings
noFill();
beginShape(); // left arm
vertex(233, 244);
vertex(157, 317);
vertex(105, 303);
endShape();
beginShape(); // right arm
vertex(233, 244);
vertex(315, 324);
vertex(380, 321);
endShape();
beginShape(); // body and left leg
vertex(235, 214);
vertex(237, 395);
vertex(130, 315);
vertex(194, 374);
vertex(254, 417);
endShape();
beginShape(); // right leg
vertex(237, 395);
vertex(354, 326);
vertex(291, 370);
vertex(240, 402);
endShape();
beginShape();
vertex(232, 408);
vertex(216, 415);
endShape();
ellipse(232, 152, 122, 116); // head
ellipse(leftHandX, leftHandY, 39, 6) // left hand
ellipse(rightHandX, rightHandY, 39, 6); //right hand
ellipse(201, 415, 24, 6) // left foot
ellipse(269, 417, 24, 6); //right foot
// face if mouse is on left
if(face == 1){
beginShape(); // right eye
curveVertex(177, 140);
curveVertex(177, 140);
curveVertex(195, 152);
curveVertex(214, 145);
curveVertex(214, 145);
endShape();
beginShape(); // right eye
curveVertex(243, 147);
curveVertex(243, 147);
curveVertex(260, 158);
curveVertex(279, 152);
curveVertex(279, 152);
endShape();
beginShape(); // smile
curveVertex(226, 185);
curveVertex(226, 185);
curveVertex(246, 188);
curveVertex(255, 180);
curveVertex(255, 180);
endShape();}
// face if mouse is on right
if(face == 2){
fill("white");
stroke("grey");
strokeWeight(7);
ellipse(195, 152, 25, 50);
ellipse(260, 158, 25, 50);
strokeWeight(1);
line(216, 200, 243, 200);
}
// face changes w/ mouse
if(mouseX <= 240){
face = 1
}
if(mouseX >= 240){
face = 2
}
// sides increase as mouse goes right, size 15-25
if(mouseX >= 120) {
sides1 = (mouseX/30)/2
size = constrain((2*(mouseY/mouseX)*30), 5, 25)
}
// if the mouseX is on the left then the shapes are a tri
if(mouseX < 120) {
sides1 = 3
size = 5
}
// the color changes based on the position of the mouse
color1 = mouseX
color2= mouseY
color3 = (mouseX/mouseY)*2
//draw shape right
fill(color1, color2, color3, mouseY-76);
polygon(rightHandX-29, rightHandY-71, size , sides1);
fill(color2, color3, color1, mouseY-113);
polygon(rightHandX+30, rightHandY-67, size, sides1);
fill(color3, color1, color2, mouseX-126);
polygon(rightHandX-51, rightHandY-160, size, sides1);
fill(color1/2, color2/2, color3/2, mouseY-145);
polygon(rightHandX+20, rightHandY-201, size, sides1);
fill(color2/2, color3/2, color1/2, mouseY-187);
polygon(rightHandX-69, rightHandY-243, size, sides1);
fill(color3/2, color1/2, color2/2, mouseX-126);
polygon(leftHandX+54, rightHandY-266, size, sides1);
line(rightHandX, rightHandY, 320, 214 - (mouseY/3))
line(rightHandX, rightHandY, 354, 99-(mouseY/3))
line(rightHandX, rightHandY, 396, 28 -(mouseY/3))
line(rightHandX, rightHandY, 430, 54-(mouseY-3))
line(rightHandX, rightHandY, 430, 200-(mouseY-3))
// draw shape left
fill(color1/3, color2/3, color3/3, mouseY-166);
polygon(leftHandX-3, leftHandY-28, size, sides1);
fill(color1/3, color2/3, color2/3,mouseY-183);
polygon(leftHandX-89, leftHandY-97, size, sides1);
fill(color3/3, color2/2, color1/4, mouseY-114);
polygon(leftHandX-11, leftHandY-108, size, sides1);
fill(color3, color1, color2, mouseY-123);
polygon(leftHandX-63, leftHandY-140, size, sides1);
fill(color3, color2, color1, mouseX-153);
polygon(leftHandX-71, leftHandY-223, size, sides1);
fill(color2, color1, color2, mouseY-123);
polygon(leftHandX-1, leftHandY-254, size, sides1);
line(leftHandX, leftHandY, 8, 214 - (mouseY/3))
line(leftHandX, leftHandY, 8, 99-(mouseY/3))
line(leftHandX, leftHandY, 68, 28 -(mouseY/3))
line(leftHandX, leftHandY, 177, 54-(mouseY-3))
line(leftHandX, leftHandY, 169, 200-(mouseY-3))
// opposite direction
// sides increase as mouse goes right
if(mouseX <= 400) {
sides1 = ((width-mouseX)/30)/2
size = constrain((3*(mouseY)/mouseX), 5, 25)
}
// if the mouseX is on the left then the shapes are a tri
if(mouseX > 400) {
sides1 = 3
size = 5
}
// draw shape right
fill(color3, color3, color1, mouseX-50);
polygon(rightHandX+3, rightHandY-30, size, sides1);
fill(color3, color2, color2, mouseY-25);
polygon(rightHandX+8, rightHandY-79, size, sides1);
fill(color3, color2, color2, mouseY-46);
polygon(rightHandX+3, rightHandY-128, size, sides1);
fill(color1, color1, color2, mouseX-16);
polygon(rightHandX+12, rightHandY-136, size, sides1);
fill(color2, color3, color2, mouseY-19);
polygon(rightHandX-21, rightHandY-201, size, sides1);
fill(color1, color1, color2, mouseY-32);
polygon(rightHandX-21, rightHandY-274, size, sides1);
// draw shape left
fill(color1, color2, color3/4, mouseX-240);
polygon(leftHandX+46, leftHandY-56, size, sides1);
fill(color3, color1/5, color2, mouseY-32);
polygon(leftHandX+5, leftHandY-63, size, sides1);
fill(color3, color2, color1, mouseY-45);
polygon(leftHandX-40, leftHandY-59, size, sides1);
fill(color3, color2/3, color2/2, mouseX-98);
polygon(leftHandX+38, leftHandY-173, size, sides1);
fill(color3/2, color1, color2/2, mouseY-134);
polygon(leftHandX-8, leftHandY-170, size, sides1);
fill(color3, color1/3, color1/2, mouseX-77);
polygon(leftHandX-63, leftHandY-209, size, sides1);
}
// needed to draw polygon, got code from https://p5js.org/examples/form-regular-polygon.html
function polygon(x, y, radius, npoints) {
let angle = TWO_PI / npoints;
beginShape();
for (let a = 0; a < TWO_PI; a += angle) {
let sx = x + cos(a) * radius;
let sy = y + sin(a) * radius;
vertex(sx, sy);
}
endShape(CLOSE);
}