👋 Observable Javascript

a + b

viewof a = html`<input type=range>`

b = -8

{

  const height = 33;

  const context = DOM.context2d(width, height);

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

    const t = i / width;

    const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2);

    const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2);

    const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2);

    context.fillStyle = `rgb(${r},${g},${b})`;

    context.fillRect(i, 0, 1, height);

    yield context.canvas;

  }

}

{

  const renderer = new THREE.WebGLRenderer({antialias: true});

  invalidation.then(() => renderer.dispose());

  renderer.setSize(width, height);

  renderer.setPixelRatio(devicePixelRatio);

  while (true) {

    cube.rotation.x += 0.01;

    cube.rotation.y += 0.01;

    renderer.render(scene, camera);

    yield renderer.domElement;

  }

}

scene = {

  const scene = new THREE.Scene();

  scene.background = new THREE.Color(0xffffff);

  scene.add(cube);

  return scene;

}

cube = {

  const material = new THREE.MeshNormalMaterial();

  const geometry = new THREE.BoxGeometry(1, 1, 1);

  return new THREE.Mesh(geometry, material);

}

camera = {

  const fov = 45;

  const aspect = width / height;

  const near = 1;

  const far = 1000;

  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  camera.position.z = 3;

  return camera;

}

height = 600

THREE = require("three@0.99.0/build/three.min.js")