Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
const canvas = this||html`<canvas width=${width} height=400></canvas>`;
yield canvas;
const gl = canvas.getContext('webgl');
const vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderRectCode.code);
const fragmentShader = createShader(gl,gl.FRAGMENT_SHADER,fragmentShaderRectCode.code);
// setup GLSL program
const program = createProgram(gl,vertexShader, fragmentShader);
// Create a buffer
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Set Geometry
setRectGeometry(gl);
// Create color buffer
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer);
// Set the colors
setColorsGrad(gl)
// Transforms
var translation = [r2.x, r2.y];
var angleInRadians = r2.angle;
var scale = [r2.scaleX, r2.scaleY];
drawSceneRectColor(gl, program,positionBuffer, translation, angleInRadians,scale, colorBuffer )
invalidation.then(d=>{
gl.deleteProgram(program);
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
})
}
import {slider} from "@jashkenas/inputs"
import {inputsGroup} from "@bumbeishvili/utils"
import {requireScript} from "@bumbeishvili/fetcher"
webglUtils = requireScript('https://webglfundamentals.org/webgl/resources/webgl-utils.js')
m3 = requireScript('https://webglfundamentals.org/webgl/resources/m3.js')
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.
