Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
void setup() {
  //400x400 Canvas
  size(400, 400);
}

void draw() {

  //Set CENTER mode
  rectMode(CENTER);

  ////BACKGROUND AND SKY////
  
  //Light Blue Background
  background(32, 221, 249);

  //Cloud Left
  noStroke();
  fill(255);
  ellipse(15 + (mouseX-200)*0.2, 30, 20, 20);
  ellipse(35 + (mouseX-200)*0.2, 30, 40, 40);
  ellipse(55 + (mouseX-200)*0.2, 30, 30, 30);
  fill(32, 221, 249);
  rect(35 + (mouseX-200)*0.2, 45, 80, 20);

  //Cloud Center
  noStroke();
  fill(255);
  ellipse(205 + (mouseX-200)*0.3, 40, 40, 40);
  ellipse(225+ (mouseX-200)*0.3, 40, 50, 50);
  ellipse(245+ (mouseX-200)*0.3, 40, 30, 30);
  fill(32, 221, 249);
  rect(225+ (mouseX-200)*0.3, 60, 80, 20);
  
  //Cloud Right
  noStroke();
  fill(255);
  ellipse(350 + (mouseX-200)*0.3, 20, 10, 10);
  ellipse(365+ (mouseX-200)*0.3, 20, 30, 30);
  ellipse(380+ (mouseX-200)*0.3, 20, 20, 20);
  fill(32, 221, 249);
  rect(365+ (mouseX-200)*0.3, 35, 80, 20);
  
  //Light Back Layer of Grass
  noStroke();
  fill(89, 255, 147);
  rect(200, 400, 400, 140);

  //////PEPPA'S BODY/////

  //Arms
  strokeWeight(5);
  stroke(255, 215, 240);
  fill(255, 215, 240);
  bezier(100, 270 + (mouseY-300)*0.2, 100, 265 + (mouseY-300)*0.2, 150, 245, 150, 250);
  bezier(300, 270+ (mouseY-300)*0.2, 300, 265+ (mouseY-300)*0.2, 250, 245, 250, 250);

  //Torso
  fill(200, 0, 0);
  stroke(145, 0, 0);
  strokeWeight(5);
  ellipse(200, 350, 150, 270);

  //Rect to fake bottom stroke on torso ellipse
  fill(145, 0, 0);
  rect(200, 340, 150, 5);

  /////PEPPA'S HEAD/////
  
  //Peppa's Head Colour (Pink)
  fill(255, 215, 240);

  //Triangle to fill gaps between Beziers about to be drawn
  strokeWeight(0);
  triangle(250, 160, 230, 100, 145, 165);

  //Stroke Weight and RGB for rest of Peppa's Head
  strokeWeight(4.5);
  stroke(255, 135, 181);

  //Ears
  bezier(200, 115, 180, 80, 220, 70, 210, 110);
  bezier(170, 130, 150, 95, 190, 85, 183, 125);

  //Scalp
  bezier(230, 100, 160, 130, 145, 155, 155, 165);

  //Snout Outer Outline
  bezier(230, 100, 350, 70, 270, 155, 245, 160);

  //Snout Inner Outline
  bezier(283, 130, 245, 160, 245, 100, 260, 95);

  //Chin
  bezier(245, 160, 300, 300, 85, 250, 155, 150);

  //Mouth
  bezier(195, 195, 195, 220, 240, 220, 240, 185);

  ////PEPPA'S FACE////
  
  //Facial features colour (Dark Pink)
  fill(255, 135, 181);
  
  //Cheek
  ellipse(170, 185, 27, 27);

  //Nose
  ellipse(265, 115, 6, 6);
  ellipse(280, 112, 6, 6);

  //Eyes
  fill(255);
  ellipse(220, 127, 18, 18);
  ellipse(195, 140, 18, 18);

  //Pupils
  fill(0);
  noStroke();
  ellipse(220 + ((mouseX-200)*0.01), 127+ ((mouseY-200)*0.01), 7, 7);
  ellipse(195 + ((mouseX-200)*0.01), 140+ ((mouseY-200)*0.01), 7, 7);

  ////GROUND////

  noStroke();
  //Blocks half of Body Ellipse
  fill(52, 239, 108);
  rect(200, 400, 400, 120); 

  //PEPPA'S Shadow
  fill(21, 112, 75);
  ellipse(205, 375, 133, 20);

  ////PEPPA'S LEGS////
  fill(255, 215, 255);
  quad(160, 375, 167, 375, 167, 340, 160, 340);
  quad(233, 375, 240, 375, 240, 340, 233, 340);

  //PEPPA'S FEET
  rectMode(CORNER);
  fill(0);
  //Right Foot
  rect(160, 370, 20, 5);
  ellipse(180, 372.5, 10, 5);
  //Left Foot
  rect(233, 370, 20, 5);
  ellipse(253, 372.5, 10, 5);

  ////FLOWERS & GRASS////
  //GRASS

  //Grass & Stem Properties
  stroke(14, 165, 104);
  strokeWeight(4);
  noFill();

  //Grass and flowers sway with the mouse

  //Bottom Far Left
  bezier(10, 390, 10, 390, 11 +(mouseX-200)*0.01, 377, 10 +(mouseX-200)*0.01, 377);
  bezier(17, 385, 17, 385, 16 +(mouseX-200)*0.01, 377, 17 +(mouseX-200)*0.01, 377);
  bezier(24, 387, 24, 387, 24 +(mouseX-200)*0.01, 377, 24 +(mouseX-200)*0.01, 377);

  //Bottom Far Right
  bezier(360, 395, 360, 395, 361+(mouseX-200)*0.01, 382, 360+(mouseX-200)*0.01, 382);
  bezier(367, 390, 367, 390, 366+(mouseX-200)*0.01, 382, 367+(mouseX-200)*0.01, 382);
  bezier(374, 392, 374, 392, 374+(mouseX-200)*0.01, 382, 374+(mouseX-200)*0.01, 382);

  //Bottom Right
  bezier(310, 375, 310, 375, 311+(mouseX-200)*0.01, 362, 310+(mouseX-200)*0.01, 362);
  bezier(317, 370, 317, 370, 316+(mouseX-200)*0.01, 362, 317+(mouseX-200)*0.01, 362);
  bezier(324, 372, 324, 372, 324+(mouseX-200)*0.01, 362, 324+(mouseX-200)*0.01, 362);

  //FLOWERS

  //Stems
  bezier(50, 370, 50, 370, 50+(mouseX*0.01), 357, 50+(mouseX*0.01), 357);
  bezier(90, 385, 90, 385, 90+(mouseX*0.01), 372, 90+(mouseX*0.01), 372);
  bezier(350, 370, 350, 370, 350+(mouseX*0.01), 357, 350+(mouseX*0.01), 357);

  //Petals Properties
  stroke(255, 255, 17);
  strokeWeight(4);
  noFill();

  bezier(47+(mouseX*0.01), 354, 47+(mouseX*0.01), 354, 53+(mouseX*0.01), 360, 53+(mouseX*0.01), 360);
  bezier(47+(mouseX*0.01), 360, 47+(mouseX*0.01), 360, 53+(mouseX*0.01), 354, 53+(mouseX*0.01), 354);

  bezier(87+(mouseX*0.01), 375, 87+(mouseX*0.01), 375, 93+(mouseX*0.01), 369, 93+(mouseX*0.01), 369);
  bezier(87+(mouseX*0.01), 369, 87+(mouseX*0.01), 369, 93+(mouseX*0.01), 375, 93+(mouseX*0.01), 375);

  bezier(347+(mouseX*0.01), 354, 347+(mouseX*0.01), 354, 353+(mouseX*0.01), 360, 353+(mouseX*0.01), 360);
  bezier(347+(mouseX*0.01), 360, 347+(mouseX*0.01), 360, 353+(mouseX*0.01), 354, 353+(mouseX*0.01), 354);
  
}

void mousePressed() {
}

void keyPressed() {
}