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

Airbrush-esque

  1. const canvas = document.createElement('canvas');
  2. const c = canvas.getContext('2d');
  3.  
  4. const brush = document.createElement('canvas');
  5. const brushC = brush.getContext('2d');
  6.  
  7. canvas.width = innerWidth;
  8. canvas.height = innerHeight;
  9. brush.width = innerWidth;
  10. brush.height = innerHeight;
  11.  
  12. document.body.appendChild(canvas);
  13.  
  14. c.fillStyle = 'black'
  15. c.fillRect(0, 0, canvas.width, canvas.height);
  16.  
  17. let brushSize = 50;
  18. let featherSize = .1;
  19. let featherSteps = Math.floor(brushSize * featherSize) + 1;
  20. let st = brushSize - featherSteps;
  21.  
  22. let a = 0;
  23. if (st < 1) st = 1;
  24. for (let i = 0; i < st; i++) {
  25.   a = 1 / (st - i)
  26.   c.strokeStyle = `rgba(255, 255, 255, ${a})`;
  27.   console.log(c.strokeStyle)
  28.   c.lineWidth = brushSize - i;
  29.   c.lineJoin = 'round'
  30.   c.lineCap = 'round'
  31.   c.beginPath();
  32.   c.moveTo(50, 50);
  33.   c.lineTo(200, 200);
  34.   c.bezierCurveTo(300, 200, 400, 200, 300, 400);
  35.   c.stroke();
  36. }
// canvas // javascript

Fake RNG

  1. let anchors
  2. let idx
  3. let leng = 10
  4. let size = 200
  5. let px = 0
  6. let py = 0
  7.  
  8. function seed() {
  9.   idx = 0
  10.   anchors = (Date.now() + '').split``
  11.     .reverse()
  12.     .map(v => parseFloat(v) / 10)
  13.     .splice(0, leng)
  14. }
  15.  
  16. let last = 0
  17. let zoom = 1
  18. function rand() {
  19.   if (idx > size * size) seed()
  20.  
  21.   px += zoom
  22.   py += ~~(px / size)
  23.  
  24.   if (px >= size) px = 0
  25.   if (py >= size) py = 0
  26.  
  27.   const point = {
  28.     x: anchors[idx % leng],
  29.     y: anchors[(idx + 1) % leng]
  30.   }
  31.   idx++
  32.  
  33.   let dists = []
  34.   for (let i = 0; i < anchors.length; i += 2) {
  35.     let dx = px - anchors[i] * size
  36.     let dy = py - anchors[i + 1] * size
  37.     dists.push(Math.sqrt(dx * dx + dy * dy))
  38.   }
  39.   dists.sort()
  40.   last += (dists[0] / size - last) / 4
  41.   return last
  42. }
  43.  
  44. seed()
  45.  
  46. let d = document
  47. let b = d.body
  48. with (b.appendChild(
  49.   Object.assign(d.createElement`canvas`, { width: 400, height: 400 })
  50. ).getContext`2d`) {
  51.   fillStyle = 'black'
  52.   fillRect(0, 0, 400, 400)
  53.  
  54.   for (let i = 0; i < 200; i++) {
  55.     for (let j = 0; j < 200; j++) {
  56.       const c = rand() * 255
  57.       fillStyle = `rgb(${c}, ${c}, ${c})`
  58.       fillRect(j * 2, i * 2, 1, 2)
  59.     }
  60.   }
  61. }

Another one for genuary “Create your own pseudo-random number generator and visually check the results.”

// canvas // graphics // hacks // math // random // speedcoding

Average Some Curves

  1. const canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. );
  4. const c = canvas.getContext('2d');
  5.  
  6. function resize() {
  7.   canvas.width = window.innerWidth;
  8.   canvas.height = window.innerHeight;
  9.   draw();
  10. }
  11.  
  12. function draw() {
  13.   c.clearRect(0, 0, canvas.width, canvas.height);
  14.  
  15.   Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  16.   const iter = 100,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 50, rad2 = 50, theta = 0, x, y;
  20.   let x2, y2;
  21.   for (let i = 0; i < iter; i++) {
  22.     c.fillStyle = 'blue';
  23.     x = halfWidth + rad * Math.cos(theta);
  24.     y = halfHeight + rad * Math.sin(theta);
  25.     c.fillRect(x, y, 5, 5);
  26.  
  27.     c.fillStyle = 'red';
  28.  
  29.     rad2 = 80 + rad * Math.cos(theta * 3);
  30.     x2 = halfWidth + rad2 * Math.cos(theta);
  31.     y2 = halfHeight + rad2 * Math.sin(theta);
  32.     c.fillRect(x2, y2, 5, 5);
  33.  
  34.     c.fillStyle = 'green';
  35.     c.fillRect((x2 + x) / 2, (y2 + y) / 2, 5, 5);
  36.  
  37.     theta += .1;
  38.   }
  39. }
  40.  
  41. resize();
  42. window.addEventListener('resize', resize);
// canvas // graphics // math // speedcoding

Speed-coded Eye

  1. d = document
  2. b = d.body
  3. b.style.margin = 0
  4. with(Math) {
  5.   S = min(innerHeight * 2, innerWidth * 2)
  6.   hs = S / 2
  7.  
  8.   with(
  9.     b.appendChild(Object.assign(
  10.       d.createElement`canvas`, {
  11.         width: S,
  12.         height: S
  13.       })).getContext`2d`) {
  14.  
  15.     // array of xy coords, closed boolean
  16.     function bezierSkin(bez, closed = true) {
  17.       const avg = calcAvgs(bez);
  18.       const leng = bez.length;
  19.       let i, n;
  20.  
  21.       if (closed) {
  22.         moveTo(avg[0], avg[1]);
  23.         for (i = 2; i < leng; i += 2) {
  24.           n = i + 1;
  25.           quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  26.         }
  27.         quadraticCurveTo(bez[0], bez[1], avg[0], avg[1]);
  28.       } else {
  29.         moveTo(bez[0], bez[1]);
  30.         lineTo(avg[0], avg[1]);
  31.         for (i = 2; i < leng - 2; i += 2) {
  32.           n = i + 1;
  33.           quadraticCurveTo(bez[i], bez[n], avg[i], avg[n]);
  34.         }
  35.         lineTo(bez[leng - 2], bez[leng - 1]);
  36.       }
  37.     }
  38.  
  39.     // create anchor points by averaging the control points
  40.     function calcAvgs(p) {
  41.       const avg = [];
  42.       const leng = p.length;
  43.       let prev;
  44.       for (var i = 2; i < leng; i++) {
  45.         prev = i - 2;
  46.         avg.push((p[prev] + p[i]) / 2);
  47.       }
  48.       // close
  49.       avg.push((p[0] + p[leng - 2]) / 2);
  50.       avg.push((p[1] + p[leng - 1]) / 2);
  51.       return avg;
  52.     }
  53.  
  54.  
  55.     canvas.style.transformOrigin = '0 0'
  56.     canvas.style.transform = 'scale(.4)'
  57.  
  58.     rinit = _ => {
  59.       t = 0
  60.       tinc = .1
  61.       rad = hs * .8
  62.       pupil = random() * .25
  63.       radA = pupil + random() * .25
  64.  
  65.     }
  66.     dx = dy = hs
  67.     cx = cy = hs
  68.  
  69.     rinit()
  70.  
  71.     fillStyle = 'black'
  72.     fillRect(0, 0, S, S);
  73.     fillStyle = 'white'
  74.     beginPath()
  75.     moveTo(hs, hs)
  76.     arc(hs, hs, rad, 0, 7)
  77.     fill()
  78.  
  79.     outer = _ => {
  80.       dx = cx + rad * cos(t)
  81.       dy = cy + rad * sin(t)
  82.  
  83.       if (t > 7 && random() < .3) {
  84.         fnIdx++
  85.       }
  86.     }
  87.  
  88.     shutter = () => hs * radA + random() * hs * (.6 - pupil)
  89.  
  90.     innerA = _ => {
  91.       tinc = .05
  92.       rad = shutter()
  93.       dx = cx + rad * cos(t)
  94.       dy = cy + rad * sin(t)
  95.  
  96.       if (t > 21 && random() < .3) {
  97.         fnIdx++
  98.       }
  99.     }
  100.  
  101.     oa = 7 * 3
  102.  
  103.     innerB = _ => {
  104.       tinc = .05
  105.       T = t * random();
  106.       dx = cx + hs * radA * cos(T)
  107.       dy = cy + hs * radA * sin(T)
  108.       if (t > 28 + oa && random() < .3) {
  109.         rad = hs * .8
  110.         fnIdx++
  111.       }
  112.     }
  113.  
  114.     outerA = _ => {
  115.       R = (rad - hs * .1) + random() * hs * .1;
  116.       dx = cx + R * cos(t)
  117.       dy = cy + R * sin(t)
  118.       if (t > 35 + oa && random() < .3) {
  119.         fnIdx++
  120.       }
  121.     }
  122.  
  123.     outerB = _ => {
  124.       tinc = .01;
  125.       R = rad
  126.       if (random() < .5) R = shutter()
  127.       dx = cx + R * cos(t)
  128.       dy = cy + R * sin(t)
  129.  
  130.       if (t > 42 + oa && random() < .3) {
  131.         fnIdx++
  132.         ct = t
  133.       }
  134.     }
  135.  
  136.  
  137.     t2 = 0
  138.     outerC = _ => {
  139.       tinc = .1;
  140.       t2 += .01;
  141.       R = hs * .3
  142.       RR = (R + t2 + random() * 10);
  143.       dx = cx + R * .84 + RR * cos(t)
  144.       dy = cy - R * .84 + RR * sin(t)
  145.  
  146.       if (t > 70 + oa && random() < .3) {
  147.         fnIdx++
  148.       }
  149.     }
  150.  
  151.     outerD = _ => {
  152.       tinc = .1;
  153.       t2 += .01;
  154.       R = hs * .1
  155.       RR = (R + t2 + random() * 10);
  156.       dx = cx + hs * .3 + RR * cos(t)
  157.       dy = cy + R * .84 + RR * sin(t)
  158.  
  159.       if (t > 91 + oa && random() < .3) {
  160.         fnIdx++
  161.       }
  162.     }
  163.  
  164.     outerE = _ => {
  165.       tinc = .1;
  166.  
  167.       rad -= random() * .1;
  168.       dx = cx + rad * cos(t)
  169.       dy = cy + rad * sin(t)
  170.  
  171.       if (t > 112 + oa && random() < .3) {
  172.         fnIdx++
  173.       }
  174.     }
  175.     count = 0
  176.     last = _ => {
  177.       done = true;
  178.  
  179.       fillStyle = 'black'
  180.       fillRect(0, 0, S, S);
  181.       fillStyle = 'white'
  182.       beginPath()
  183.       moveTo(hs, hs)
  184.       arc(hs, hs, hs * .8, 0, 7)
  185.       fill()
  186.  
  187.       beginPath();
  188.       moveTo(0, 0);
  189.       bezierSkin(pnts, false)
  190.       stroke()
  191.  
  192.  
  193.       return
  194.       count++
  195.       if (count < 1) {
  196.         rinit()
  197.         setOff()
  198.         t = 0
  199.         fnIdx = 0
  200.       }
  201.     }
  202.  
  203.     fns = [outer, innerA, innerB, outerA, outerB, outerC, outerD, outerE, last]
  204.     fnIdx = 0
  205.  
  206.     outer()
  207.     drawX = dx
  208.     drawY = dy
  209.     pDrawX = 0
  210.     pDrawY = 0
  211.  
  212.     strokeStyle = 'rgba(0, 0, 0, 0.8)'
  213.     lineWidth = 1;
  214.     tt = 0
  215.  
  216.     ox = 0;
  217.     oy = 0;
  218.     setOff = _ => {
  219.       return
  220.       ox = S * 1.2 * random() - S / 2
  221.       oy = S * 1.2 * random() - S / 2
  222.       sl = .1 + random() * .9;
  223.     }
  224.  
  225.     sl = 1
  226.     pnts = []
  227.     done = false
  228.     loop = _ => {
  229.  
  230.       if (done) {
  231.         return;
  232.       }
  233.       shadowColor = 'rgba(155, 255, 255, .5)';
  234.       shadowBlur = 15;
  235.  
  236.       save()
  237.       scale(1, 1)
  238.       lineWidth = 2;
  239.       for (i = 0; i < 20; i++) {
  240.         t += tinc / 2
  241.         fns[fnIdx]()
  242.  
  243.         drawX += ((dx + ox) * sl - drawX) / 2;
  244.         drawY += ((dy + oy) * sl - drawY) / 2;
  245.  
  246.         if (drawX != 0 && pDrawX) {
  247.           beginPath()
  248.           moveTo(pDrawX, pDrawY);
  249.           lineTo(drawX, drawY);
  250.           pnts.push(drawX, drawY);
  251.           stroke()
  252.         }
  253.  
  254.         pDrawX = drawX
  255.         pDrawY = drawY
  256.       }
  257.  
  258.       restore()
  259.       requestAnimationFrame(loop)
  260.     }
  261.     loop()
  262.   }
  263. }

Another thing for #genuary2022… a single curve…

// animation // canvas // javascript

Polar Forking Tweak

  1. const FOUR_PI = 6 * Math.PI;
  2. const { cos, sin } = Math;
  3.  
  4. const canvas = document.body.appendChild(
  5.   document.createElement('canvas')
  6. );
  7. const c = canvas.getContext('2d');
  8.  
  9. function resize() {
  10.   canvas.width = window.innerWidth;
  11.   canvas.height = window.innerHeight;
  12. }
  13.  
  14. let inc = 0;
  15. function draw() { 
  16.   c.fillStyle = 'rgba(0, 0, 0, .3)'
  17.   c.fillRect(0, 0, canvas.width, canvas.height)
  18.   c.fillStyle = 'white';
  19.  
  20.   const halfWidth = window.innerWidth / 2;
  21.   const halfHeight = window.innerHeight / 2;
  22.   let theta = 0,
  23.     a = 20 * Math.min(window.innerWidth, window.innerHeight) * 0.005,
  24.     x,
  25.     y;
  26.  
  27.   c.save();
  28.   c.translate(halfWidth, halfHeight)
  29.  
  30.   let b = 5 * cos(inc);
  31.   inc += .02;
  32.  
  33.   for (let i = 0; theta < FOUR_PI; i++) {
  34.     let rad = a * (b + 10 * sin(theta / 3));
  35.     // randomly speed-coded and tweaked... leaving as is :D
  36.     x = rad * cos(theta + b / 10) * cos(b / 10 +theta * 2) * cos(theta * 2);
  37.     y = rad * sin(theta * 2) * cos(theta + b / 3) * cos(theta * 2);
  38.     c.fillRect(x,y, 2, 2);
  39.     theta += 0.04;
  40.   }
  41.   c.restore();
  42.  
  43.   requestAnimationFrame(draw)
  44. }
  45.  
  46. resize();
  47. addEventListener('resize', resize);
  48.  
  49. draw();

Just randomly futzing with sin/cos…

// animation // canvas // curves // graphics // hacks // humor // math
Older Posts
Newer Posts

Recent

Archive

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