3DCube Random Walker

// rotate around the look-at point (it will feel like the object is moving)

​

// mouse: left-click and drag

// touch: one-finger drag

// pan the scene

​

// mouse: middle-click and drag 

// touch: two-finger drag

// zoom out/in

​

// mouse: right-click drag down/up

// touch: pinch/spread

// reset to the starting state

​

// mouse: double-click

// touch: double-tap

​

​

var boxes = [];

var walker;

var stepCnt = 5  //amount of movement in x,y,z and also size of box

var cChangeRate = 0 // rate that color cycles through HSB spectrum

let slider1

let slider2

​

function setup() {

  document.oncontextmenu = () => false; //removes right click functionality

  createCanvas(windowWidth, windowHeight, WEBGL);

  colorMode(HSB);

  createEasyCam(); //using easycam library on OpenProcessing

​

  walker = new RndWalker(0, 0, 0, stepCnt);

  boxes.push(createVector(0, 0, 0));

​

  slider1 = createSlider(0.1,3,1,0.1) //affects cChangeRate

  slider1.position(10,10)

  slider2 = createSlider(0.1,1,0.1,0) //affects cChangeRate

  slider2.position(150,10)

​

}

​

function draw() {

​

  background(100);

  //lights();

  frameRate(10);

​

  walker.move();

  let pos = walker.getPos();

​

  boxes.push(createVector(pos.x, pos.y, pos.z));

 let c = 0

  boxes.forEach((nbox) => {

    push();

    //stroke(255)

  noStroke();

      fill(c,100,100,slider2.value());

    strokeWeight(1)

    translate(nbox.x, nbox.y, nbox.z);

    box(stepCnt, stepCnt, stepCnt);

    //xoff += .01

    pop();

    cChangeRate = slider1.value();

    c += cChangeRate

    if (c >= 360){

      c = 0

    }

  });

​

}

​

class RndWalker {

  constructor(x, y, z, stepCnt) {

    this.pos = createVector(x, y, z)

    this.stepCnt = stepCnt

    this.dir = [

      createVector(stepCnt, 0, 0), // positive x

      createVector(-stepCnt, 0, 0), // negative x

      createVector(0, stepCnt, 0), //positive y

      createVector(0, -stepCnt, 0), // negative y

      createVector(0, 0, stepCnt), // positive z

      createVector(0, 0, -stepCnt) // negative z      

    ];

​

  }

​

  getPos() {

    return this.pos;

​

  }

​

  move() {

    let step = random(this.dir);

    this.pos.add(step);

  }

}