)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Draw an Egg on Canvas Javascript

  1. const TWO_PI = Math.PI * 2;
  2. const THREE_PI = 3 * Math.PI;
  3. const canvas = document.body.appendChild(
  4.   document.createElement('canvas')
  5. );
  6.  
  7. const c = canvas.getContext('2d');
  8. const halfWidth = (canvas.width = 250) / 2;
  9. const halfHeight = (canvas.height = 250) / 2;
  10.  
  11. const scale = 10;
  12.  
  13. c.fillStyle = '#f0e195';
  14. c.strokeStyle = '#c2a272';
  15. c.beginPath();
  16.  
  17. for (let theta = 0; theta <= TWO_PI; theta += 0.02) {
  18.   const x = (TWO_PI - Math.sin(theta)) * Math.cos(theta);
  19.   const y = THREE_PI * Math.sin(theta);
  20.   c.lineTo(halfWidth + x * scale, halfHeight - y * scale);
  21. }
  22.  
  23. c.fill();
  24. c.stroke();

Draw a parametric egg curve…

// canvas // javascript // math

Write An Array of Files in Node

  1. const fs = require('fs');
  2.  
  3. function writeNextFile(file, content, files, done) {
  4.   fs.writeFile(file, content + '\n', () => {
  5.     const next = files.shift();
  6.     if (!next && done != null) {
  7.       done();
  8.       return;
  9.     }
  10.     writeNextFile(next.file, next.content, files, done);
  11.   });
  12. }
  13. function writeFiles(files, cb) {
  14.   const curr = files.shift();
  15.   writeNextFile(curr.file, curr.content, files, cb);
  16. }
  17.  
  18. writeFiles(
  19.   [
  20.     {
  21.       file: 'zevan1.txt',
  22.       content: 'hello world'
  23.     },
  24.     {
  25.       file: 'zevan2.txt',
  26.       content: 'goodbye world'
  27.     },
  28.     {
  29.       file: 'confusing.txt',
  30.       content: 'greetings world'
  31.     }
  32.   ],
  33.   () => {
  34.     console.log('done');
  35.   }
  36. );

Wrote this snippet for a friend a few weeks back… I don’t do tons of node, so maybe there is a better way but….

// io // javascript // node

Hermit Crab Curves

  1. // six white geometric figures (outlines) superimposed on a black wall.
  2. d = document
  3. b = d.body
  4. S = 600
  5. hs = S / 2
  6. with(Math) {
  7. with(
  8.   b.appendChild(Object.assign(
  9.   d.createElement`canvas`, { width: S, height: S })
  10.   ).getContext`2d`) {
  11.  
  12.     fillRect(0, 0, S, S)
  13.     strokeStyle = '#fff'
  14.  
  15.     canvas.style.transformOrigin = '0 0'
  16.     canvas.style.transform = 'scale(.5)'
  17.  
  18.     lineWidth = 8
  19.  
  20.     H = (
  21.       s = S * .5,
  22.       yp = hs, xp = hs,
  23.       a = 1.234,
  24.       d = 0.1678,
  25.       o = 3.9
  26.       ) => {
  27.         beginPath()
  28.         for (t = 0; t < 6.28; t+=.2) {
  29.           r = sqrt(a ** PI % sin(d * (t ** 2 * a) + o)) * s
  30.           x = xp + r * sin(t);
  31.           y = yp + r * cos(t);
  32.           t === 0 ? moveTo(x, y) : lineTo(x, y)
  33.         }
  34.         closePath()
  35.         stroke()
  36.         fill()
  37.     }
  38.  
  39.     tick = 0
  40.     loop = _ => {
  41.       fillStyle = 'rgba(0, 0, 0, 0.5)'
  42.       fillRect(0, 0, S, S)
  43.       save()
  44.       translate(S/2, S/2)
  45.       scale(.5, .5)
  46.       rotate(tick * 20)
  47.       translate(-S/2, -S/2)
  48.       tick += .0001
  49.       globalAlpha = .8;
  50.       H(S, hs, hs, 1 + tick)
  51.       H(S, hs, hs, 1.1 + tick)
  52.       H(S, hs, hs, 1.2 + tick)
  53.       globalAlpha = 1;
  54.       H(S * .3, hs-S/4, hs, 1, tick)
  55.       H(S * .2, hs+S/4, hs, 1.2, tick, 1.8)
  56.       H(S * .2, hs, hs - S/4, cos(tick), -tick, 5)
  57.       restore()
  58.       requestAnimationFrame(loop)
  59.     }
  60.     loop()
  61.   }
  62. }

Another thing for #genuary2022… Sol LeWitt Wall Drawing

// animation // canvas // graphics // hacks // javascript // math

Dividing Squares

  1. d = document
  2. b = d.body
  3. S = 300
  4. with(
  5.   b.appendChild(Object.assign(
  6.   d.createElement`canvas`, { width: S, height: S })
  7.   ).getContext`2d`) {
  8.  
  9.   seed = Math.random();
  10.  
  11.   rando = () => {
  12.     seed = seed * 16807 % 0x7fffffff
  13.     return (seed - 1) / 0x7ffffffe
  14.   }
  15.  
  16.   squares = {}
  17.   rot = (
  18.     cx, cy, X, Y, ang,
  19.     cos = Math.cos(-ang),
  20.     sin = Math.sin(-ang),
  21.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  22.     y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })
  23.  
  24.   inc = 0
  25.   breaks = 0
  26.   delay = 0
  27.   ticks = 0
  28.  
  29.   square = (x = S / 2, y = S / 2,
  30.     size = S * .7,
  31.     r = 0,
  32.     rad = .3,
  33.     hSize = size / 2,
  34.  
  35.     t = rando() * 7,
  36.     vx = rando() * rad * Math.cos(t),
  37.     vy = rando() * rad * Math.sin(t),
  38.  
  39.     vr = rando() * .02 - .01,
  40.     i, j,
  41.     o = {
  42.     id:inc++,
  43.     sr(R) {
  44.       r = R
  45.     },
  46.  
  47.     divide(num = 2, cSize = size / num,
  48.       chSize = cSize / 2,
  49.       sx = x - hSize + chSize,
  50.       sy = y - hSize + chSize) {
  51.  
  52.       save()
  53.  
  54.       translate(-size * .1, -size * .1)
  55.       scale(1.1, 1.1)
  56.  
  57.       o.render('rgba(255, 255, 255, .7)')
  58.       restore()
  59.  
  60.       for (i = 0; i < num; i++) {
  61.         for (j = 0; j < num; j++) {
  62.           l = rot(x, y, sx + i * cSize, sy + j * cSize, r)
  63.           square(l.x, l.y, cSize, r, rad + 2)
  64.         }
  65.       }
  66.     },
  67.  
  68.     render(fill = '#000') {
  69.       save()
  70.       translate(x, y)
  71.       rotate(r)
  72.       fillStyle = fill
  73.       strokeStyle = '#fff'
  74.       lineWidth = 2
  75.       fillRect(-hSize,-hSize, size, size)
  76.       strokeRect(-hSize,-hSize, size, size)
  77.       restore()
  78.     },
  79.  
  80.     draw() {
  81.       x += vx
  82.       y += vy
  83.       r += o.id === 0 ? .01 : vr
  84.       o.render()
  85.       if (rando() < .05 && breaks < 10 && 
  86.           delay > 30 && ticks > 200) {
  87.  
  88.         o.divide(~~(rando() * 3) + 2)
  89.         delete squares[o.id]
  90.         breaks++
  91.         delay = 0
  92.       }
  93.     }
  94.   }) => (squares[o.id] = o)
  95.  
  96.   square()
  97.  
  98.   C = Object.assign(
  99.     d.createElement`canvas`, { width: S, height: S }
  100.   ).getContext`2d`
  101.  
  102.   fillStyle = 'rgba(82, 82, 82, 1)'
  103.   fillRect(0, 0, S, S)
  104.  
  105.   loop = _ => {
  106.     ticks++
  107.     fillStyle = 'rgba(82, 82, 82, 0.1)'
  108.     fillRect(0, 0, S, S)
  109.  
  110.     globalAlpha = .4
  111.  
  112.     drawImage(C.canvas, -1, 5, S + 1, S + 5)
  113.     globalAlpha = 1
  114.  
  115.     save()
  116.     translate(20, 50)
  117.     scale(.9, .7)
  118.  
  119.     for (i in squares) {
  120.       squares[i].draw()
  121.     }
  122.  
  123.     restore()
  124.     delay++
  125.     C.drawImage(canvas, 0, 0)
  126.     requestAnimationFrame(loop)
  127.   }
  128.   loop()
  129. }

Another thing for #genuary2022… destroy a square

// animation // canvas // javascript // math // speedcoding

Speed Coded Space

  1. (() => {
  2.   const TWO_PI = Math.PI * 2;
  3.   const m = new Float32Array([
  4.     0, 0, 0, 0,
  5.     0, 0, 0, 0,
  6.     0, 0, 0, 0,
  7.     0, 0, 0, 0
  8.   ])
  9.  
  10.   const vert = `
  11.     attribute vec3 vec;
  12.     uniform mat4 mat;
  13.     void main(void) {
  14.       gl_Position = mat * vec4(vec, 1.0);
  15.       gl_PointSize = 2.0;
  16.     }
  17.   `
  18.  
  19.   const frag = `
  20.     void main(void) {
  21.       gl_FragColor = vec4(1., 1., 1., .25);
  22.     }
  23.   `
  24.  
  25.   document.body.style.background = '#232323'
  26.   const gl = document.body
  27.     .appendChild(document.createElement('canvas'))
  28.     .getContext('webgl', {
  29.       preserveDrawingBuffer: true,
  30.       powerPreference: 'high-performance'
  31.     })
  32.  
  33.   Object.assign(gl.canvas.style, {
  34.     position: 'absolute',
  35.     left: '50%',
  36.     top: '50%',
  37.     transform: 'translate(-50%, -50%)',
  38.     outline: '1px solid gray'
  39.   })
  40.  
  41.  
  42.   with(gl) {
  43.     const NUM = 50
  44.     const radius = 0.7
  45.     let verts = []
  46.  
  47.     // Superformula (equations from):
  48.     // https://bsapubs.onlinelibrary.wiley.com/doi/10.3732/ajb.90.3.333
  49.     // http://en.wikipedia.org/wiki/Superformula
  50.     function superShape(a, b, m, n1, n2, n3, scale, x = 0, y = 0, z = 0, rx=0, ry=0, rz=0) {
  51.       const { random, pow, abs, cos, sin } = Math
  52.       // with(Math) { // destrucuring vs the dreaded `with`
  53.         let r = 0
  54.         let p = 0
  55.         let xp = 0
  56.         let yp = 0
  57.         let zp = 0
  58.  
  59.         let rotX = rx
  60.         let rotY = ry  
  61.         let rotZ = rz
  62.  
  63.         let cosX = cos(rotX)
  64.         let cosY = cos(rotY)
  65.         let sinX = sin(rotX)
  66.         let sinY = sin(rotY)
  67.  
  68.         while (p <= TWO_PI) {
  69.           let ang = (m * p) / 4
  70.  
  71.           r = pow(pow(abs(cos(ang) / a), n2) + pow(abs(sin(ang) / b), n3), -1 / n1)
  72.           xp = r * cos(p)
  73.           yp = r * sin(p)
  74.  
  75.           p += 0.05
  76.  
  77.           zp = zp * cosX - xp * sinX
  78.           xp = zp * sinX + xp * cosX
  79.           yp = yp * cosY - zp * sinY
  80.           zp = yp * sinY + zp * cosY
  81.  
  82.           verts[inc] = xp * scale + x
  83.           verts[inc + 1] = yp * scale + y
  84.           verts[inc + 2] = zp * scale + z
  85.           inc += 3;
  86.         }
  87.       // }
  88.     }
  89.  
  90.     let inc = 0; 
  91.     for (let i = 0; i < NUM; i++) {
  92.       let m =  Math.random() * 20
  93.       let n1 = Math.random() * 30
  94.       let n2 = Math.random() * 30
  95.       let n3 = Math.random() * 30
  96.       let scl = Math.random() * .2
  97.       let x = Math.random() * Math.cos(i)
  98.       let y = Math.random() * Math.sin(i);
  99.       let z = Math.random() - .5
  100.       let rx = Math.random() * TWO_PI,
  101.           ry = Math.random() * TWO_PI,
  102.           rz = Math.random() * TWO_PI;
  103.  
  104.       for (let j = 0; j < 10; j++) {
  105.         superShape(1, 1, 1 + m,
  106.           n1 / j,
  107.           n2,
  108.           n3, 
  109.           scl- j / 100,
  110.           x,
  111.           y,
  112.           z, rx, ry, rz)
  113.         }
  114.     }
  115.  
  116.     const overts = verts.concat()
  117.     const leng = verts.length / 3
  118.  
  119.     bindBuffer(ARRAY_BUFFER, createBuffer())
  120.     bufferData(ARRAY_BUFFER, new Float32Array(verts), STATIC_DRAW)
  121.  
  122.     const vs = createShader(VERTEX_SHADER)
  123.     shaderSource(vs, vert)
  124.     compileShader(vs)
  125.  
  126.     const fs = createShader(FRAGMENT_SHADER)
  127.     const sp = createProgram()
  128.  
  129.     shaderSource(fs, frag)
  130.     compileShader(fs)
  131.     attachShader(sp, vs)
  132.     attachShader(sp, fs)
  133.     linkProgram(sp)
  134.     useProgram(sp)
  135.  
  136.     const vec = getAttribLocation(sp, 'vec')
  137.     vertexAttribPointer(vec, 3, FLOAT, false, 0, 0)
  138.     enableVertexAttribArray(vec)
  139.  
  140.     const matLoc = getUniformLocation(sp, 'mat')
  141.  
  142.     function rot(x, y, z) {
  143.       // https://wikimedia.org/api/rest_v1/media/math/render/svg/a8e16f4967571b7a572d1a19f3f6468512f9843e
  144.  
  145.       const sinA = Math.sin(x)
  146.       const cosA = Math.cos(x)
  147.       const sinB = Math.sin(y)
  148.       const cosB = Math.cos(y)
  149.       const sinY = Math.sin(z)
  150.       const cosY = Math.cos(z)
  151.  
  152.       m[0] = cosA * cosB
  153.       m[1] = cosA * sinB * sinY - sinA * cosY
  154.       m[2] = cosA * sinB * cosY + sinA * sinY
  155.       m[3] = 0
  156.  
  157.       m[4] = sinA * cosB
  158.       m[5] = sinA * sinB * sinY + cosA * cosY
  159.       m[6] = sinA * sinB * cosY - cosA * sinY
  160.       m[7] = 0
  161.  
  162.       m[8] = -sinB
  163.       m[9] = cosB * sinY
  164.       m[10] = cosB * cosY
  165.       m[11] = m[12] = m[13] = 0
  166.       m[15] = 1
  167.  
  168.       uniformMatrix4fv(matLoc, false, m)
  169.     }
  170.  
  171.     onresize = () => {
  172.       const {
  173.         canvas
  174.       } = gl
  175.       const size = Math.min(innerWidth, innerHeight) - 20
  176.       canvas.width = canvas.height = size
  177.       viewport(0, 0, size, size)
  178.     }
  179.  
  180.     onresize()
  181.  
  182.     let rx = 0, ry = 0, rz = 0
  183.     let t = 0;
  184.     function loop() {
  185.       // rx += 0.01
  186.       // ry += 0.01
  187.       rz += 0.01
  188.       rot(rx, ry, rz)
  189.  
  190.       disable(DEPTH_TEST)
  191.       enable(BLEND)
  192.       blendFunc(SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
  193.       clearColor(0, 0, 0, 1)
  194.       clear(COLOR_BUFFER_BIT)
  195.  
  196.       for (let i = 0; i < verts.length; i += 3) {
  197.         let tof = t + i / 50000;  
  198.         verts[i] = Math.sin(tof) * overts[i]
  199.         verts[i + 1] = Math.sin(tof) * overts[i + 1]
  200.         verts[i + 2] = Math.sin(tof) * overts[i + 2]
  201.       }
  202.  
  203.       t += 0.01
  204.  
  205.       bufferSubData(ARRAY_BUFFER, 0, new Float32Array(verts))
  206.       drawArrays(POINTS, 0, leng)
  207.       window.requestAnimationFrame(loop)
  208.     }
  209.     loop()
  210.   }
  211. })()

Forked a recent snippet using supershapes for #genuary2022 – prompt was space…

// animation // canvas // javascript // speedcoding // webgl
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}