​

function preload() {

  gradientShader = loadShader('gradient.vert', 'gradient.frag');

}

​

var world,

  ground,

  lastTime,

  fixedTimeStep = 1 / 60,

  maxSubSteps = 3,

  boxes = [],

  boxCreationInterval = 6000,

  lastBoxCreationTime = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

​

  let fov = PI / 3;

  let nearClip = 0.1;

  let farClip = 50000;

  perspective(fov, width / height, nearClip, farClip);

​

  let cameraX = 0;

  let cameraY = 7000;

  let cameraZ = 1000;

  let centerX = 0;

  let centerY = 0;

  let centerZ = 0;

  let upX = 0;

  let upY = 1;

  let upZ = 0;

  camera(cameraX, cameraY, cameraZ, centerX, centerY, centerZ, upX, upY, upZ);

  document.oncontextmenu = () => false;

  init();

}

​

function init() {

  world = new CANNON.World();

  world.gravity.set(0, 0, -100); // m/s²

​

  // Create a plane

  ground = new CANNON.Body({

    mass: 0, // mass=0 will produce a static body automatically

  });

  ground.addShape(new CANNON.Plane());

  world.addBody(ground);

  lastTime = second();

​

  // Initialize last box creation time

  lastBoxCreationTime = millis();

}

​

function draw() {

  background(0);

  orbitControl();

​

  push();

  noStroke();

  noFill();

  translate(0, 0, 0);

  plane(1500);

  pop();

​

  // Calculate delta time in seconds for physics step

  var currentTime = millis();

  var dt = (currentTime - lastTime) / 1000; // Convert milliseconds to seconds

​

  if ((currentTime - lastBoxCreationTime >= boxCreationInterval || boxes.length === 0) && boxes.length < 20) {

    createBox();

    lastBoxCreationTime = currentTime; // Update last box creation time

  }

​

  world.step(fixedTimeStep, dt, maxSubSteps);

  lastTime = currentTime; // Update lastTime for the next draw call

​

  boxes.forEach(function (box) {

    drawBox(box);

  });

}

​

function createBox() {

  var box = new CANNON.Body({

    mass: 300, // kg

    position: new CANNON.Vec3(

      (Math.random() - 0.5) * 200,

      (Math.random() - 0.5) * 200,

      3000

    ), // Random position

    shape: new CANNON.Box(new CANNON.Vec3(200, 200, 200)),

  });

  world.addBody(box);

  boxes.push(box);

}

​

function drawBox(boxBody) {

  push();

  noStroke(); 

  translate(boxBody.position.x, boxBody.position.y, boxBody.position.z);

​

  let rot = new CANNON.Vec3();

  boxBody.quaternion.toEuler(rot);

  rotateY(rot.y);

  rotateZ(rot.z);

  rotateX(rot.x);

  shader(gradientShader);

  let dynamicGradientScale = map(boxBody.position.z, 3000, 0, 0.000001, 0.00025);

  dynamicGradientScale = constrain(dynamicGradientScale, 0.000001, 0.00025); // Ensure it stays within a reasonable range

​

  // Update and set the uniform for the current z-position

  gradientShader.setUniform("uZPosition", boxBody.position.z);

  gradientShader.setUniform("uGlobalZPosition", boxBody.position.z);

  gradientShader.setUniform("uGradientScale", dynamicGradientScale);

  box(400);

  pop();

}

​