travelers

// engineer: jWiliamDunn 2024.1204

// 3d version

​

// 15.5% scripting utilization

​

let lerpTime=0.5; // lerpTime is duration of move in seconds

​

let items=150;   // number of objects

let side=25;

​

let thing=[], tt, MinJerk = t => (6*t*t-15*t+10)*t*t*t;

class Item {

  constructor(id){

    this.x=random(width); 

    this.y=random(height);

    this.initialize();

    //this.color = "hsla("+floor(360*id/items)+", 100%, 22%, 0.75)"

    let half=floor(items/2);

    if(id<half) {

      this.color = "hsla(220, 80%, 32%, "+id/half+")";

      this.edge = "hsla(220, 80%, 32%, 0.5)"

    }

    else {

      this.color = "hsla(40, 80%, 32%, "+(id-half)/half+")";

      this.edge = "hsla(40, 80%, 32%, 0.5)"

    }

    //this.edge = "hsl("+floor(360*id/items)+", 100%, 35%)"

    this.z = id-half;

  }

  initialize(){

    this.isMoving = true;

    this.progress = 0;

    this.startX = this.x;

    this.startY = this.y;

    if(random()>0.5) {

      this.targetX = this.x+random(-50,50); this.targetY=this.y;

      if(this.targetX>width-side) this.targetX=width-side;

      if(this.targetX<0) this.targetX=0;

    }

    else {

      this.targetY = this.y+random(-50,50); this.targetX=this.x;

      if(this.targetY>height-side) this.targetY=height-side;

      if(this.targetY<0) this.targetY=0;

    }

  }

  render(){

    stroke(this.edge);

    fill(this.color);

    push();

    translate(this.x,this.y,-this.z);

    box(side,side,1); 

    pop();

  }

  update(){

    // Lerp position

    this.x = this.startX + (this.targetX - this.startX)*MinJerk(this.progress);

    this.y = this.startY + (this.targetY - this.startY)*MinJerk(this.progress);

    // Update progress. 'deltaTime' is the number of millisecs to draw last frame

    this.progress += (deltaTime / 1000) / lerpTime;

    if (this.progress > 1) {

      this.isMoving = false;

      //this.initialize();

    }

  }

}

document.oncontextmenu=()=> false;

var cam;

var camState = {

  distance: 770,

  center  : [458, 371, -117],

  rotation: [0.9, 0.29, 0.2, -0.29],

};

​

function keyPressed(){

  if(key=='c') console.log(cam.getState()); // useful for setting initial state

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  cam = createEasyCam({distance:450});

  for(let i=0;i<items;i++)

    thing[i] = new Item(i);

  tt = millis() + 1000; // targetTime = current + 1000ms

  frameRate(24);

  // set initial camera state

  cam.setState(camState, 1000); // animate to camState on 1 second

  cam.state_reset = camState; // state to use on reset

}

​

function draw() {

  if(!cam) return;

  let dt=0; // delta

  ct = millis();

  dt = tt-ct; // compute and scale to seconds

  if(dt<-2000)tt=millis() + 1000;//handle sleep issue

  background(0);

  for(let i=0;i<items;i++){

    thing[i].render();

    if(thing[i].isMoving) thing[i].update();

  }

  if(dt<=0){

    for(let i=0;i<items;i++)thing[i].initialize();

    tt += 1000; // advance target time

  }

}