VIEW 


So far, I have it so her eyes blink when you click, and I also plan to have an interactive element where her wand is. I am going to add photos to the background and put a transparent color over them. 


function setup() {

  createCanvas(1280, 720);

}


function draw() {

  background(160,140,220,200);

  

  //hair

  noStroke();

  fill(90,43,105);

  rect(526,140,227);

  

  //head and legs

  fill(230,213,195);

  ellipse(640,190,175);

  rect(590,550,25,40);

  rect(665,550,25,40);

  

  //face

  if (mouseIsPressed){

    fill(0,0);

    triangle(600,180,580,180,580,200);

    triangle(680,180,700,180,700,200);

  } else{

    fill(0);

    triangle(600,180,580,180,580,200);

    triangle(680,180,700,180,700,200);

  }

  fill(255);

  circle(600,200,40);

  circle(680,200,40);

  fill(81,148,133);

  circle(600,200,25);

  circle(680,200,25);

  fill(230,213,195);

  circle(600,235,50);

  circle(680,235,50);

  if (mouseIsPressed){

    fill(0);

    triangle(600,220,580,220,580,200);

    triangle(680,220,700,220,700,200);

    fill(229,179,162);

    circle(600,200,40);

    circle(680,200,40);

  }

  strokeWeight(3);

  stroke(0);

  fill(0,0);

  arc(640,230,50,40,0,3.15);

  

  //hat

  noStroke();

  fill(0);

  triangle(640,25,540,140,740,140);

  ellipse(640,140,275,50);

  

  //body

  triangle(640,277.5,502.5,550,777.5,550);

  triangle(559,300,725,300,640,425);

  beginShape();

    vertex(559,300);

    vertex(579,325);

    vertex(547,425);

    vertex(527,400);

  endShape(CLOSE);

  beginShape();

    vertex(725,300);

    vertex(705,325);

    vertex(732,425);

    vertex(752,400);

  endShape(CLOSE);

  

  //boots

  rect(580,590,45,60);

  rect(655,590,45,60);

  ellipse(580,650,90,40);

  ellipse(700,650,90,40);

  

  //wand dust thing

  fill(255,100);

  triangle(445,355,300,0,0,300);

  triangle(0,0,300,0,0,300);

  

  //wand

  fill(125,215,227);

  beginShape();

    vertex(590,475);

    vertex(600,465);

    vertex(450,350);

    vertex(440,360);

  endShape(CLOSE);

  rect(550,115,180,15);

    

  fill(230,213,195);

  ellipse(530,420,40);

  ellipse(749,420,40);

}

Comments

Popular posts from this blog

p5.js day 2!