var x = 0;
var y = 0;


function setup() {
    createCanvas(900, 600);

}

function draw() {
    background(230,140,100);
    strokeWeight(2);
    fill(0);
    //F
    stroke(190,1900,199);
    rect(40,180,180,180);
    fill(mouseX,100,100);
    noStroke();
    
    ellipse(200,500,380,380);
     fill(100,230,204);
    x = 60;
    ellipse(220,248,x,x);
     
    //o
    fill(0);
    stroke(190,1900,199);
    rect(220,180,180,180);
    fill(255);
    noStroke();
    fill(230,140,100);
    x =100;
    ellipse(300,275,x,x);
    fill(235,240,100);
    x = 80;
    ellipse(mouseX+250,270,x,x);
    
     //r
    fill(0);
    stroke(190,1900,199);
    rect(400,180,180,180);
    noStroke();
    fill(255,140,100);
    x = 70;
     ellipse(430,mouseX+150,x,x);
  
    fill(100,mouseX,200);
    noStroke();
    x = 300;
    ellipse(590,380,x,x);
    
    //M
     fill(0);
    stroke(190,1900,199);
    rect(580,180,180,180);
    
    fill(255,220,20);
    noStroke();
    x = 60;
    ellipse(625,360,x,x);
    fill(255,mouseY,120);
    ellipse(700,360,x,x);
    
    //forward ground
    fill(190,1900,199);
    beginShape();
// Exterior part of shape, clockwise winding
vertex(0,0);
vertex(900,0);
vertex(900,600);
vertex(0, 600);
// Interior part of shape, counter-clockwise winding
beginContour();
vertex(40, 359);
vertex(760, 359);
vertex(760, 181);
vertex(40, 181);
endContour();
endShape(CLOSE);
    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.min.js