retrowave.js

"use strict";
const THREE = window.THREE;
const width = window.innerWidth;
const height = window.innerHeight;

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const gridWidth = 50;
const gridLength = 400;
const rectSize = 1;

const pointLight = new THREE.PointLight(0xFFFFFF, 1, gridLength);
pointLight.position.set(gridWidth / 2 * rectSize, 0, 1);
scene.add(pointLight);

const ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.5); // soft white light
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(20, width / height, 1, 1000);
camera.position.set(gridWidth / 2 * rectSize, 0, 5);
camera.lookAt(gridWidth / 2 * rectSize, gridLength, 0);

const clock = new THREE.Clock();
let time = 0;

noise.seed(Math.random());

const grid = [];
function randomGrid() {
  for (let y = 0; y <= gridLength; y++) {
    grid[y] = randomGridRow(y);
  }
}
let yCounter = 0;
let scale = 10;
const roadWidth = 3;
function randomGridRow() {
  yCounter++;
  const row = [];
  for (let x = 0; x <= gridWidth; x++) {
    const n = Math.max(0, noise.simplex2(x / scale, yCounter / scale));
    const r = Math.log(0.0001 + Math.abs(x - gridWidth / 2) / roadWidth);
    row[x] = Math.max(0, Math.pow(n, 2.4) * 5 * r);
  }
  return row;
}
randomGrid();

const geometry = new THREE.BufferGeometry();

const rectLen = 3 * 6;
const gridVertices = gridWidth * gridLength * rectLen;
const vertices = new Float32Array(gridVertices);
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));

function updateVertices() {
  for (let t = 1; t < time; t++) {
    grid.shift();
    grid.push(randomGridRow());
  }
  time = time % 1;
  const shift = -time;

  for (let y = 0; y < gridLength; y++) {
    const offsetY = y * gridWidth * rectLen;
    for (let x = 0; x < gridWidth; x++) {
      const offsetX = x * rectLen;
      const offset = offsetX + offsetY;

      vertices[offset]     = (x) * rectSize;
      vertices[offset + 1] = (y + shift) * rectSize;
      vertices[offset + 2] = (grid[y][x]) * rectSize;
      vertices[offset + 3] = (x + 1) * rectSize;
      vertices[offset + 4] = (y + shift) * rectSize;
      vertices[offset + 5] = (grid[y][x + 1]) * rectSize;
      vertices[offset + 6] = (x + 1) * rectSize;
      vertices[offset + 7] = (y + shift + 1) * rectSize;
      vertices[offset + 8] = (grid[y + 1][x + 1]) * rectSize;

      vertices[offset + 9]  = (x + 1) * rectSize;
      vertices[offset + 10] = (y + shift + 1) * rectSize;
      vertices[offset + 11] = (grid[y + 1][x + 1]) * rectSize;
      vertices[offset + 12] = (x) * rectSize;
      vertices[offset + 13] = (y + shift + 1) * rectSize;
      vertices[offset + 14] = (grid[y + 1][x]) * rectSize;
      vertices[offset + 15] = (x) * rectSize;
      vertices[offset + 16] = (y + shift) * rectSize;
      vertices[offset + 17] = (grid[y][x]) * rectSize;
    }
  }

  geometry.computeFaceNormals();
  geometry.computeVertexNormals();
}

const meshMaterial = new THREE.MeshStandardMaterial({color: 0xa000f0});
const mesh = new THREE.Mesh(geometry, meshMaterial);
scene.add(mesh);

function render() {
  requestAnimationFrame(render);
  // randomGrid();
  updateVertices();

  geometry.attributes.position.needsUpdate = true;

  time += clock.getDelta() * 100;
  renderer.render(scene, camera);
}

window.onload = function () {
  render();
};