👋 Observable Javascript

Showing off another experimental feature, built on the observable runtime.

a + b
Observable Javascript
viewof a = html`<input type=range>`
Observable Javascript
b = -8
Observable Javascript
{
  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;
  }
}
Observable Javascript
{
  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;
  }
}
Observable Javascript
scene = {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);
  scene.add(cube);
  return scene;
}
Observable Javascript
cube = {
  const material = new THREE.MeshNormalMaterial();
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  return new THREE.Mesh(geometry, material);
}
Observable Javascript
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;
}
Observable Javascript
height = 600
Observable Javascript
THREE = require("three@0.99.0/build/three.min.js")
Observable Javascript
Runtimes (1)