From rreusser
const draw = regl({
vert: `
precision mediump float;
attribute vec2 xy;
varying vec2 uv;
void main () {
uv = 0.5 * xy + 0.5;
gl_Position = vec4(xy, 0, 1);
}
`,
frag: `
precision mediump float;
varying vec2 uv;
void main () {
gl_FragColor = vec4(uv, 0, 1);
}
`,
attributes: {
xy: [[-4, -4], [0, 4], [4, -4]]
},
depth: {enable: false},
count: 3
});
xxxxxxxxxx
<html>
<head>
<title>points</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta charset=utf-8><meta name="application-name" content="points">
<meta name="subject" content="Smoothly animating points with regl">
<meta name="abstract" content="Smoothly animating points with regl">
<meta name="twitter:title" content="points">
<meta name="description" content="Smoothly animating points with regl">
<meta name="twitter:description" content="Smoothly animating points with regl">
<meta name="author" content="Ricky Reusser">
<meta name="twitter:creator" content="Ricky Reusser">
<meta name="twitter:card" content="summary">
<meta itemprop="title" content="points">
<meta itemprop="description" content="Smoothly animating points with regl">
<meta property="og:title" content="points">
<meta property="og:description" content="Smoothly animating points with regl">
<meta property="article:author" content="Ricky Reusser">
<style type="text/css">.github-corner{display:block;position:absolute;top:0;left:auto;right:0;z-index:10000}.github-corner svg{display:block}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%{transform:rotate(0)}20%{transform:rotate(-25deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-25deg)}80%{transform:rotate(10deg)}100%{transform:rotate(0)}}@media(max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></head>
<body><a href="https://github.com/rreusser/smoothly-animating-points-with-regl" class="github-corner" aria-label="View source on Github"><svg xmlns="https://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#fff">
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#333"/>
<path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/>
<path class="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
</svg>
</a></body>
<script>
</script>
</html>