//Annie Kim
//andrewID: anniekim
//Section B
var Reye= 228; //color of original eye (red)
var Geye = 175; //color of original eye (green)
var Beye = 195; //color of original eye (blue)
var HR = 255; //color of original hair (red)
var HG = 159; //color of original hair (green)
var HB = 65; //color of original hair (blue)
var pupil = 20; // diameter of pupil
var heart1r = 227; //red of heart1
var heart1g = 83; //green of heart1
var heart1b = 102; //blue of heart1
var heart2r = 232; //red of heart2
var heart2g = 138; // green of heart2
var heart2b = 173; //blue of heart 2
var backgroundr = 158 // red of background
var backgroundg = 15 // green of background
var backgroundb = 28 // blue of background
var StrokeArrow = 15; //stroke size of arrow
var RectColorR = 218; //red of right background
var RectColorG = 127; // green of right background
var RectColorB = 157; // blue of right background
var backR = 216; // red of original background
var backG = 77; // green of original background
var backB = 82; //blue of original background
var smilecurvex = 20; //width of smile
var smilecurvey = 15; //height of smile
function setup() {
createCanvas(640, 480);
}
function draw() {
background(backR, backG, backB);
//right half of background
stroke(RectColorR, RectColorG, RectColorB);
fill(RectColorR, RectColorG, RectColorB);
rect(320, 0, 320, 480);
//lines across
stroke(248, 206, 93);
strokeWeight(StrokeArrow);
line(140, 380, 550, 80);
line(65, 370, 140, 380);
line(100, 450, 140, 380);
fill(248, 206, 93);
triangle(540, 57, 575, 100, 580, 60);
//heart1 forming
fill(heart1r, heart1g, heart1b);
strokeWeight(7);
stroke(heart1r, heart1g, heart1b);
triangle(171, 210, 469, 210, 320, 440);
circle(244, 183, 155);
circle(396, 183, 155);
//second heart layer
fill(heart2r, heart2g, heart2b);
stroke(heart2r, heart2g, heart2b);
triangle(240, 240, 400, 240, 320, 360);
circle(359, 220, 92);
circle(281, 220, 92);
//middle hair behind the back
fill(HR, HG, HB);
stroke(HR, HG, HB);
arc(320, 260, 120, 140, 0, PI, CHORD);
triangle(320, 200, 275, 260, 365, 260);
//body middle
fill(Reye, Geye, Beye);
stroke(0);
strokeWeight(5);
rect(295, 220, 50, 80);
fill(0);
rect(295, 245, 50, 30);
fill(255);
stroke(255);
rect(328, 305, 15, 40);
ellipse(297, 297, 25, 45);
fill(0);
stroke(0);
arc(297, 297, 25, 45, 0, PI, CHORD); //left shoe
arc(335.5, 337, 17, 35, 0, PI, CHORD); //right shoe
//recovering black stroke
stroke(0);
//middle right arm
fill(246, 232, 219);
stroke(246, 232, 219);
circle(230, 240, 30);
circle(410, 120, 30);
stroke(246, 232, 219);
rect(395, 120, 30, 40);
triangle(395, 160, 422, 164, 377, 200);
triangle(235, 225, 295, 225, 243, 249);
//middle bow
fill(255, 0, 0);
stroke(255, 0, 0);
circle(270, 80, 25);
circle(375, 80, 25);
triangle(257, 89, 255, 155, 295, 170);
strokeWeight(30);
line(274, 85, 310, 170);
strokeWeight(1);
arc(320, 120, 60, 35, PI, 0);
strokeWeight(30);
line(375, 80, 330, 170);
line(375, 80, 370, 175);
//head middle
strokeWeight(2);
fill(246, 232, 219);
stroke(0);
ellipse(320, 177, 135, 110);
//middle eyes
strokeWeight(2);
fill(255);
circle(283, 175, 60);
circle(355, 175, 60);
fill(Reye, Geye, Beye);
stroke(Reye, Geye, Beye);
circle(350, 178, 45); // color of right eye pink
circle(290, 178, 45); // color of left eye pink
noFill();
stroke(0);
circle(283, 175, 60);
circle(355, 175, 60);
fill(0);
stroke(0);
circle(346, 180, 35); // black of right eye
circle(294, 180, 35); // black of left eye
fill(255);
circle(346, 180, pupil);
circle(294, 180, pupil);
//middle bangs
fill(HR, HG, HB);
stroke(0);
strokeWeight(1.5);
arc(320, 150, 118, 52, PI, 0, CHORD);
fill(246, 232, 219);
stroke(246, 232, 219);
triangle(320, 135, 310, 155, 330, 155);
//overlapping head shape
noFill();
stroke(0);
strokeWeight(5);
ellipse(320, 177, 135, 110);
//middle smile
noFill();
strokeWeight(2);
arc(320, 205, smilecurvex, smilecurvey, 0, PI);
}
function mouseClicked() {
Reye = random(0, 255);
Geye = random(0, 255);
Beye = random(0, 255);
HR = random(0,255);
HG = random(0, 255);
HB = random(0, 255);
pupil = random(15, 35);
heart1r = random(100, 255);
heart1g = random(75, 90);
heart1b = random(80, 110);
heart2r = random(0, 100);
heart2g = random(0, 100);
heart2b = random(0,100);
backgroundr = random(150, 200);
backgroundg = random(15, 25);
backgroundb = random(20,30);
StrokeArrow = random(1, 20);
RectColorR = random(200,220);
RectColorG = random(110, 130);
RectColorB = random(150, 160);
backR = random(200, 255);
backG = random(50, 100);
backB = random(60, 100);
smilecurvex = random(15, 45);
smilecurvey = random(15, 45);
}
I decided to create a PowerPuff character because I thought it would be interesting to see how the appearance of the character would change with each click, and I wanted to see if I could get it to look like the other PowerPuff characters by continuously clicking. I worked on most of the shapes (such as the bow, the hair, the hearts, etc) by putting together a variety of shapes. It was a little challenging to make sure everything aligned perfectly. One of the hardest things was making sure that everything remained proportionate to the actual character from the show. I think that this does a nice job of making this character essentially customizable because you can keep clicking until you are happy with the color and sizes of different features.