​

​

function setup() {

  createCanvas(400, 600);

  frameHeight = height / 3;

  background(200);

}

​

function draw() {

  // pushing and popping to get rid of the styles

  push();

  head();

  pop();

  translate(0,frameHeight)

  push();

  body();

  pop();

  translate(0,frameHeight)

  push();

  feet();

  pop();

}

​

let eyeShift = 0;

let eyeShiftDir = 0.1;

​

// House — by Cecile Rocha

function head() {

  partBackground( color('#FBE4D0') );

  // face main

  fill('#FFFDEB');

  ellipse( width/2, frameHeight/2, 120, 146 );

  // left side

  drawFaceElements();

  // right side

  push();

  angleMode(RADIANS); 

  rotate(PI);

  translate(-width,-frameHeight);

  drawFaceElements();

  pop();

  line(width/2,27,width/2,frameHeight-27);

  // neck

  fill('#2CB4B4');

  rect(185, 174, 32, 26);

  function drawFaceElements(){

    const shiftY = 10;

    let eyePos = eyeShift + 175;

    eyeShift = eyeShift + eyeShiftDir;

    if( eyeShift > 5 || eyeShift < -5 ){

      eyeShiftDir = eyeShiftDir *-1;

    }

    // eye

    fill('#FFFFFF');

    ellipse( 175, 77-shiftY, 35, 12 );

    // mouth

    fill('#FB211F');

    ellipse( 178, 148-shiftY, 20, 14 );

    // black elements

    fill('#000000');

    rect(164,146-shiftY,27,3); // mouth line

    circle(eyePos,81-shiftY,10); // pupil

    // nose

    beginShape();

    vertex( width/2, 82-shiftY );

    vertex( 185, 108-shiftY );

    vertex( width/2, 112-shiftY );

    endShape(CLOSE);

  }

}

​

​

let wingAngle = 0;

let wingAngleDir = 0.03;

​

// Pigeon — by Olivier Brückner

function body() {

  // colors pigeon

  const mainColor = color('#76BEEE');

  const mainColorDark = color('#5CACE1');

  const mainColorDarker = color('#3C9BDB');

  const mainColorDarkest = color('#2780BA');

  // vertex points — straight

  /*

  const x1 = 125;

  const x2 = 95;

  const x3 = 140; 

  const y1 = 120;

  */

  // vertex points — bezier

  const xb1 = 125;

  const xb2 = 95;

  const xb3 = 140; 

  const xb5 = 150;

  const xb6 = 204;

  const yb1 = 27;

  const yb2 = 50;

  const yb3 = 120;

  const yb4 = 174;

  const yb5 = 213;

  partBackground( color('#DEEFF9') );

​

  noStroke();

  // arms

  createArm();

  createArm(true);

  // body

  fill( mainColor );

  beginShape();

  /*

  vertex( x1, 0 );

  vertex( x2, y1 );

  vertex( x3, frameHeight );

  vertex( width-x3, frameHeight );

  vertex( width-x2, y1 );

  vertex( width-x1, 0 );

  */

  vertex( xb1, 0 );

  bezierVertex(xb1, yb1, xb2, yb2, xb2, yb3);

  bezierVertex(xb2, yb4, xb5, yb5, xb6, yb5);

  bezierVertex(width-xb5, yb5, width-xb2, yb4, width-xb2, yb3);

  bezierVertex(width-xb2, yb2, width-xb1, yb1, width-xb1, 0);

  endShape(CLOSE);

  createZigZag( 140, 50, 6,1);

  createZigZag( 120, 90, 8);

  // Functions that are only needed for this part

  function createZigZag(shiftX=0,shiftY=0,count=4,start=0,size=20){

    push();

    translate(shiftX,shiftY);

    noFill();

    stroke(255,100);

    strokeWeight(6);

    strokeCap(ROUND);

    strokeJoin(ROUND);

    count = count + start;

    beginShape();

    for( let i = start; i <= count; i++ ){

      let yPos = 0;

      if (i % 2 == 0) {

        yPos = size;

      }

      vertex( (i - start) * size, yPos );

    }

    endShape();

    pop();

  }

  function createArm(mirror){

    push();

    angleMode(DEGREES);

    let from = 0;

    let dir = 1;

    if( mirror ){

      from = width;

      dir = -1;

    }

    // wing animation

    wingAngle = wingAngle + wingAngleDir;

    if( wingAngle > 7 || wingAngle < 0 ){

      wingAngleDir = wingAngleDir *-1;

    }

    translate(width/2, 10)

    rotate(wingAngle * dir)

    translate(-width/2, 00)

    // background finger 2

    fill( mainColorDarkest );

    // quad(from + dir * 68, 139, from + dir * 95, 160, from + dir * 92, 169, from + dir * 54, 149);

    beginShape();

    vertex( from + dir * 54, 135 );

    vertex( from + dir * 70, 155 );

    bezierVertex(from + dir * 76, 159, from + dir * 91, 164, from + dir * 92, 159);

    bezierVertex(from + dir * 93, 153, from + dir * 91, 148, from + dir * 85, 144);

    bezierVertex(from + dir * 79, 141, from + dir * 72, 137, from + dir * 71, 131);

    endShape(CLOSE);

    // background finger 1

    fill( mainColorDarker );

    // quad(from + dir * 56, 147, from + dir * 91, 167, from + dir * 83, 178, from + dir * 45, 162);

    beginShape();

    vertex( from + dir * 41, 154 );

    bezierVertex(from + dir * 44, 157, from + dir * 51, 164, from + dir * 61, 167);

    bezierVertex(from + dir * 73, 170, from + dir * 78, 174, from + dir * 82, 169);

    bezierVertex(from + dir * 86, 165, from + dir * 91, 162, from + dir * 83, 156);

    bezierVertex(from + dir * 75, 151, from + dir * 62, 144, from + dir * 62, 126);

    endShape(CLOSE);

    // arm

    fill( mainColorDark );

    beginShape();

    vertex( from + dir * 145, 4 );

    bezierVertex(from + dir * 125, 0, from + dir * 89, 10, from + dir * 72, 26);

    bezierVertex(from + dir * 50, 46, from + dir * 24, 86, from + dir * 21, 143);

    bezierVertex(from + dir * 21, 169, from + dir * 26, 182, from + dir * 38, 184);

    bezierVertex(from + dir * 50, 185, from + dir * 46, 168, from + dir * 47, 164);

    bezierVertex(from + dir * 51, 152, from + dir * 52, 156, from + dir * 58, 144);

    bezierVertex(from + dir * 64, 134, from + dir * 74, 127, from + dir * 77, 115);

    bezierVertex(from + dir * 80, 103, from + dir * 86, 77, from + dir * 99, 65);

    bezierVertex(from + dir * 109, 58, from + dir * 129, 59, from + dir * 129, 59);

    /*

    vertex( from + dir * 128, 11 );

    vertex( from + dir * 68, 39 );

    vertex( from + dir * 31, 104 );

    vertex( from + dir * 26, 174 );

    vertex( from + dir * 43, 188 );

    vertex( from + dir * 56, 146 );

    vertex( from + dir * 76, 128 );

    vertex( from + dir * 92, 81 );

    vertex( from + dir * 127, 60 );

    */

    endShape(CLOSE);

    // thumb

    fill( mainColor );

    beginShape();

    /*

    vertex( from + dir * 52, 79 );

    vertex( from + dir * 33, 130 );

    vertex( from + dir * 60, 164 );

    vertex( from + dir * 79, 155 );

    vertex( from + dir * 72, 115 );

    vertex( from + dir * 85, 90 );

    */

    vertex( from + dir * 56, 60 );

    bezierVertex(from + dir * 47, 74, from + dir * 40, 89, from + dir * 36, 100);

    bezierVertex(from + dir * 31, 112, from + dir * 29, 127, from + dir * 37, 140);

    bezierVertex(from + dir * 42, 146, from + dir * 50, 153, from + dir * 57, 154);

    bezierVertex(from + dir * 64, 156, from + dir * 76, 152, from + dir * 76, 145);

    bezierVertex(from + dir * 76, 137, from + dir * 71, 130, from + dir * 70, 123);

    bezierVertex(from + dir * 69, 111, from + dir * 70, 103, from + dir * 76, 93);

    bezierVertex(from + dir * 87, 77, from + dir * 89, 73, from + dir * 102, 61);

    endShape(CLOSE);

    pop();

  }

}

​

​

// Teddy - by Sarah Nichols

function feet() {

  const pantsColor = color('#A1ADC3');

  const legColor = color('#8A6B59');

  const legColorDark = color('#7B5D4B');

  partBackground( color('#F7EFEE') );

  noStroke();

  // legs

  fill( legColor );

  // left leg

  beginShape();

  vertex( 87, 71 );

  vertex( 103, 127 );

  vertex( 151, 178 );

  vertex( 179, 158 );

  vertex( 176, 75 );

  vertex( 120, 0 );  

​

  endShape(CLOSE);

  // right leg

  beginShape();

  vertex( 254, 86 );

  vertex( 260, 162 );

  vertex( 295, 164 );

  vertex( 326, 72 );

  vertex( 326, 0 );

​

  endShape(CLOSE);

  // addons

  fill( legColorDark );

  // left leg

  beginShape();

  vertex( 93, 91 );

  vertex( 101, 120 );

  vertex( 130, 131 );

  vertex( 133, 102 );

  vertex( 113, 87 );

  endShape(CLOSE);

  // right leg

  beginShape();

  vertex( 283, 85 );

  vertex( 279, 90 );

  vertex( 284, 104 );

  vertex( 281, 113 );

  vertex( 294, 120 );

  vertex( 304, 120 );

  vertex( 313, 105 );

  vertex( 313, 87 );

  endShape(CLOSE);

  // pants

  fill( pantsColor );

  beginShape();

  vertex( 83, 0 );

  vertex( 87, 71 );

  vertex( 130, 64 );

  vertex( 176, 75 );

  vertex( 207, 59 );

  vertex( 245, 57 );

  vertex( 254, 86 );

  vertex( 283, 72 );

  vertex( 326, 72 );

  vertex( 334, 34 );

  vertex( 327, 0 );

​

  endShape(CLOSE);

}

​

// Functions that are relevant for the whole sketch

​

// a function to set the background of one of the thirds

function partBackground( color ){

  push();

  noStroke();

  fill(color);

  rect( 0,0,width,frameHeight );

  pop();

}

​