{
const r = R()
var ctx = NewContext(512, 512)
drawCircle(ctx)
mutable ctxcanvas = ctx.canvas;
var texture = new THREE.CanvasTexture(ctx.canvas)
const resolution = 30;
var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, resolution, resolution, resolution);
var material = new THREE.MeshPhongMaterial( {
// map: texture,
side: THREE.DoubleSide,
displacementMap: texture,
displacementScale: .5,
// wireframe: true,
});
material.displacementMap.needsUpdate = true;
var cube = new THREE.Mesh( geometry, material );
r.scene.add(cube)
var light = new THREE.PointLight( 0xffffff, 5, 10 );
light.position.set( 5, 5, 5 );
r.scene.add( light );
const startTime = Date.now()
while(true) {
yield r.render()
}
}
mutable ctxcanvas = ""
drawLines = (ctx) => {
const lines = 20;
const lineWidth = 3;
const gap = (height - lines * lineWidth) / (lines + 1);
ctx.fillStyle = "white";
for(let i = 0; i < lines; i++) {
const yStart = gap * (i+1) + lineWidth * i;
ctx.fillRect(0, yStart, width, lineWidth);
}
}
drawCircle = (ctx) => {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var x = width / 2,
y = height / 2,
// Radii of the white glow.
innerRadius = 10,
outerRadius = width * .25,
// Radius of the entire circle.
radius = width * 0.24;
var gradient = ctx.createRadialGradient(x, y, innerRadius, x, y, outerRadius);
gradient.addColorStop(0, 'white');
gradient.addColorStop(1, 'black');
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
}
NewContext = (width, height) => {
let canvas = document.createElement('canvas');
canvas.id = "canvas"
canvas.width = width
canvas.height = height
let ctx = canvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height);
return ctx;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
