![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
I admire this project as the system of connecting the alternating environment with the sound to create an immersive experience for the visitors. By having different sensors and converting the lighting variation and day-night cycle to usable data, it creates a series of changes to the visitors’ visual and acoustic movement. For the algorithms, they first used sensors or detectors to track the changes in lighting variation. Then, the 500 artificial neurons that are created will respond to the data converted by the detectors. This cycle continues so that the real-time data will be analyzed to create an immersive experience. The artificial neurons, they are running on the Attiny 85 with Arduino. In addition, since there are also LED lights inside, and they are placed in a hexagon shape, this kind of placement creates a sense of conflict with the continuously changing visual and acoustic movement. The overall experience will create a world that contains order and chaos. Therefore, I think it aims to create an immersive experience for the visitors.
Author: Pauline
This is my project 04.
sketch
function setup() {
createCanvas(400, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
//Inside-wing top left & bottom right
var dx1;
var dy1;
var dx2;
var dy2;
var numberLines = 15
function draw() {
background(249,214,214);
//background line-top left
stroke(168,141,158);
line(50,0,150,0);
line(0,50,0,150);
dx1 = (150-50)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (0-0)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 50;
var y1 = 0;
var x2 = 0;
var y2 = 150;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//background line-top right
line(250,0,350,0);
line(400,50,400,150);
dx1 = (350-250)/numberLines;
dy1 = (0-0)/numberLines;
dx2 = (400-400)/numberLines;
dy2 = (150-50)/numberLines;
var x1 = 250;
var y1 = 0;
var x2 = 400;
var y2 = 50;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
line(0,150,0,250);
line(150,300,50,300);
dx1 = (0-0)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (50-150)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 0;
var y1 = 150;
var x2 = 50;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(400,150,400,250);
line(250,300,350,300);
dx1 = (400-400)/numberLines;
dy1 = (250-150)/numberLines;
dx2 = (350-250)/numberLines;
dy2 = (300-300)/numberLines;
var x1 = 400;
var y1 = 150;
var x2 = 350;
var y2 = 300;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler left
stroke(146,63,75);
line(185,80,190,75);
line(197,117,203,115);
dx1 = (190-185)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 185;
var y1 = 80;
var x2 = 203;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//feeler right
line(220,80,215,75);
line(197,117,203,115);
dx1 = (215-220)/numberLines;
dy1 = (75-80)/numberLines;
dx2 = (203-197)/numberLines;
dy2 = (115-117)/numberLines;
var x1 = 220;
var y1 = 80;
var x2 = 197;
var y2 = 117;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
stroke(63,41,54);
line(130,50,130,110);
line(280,140,280,230);
dx1 = (130-130)/numberLines;
dy1 = (110-50)/numberLines;
dx2 = (280-280)/numberLines;
dy2 = (230-140)/numberLines;
var x1 = 130;
var y1 = 50;
var x2 = 280;
var y2 = 230;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Inside-wing top right & bottom left
line(120,140,120,230);
line(270,50,270,110);
dx1 = (120-120)/numberLines;
dy1 = (230-140)/numberLines;
dx2 = (270-270)/numberLines;
dy2 = (110-50)/numberLines;
var x1 = 120;
var y1 = 140;
var x2 = 270;
var y2 = 110;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//Outside-top left
stroke(189,135,134);
line(110,20,110,115);
line(200,115,200,130);
dx1 = (110-110)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 110;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Outside-top right
line(290,20,290,115);
line(200,115,200,130);
let numLines = 10;
dx1 = (290-290)/numberLines;
dy1 = (115-20)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (130-115)/numberLines;
var x1 = 290;
var y1 = 20;
var x2 = 200;
var y2 = 115;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom left
line(100,135,110,260);
line(200,125,200,140);
dx1 = (110-100)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 100;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//Ouside-bottom right
line(300,135,290,260);
line(200,125,200,140);
dx1 = (290-300)/numberLines;
dy1 = (260-135)/numberLines;
dx2 = (200-200)/numberLines;
dy2 = (140-125)/numberLines;
var x1 = 300;
var y1 = 135;
var x2 = 200;
var y2 = 125;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
}
//bottom patterning
stroke(107,87,104)
line(150,150,170,150);
line(130,180,150,180);
dx1 = (170-150)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (150-130)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 150;
var y1 = 150;
var x2 = 150;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(225,150,245,150);
line(245,180,265,180);
dx1 = (245-225)/numberLines;
dy1 = (150-150)/numberLines;
dx2 = (265-245)/numberLines;
dy2 = (180-180)/numberLines;
var x1 = 225;
var y1 = 150;
var x2 = 265;
var y2 = 180;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
//upper patterning
line(145,90,155,90);
line(140,105,150,105);
dx1 = (155-145)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (150-140)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 145;
var y1 = 90;
var x2 = 150;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
line(245,90,255,90);
line(250,105,260,105);
dx1 = (255-245)/numberLines;
dy1 = (90-90)/numberLines;
dx2 = (260-250)/numberLines;
dy2 = (105-105)/numberLines;
var x1 = 245;
var y1 = 90;
var x2 = 260;
var y2 = 105;
for(var i=0;i<=numberLines;i+=1){
line(x1,y1,x2,y2);
x1 += dx1;
y1 += dy1;
x2 -= dx2;
y2 -= dy2;
}
}Project 03
This is my project 03
sketch
function setup() {
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
//cloud left variables
var x1 = 70
var y1 = 60;
var cwidth = 60;
var cheight = 40;
//cloud right variables
var x2 = 400;
var y2 = 60;
//star left variables
var sx1 = 70;
var sy1 = 130;
var sw1 = 3;
var sh1 = 12;
//star right variables
var sx2 = 400;
var sy2 = 130;
var sw2 = 12
var sh2 = 21
//color for cloud
var rc = 183;
var gc = 186;
var bc = 202;
var angle = 0
//color for rain
var rr = 57;
var rg = 85;
var rb = 96;
//flower
var anglef = 0
var diam = 45
var rf = 199
var gf = 101
var bf = 93
function draw() {
background(255)
//ground
noStroke();
push();
angle = mouseX*0.15 //background rotation
mouseX = max(min(mouseX,600),0);
rotate(radians(angle))
fill(237,186,185);
rect(0,400,800,50);
fill(246,219,219);
rect(0,350,800,50);
fill(214,211,203);
rect(0,300,800,50);
fill(214,207,141);
rect(0,250,800,50);
fill(242,126,113);
rect(0,200,800,50);
fill(237,186,185);
rect(0,150,800,50);
fill(246,219,219);
rect(0,100,800,50);
fill(214,211,203);
rect(0,50,800,50);
fill(214,207,141);
rect(0,0,800,50);
pop();
//cloud left
fill(rc,gc,bc);
ellipse(x1,y1,cwidth,cheight);
ellipse(x1+30,y1-10,cwidth,cheight);
ellipse(x1+60,y1,cwidth,cheight);
ellipse(x1,y1+20,cwidth,cheight);
ellipse(x1+30,y1+25,cwidth,cheight);
ellipse(x1+60,y1+20,cwidth,cheight);
ellipse(x1+30,y1+10,cwidth,cheight);
ellipse(x1-20,y1+10,cwidth/1.5,cheight/1.5);
ellipse(x1+80,y1+10,cwidth/1.5,cheight/1.5);
cwidth = 60 + mouseX*0.03 // size change due to the mouseX position
cheight = 40 + mouseX*0.03
x1 = mouseX // position change according to the mouseX
bc = 202- mouseX*0.1 // color change of cloud according to the mouseX
//cloud right
fill(rc,gc,bc);
ellipse(x2,y2,cwidth,cheight);
ellipse(x2+30,y2,cwidth,cheight);
ellipse(x2+60,y2,cwidth,cheight);
ellipse(x2,y1+20,cwidth,cheight);
ellipse(x2+30,y2+25,cwidth,cheight);
ellipse(x2+60,y2+20,cwidth,cheight);
ellipse(x2+30,y2+10,cwidth,cheight);
ellipse(x2-20,y2+10,cwidth/1.5,cheight/1.5);
ellipse(x2+80,y2+10,cwidth/1.5,cheight/1.5);
x2 = 600- mouseX // position change according to the mouseX
rc = 183- mouseX*0.1+20 // color change of cloud according to the mouseX
//rain left
fill(rr,rg,rb);
ellipse(sx1,sy1,sw1,sh1);
ellipse(sx1-25,sy1-12,sw1,sh1);
ellipse(sx1+20,sy1+10,sw1,sh1);
ellipse(sx1-15,sy1+20,sw1,sh1);
ellipse(sx1+40,sy1+40,sw1,sh1);
ellipse(sx1+10,sy1+40,sw1,sh1);
ellipse(sx1+10,sy1+40,sw1,sh1);
ellipse(sx1+50,sy1+10,sw1,sh1);
ellipse(sx1+75,sy1+20,sw1,sh1);
ellipse(sx1+70,sy1-13,sw1,sh1);
ellipse(sx1+35,sy1+80,sw1,sh1);
ellipse(sx1+45,sy1+120,sw1,sh1);
ellipse(sx1+20,sy1+110,sw1,sh1);
ellipse(sx1,sy1+80,sw1,sh1);
ellipse(sx1+50,sy1+60,sw1,sh1);
ellipse(sx1-10,sy1+50,sw1,sh1);
sx1 = mouseX; // position change according to the mouseX
sw1 = 3+mouseX*0.013 // size change due to the mouseX position
sh1 = 12+mouseX*0.013
rg = 85-mouseX*0.2 // color change of rain according to the mouseX
rr = 57- mouseX*0.1+20 // color change of rain according to the mouseX
//rain right
fill(rr,rg,rb);
ellipse(sx2,sy2,sw2,sh2);
ellipse(sx2-30,sy2-12,sw2,sh2);
ellipse(sx2+20,sy2+10,sw2,sh2);
ellipse(sx2-15,sy2+20,sw2,sh2);
ellipse(sx2+40,sy2+40,sw2,sh2);
ellipse(sx2+10,sy2+40,sw2,sh2);
ellipse(sx2+10,sy2+40,sw2,sh2);
ellipse(sx2+50,sy2+10,sw2,sh2);
ellipse(sx2+85,sy2+20,sw2,sh2);
ellipse(sx2+70,sy2-13,sw2,sh2);
ellipse(sx2+35,sy2+80,sw2,sh2);
ellipse(sx2+30,sy2+140,sw2,sh2);
ellipse(sx2+20,sy2+110,sw2,sh2);
ellipse(sx2,sy2+80,sw2,sh2);
ellipse(sx2+50,sy2+60,sw2,sh2);
ellipse(sx2-10,sy2+50,sw2,sh2);
sx2 = 600- mouseX // position change according to the mouseX
sw2 = 12-mouseX*0.013 // size change due to the mouseX position
sh2 = 21-mouseX*0.013
rb = 96+mouseX*0.05 // color change of rain according to the mouseX
//flower center
if(mouseX>width/2){
fill(110,109,28);
rect(width/2-5,height/2+28,10,height/2);
rect(width/4-5,height/4*3+28,10,height/2);
rect(width/4*3-5,height/4*3+28,10,height/2);
push();
translate(width/2,height/2)
rotate(radians(anglef)); //flower rotate by it self
fill(rf,gf,bf);
circle(-15,-25,diam)
circle(15,-25,diam)
circle(-15,25,diam)
circle(15,25,diam);
circle(28,0,diam)
circle(-28,0,diam)
fill(231,183,diam);
circle(0,0,diam);
pop();
bf = 93+mouseX*0.05
diam = 45+mouseX/20
anglef += 3
//flower left
push();
translate(width/4,height/4*3)
rotate(radians(anglef)); //flower rotate by it self
fill(249,213,216);
circle(-15,-25,diam/2);
circle(15,-25,diam/2);
circle(-15,25,diam/2);
circle(15,25,diam/2);
circle(28,0,diam/2);
circle(-28,0,diam/2);
fill(189,135,136);
circle(0,0,diam/2);
pop();
//flower right
push();
translate(width/4*3,height/4*3)
rotate(radians(anglef)); //flower rotate by it self
fill(195,231,254);
circle(-15,-25,diam/2);
circle(15,-25,diam/2);
circle(-15,25,diam/2);
circle(15,25,diam/2);
circle(28,0,diam/2);
circle(-28,0,diam/2);
fill(238,218,92);
circle(0,0,diam/2);
pop();
//sun
fill(245,177,86);
ellipse(width/2,height/6,diam*1.1);
}
}
Looking Outward 03
Looking Outwards 03: Computational Fabrication
The most interesting point of this project is applying this kind of parametric designed panel to the building envelope. Also, the parametrically designed façade used for this building is not only for decoration purposes but also for the bad-air-busting. The form of the panel was first designed in CAD programs and created in the software called Rhino. Even though they didn’t mention a lot about the creation process, I suppose that they used grasshopper and BMI system so that the overall shape and form can vary according to the changing parameter. I think the most important characteristic that makes this project wonderful is that the impressive façade can also increase the surface area of the building, and it can bring more natural light into the building, which creates a better place for people inside. Also, having TiO2, which is an air-scrubbing material coated outside the surface, can maximize the effect of air purification when the sunlight gets stronger.
Project 02
sketch
// for my design, i tried to move the eye within the face and all the other sense organs go along with it.
// also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.
// in addition, the mouth also change the radian by itself.
// by having these, it can create a series of variation for the face.
var eyeSize = 30;
var faceWidth = 300;
var faceHeight = 200;
//variables for eyes
var eyeWidthVariation = 20;
var eyeHeightVariation = 10;
//variables for mouth
var mouthWidthShift = 10;
var mouthHeightShift = 15;
//color
var r = 243;
var g = 197;
var b = 194;
//eyeball movement
var movementX = 10;
var movementY = 10;
//eyebrow movement
var eyebrowChangeL = 5
var eyebrowChangeR = 5
function setup() {
createCanvas(640, 480);
}
function draw(){
background(249, 233, 211);
//face
noStroke();
fill(r, g, b);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//hair
fill(r-20,g-20,b+30);
rect(width/2- faceWidth/3, height/2-faceHeight/2-10,faceWidth/1.5,faceHeight/6)
//noise
noStroke();
fill(r-50, g-50, b-50);
ellipse(width / 2-eyeWidthVariation, height/2+2*eyeHeightVariation, 20, 30);
//eyes socket
noStroke();
var eyeLX = width / 2 - faceWidth * 0.25 - eyeWidthVariation;
var eyeRX = width / 2 + faceWidth * 0.25 - eyeWidthVariation;
//blush left
fill(255,171,171);
ellipse(eyeLX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
//blush right
ellipse(eyeRX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
fill(r+50, g+50, b+50);
ellipse(eyeLX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
ellipse(eyeRX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
//eyeball
fill(0);
ellipse(eyeLX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
ellipse(eyeRX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
//eyebrow left
fill(0)
rect(eyeLX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation/2);
//eyebrow right
rect(eyeRX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation/2);
//mouth
noFill();
stroke(r-35, g-35, b-35);
strokeWeight(6);
beginShape();
curveVertex(width/2 - mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
curveVertex(width/2 - mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
curveVertex(width/2-eyeWidthVariation, height / 2 + faceHeight * 0.40);
curveVertex(width/2 + mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
curveVertex(width/2 + mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
endShape();
}
function mousePressed() {
//face random
faceWidth = random(200, 600);
faceHeight = random(200, 460);
//eye random
eyeSize = random(30, 80);
eyeWidthVariation = random(-50, 50);
eyeHeightVariation = random(3, 25);
//mouth random
mouthWidthShift = random(-20, 20);
mouthHeightShift = random(-20, 20);
//color random
r = random(51, 204);
g = random(51, 204);
b = random(51, 204);
//eyeball random
movementX = random(-eyeSize/4,eyeSize/4);
movementY = random(-eyeSize/4,eyeSize/4);
//eyebrown random
eyebrowChangeL = random(0,30);
eyebrowChangeR = random(0,30)
}Looking Outwards 02
Looking Outwards 02
What this project impressed me with is how this algorithm abstracts the real pictures into a more artistic form. Also, with different fitness percentages, users can choose how abstract they want for the output. I think the algorithm of this project is to use different sizes and colors of the polygon to mimic the form of real pictures. Furthermore, since the polygons are overlaying with each other, I think that the transparency of the polygon can also be changed so that it can create a sense of layering effect which is very artistic. The most interesting concept about this project is that the users can choose not only the percentage of fitness they want but also see the gradual change of this process. The artistic essence of this project is using the polygon as a single unit to create the abstract version of the picture since it contains different types of angles, including acute angle, obtuse angle, and right angle. It can create different shapes because of this natural characteristic.
https://alteredqualia.com/visualization/evolve/
Project 02
This is my self portrait
sketch
function setup() {
createCanvas(400, 400);
background(0);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//backgrond
if(mouseX<width/2){
background(186,197,62);
stroke(112,106,41);
fill(112,106,41);
} else{
background(200,170,161);
stroke(167,118,94);
fill(167,118,94);
}
//stars! left side
quad(40,30,30,50,40,70,50,50);
quad(65,55,55,75,65,95,75,75);
quad(40,80,30,100,40,120,50,100);
//stars! right side
quad(350,340,340,360,350,380,360,360);
quad(350,280,340,300,350,320,360,300);
quad(320,305,310,325,320,345,330,325);
//left face area
stroke(158,193,210);
fill(158,193,210);
arc(150,130,150,150,15.3,17.8,HALF_PI); //top left area
fill(158,193,210);
rect(75,130,40,120);//left hair
//right yellow area
stroke(240,216,102);
fill(240,216,102);
arc(220,120,90,90,16.9,13.4,HALF_PI);
fill(240,216,102);
rect(235,120,30,130);//right hair
//right dak blue area
stroke(44,112,171);
fill(44,112,171);
arc(200,120,90,90,16.9,13.4,HALF_PI);
fill(44,112,171);
rect(215,120,30,130);//right hair
//eye and noise
stroke(240,216,102);
fill(240,216,102);
circle(125,140,60);
stroke(240,216,102);
fill(240,216,102);
circle(200,140,60);
stroke(158,193,210);
fill(158,193,210);
circle(200,140,55);
stroke(194,227,245);
fill(194,227,245);
circle(200,140,40);
stroke(0);
fill(0);
rect(163,170,5,15);
rect(158,185,10,3);
//horizontal lines From top to the bottom
stroke(158,193,210);
fill(158,193,210);
rect(235,75,50,15);
stroke(255);
fill(255);
rect(235,95,60,10);
stroke(158,193,210);
fill(158,193,210);
rect(235,110,70,7);
stroke(158,193,210);
fill(158,193,210);
rect(235,120,75,13);
stroke(255);
fill(255);
rect(235,139,75,8);
stroke(158,193,210);
fill(158,193,210);
rect(235,153,75,8);
stroke(255);
fill(255);
rect(235,167,75,8);
stroke(158,193,210);
fill(158,193,210);
rect(235,181,75,8);
stroke(255);
fill(255);
rect(235,195,75,8);
rect(235,209,75,8);
//clothes
stroke(240,216,102);
fill(240,216,102);
rect(140,230,50,20);
stroke(158,193,210);
fill(158,193,210);
triangle(110,270,90,270,60,390);
stroke(240,216,10);
fill(240,216,102);
triangle(150,270,120,270,90,390);
triangle(180,270,210,270,240,390);
stroke(158,193,210);
fill(158,193,210);
triangle(220,270,235,270,270,390);
//button
stroke(44,112,171);
fill(44,112,171);
circle(165,300,20);
circle(165,330,20);
circle(165,360,20);
//jaw
stroke(255);
fill(255);
arc(165,170,130,130,7,2.4,HALF_PI);
}