p5.js Web Editor

xxxxxxxxxx
function setup() {
  createCanvas(400, 310);
 
  noStroke();
  fill(0);
}
function draw() {
  background(255);
  
  
  if (mouseIsPressed == true) {
    cursor();
  }
  else {
    noCursor();
  }
​
​
  fill(226,154,84)
  if (mouseX < 30) {
    rect(0, 0, 30, 100);  // Left
  }
  
  else if (mouseX < 60) {
    fill(212,218,150)
    rect(30, 0, 30, 100); // Middle
  }
  else {
    fill(226,154,84,170)
    rect(60, 0, 30, 100); // Right
  }
  if (mouseX < 60) {
    fill(33,102,134,170)
    rect(90, 0, 30, 100);  // Left
  }
  else if (mouseX < 90) {
    fill(56,25,75);
    rect(120, 0, 30, 100); // Middle
  }
  else {
    fill(33,102,134)
    rect(150, 0, 30, 100); // Right
  }
  
  
  if (mouseY < 100) {
    fill(56,25,75,190)
    rect(0, 100, 180, 20);  // Left
  }
  else if (mouseY < 120) {
    fill(33,102,134)
    rect(0, 120, 180, 20); // Middle
  }
  else {
    fill(212,218,150)
    rect(0, 140, 180, 20); // Right
  }
   if (mouseY < 140) {
     fill(226,154,84)
    rect(0, 160, 180, 20);  // Left
  }
  else if (mouseY < 160) {
    rect(0, 180, 180, 20); // Middle
  }
  else {
    fill(212,218,150)
    rect(0, 200, 180, 20); // Right
  }
  
   if (mouseY < 40) {
    rect(180, 0, 40, 40,200);  // Left
  }
  else if (mouseY < 80) {
    fill(212,218,150)
    rect(180, 40, 40, 40); // Middle
  }
  else {
    fill(212,218,150)
    rect(180, 80, 40, 40); // Right
  }
  if (mouseY < 120) {
    rect(180, 120, 40, 40);  // Left
  }
  else if (mouseY < 160) {
    rect(180, 160, 40, 40); // Middle
  }
  else {
    fill(56,25,75,180)
    rect(180, 200, 40, 40); // Right
  }
     
  
   if (mouseX < 25) {
     fill(56,25,75)
    rect(0, 240, 50, 70);  // Left
  }
  else if (mouseX < 50){
    rect(50, 240, 50, 70); // Middle
  }
  else {
    rect(100, 240, 50, 70); // Right
  }
  if (mouseX < 100) {
    fill(56,25,75,100)
    rect(150, 240, 50, 70);  // Left
  }
  else if (mouseX < 150) {
    fill(33,102,134,160)
    rect(200, 240, 50, 70); // Middle
  }
  else {
    rect(250, 240, 50, 70); // Right
  }
  
  if (mouseX < 200) {
    fill(56,25,75)
    rect(300, 240, 50, 70);  // Left
  }
  else if (mouseX < 250) {
    fill(56,25,75)
    rect(350, 240, 50, 70); // Middle
  }
  else {
    fill(33,102,134)
    rect(400, 240, 50, 70); // Right
  }
  
  
  
  if (mouseX < 200) {
    fill(33,102,134,100)
    rect(220, 0, 10, 240);  // Left
  }
  else if (mouseX < 220) {
    rect(230, 0, 10, 240); // Middle
  }
  else {
    rect(240, 0, 10, 240); // Right
  }
  
  if (mouseX < 230) {
    fill(56,25,75)
    rect(250, 0, 10, 240);  // Left
  }
  else if (mouseX < 240) {
    rect(260, 0, 10, 240); // Middle
  }
  else {
    fill(33,102,134)
    rect(270, 0, 10, 240); // Right
  }
  
   if (mouseX < 270) {
    rect(280, 0, 10, 240);  // Left
  }
  else if (mouseX < 280) {
    rect(290, 0, 10, 240); // Middle
  }
  else {
    rect(300, 0, 10, 240); // Right
  }
  
  if (mouseX < 300) {
    rect(310, 0, 10, 240);  // Left
  }
  else if (mouseX < 310) {
    rect(320, 0, 10, 240); // Middle
  }
  else {
    rect(330, 0, 10, 240); // Right
  }
  
   if (mouseY < 100) {
     fill(56,25,75)
    rect(340, 0, 60, 120);  // Left
  }
  else {
   fill(226,154,84)
    rect(340, 120, 60, 120); // Right
  }
  
  
  fill(70,30,98,120)
  if (mouseX < 30) {
    rect(0, 0, 50, 170);  // Left
  }
  
  else if (mouseX < 60) {
  
    rect(50, 0, 50, 170); // Middle
  }
  else {
    
    rect(100, 0, 50, 170); // Right
  }
  if (mouseX < 100) {
    
    rect(150, 0, 50,170);  // Left
  }
  else if (mouseX < 150) {
   
    rect(200, 0, 50, 170); // Middle
  }
  else {
    
    rect(250, 0, 50, 170); // Right
  }
  
  
  
   fill(70,30,98,70)
  if (mouseY < 130) {
    rect(0, 170, 80, 10);  // Left
  }
  
  else if (mouseY < 150) {
  
    rect(0, 180, 80, 10); // Middle
  }
  else {
    
    rect(0, 190, 80, 10); // Right
  }
  
 if (mouseY < 170) {
    rect(0, 200, 80, 10);  // Left
  }
  
  else if (mouseY < 200) {
  fill(33,102,134)
    rect(0, 210, 80, 10); // Middle
  }
  else {
    
    rect(0, 220, 80, 10); // Right
  }
  
   if (mouseY < 210) {
     
    rect(0, 230, 80, 10);  // Left
  }
  
  else if (mouseY < 220) {
  
    rect(0, 240, 80, 10); // Middle
  }
  else {
    fill(226,154,84)
    rect(0, 250, 80, 10); // Right
  }
  
 if (mouseY < 250) {
    rect(0, 260, 80, 10);  // Left
  }
  
  else if (mouseY < 260) {
  
    rect(0, 270, 80, 10); // Middle
  }
  else {
    
    rect(0, 280, 80, 10); // Right
  }
  
   if (mouseY < 270) {
    rect(0, 290, 80, 10);  // Left
  }
  
  else if (mouseY < 280) {
  
    rect(0, 300, 80, 10); // Middle
  }
  
  if(mouseX < 80)
    
  rect(80,170,100,30);
    
  else if (mouseX < 140) {
  
    rect(180, 170, 100,30); // Middle
  }
  else {
    
    rect(300, 170, 100, 30); // Right
  }
  
 if (mouseY < 50) {
   rect(80, 200, 120, 120);  // Left
  }
  
  else if (mouseY < 80) {
  
    rect(200, 200, 120, 120); // Middle
  }
  else {
    
    rect(0, 280, 80, 10); // Right
  }
  
   if (mouseY < 270) {
    rect(0, 290, 80, 10);  // Left
  }
  
  else if (mouseY < 280) {
  
    rect(0, 300, 80, 10); // Middle
  }
  
  
  if (mouseX < 60) {
      fill(212,218,150,170)
    rect(25, 240, 50, 70);  // Left
  }
  else if (mouseX < 75){
    
    rect(75, 240, 50, 70); // Middle
  }
  else {
    fill(226,154,84,100)
    rect(125, 240, 50, 70); // Right
  }
  if (mouseX < 170) {
    
    rect(175, 240, 50, 70);  // Left
  }
  else if (mouseX < 180) {
    fill(33,102,134,190)
    rect(225, 240, 50, 70); // Middle
  }
  else {
    
    rect(275, 240, 50, 70); // Right
  }
  
   if (mouseX < 240) {
   fill(212,218,150,190)
    rect(225, 0, 10, 240);  // Left
  }
  else if (mouseX < 260) {
    
    rect(235, 0, 10, 240); // Middle
  }
  else {
    fill(33,102,134,100,160)
    rect(245, 0, 10, 240); // Right
  }
  
  if (mouseX < 270) {
    
    rect(255, 0, 10, 240);  // Left
  }
  else if (mouseX < 280) {
    fill(212,218,150,190)
    rect(265, 0, 10, 240); // Middle
  }
  else {
   
    rect(275, 0, 10, 240); // Right
  }
  
   if (mouseX < 270) {
     fill(33,102,134,100,100)
    rect(285, 0, 10, 240);  // Left
  }
  else if (mouseX < 280) {
    rect(290, 0, 10, 240); // Middle
  }
  else {
    rect(300, 0, 10, 240); // Right
  }
 
  
   if (mouseY < 40) {
     
    rect(180, 10, 40, 40,200);  // Left
  }
  else if (mouseY < 80) {
    fill(212,218,150,100)
    rect(180, 55, 40, 40); // Middle
  }
  else {
    fill(212,218,150)
    rect(180, 95, 40, 40); // Right
  }
  if (mouseY < 120) {
    fill(56,25,75,80)
    rect(180, 145, 40, 40);  // Left
  }
  else if (mouseY < 160) {
    rect(180, 160, 40, 40); // Middle
  }
  else {
    fill(56,25,75,100)
    rect(180, 220, 40, 40); // Right
  }
     
  
  
  
  if (mouseY < 100) {
    fill(212,218,150,100)
    rect(0, 110, 180, 20);  // Left
  }
  else if (mouseY < 120) {
    fill(56,25,75,80)
    rect(0, 130, 180, 20); // Middle
  }
  else {
    fill(212,218,150)
    rect(0, 140, 180, 20); // Right
  }
   if (mouseY < 140) {
     fill(33,102,134,100,100)
    rect(0, 170, 180, 20);  // Left
  }
  else if (mouseY < 160) {
    rect(0, 180, 180, 20); // Middle
  }
  else {
    fill(33,102,134,100,100)
    rect(0, 210, 180, 20); // Right
  }
  
  
  
  if (mouseX < 30) {
   fill(226,154,84,170)
    ellipse(20, 220, 30, 30);  // Left
  }
  
  else if (mouseX < 20) {
    fill(212,218,150)
    ellipse(50, 220, 30, 30); // Middle
  }
  else {
    fill(33,102,134)
    ellipse(80, 220, 30, 30); // Right
  }
  
  if (mouseX < 20) {
    ellipse(110, 220, 30, 30);  // Left
  }
  
  else if (mouseX < 10) {
    fill(212,218,150)
    ellipse(140, 220, 30, 30); // Middle
  }
  else {
     fill(226,154,84)
    ellipse(170, 220, 30, 30); // Right
  }
  
  if (mouseX < 30) {
    
    rect(10, 0, 30, 100);  // Left
  }
  
  else if (mouseX < 60) {
    fill(33,102,134)
    rect(40, 0, 30, 100); // Middle
  }
  else {
    fill(212,218,150)
    rect(75, 0, 30, 100); // Right
  }
  
  
}
Cookies

Sketch Files

Console

Preview
