adding utils

examples/canvas-random.js

@@ -0,0 +1,69 @@
+const canvasSketch = require('canvas-sketch'); // not yet released
+const Random = require('./util/random');
+const { lerp } = require('./util/math');
+
+// We can force a random seed or a specific string/number
+Random.setSeed(Random.getRandomSeed());
+
+const settings = {
+  pixelsPerInch: 300,
+  // When exporting, use the seed as the suffix
+  // This way we can reproduce it more easily later
+  suffix: Random.getSeed(),
+  dimensions: [ 7, 11 ],
+  units: 'in'
+};
+
+const sketch = ({ width, height }) => {
+  const margin = 0;
+
+  const sliceCount = 80000;
+  const slices = Array.from(new Array(sliceCount)).map((_, i, list) => {
+    const t = list.lenth <= 1 ? 0 : i / (list.length - 1);
+
+    const noiseAngle = t * Math.PI * 2;
+    const nx = Math.cos(noiseAngle);
+    const ny = Math.sin(noiseAngle);
+    const nf = 0.05 + Random.range(0, 0.5);
+    const amplitude = 2;
+    const noise = Random.noise2D(nx * nf, ny * nf);
+    const noise01 = noise * 0.5 + 0.5;
+
+    const tOffset = Random.gaussian() * 0.01;
+
+    const cx = width / 2;
+    const x = cx + noise * amplitude;
+    return {
+      alpha: Random.range(0.5, 1) * (1 - noise01),
+      color: 'white',
+      lineWidth: Random.range(0.005, 0.02) * 0.1,
+      length: Random.gaussian() * noise01 * 0.5,
+      angle: Random.range(-1, 1) * noise01 * 40 * Math.PI / 180,
+      x,
+      y: lerp(margin, height - margin, t + tOffset)
+    };
+  });
+
+  return ({ context }) => {
+    context.globalCompositeOperation = 'source-over';
+    context.fillStyle = 'black';
+    context.fillRect(0, 0, width, height);
+    context.globalCompositeOperation = 'lighter';
+
+    slices.forEach(slice => {
+      context.save();
+      context.beginPath();
+      context.translate(slice.x, slice.y);
+      context.rotate(slice.angle);
+      context.lineTo(slice.length / 2, 0);
+      context.lineTo(-slice.length / 2, 0);
+      context.lineWidth = slice.lineWidth;
+      context.strokeStyle = slice.color;
+      context.globalAlpha = slice.alpha;
+      context.stroke();
+      context.restore();
+    });
+  };
+};
+
+canvasSketch(sketch, settings);

examples/ktx-test.js

@@ -0,0 +1,45 @@
+const canvasSketch = require('canvas-sketch'); // not yet released
+const Random = require('./util/random');
+const { lerp } = require('./util/math');
+const { vec2 } = require('gl-matrix');
+const createKtx = require('./util/ktx');
+
+const settings = {
+  dimensions: [ 8, 11 ],
+  units: 'in',
+  context: 'webgl',
+  animation: false,
+  attributes: {
+    premultipliedAlpha: true,
+    antialias: true // turn on MSAA
+  }
+};
+
+const sketch = ({ gl, width, height }) => {
+  const ktx = createKtx({ gl });
+
+  const pointCount = 1000;
+  const points = Array.from(new Array(pointCount)).map(() => {
+    return vec2.add([], [ width / 2, height / 2 ], Random.insideBox([], width / 2));
+  });
+
+  const drawPoint = ktx.rect();
+
+  return ({ gl, width, height, time }) => {
+    ktx.update({ width, height });
+    ktx.clear({ color: 'white', alpha: 1 });
+
+    points.forEach(position => {
+      drawPoint({
+        position,
+        pivot: [ 0.5, 0.5 ],
+        scale: 0.25,
+        alpha: 0.5
+      });
+    });
+
+    gl.flush();
+  };
+};
+
+canvasSketch(sketch, settings);

examples/regl-fullscreen-shader.js

@@ -3,7 +3,7 @@ const createRegl = require('regl');
 const createQuad = require('primitive-quad');
 const glslify = require('glslify');
 const path = require('path');
-const tween = require('./util/tween-value');
+const tween = require('./util/tween');
 
 // Setup our sketch
 const settings = {

examples/util/ktx-idea.js

@@ -0,0 +1,27 @@
+const opts = {
+  fill: 'red', // true -> black
+  stroke: 'blue', // true -> black
+  alpha: 0.5,
+  lineWidth,
+  lineCap,
+  lineJoin,
+  vertex,
+  fragment,
+  blend,
+  projection,
+  view,
+  uniforms
+};
+
+const line = ktx.line([ [ 25, 25 ], [ 20, 10 ] ], {});
+const polyline = ktx.polyline([ [ 25, 10 ], [ 20, 10 ], [ 20, 30 ] ], {});
+const circle = ktx.circle([ 25, 10 ], 5, {});
+const poly = ktx.polygon([
+  [ [ 25, 10 ], [ 30, 30 ], [ 20, 10 ] ]
+], {});
+const mesh = ktx.mesh({ cells, positions, normals, uvs });
+const rect = ktx.rect([ 25, 10, 50, 50 ], {});
+const points = ktx.pointCloud([ [ 15, 10 ], [ 10, 10 ] ], {});
+
+ktx.clear();
+ktx.clear({ rect: [ 0, 0, 10, 10 ], color: 'red', alpha: 0.5 });