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

Draw a Spiral with Resize

  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.   c.fillStyle = 'blue';
  15.  
  16.   const iter = 300,
  17.         halfWidth = window.innerWidth / 2,
  18.         halfHeight = window.innerHeight / 2;
  19.   let rad = 0, theta = 0, x, y;
  20.   for (let i = 0; i < iter; i++) {
  21.     x = halfWidth + rad * Math.cos(theta);
  22.     y = halfHeight + rad * Math.sin(theta);
  23.     c.fillRect(x, y, 5, 5);
  24.     rad += Math.min(window.innerWidth, window.innerHeight) * 0.0015;
  25.     theta += .1;
  26.   }
  27. }
  28.  
  29. resize();
  30. window.addEventListener('resize', resize);

Expanding on yesterdays post, this draws a resizable sprial on a canvas.

// canvas // graphics // javascript // math

Easy Canvas Resize

  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.   c.fillStyle = 'red';
  15.   // 30% width and height
  16.   c.fillRect(30, 30, 
  17.     window.innerWidth * .3, 
  18.     window.innerHeight * .3);
  19. }
  20.  
  21. resize();
  22. window.addEventListener('resize', resize);

Resizing a canvas is unusual, because setting the width/height of a canvas completely erases it.

If your canvas isn’t animating, you can just redraw after resizing. Depending on what you’re drawing, working in percentages instead of pixel values can make things easier.

If you hit the “Try it out…” button, go into fullscreen and resize your browser window you’ll see things in action.

// canvas // dom // javascript

Semi-golfed Calculator

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. d = document
  4. b = d.body
  5. a = (e = 'div') => b.appendChild(d.createElement(e))
  6. t = a`input`
  7. s = ''
  8. a()
  9. O = v => t.value = v
  10. '0123456789+-*()/C='.split``.map(v => {
  11.   v == '+' && a()
  12.   _ = a`button`
  13.   _.innerHTML = v
  14.   o = { 
  15.     C(){s = O('')},
  16.     ['='](){O(eval(s))}
  17.   }
  18.   _.onclick = () => o[v] ? o[v]() : (s = s + v, O(s))
  19. })
// dom // golfed // javascript // math // tricks

Semi-golfed Canvas Setup

  1. ((
  2.   width = 200, height = 200, 
  3.   cnv = document.body.appendChild(
  4.     Object.assign(
  5.       document.createElement('canvas'), {
  6.       width, height
  7.     })
  8.   ),
  9.   c = cnv.getContext('2d'), 
  10.   f = c.fillRect.bind(c),
  11.   C = _ => c.fillStyle = _) => {
  12.  
  13.   C`gray`; f(0, 0, width, height);
  14.   C`blue`; f(10, 10, 100, 20);
  15. })();
// canvas // golfed // graphics // javascript

Quick Random Value

  1. console.log(
  2.   ['x', 'y', 'z'][Math.floor(Math.random() * 3)]
  3. );

This will output either x, y or z. It works by looking up a random index of an inline array. I find this great for quick prototyping – probably not something you want to be using outside throw away code… Hit the “Try it out…” button and open your dev console.

// javascript
Older Posts

Recent

Archive

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