The avatar for @adamocarolli
Adamo Carolli
https://twitter.com/adamocarolli
Published
Edited
Apr 8, 2021
Insert cell
Insert cell
Insert cell
canvas = html`<canvas width=640 height=480>`
Insert cell
Insert cell
app = picogl.createApp(canvas)
.clearColor(0, 0, 0, 1);
Insert cell
Insert cell
program = app.createProgram(vertexShader, fragShader)
Insert cell
Insert cell
positions = app.createVertexBuffer(picogl.FLOAT, 2, new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]))
Insert cell
colors = app.createVertexBuffer(picogl.FLOAT, 3, new Float32Array([
1.0, 0.0, 0.0,
0.0, 1.0, 0.0,
0.0, 0.0, 1.0
]))
Insert cell
triangleArray = app.createVertexArray()
.vertexAttributeBuffer(0, positions)
.vertexAttributeBuffer(1, colors)
Insert cell
drawCall = app.createDrawCall(program, triangleArray)
Insert cell
Insert cell
draw = {
app.clear();
drawCall.draw();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
picogl = require('picogl@0.17.3/build/picogl.min.js')
Insert cell

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.
Learn more