var faceWidth = 100
var faceLength = 100
//hat, bow and sun glass colours colours R, G, B
var hbtR = 200
var hbtG = 150
var hbtB = 155
//skin colour variables
skinColour = 1
//sunglass shape and width
var sgWidth = 20
var sgHeight = 20
// hat size variables
var hatWidth = 200
var hatHeight = 100
var topWidth = 150
// mouth variables
mouth = 1
function setup() {
createCanvas(300, 300);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(220)
//skin colour
if (skinColour==1){
fill(117,64,27)
} else if (skinColour==2){
fill(207,152,84)
} else if (skinColour==3){
fill(244,203,151)
}
//face
noStroke()
ellipse(width/2,height/2, faceWidth, faceLength);
//sunglasses
fill(hbtR, hbtG, hbtB);
ellipse(width/2-1/5*faceWidth, height/2-1/8*faceLength,sgWidth,sgHeight);
ellipse(width/2+1/5*faceWidth, height/2-1/8*faceLength,sgWidth,sgHeight);
stroke(hbtR, hbtG, hbtB)
line(width/2-1/5*faceWidth,height/2-1/8*faceLength,width/2+1/5*faceWidth,height/2-1/8*faceLength);
//bow
triangle(width/2,height/2+1/2*faceLength,width/2-15,(height/2+1/2*faceLength)-5,width/2-15,(height/2+1/2*faceLength)+5);
triangle(width/2,height/2+1/2*faceLength,width/2+15,(height/2+1/2*faceLength)-5,width/2+15,(height/2+1/2*faceLength)+5);
//nose
fill(0);
triangle(width/2,height/2,width/2+5,height/2+10,width/2-5,height/2+10);
//hat
fill(hbtR,hbtG,hbtB);
line(width/2-60,height/2-1/3*faceLength,width/2+60,height/2-1/3*faceLength);
quad(width/2-30,height/2-1/3*faceLength,width/2+30,height/2-1/3*faceLength,width/2+23,height/2-faceLength,width/2-23,height/2-faceLength)
}
function mousePressed() {
skinColour = int(random(1,4));
faceWidth = random (75,150);
faceLength = random(75,150);
hbtR = random(0,255);
hbtG = random(0,255);
hbtB = random(0,255);
}
This is what I imagine my fashion sense in terms of colour coding would be: Same coloured hat, sunglasses and bow-tie. It was interesting to understand the relationship in between variables.