p5.js Web Editor | mondrian_heng

xxxxxxxxxx
let colors1 = ['#FFFFF','#AAAAA1'];
let colors2 = ['#FCFFC','#DAAA11'];
let walker1 = new Walker(colors1,100, 50);
let walker2 = new Walker(colors2,100, 50);
​
​
class Walker {
  constructor(colors, xbound1,ybound1) {
    this.x = width/2;
    this.y = height/2;
    this.colors = ________;
    this.xbound1 = _____;
    this.ybound1 = _____;
  
}
​
​
class Walker1 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#F7231F");
      this.x += 10;
    } else if (choice == 1) {
      fill("#F5680B");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#EA6B65");
      this.y += 10;
    } else {
      fill("#F72060");
      this.y -= 10;
    }
    this.x = constrain(this.x, 130, width);
    this.y = constrain(this.y, 0, height - 130);
  }
}
​
class Walker2 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#E6E4DF");
      this.x += 10;
    } else if (choice == 1) {
      fill("#FFFFFF");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#EAEAEA");
      this.y += 10;
    } else {
      fill("#D3D3D3");
      this.y -= 10;
    }
    this.x = constrain(this.x, 0, 100);
    this.y = constrain(this.y, 0, 160);
  }
}
​
class Walker3 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#E8E8E6");
      this.x += 10;
    } else if (choice == 1) {
      fill("#FFFFFF");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#EAEAEA");
      this.y += 10;
    } else {
      fill("#D3D3D3");
      this.y -= 10;
    }
    this.x = constrain(this.x, 0, 100);
    this.y = constrain(this.y, 200, 370);
  }
}
​
class Walker4 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#015D9E");
      this.x += 10;
    } else if (choice == 1) {
      fill("#005CE7");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#669AE7");
      this.y += 10;
    } else {
      fill("#A9C2E7");
      this.y -= 10;
    }
    this.x = constrain(this.x, 0, 100);
    this.y = constrain(this.y, 400, height);
  }
}
​
class Walker5 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#E6E4DF");
      this.x += 10;
    } else if (choice == 1) {
      fill("#FFFFFF");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#EAEAEA");
      this.y += 10;
    } else {
      fill("#D3D3D3");
      this.y -= 10;
    }
    this.x = constrain(this.x, 130, 450);
    this.y = constrain(this.y, 400, height);
  }
}
​
class Walker6 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#E6E4DF");
      this.x += 10;
    } else if (choice == 1) {
      fill("#FFFFFF");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#EAEAEA");
      this.y += 10;
    } else {
      fill("#D3D3D3");
      this.y -= 10;
    }
    this.x = constrain(this.x, 470, width);
    this.y = constrain(this.y, 400, 440);
  }
}
​
class Walker7 {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  render() {
    noStroke();
    ellipse(this.x, this.y, 6, 6);
  }
​
  step() {
    var choice = floor(random(4));
    if (choice === 0) {
      fill("#EDDC6A");
      this.x += 10;
    } else if (choice == 1) {
      fill("#B2A550");
      this.x -= 10;
    } else if (choice == 2) {
      fill("#FFEC72");
      this.y += 10;
    } else {
      fill("#FFECB2");
      this.y -= 10;
    }
    this.x = constrain(this.x, 470, 500);
    this.y = constrain(this.y, 470, 500);
  }
}
Cookies

Sketch Files

Console

Preview
