c2/demos/webgj_.js

d3 component canvas

function reset (context) {
    context.clearColor(0,0,0,1);
    context.clear(context.COLOR_BUFFER_BIT);
}
const canvas = document.querySelector('canvas'),
context = d3.select(canvas)
    .attr('width',window.innerWidth)
    .attr('height',window.innerHeight)
    .select(c2.ContextWebGL)
    .on('tick',function () {
        reset(this.context)
    }),
model = new Float32Array([
    -0.5, 0.5,  0.0,
    0.5,  -0.5, 0.0,
    -0.5, -0.5, 0.0,

    0.5,  0.5,  0.0,
    -0.5, 0.5,  0.0,
    0.5,  -0.5, 0.0
]),
gl = context.node().context,
vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram(),
Triangle = c2.element(function (context,d,i) {
    const next = mat4.rotate(mat4.create(),mvMatrix,this.t,[1,1,1]);
    mat4.scale(next,next,[this.scale,this.scale,this.scale])
    gl.uniformMatrix4fv(mvMatrixUniform,false,next);
    gl.drawArrays(gl.TRIANGLES,0,numItems)
});


const selection =context.selectAll(Triangle).data([1],function (d,i) {
    return d;
});
selection.enter().append(Triangle)
    .attr('t',0)
    .attr('scale',0.1)
    .merge(selection)
    .transition()
    .ease(d3.easeElastic)
    .duration(10000)
    .attr('t',Math.PI*2)
    .attr('scale',1.5)


gl.shaderSource(vertex_shader,`
    attribute vec3 aVertexPosition;
    uniform mat4 uPMatrix;
    uniform mat4 uMVMatrix;
    void main () {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);
    }
`);
gl.shaderSource(fragment_shader,`
    #ifdef GL_ES
    precision highp float;
    #endif

    uniform vec4 uColor;
    void main () {
        gl_FragColor = uColor;
    }
`);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);

gl.attachShader(program,vertex_shader);
gl.attachShader(program,fragment_shader);
gl.linkProgram(program);

vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vbuffer);
gl.bufferData(gl.ARRAY_BUFFER,model,gl.STATIC_DRAW);

const itemSize = 3,
numItems = model.length / itemSize;

gl.viewport(0,0,canvas.width,canvas.height);
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);

var pMatrix = mat4.create(),
mvMatrix = mat4.create(),
pMatrixUniform = gl.getUniformLocation(program,'uPMatrix'),
mvMatrixUniform = gl.getUniformLocation(program,'uMVMatrix');

gl.uniformMatrix4fv(pMatrixUniform,false,pMatrix);
gl.uniformMatrix4fv(mvMatrixUniform,false,mvMatrix);

program.uColor = gl.getUniformLocation(program,'uColor');
gl.uniform4fv(program.uColor,[0.5,0.0,0.0,1.0]);
program.aVertexPosition = gl.getAttribLocation(program,'aVertexPosition');
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition,itemSize,gl.FLOAT,false,0,0);
gl.drawArrays(gl.TRIANGLES,0,numItems)

/*
 *var model = new Float32Array([
 *     0.0,  1.0, 0.0
 *    -1.0, -1.0, 0.0,
 *     1.0, -1.0, 0.0
 *]),
 */
//gl = context.node().context;

/*
 *reset(context.node().context);
 *
 *const vs = gl.createShader(gl.VERTEX_SHADER);
 *gl.shaderSource(vs,`
 *    attribute vec3 aVertexPosition;
 *    uniform mat4 uPMatrix;
 *    uniform mat4 uMVMatrix;
 *    void main () {
 *        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,1.0);
 *    }
 *`),
 *fs = gl.createShader(gl.FRAGMENT_SHADER);
 *
 *gl.compileShader(vs);
 *if (!gl.getShaderParameter(vs,gl.COMPILE_STATUS)) {
 *    console.error(gl.getShaderInfoLog(vs));
 *}
 *
 *gl.shaderSource(fs,`
 *    #ifdef GL_ES
 *    precision highp float;
 *    #endif
 *
 *    uniform vec4 uColor;
 *    void main () {
 *        gl_FragColor = uColor;
 *    }
 *`);
 *gl.compileShader(fs);
 *if (!gl.getShaderParameter(fs,gl.COMPILE_STATUS)) {
 *    console.error(gl.getShaderInfoLog(fs));
 *}
 */

/*
 *const program = gl.createProgram();
 *gl.attachShader(program,vs);
 *gl.attachShader(program,fs);
 *gl.linkProgram(program);
 */


/*
 *if (!gl.getProgramParameter(program,gl.LINK_STATUS)) {
 *    console.error(gl.getProgramInfoLog(program));
 *} 
 */

/*
 *const vertices = new Float32Array([
 *        -0.5, 0.5,  0.0,
 *        0.5,  -0.5, 0.0,
 *        -0.5, -0.5, 0.0,
 *
 *        0.5,  0.5,  0.0,
 *        -0.5, 0.5,  0.0,
 *        0.5,  -0.5, 0.0
 *]),
 */
/*
 *vbuffer = gl.createBuffer();
 *gl.bindBuffer(gl.ARRAY_BUFFER,vbuffer);
 *gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
 */

/*
 *const itemSize = 3,
 *numItems = vertices.length / itemSize;
 *
 *gl.viewport(0,0,canvas.width,canvas.height);
 *gl.clearColor(0,0,0,1);
 *gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 *
 *gl.useProgram(program);
 *
 *var pMatrix = mat4.create(),
 *mvMatrix = mat4.create(),
 *pMatrixUniform = gl.getUniformLocation(program,'uPMatrix'),
 *mvMatrixUniform = gl.getUniformLocation(program,'uMVMatrix');
 *
 *gl.uniformMatrix4fv(pMatrixUniform,false,pMatrix);
 *gl.uniformMatrix4fv(mvMatrixUniform,false,mvMatrix);
 *
 *program.uColor = gl.getUniformLocation(program,'uColor');
 *gl.uniform4fv(program.uColor,[0.5,0.0,0.0,1.0]);
 *program.aVertexPosition = gl.getAttribLocation(program,'aVertexPosition');
 *gl.enableVertexAttribArray(program.aVertexPosition);
 *gl.vertexAttribPointer(program.aVertexPosition,itemSize,gl.FLOAT,false,0,0);
 *gl.drawArrays(gl.TRIANGLES,0,numItems)
 */

//lol so disappointed
//i cant believe her mom would endorse this shit..she should be embarassed
//how long do you think i should give her...i am thinking about 9, after that i dunno what to do...
//everyone in this world is just so disappointing..seriously everyone....there is no escaping it
//cant depend on any single fucking person seriously...cant even depend on the person i should
//have been able to depend on the most....so fuking disappointed
//so....sad
//.....sad
//nowhere to even go...  i cant even believe this is happening to me....