this iteration tweaks the color values inside of regl.frame() just a bit, mixing sine and cosine and speeding up the color transition
an es2015 iteration on the block regl-demo from @adamrpearce
mirrored at https://github.com/micahstubbs/regl-experiments/tree/master/03
<!DOCTYPE html>
<html>
<head>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta charset=utf-8>
</head>
<body>
</body>
<script language='javascript' src='https://npmcdn.com/regl/dist/regl.js'></script>
<script src='vis.js'></script>
</html>
# safe
lebab --replace vis.js --transform arrow
lebab --replace vis.js --transform for-of
lebab --replace vis.js --transform for-each
lebab --replace vis.js --transform arg-rest
lebab --replace vis.js --transform arg-spread
lebab --replace vis.js --transform obj-method
lebab --replace vis.js --transform obj-shorthand
lebab --replace vis.js --transform multi-var
# unsafe
lebab --replace vis.js --transform let
lebab --replace vis.js --transform template/* global createREGL */
console.clear();
const regl = createREGL();
const drawTriangle = regl({
vert: `
precision mediump float;
attribute vec2 position;
varying vec3 fcolor;
void main () {
fcolor = abs(vec3(position.x, 0, position.y));
gl_Position = vec4(position, 0, 1);
}
`,
frag: `
precision mediump float;
varying vec3 fcolor;
void main (){
gl_FragColor = vec4(fcolor, 1);
}
`,
attributes: {
position: [
[1, 0],
[0, 1],
[-1, -1],
],
},
count: 3,
});
regl.frame(() => {
// http://stackoverflow.com/questions/2552676/change-the-color-of-a-vertex-in-a-vertex-shader
const r = 0.5 * (1 + Math.cos(Date.now() / 1000));
const g = 0.5 * (1 + Math.sin(Date.now() / 1000));
const b = 1;
const a = 1;
regl.clear({
color: [r, g, b, a],
depth: 1,
});
drawTriangle();
});