)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
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

Grads

  1. const grad = {
  2.   gen(c) {
  3.     const canvas = c.canvas;
  4.     const t = Math.random() * 2 * Math.PI;
  5.     const cx = canvas.width / 2;
  6.     const cy = canvas.height / 2;
  7.     const r = Math.max(cx, cy);
  8.     const x1 = cx * Math.cos(t);
  9.     const y1 = cy * Math.sin(t);
  10.     const x2 = cx * Math.cos(t + Math.PI);
  11.     const y2 = cy * Math.sin(t + Math.PI);
  12.  
  13.     const drawFn = c => {
  14.       const g = c.createLinearGradient(x1, y1, x2, y2);
  15.       g.addColorStop(0, 'white');
  16.       g.addColorStop(1, 'black');
  17.  
  18.       c.fillStyle = g;
  19.       c.fillRect(0, 0, canvas.width, canvas.height);
  20.     };
  21.  
  22.     drawFn(c);
  23.   }
  24. };
  25.  
  26. Object.assign(document.body.style, { 
  27.     margin: 0,
  28.     display: 'grid',
  29.     'grid-template-columns': '1fr 1fr 1fr',
  30.   });
  31. const modes = 'screen,overlay,darken,lighten,color-dodge,color-burn,hard-light, soft-light,difference,exclusion,hue,saturation,color,luminosity,multiply'.split(',');
  32.  
  33. for (let j = 0; j < 21; j++) { 
  34.   const SIZE = 200;
  35.   const c = document.body.appendChild(
  36.     document.createElement('canvas')
  37.   ).getContext('2d');
  38.  
  39.   c.canvas.width = c.canvas.height = SIZE;
  40.   Object.assign(c.canvas.style, {
  41.     position: 'relative', 
  42.     width: '100%'
  43.   })
  44.  
  45.  
  46.   c.fillStyle = `hsl(${Math.random() * 20 + 190}deg, 50%, 50%)`
  47.   c.fillRect(0, 0, SIZE, SIZE)
  48.  
  49.   for (let i = 0; i < 5; i++) { 
  50.     c.globalAlpha = .5;
  51.     c.globalCompositeOperation = modes[~~(Math.random() * modes.length)]
  52.     grad.gen(c)
  53.   }
  54. }

Not sure what this is… used the random gradient code and variations on it a few times….

// gradients // graphics

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

Rotate Point Around Point (Golfed)

  1.   rot = (
  2.     cx, cy, X, Y, ang,
  3.     cos = Math.cos(-ang),
  4.     sin = Math.sin(-ang),
  5.     x = cos * (X - cx) + sin * (Y - cy) + cx,
  6.     y = cos * (Y - cy) - sin * (X - cx) + cy) => ({ x, y })

Rotate one point around another… I like to use something like this when speed-coding and golfing…

// math // matrix // oldschool // tricks
Older Posts
Newer Posts

Recent

Archive

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