simpleRandomWalk - OpenProcessing

mySketch
xxxxxxxxxx
 
let walker;
let offset = 20; //offset und radius sollten % 0 von width sein
let radius = 20;
let rest;
​
function setup() {
  createCanvas(400, 400);
  walker = new Walker();
  ellipseMode(CENTER);
  background(0);
}
​
function draw() {
  frameRate(random(5, 40));
  walker.step();
  walker.show();
}
​
class Walker {
  constructor() {
    this.x = width / 2;
    this.y = height / 2;
  }
​
  show() {
    noStroke;
    let col = floor(random(4));
    if (col === 0) {
      fill(255, random(120, 150), 120, random(150, 220));
    } else if (col === 1) {
      fill(255, 0, random(170, 200), random(150, 220));
    } else if (col === 2) {
      fill(225, random(50, 80), 100, random(150, 220));
    } else if (col === 3) {
      fill(random(170, 200), 0, 0, random(150, 220));
    }
    ellipse(this.x, this.y, radius, radius);
  }
​
  step() {
    let choice = floor(random(4));
    if (choice === 0) {
      this.x += offset;
    } else if (choice === 1) {
      this.x -= offset;
    } else if (choice === 2) {
      this.y += offset;
    } else if (choice === 3) {
      this.y -= offset;
    }
​
    // Grenzprüfungen, damit der Punkt im Canvas bleibt
    this.x = constrain(this.x, 0 + offset, width - offset);
    this.y = constrain(this.y, 0 + offset, height - offset);
  }
}
​