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

Parametric Equation for Rectangle

  1. // from http://math.stackexchange.com/questions/69099/equation-of-a-rectangle
  2. const rect = (px, py, rx, ry, t) => ({
  3.   x: px + rx + rx * (Math.abs(Math.cos(t)) * Math.cos(t) + Math.abs(Math.sin(t)) * Math.sin(t)),
  4.   y: py + ry + ry * (Math.abs(Math.cos(t)) * Math.cos(t) - Math.abs(Math.sin(t)) * Math.sin(t))
  5. })
  6.  
  7. const SIZE = 200
  8.  
  9. const c = document.body.appendChild(
  10.   Object.assign(document.createElement`canvas`,
  11.     { width: SIZE, height: SIZE }
  12.   )).getContext`2d`
  13.  
  14. c.fillStyle = 'black'
  15. c.fillRect(0, 0, SIZE, SIZE)
  16.  
  17. let t = 0
  18. setInterval(() => {
  19.   const { x, y } = rect(20, 20, 60, 70, t)
  20.   c.fillStyle = 'rgba(255, 0, 0, .1)'
  21.   c.fillRect(x, y, 10, 10)
  22.   t += .05
  23. }, 16)

Wanted to know how to do this for something back in 2015. Great math stackexchange answer here: http://math.stackexchange.com/questions/69099/equation-of-a-rectangle

Could be optimized but leaving as is to match:

x = p(|cos t|cos t + |sin t| sin t)
y = p(|cos t|cos t - |sin t| sin t)

One small change here is to add the width and height to the offset so that it draws from the upper left hand corner instead of the center…

// animation // graphics // javascript // math

Two Circles Explode

  1. const { random, min, sqrt, cos, sin, PI } = Math
  2. let TWO_PI = PI * 2
  3. let minSize
  4.  
  5. document.body.style.margin = 0
  6. document.body.style.background = 'black'
  7. const canvas = document.body.appendChild(
  8.   document.createElement('canvas')
  9. )
  10. const c = canvas.getContext('2d')
  11.  
  12. addEventListener('resize', resize)
  13. resize()
  14.  
  15. function resize() {
  16.   canvas.width = innerWidth
  17.   canvas.height = innerHeight
  18.   minSize = min(innerWidth, innerHeight)
  19.   clear()
  20. }
  21.  
  22. function clear() {
  23.   c.fillStyle = 'rgba(0, 0, 0, .15)'
  24.   c.fillRect(0, 0, innerWidth, innerHeight)
  25. }
  26.  
  27. let dots = []
  28. function dot({x, y, vx, vy, rad, grav = .15}) {
  29.   let sx = x
  30.   let sy = y
  31.   let svx = vx
  32.   let svy = vy
  33.   let intersected
  34.   let partsNum = 20
  35.   let parts = []
  36.   let delay = random() * 5
  37.   let time = 0
  38.  
  39.   dots.push(() => y > innerHeight)
  40.  
  41.   return {
  42.     step() {
  43.       time++
  44.       if (time < delay) return
  45.       if (intersected) {
  46.         for (let i = 0; i < partsNum; i++) {
  47.           parts[i].step()
  48.         }
  49.         return
  50.       }
  51.       x += vx
  52.       y += vy
  53.       vy += grav;
  54.       c.beginPath()
  55.       c.arc(x, y, rad(), 0, 7)
  56.       c.fill()
  57.     },
  58.     reset() {
  59.       x = sx;
  60.       y = sy;
  61.       vx = svx;
  62.       vy = svy;
  63.       intersected = false
  64.     },
  65.     hit() {
  66.       if (!intersected) {
  67.         partsNum = rad() / 3
  68.         for (let i = 0; i < partsNum; i++) {
  69.           let t = random() * TWO_PI
  70.           let r = 5 + random() * 5
  71.           let size = random() * 10
  72.  
  73.           parts.push(
  74.             dot({
  75.               x, y,
  76.               vx: r * cos(t),
  77.               vy: r * sin(t),
  78.               rad: () => size
  79.             })
  80.           )
  81.         }
  82.       }
  83.       intersected = true
  84.     },
  85.     get x() {
  86.       return x
  87.     },
  88.     get y() {
  89.       return y
  90.     }
  91.   }
  92. }
  93.  
  94. const bigRad = () => minSize * .14;
  95.  
  96. let leftDot
  97. let rightDot
  98.  
  99. function start() {
  100.  
  101.   rightDot = dot({
  102.     x: innerWidth, 
  103.     y: innerHeight / 2, 
  104.     vx: -innerWidth * .005, 
  105.     vy: -6, rad: bigRad
  106.   })
  107.  
  108.   leftDot = dot({
  109.     x: 0, 
  110.     y: innerHeight / 2, 
  111.     vx: innerWidth * .005, 
  112.     vy: -6, rad: bigRad
  113.   })
  114. }
  115. start()
  116.  
  117. function collide(a, b) {
  118.   const dx = a.x - b.x
  119.   const dy = a.y - b.y
  120.   const dist = sqrt(dx**2 + dy**2)
  121.   return dist <= bigRad() * 1.8
  122. }
  123.  
  124. function loop() {
  125.   let inc = 2
  126.  
  127.   clear()
  128.   c.fillStyle = 'white'
  129.   if (collide(leftDot, rightDot)) {
  130.  
  131.     leftDot.hit()
  132.     rightDot.hit()
  133.   }
  134.  
  135.   leftDot.step()
  136.   rightDot.step()
  137.  
  138.   dots.forEach(done => {
  139.     if (done()) inc++;
  140.   }) 
  141.  
  142.   if (dots.length > 2 && inc == dots.length)  {
  143.     dots = []
  144.     start()
  145.   }
  146.  
  147.   requestAnimationFrame(loop)
  148. }
  149. loop()

Two circles intersect and explode repeatedly… works at any browser size…

// animation // canvas // gradients

CoffeeScript Ikeda Map

  1. canvas = document.querySelector "canvas"
  2. c = canvas.getContext "2d"
  3. locX = 120
  4. locY = 400
  5. xn1 = xn = yn1 = yn = tn = 0
  6. u = .7
  7. steps = 10
  8. iterations = 200
  9. scale = 180
  10.  
  11. c.fillStyle = "black"
  12. c.fillRect 0, 0, canvas.width, canvas.height
  13. c.fillStyle = "rgba(255,255,255,0.2)"
  14.  
  15. run = setInterval ->
  16.   clearInterval run if u > 1
  17.   i = 0
  18.  
  19.   while i < steps
  20.     u += 0.00015
  21.     j = 0
  22.  
  23.     while j < iterations
  24.       xn = xn1
  25.       yn = yn1
  26.       tn = 0.4 - (6 / (1 + xn * xn + yn * yn))
  27.       xn1 = 1 + u * (xn * Math.cos(tn) - yn * Math.sin tn)
  28.       yn1 = u * (xn * Math.sin(tn) + yn * Math.cos tn)
  29.       c.fillRect locX + xn1 * scale, locY + yn1 * scale, 1, 1
  30.       j++
  31.     i++
  32. , 30

I do quite miss CoffeeScript sometimes… here is an old codepen of the Ikeda Map:

See the Pen Ikeda Map by Zevan Rosser (@ZevanRosser) on CodePen.

// animation // canvas // graphics

Character Controls

  1. // Character Controls "clean version" with Trails...
  2.  
  3. // dynamically handle keys instead of explicitly
  4. // checking each one
  5. const keys = {}
  6. document.addEventListener('keydown', e => {
  7.   e.preventDefault();
  8.  
  9.   // store a boolean on the `keys` object
  10.   // to keep track of whick keys are down
  11.   keys[e.key] = true;
  12. });
  13.  
  14. document.addEventListener('keyup', e => {
  15.   e.preventDefault();
  16.    keys[e.key] = false;
  17. });
  18.  
  19. // setup motion
  20. let x = 100;
  21. let y = 300;
  22. let vx = 4;
  23. let vy = -10;
  24.  
  25. // put gravity in a variable
  26. const GRAVITY = 1;
  27. // replace "magic numbers" with constants
  28. const FLOOR_BOUNCE = -.33;
  29. const JUMP_POWER = 15;
  30. const ARROW_VEL = 3;
  31. const VX_DECAY = .8;
  32.  
  33. const TRAIL_NUM = 10;
  34. const chars = [];
  35. // store the size of the character
  36. const charWidth = 50;
  37. const charHeight = 80;
  38. for (let i = 0; i < TRAIL_NUM; i++) {
  39.   // create the character
  40.   const char = document.createElement('div');
  41.   chars.push({ char, x, y });
  42.   Object.assign(char.style, {
  43.     position: 'absolute',
  44.     width: `${charWidth}px`,
  45.     height: `${charHeight}px`,
  46.     background: 'black',
  47.     // add border radius for no reason
  48.     borderTopLeftRadius: '20px',
  49.     borderTopRightRadius: '20px',
  50.     opacity: i === 0 ? 1 : .25 - (.25 / TRAIL_NUM) * i
  51.   });
  52.  
  53.   document.body.appendChild(char);
  54. }
  55. const char = chars[0].char
  56.  
  57. function setLocs({ x, y }) {
  58.   for (let i = 0; i < TRAIL_NUM; i++) {
  59.     const char = chars[i];
  60.     if (x != null) char.x = x;
  61.     if (y != null) char.y = y;
  62.   }
  63. }
  64.  
  65.  
  66. // some bounds variables for the screen
  67. let floor;
  68. let screenRight;
  69. let screenLeft;
  70.  
  71. // main loop
  72. function loop() {
  73.   // we want to recalculate these
  74.   // so things work when the screen resizes
  75.   floor = innerHeight - 80;
  76.   screenRight = innerWidth + 50;
  77.   screenLeft = -charWidth;
  78.  
  79.   // update the characters velocity
  80.   x += vx;
  81.   y += vy;
  82.  
  83.  
  84.   // handle floor and screen sides
  85.   if (y > floor) {
  86.     vy *= FLOOR_BOUNCE;
  87.     y = floor;
  88.  
  89.     // @TODO set char xs
  90.   }
  91.  
  92.   if (x > screenRight) {
  93.     x = screenLeft
  94.     setLocs({ x })
  95.   }
  96.  
  97.   if (x < screenLeft) {
  98.     x = screenRight;
  99.     setLocs({ x })
  100.   }
  101.  
  102.  
  103.   // update the characters velocity with arrow keys
  104.   if (keys['ArrowRight']) {
  105.     vx += ARROW_VEL;
  106.   }
  107.   if (keys['ArrowLeft']) {
  108.     vx -= ARROW_VEL;
  109.   }
  110.  
  111.   // character can only jump up when it is on the floor
  112.   if (keys['ArrowUp'] && y >= floor) {
  113.     vy -= JUMP_POWER;
  114.   }
  115.  
  116.   if (keys['ArrowDown']) {
  117.     vy += ARROW_VEL;
  118.   }
  119.  
  120.   vy += GRAVITY;
  121.   vx *= VX_DECAY
  122.  
  123.   // update the characters styles
  124.   Object.assign(
  125.     char.style, {
  126.       // use template string instead of x + 'px'
  127.       left: `${x}px`,
  128.       top: `${y}px`
  129.     }
  130.   );
  131.  
  132.   // update trails stuff
  133.   chars[0].x = x;
  134.   chars[0].y = y;
  135.   for (let i = 1; i < TRAIL_NUM; i++) {
  136.     const char = chars[i]
  137.     char.x += (chars[i - 1].x - char.x) / 4;
  138.     char.y += (chars[i - 1].y - char.y) / 4;
  139.  
  140.     Object.assign(
  141.       chars[i].char.style, {
  142.         // use template string instead of x + 'px'
  143.         left: `${char.x}px`,
  144.         top: `${char.y}px`
  145.       }
  146.     );
  147.   }
  148.  
  149.   requestAnimationFrame(loop);
  150. }
  151. loop();

Click once on the preview area to give keyboard focus – then use arrow keys to move the character. I recently created a tutorial about this over on dev.to… check it out…

// animation // graphics // keyboard

Canvas Ring on Image

  1. const uploadInput = document.body.appendChild(
  2.   Object.assign(document.createElement('input'), {
  3.     type: 'file',
  4.     accept: 'image/png, image/jpeg'
  5.   })
  6. )
  7. uploadInput.style.display = 'block'
  8.  
  9. const canvas = document.body.appendChild(document.createElement('canvas'))
  10. const c = canvas.getContext('2d')
  11.  
  12. canvas.style.width = '70%'
  13.  
  14. let sampleSize
  15. const steps = 100
  16. const step = (Math.PI * 2) / steps
  17.  
  18. let interval
  19.  
  20. const ring = () => {
  21.   clearInterval(interval)
  22.   let x = imageEl.width / 2,
  23.     y = imageEl.height / 2,
  24.     rad = imageEl.width * 0.3,
  25.     theta = 0,
  26.     px,
  27.     py,
  28.     pxs = [],
  29.     spy = []
  30.   ;(pys = []), (im = []), (rects = [])
  31.  
  32.   for (let i = 0; i < steps; i++) {
  33.     px = x + rad * Math.cos(theta)
  34.     py = y + (rad / 2) * Math.sin(theta)
  35.     theta += step
  36.     pxs[i] = px
  37.     pys[i] = spy[i] = py
  38.     im[i] = c.getImageData(px, py, sampleSize, sampleSize)
  39.     rects[i] = [px, py, sampleSize, sampleSize]
  40.   }
  41.  
  42.   interval = setInterval(() => {
  43.     for (let i = 0; i < steps; i++) {
  44.       pys[i] -= 1
  45.       c.putImageData(im[i], pxs[i], pys[i])
  46.       v = (y - spy[i]) / rad
  47.       c.fillStyle = 'rgba(0,0,0,' + v + ')'
  48.       c.fillRect(pxs[i] - 1, pys[i], sampleSize + 2, sampleSize - 1)
  49.     }
  50.   }, 16)
  51. }
  52.  
  53. const imageEl = new Image()
  54. imageEl.src = 'https://snippet.zone/wp-content/uploads/2022/01/taho-scaled.jpg'
  55. imageEl.onload = () => {
  56.   canvas.width = imageEl.width
  57.   canvas.height = imageEl.height
  58.   c.drawImage(imageEl, 0, 0)
  59.   sampleSize = imageEl.width / 25
  60.  
  61.   ring()
  62. }
  63.  
  64. const reader = new FileReader()
  65.  
  66. reader.addEventListener('load', () => {
  67.   imageEl.src = reader.result
  68. })
  69.  
  70. uploadInput.addEventListener('change', e => {
  71.   const file = e.target.files[0]
  72.   if (file != null) {
  73.     reader.readAsDataURL(file)
  74.   }
  75. })

Upload an image and it will have a distortion ring drawn on it

// animation // canvas
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}