webgl developer @ Superhero Cheesecake in Amsterdam
Published
Edited
Aug 23, 2019
2 forks
17 stars
{
const canvas = DOM.canvas(256, 256);
const ctx = canvas.getContext('2d');
// set color for triangle
ctx.fillStyle = '#ff0000';
ctx.beginPath(); // start a new path
ctx.moveTo(0, 0); // set starting point0
ctx.lineTo(0, 256); // set point1
ctx.lineTo(256, 256); // set point2
ctx.fill(); // Filled fill 3 points points
return canvas;
}
{
const canvas = DOM.canvas(256, 256);
const gl = canvas.getContext('webgl');
// create shaders(vertex, fragment)
const vertexShaderSrc = `
attribute vec4 position;
void main() {
gl_Position = position; // define vertex position
}
`
const fragmentShaderSrc = `
precision mediump float;
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); // fill the triangle with red color
}
`
// creatae program
let program = gl.createProgram();
// compile vertex shader
let vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSrc);
gl.compileShader(vShader);
// compile fragment shader
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSrc);
gl.compileShader(fShader);
// link compiled shader to program
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
// make buffer for triangle vertex positions
var vertices = new Float32Array([
-1, 1, // top left
-1, -1, // bottom left
1, -1 // bottom right
]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var vertexLocation = gl.getAttribLocation(program, 'position');
// set viewport before drawing
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
// define what program for drawing(rendering)
gl.useProgram(program);
// use buffer as triangle vertex position
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
// drawing
gl.drawArrays(gl.TRIANGLES, 0, 3);
return canvas;
}
{
const canvas = DOM.canvas(256, 256);
const ctx = canvas.getContext('2d');
let startTime = +new Date;
let rad = 128;
while (true) {
ctx.clearRect(0, 0, 256, 256);
let curDuration = +new Date - startTime;
let theta0 = curDuration/1000;
let theta1 = theta0 + Math.PI * 2 / 3;
let theta2 = theta1 + Math.PI * 2 / 3;
// set color for triangle
ctx.fillStyle = '#ff0000';
ctx.beginPath(); // start a new path
ctx.moveTo(rad * Math.cos(theta0) + 128, rad * Math.sin(theta0) + 128); // set starting point0
ctx.lineTo(rad * Math.cos(theta1) + 128, rad * Math.sin(theta1) + 128); // set point1
ctx.lineTo(rad * Math.cos(theta2) + 128, rad * Math.sin(theta2) + 128); // set point2
ctx.fill(); // Filled fill 3 points points
yield canvas;
}
}
{
const canvas = DOM.canvas(256, 256);
const gl = canvas.getContext('webgl');
// create shaders(vertex, fragment)
const vertexShaderSrc = `
attribute vec4 position;
void main() {
gl_Position = position; // define vertex position
}
`
const fragmentShaderSrc = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // fill the triangle with red color
}
`
// creatae program
let program = gl.createProgram();
// compile vertex shader
let vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSrc);
gl.compileShader(vShader);
// compile fragment shader
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSrc);
gl.compileShader(fShader);
// link compiled shader to program
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
// make buffer for triangle vertex positions
let rad = 1;
var vertices = new Float32Array([
-1, 1, // top left
-1, -1, // bottom left
1, -1 // bottom right
]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var vertexLocation = gl.getAttribLocation(program, 'position');
// set viewport before drawing
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
let startTime = +new Date;
while (true) {
gl.clear(gl.COLOR_BUFFER_BIT);
// define what program for drawing(rendering)
gl.useProgram(program);
let curDuration = +new Date - startTime;
let theta0 = curDuration/1000;
let theta1 = theta0 + Math.PI * 2 / 3;
let theta2 = theta1 + Math.PI * 2 / 3;
vertices = new Float32Array([
Math.cos(theta0), Math.sin(theta0),
Math.cos(theta1), Math.sin(theta1),
Math.cos(theta2), Math.sin(theta2)]);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, vertices);
gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
gl.drawArrays(gl.TRIANGLES, 0, 3);
yield canvas;
}
}
{
const canvas = DOM.canvas(256, 256);
const gl = canvas.getContext('webgl');
// create shaders(vertex, fragment)
const vertexShaderSrc = `
attribute vec4 position;
uniform float uAngle;
mat2 rotate2d(float _angle){
return mat2(cos(_angle),-sin(_angle),
sin(_angle),cos(_angle));
}
void main() {
vec2 rotatedPosition = rotate2d(uAngle) * position.xy;
gl_Position = vec4(rotatedPosition.xy, position.zw); // define vertex position
}
`
const fragmentShaderSrc = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // fill the triangle with red color
}
`
// creatae program
let program = gl.createProgram();
// compile vertex shader
let vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSrc);
gl.compileShader(vShader);
// compile fragment shader
let fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSrc);
gl.compileShader(fShader);
// link compiled shader to program
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
// make buffer for triangle vertex positions
var vertices = vertices = new Float32Array([
Math.cos(0), Math.sin(0),
Math.cos(2 * Math.PI/3), Math.sin(2 * Math.PI/3),
Math.cos(2 * Math.PI/3 * 2), Math.sin(2 * Math.PI/3 * 2)]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var vertexLocation = gl.getAttribLocation(program, 'position');
var uAngleUniformLocation = gl.getUniformLocation(program, 'uAngle');
// set viewport before drawing
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
let startTime = +new Date;
while (true) {
var curDuration = +new Date - startTime;
gl.clear(gl.COLOR_BUFFER_BIT);
// define what program for drawing(rendering)
gl.useProgram(program);
//
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer( vertexLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
// update uniform value
gl.uniform1f(uAngleUniformLocation, curDuration/1000);
gl.drawArrays(gl.TRIANGLES, 0, 3);
yield canvas;
}
}
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.
