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

Odd Gradient Notation

  1. // "Being clever is not clever"
  2. // -- Bjarne Stroustrup
  3. D = document
  4. ang = {
  5.   '|': 180,
  6.   '-': 90,
  7.   '\\': 135,
  8.   '/': 225
  9. }
  10.  
  11. box = def => {
  12.   def = def.split(/\s+/)
  13.   form = def.length
  14.   I = i => parseInt(def[i], 16)
  15.  
  16.   ;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},
  17.     _=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},
  18.     _=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}
  19.   ][form]()
  20.  
  21.   c = c.split``
  22.  
  23.   ca = c[0]
  24.   ca = ca+ca+ca
  25.   cD = ang[c[1]]
  26.   cb = c[2]
  27.   cb = cb+cb+cb 
  28.  
  29.   D.body.appendChild(
  30.     D.createElement`div`
  31.   ).style = `
  32.     position: absolute; left: ${x}px; top: ${y}px;
  33.     width: ${w}px; height: ${h}px;
  34.     background: linear-gradient(${cD}deg, #${ca}, #${cb})
  35.   `
  36. }
  37.  
  38. const parse = prog => prog.trim()
  39.   .split(/\n+/m)
  40.   .map(line => box(line.trim()))
  41.  
  42. parse(`
  43.   0 64 0/f
  44.   64 64 0\\f
  45.   a0 f0 30 54 f\\0
  46.   0 6f 20 60 0-c
  47.   f 7f 20 60 0|c
  48.   1f 8f 30 30 c/0
  49. `)

Just playing around… odd micro-gradient notation:

  1. '0 64 0/f'
  2. // x=0 y=0 width=0x64 height=0x64
  3. // 0/f = gradient black to white top right to bottom left
  4.  
  5. '64 64 0\\f'
  6. // x=0 y=0 width=0x64 height=0x64
  7. // 0\\f = black to to white gradient top left to bottom right
  8.  
  9. '0 6f 20 60 0-c'
  10. // x=0 y=0x6f width=0x20 height=0x60
  11. // 0-c = gradient black to grey (#ccc) left to right
  12.  
  13. // etc... ( | ) is top to bottom grad
// css // dom // golfed // graphics // hacks // humor // regex // speed-coded

Isometric Vases

  1.  
  2. const canvas = document.createElement`canvas`
  3. const c = canvas.getContext`2d`
  4.  
  5. document.body.appendChild(canvas)
  6. document.body.style.margin = 0
  7.  
  8. canvas.style.width = '100%'
  9. canvas.style.height = '100%'
  10.  
  11. const COLS = 10
  12. const ROWS = 10
  13. let space;
  14. let size;
  15. let time = 0
  16. const num = COLS * ROWS
  17. const mon = []
  18. for (let y = 0; y < COLS; y++) {
  19.   for (let x = 0; x < ROWS; x++) {
  20.     mon.push(monument())
  21.   }
  22. }
  23.  
  24. function reset(){
  25.   time = 0
  26.   c.fillStyle = '#ccc'
  27.   c.fillRect(0, 0, canvas.width, canvas.height)
  28. }
  29.  
  30. function resize() {
  31.   canvas.width = innerWidth * 2
  32.   canvas.height = innerHeight * 2
  33.  
  34.   reset()
  35. }
  36. resize()
  37. window.addEventListener('resize', resize)
  38.  
  39. function monument(x, y) {
  40.  
  41.   const s = Math.random()
  42.   let cl = 0;
  43.   let damp = Math.random() / 10;
  44.  
  45.   let rad = 10 + Math.random() * 
  46.   Math.random() * (innerWidth / 30)
  47.  
  48.   let skip = Math.random() < .5;
  49.   let o = Math.random() * 7
  50.   let shade = .01;
  51.   let radamp = 200 + Math.random() * 90
  52.   let life = 100 + Math.random() *  Math.random() *  Math.random() * 1200;
  53.   return (x, y) => { 
  54.       if (time === 0) { 
  55.       c.save()
  56.       c.strokeStyle = 'rgba(0, 0, 0, 0.2)'
  57.       c.translate(x - space / 2, y - space / 2)
  58.       c.strokeRect(0, 0, space, space)
  59.       c.restore()
  60.       }
  61.     if (skip) {
  62.  
  63.  
  64.     } else { 
  65.  
  66.       //rad += (0 - rad) / radamp
  67.       let teta = time * s * damp
  68.       let C = Math.sin(teta)
  69.       let C2 = Math.sin(time * s * damp + o);
  70.  
  71.       cl = C2 * 200 + 55;
  72.  
  73.       shade -= .0001;
  74.  
  75.       let col = `rgba(${cl}, ${cl}, ${cl}, 1)`
  76.       if (time > life) {
  77.         col = `rgba(155, 155, 155, .4)`
  78.         skip = true
  79.       }
  80.  
  81.     c.save()
  82.  
  83.       c.translate(x - time * s, y)
  84.       c.fillStyle = `rgba(0, 0, 0, ${shade})`
  85.       c.beginPath()
  86.       c.arc(0, 0, rad + rad * C, 0, 7)
  87.       c.fill()
  88.       c.restore();
  89.  
  90.       c.save()
  91.  
  92.       c.translate(x - time * s, y - time * s)
  93.       c.fillStyle = col
  94.       c.beginPath()
  95.       c.arc(0, 0, rad + rad * C, 0, 7)
  96.       c.fill()
  97.       c.restore();
  98.     }
  99.   }
  100. }
  101.  
  102. function draw() {
  103.   space = (innerWidth * 2) / COLS * .6;
  104.  
  105.   size = COLS * space
  106.  
  107.   c.save()
  108.   c.scale(1, .6)
  109.   c.translate(innerWidth, innerHeight * 2)
  110.   c.rotate(45 * Math.PI / 180)
  111.   c.translate(-size / 2, -size / 2)
  112.  
  113.   let inc = 0;
  114.   for (let y = 0; y < COLS; y++) {
  115.     for (let x = 0; x < ROWS; x++) {
  116.       mon[inc++](y * space, x * space)
  117.     }
  118.   }
  119.   c.restore()
  120.   time++
  121.   requestAnimationFrame(draw)
  122. }
  123.  
  124. draw();

Something I speed coded for genuary

// 3d // canvas // graphics // isometric

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

Little Galaxy ES5

  1. var canvas = document.createElement('canvas'), 
  2.     c = canvas.getContext('2d'), 
  3.     SIZE = 350;
  4.  
  5. canvas.width = SIZE;
  6. canvas.height = SIZE;
  7.  
  8. document.body.appendChild(canvas);
  9.  
  10. c.fillStyle = 'black';
  11. c.fillRect(0, 0, SIZE, SIZE);
  12.  
  13. c.fillStyle = 'white';
  14.  
  15. var spa = function(ts) {
  16.   var r = 0, t =  0;
  17.   var jitterX, jitterY, jitterT, jitterR;
  18.   for (var i = 0; i < 100; i += 0.5) {
  19.     t = ts + i / 15;
  20.     r = i;
  21.     jitterR = 5 + i / 5;
  22.     jitterT = Math.random() * 2 * Math.PI;
  23.     jitterX = Math.random() * jitterR * Math.sin(jitterT);
  24.     jitterY = Math.random() * jitterR * Math.cos(jitterT);
  25.     c.fillStyle = `hsl(${t / Math.PI * 180}deg, 50%, 50%)`;
  26.     c.fillRect(
  27.       SIZE / 2 + r * Math.cos(t) + jitterX,
  28.       SIZE / 2 + r * Math.sin(t) + jitterY, 
  29.       3, 3
  30.     );
  31.   }
  32. }
  33.  
  34. spa(0);
  35. spa(Math.PI);

I made this in response to a question from a friend of mine a few years back…

// 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
Older Posts
Newer Posts

Recent

Archive

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