​

function setup() {

  createCanvas(600, 400);

  for (let i = 0; i < 100; i++) {

    rainY[i] = random(65,300);

  }

  ronnieX = width/2;

  ronnieY = 310;

  ronnieSize = 50;

}

​

function draw() {

  noStroke();

  background(174,174,204);

  fill(177,166,189);

  ellipse(width/2,height,width*2,200);

  for (let i = 0; i < rainY.length; i++) {

    let rainX = width*i / rainY.length;

    stroke(95,90,134);

    line(rainX,rainY[i],rainX,rainY[i]+3);

    rainY[i] += 2;

    if (rainY[i] > 360) {

      rainY[i] = 65;

    }

  }

  push();

  noStroke();

  for (let cloudX = 50; cloudX <= 600; cloudX += 175) {

    fill(177,166,189);

    drawCloud(cloudX,55,100);

    fill(212,202,217);

    drawCloud(cloudX*2,50,150);

    fill(168,152,189);

    drawCloud(cloudX*1.5,55,125);

  } 

  pop();

  if (keyIsDown(LEFT_ARROW)) {

    if (ronnieX >= 2) {

      ronnieX = ronnieX - 2;

    }

  }

  if (keyIsDown(RIGHT_ARROW)) {

    if (ronnieX <= width-2) {

      ronnieX = ronnieX + 2;

    }

  }

  if (keyIsDown(UP_ARROW)) {

    if (ronnieY > 280) {

      ronnieY = ronnieY - 1;

      ronnieSize = ronnieSize - .5;

    }

  }

  if (keyIsDown(DOWN_ARROW)) {

    if (ronnieY < height + 20) {

      ronnieY = ronnieY + 1;

      ronnieSize = ronnieSize + .5;

    }

  }

  if (keyIsDown(unchar(' '))) {

    if (ronnieY >= 10) {

      ronnieY = ronnieY - 10;

    }

  }

  if (ronnieY < 280) {

    ronnieY += 0.1

  }

  drawRonnie(ronnieX, ronnieY, ronnieSize);

}

​

​

​

function drawCloud(cloudX,cloudY,cloudSize) {

  ellipse(cloudX,cloudY,cloudSize,cloudSize*0.7);

  ellipse(cloudX+cloudSize/4,cloudY+cloudSize/4,cloudSize,cloudSize*0.7);

  ellipse(cloudX-cloudSize/3,cloudY+cloudSize/5,cloudSize,cloudSize*0.7);

}

​

function drawRonnie(ronnieX,ronnieY,ronnieSize) {

  let ww = ronnieSize/37.5;

  //legs

  stroke(119,121,108);

  strokeWeight(ww*2.5);

  line(ronnieX-ww*4,ronnieY+ww*40,ronnieX-ww*4,ronnieY+ww*45.5);

  line(ronnieX+ww*4,ronnieY+ww*40,ronnieX+ww*4,ronnieY+ww*45.5);

  //arms

  stroke(146,167,119);

  strokeWeight(ww*2.5);

  line(ronnieX-ww*4,ronnieY+ronnieSize/2,ronnieX-ww*12.5,ronnieY+ronnieSize*0.8);

  line(ronnieX+ww*4,ronnieY+ronnieSize/2,ronnieX+ww*12.5,ronnieY+ronnieSize*0.8);

  //hands

  noStroke();

  fill(69,91,58);

  circle(ronnieX-ww*12.5,ronnieY+ronnieSize*0.8,ww*3);

​

  fill(69,91,58);

  ellipse(ronnieX+ww*12.5,ronnieY+ronnieSize*0.8,ww*3);

  //feet

  fill(19,41,8);

  arc(ronnieX-ww*5,ronnieY+ww*47,ww*5,ww*5,-PI,-2*PI);

  arc(ronnieX+ww*5,ronnieY+ww*47,ww*5,ww*5,-PI,-2*PI);

  //body

  fill(119,141,108);

  noStroke();

  triangle(ronnieX-ronnieSize/3,ronnieY+ww*40,ronnieX,ronnieY,ronnieX+ronnieSize/3,ronnieY+ww*40);

  //head

  fill(219,191,158);

  ellipse(ronnieX,ronnieY,ronnieSize,ronnieSize);

  //hair

  fill(182,145,107);

  arc(ronnieX,ronnieY,ronnieSize,ronnieSize,-PI*1.09,-1.91*PI);

  //eyes

  fill(248,250,215);

  ellipse(ronnieX-ww*9,ronnieY+ww*7,ronnieSize/5,ronnieSize/5);

  ellipse(ronnieX+ww*9,ronnieY+ww*7,ronnieSize/5,ronnieSize/5);

  //pupils

   fill(119,141,108);

  ellipse(ronnieX-ww*9,ronnieY+ww*6,ronnieSize/7,ronnieSize/7);

  ellipse(ronnieX+ww*9,ronnieY+ww*6,ronnieSize/7,ronnieSize/7);

  //nose

  fill(182,145,107);

  triangle(ronnieX-ww*2,ronnieY+ww*10.5,ronnieX,ronnieY+ww*6.5,ronnieX+ww*2,ronnieY+ww*10.5);

  //mouth

  noFill();

  stroke(132,95,57);

  strokeWeight(1);

  arc(ronnieX,ronnieY+ww*13,ronnieSize/5,ww*5,0,PI);

}