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

Proxy Constants

  1. const spec = {
  2.   get(o, key) { 
  3.     return o[key] != null ? 
  4.       o[key] : o[key] = Objector()
  5.   }
  6. };
  7.  
  8. const Objector = () => new Proxy({}, spec);
  9.  
  10. const events = Objector();
  11.  
  12. events.graphics.RENDERED;
  13. events.graphics.ERASED;
  14. events.ui.LOADING;
  15. events.ui.LOADED;
  16. events.files.OPENED;
  17. events.files.CLOSED;
  18.  
  19. const { ERASED } = events.graphics;
  20. console.log('a', ERASED === events.graphics.ERASED);
  21. console.log('b', ERASED === events.files.CLOSED);

This is somewhat evil… I’ve never liked these java style constants. Maybe I’ll write up a detailed alternative method some time.

// humor // proxies // tricks

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

ES5 Canvas Thing

  1. var canvas = document.body.appendChild(
  2.   document.createElement('canvas')
  3. ),
  4. c = canvas.getContext("2d"),
  5. size = canvas.width,
  6. quarterSize = size / 4,
  7. eightSize = size / 8,
  8. halfSize = size / 2,
  9. TWO_PI = Math.PI * 2,
  10. bombNum = 3,
  11. bombs = [],
  12. wanderers = {}, 
  13. wandererIndex = 0,
  14. particles = {},
  15. particleIndex = 0;
  16.  
  17. canvas.width = canvas.height = 300
  18.  
  19. c.fillStyle = "rgb(100,100,100)";
  20. c.fillRect(0,0,size,size);
  21.  
  22. function Particle(x, y){
  23.   this.x = x;
  24.   this.y = y;
  25.   var rad = 3 + Math.random() * 6;
  26.   var theta = Math.random() * TWO_PI;
  27.   this.vx = rad * Math.cos(theta);
  28.   this.vy = rad * Math.sin(theta);
  29.   this.alpha = 1;
  30.   particleIndex++;
  31.   this.index = particleIndex;
  32.   particles[this.index] = this;
  33. }
  34. Particle.prototype.draw = function(){
  35.   this.x += this.vx;
  36.   this.y += this.vy;
  37.   this.vx *= 0.9;
  38.   this.vy *= 0.9;
  39.   this.alpha -= 0.05;
  40.  
  41.   if (this.alpha <= 0){
  42.     this.alpha = 0;
  43.     delete particles[this.index];
  44.  
  45.   }
  46.  
  47.   c.fillStyle = "rgba(255,255,255,"+this.alpha+")";
  48.   c.beginPath();
  49.   c.arc(this.x, this.y, 1, 0, TWO_PI, false);
  50.   c.fill();
  51. };
  52.  
  53. function Bomb(){
  54.   this.x = quarterSize + Math.random() * halfSize;
  55.   this.y = quarterSize + Math.random() * halfSize;
  56.   this.radius = 15 + Math.random() * 20;
  57. }
  58. Bomb.prototype.draw = function(){
  59.   c.fillStyle = "#e64c25";
  60.   c.beginPath();
  61.   c.arc(this.x, this.y, this.radius, 0, TWO_PI, false);
  62.   c.fill();
  63. };
  64.  
  65. function Wanderer(x, y){
  66.   this.x = x;
  67.   this.y = y;
  68.   this.vx = Math.random() * 4 - 2;
  69.   this.vy = Math.random() * 4 - 2;
  70.   particleIndex++;
  71.   this.index = particleIndex;
  72.   particles[this.index] = this;
  73. }
  74. Wanderer.prototype.die = function(){
  75.   for (var j = 0; j < 4; j++){
  76.     new Particle(this.x, this.y);
  77.   }
  78.  
  79.   delete particles[this.index];
  80. };
  81. Wanderer.prototype.draw = function(){
  82.   this.x += this.vx;
  83.   this.y += this.vy;
  84.  
  85.   if (Math.random() < 0.1){
  86.     this.vx = Math.random() * 4 - 2;
  87.     this.vy = Math.random() * 4 - 2;
  88.   }
  89.  
  90.   if (this.x < 0) this.x = size;
  91.   if (this.x > size) this.x = 0;
  92.   if (this.y < 0) this.y = size;
  93.   if (this.y > size) this.y = 0;
  94.  
  95.   c.fillStyle = "white";
  96.   c.beginPath();
  97.   c.arc(this.x, this.y, 2, 0, TWO_PI, false);
  98.   c.closePath();
  99.   c.fill();
  100.  
  101.   for (var i = 0; i < bombNum; i++){
  102.     var bomb = bombs[i];
  103.     var dx = this.x - bomb.x;
  104.     var dy = this.y - bomb.y;
  105.     if (Math.sqrt(dx * dx + dy * dy) < bomb.radius){
  106.       this.die();
  107.     }
  108.   }
  109. };
  110.  
  111. for (var i = 0; i < bombNum; i++){
  112.   bombs[i] = new Bomb();
  113. }
  114.  
  115. new Wanderer(eightSize, eightSize); 
  116.  
  117. setInterval(function(){
  118.   c.fillStyle = "rgba(100,100,100, 0.2)";
  119.   c.fillRect(0,0,size,size);
  120.   c.strokeStyle = "white";
  121.   c.beginPath();
  122.   c.arc(eightSize, eightSize, 5, 0, TWO_PI, false);
  123.   c.stroke();
  124.  
  125.   if (Math.random() < 0.02){
  126.     new Wanderer(eightSize, eightSize); 
  127.   }
  128.  
  129.   for (var i = 0; i < bombNum; i++){
  130.     bombs[i].draw();
  131.   }
  132.  
  133.   for (var i in wanderers){
  134.     wanderers[i].draw(); 
  135.   }
  136.  
  137.   for (var i in particles){
  138.     particles[i].draw();
  139.   }
  140. }, 16);

An old es5 speedcoded thing…

// canvas // graphics // javascript

Fibonacci Triangle Golfed

  1. // by Arnauld - https://codegolf.stackexchange.com/users/58563/arnauld
  2. f=(n,a=b=1,p)=>n?''.padEnd(p)+a+`+${b}=${b+=a}
  3. `+f(n-1,b-a,(a+"").length-~p):''
  4.  
  5. console.log(f(20))

Great golfed solution to this question at codegolf stackexchange by user Arnauld

// codegolf // javascript // math

Thinking about DOM

  1. const liveData = {}
  2. const dom = new Proxy(liveData, {
  3.   get(o, key) {
  4.     if (o[key]) {
  5.       return o[key]
  6.     } else {
  7.       const fn  = node.bind(null, key)
  8.       return fn
  9.     }
  10.   }
  11. });
  12.  
  13. const tags = {}
  14. const isTag = tag => { 
  15.   if (tags[tag] != null) {
  16.     // already calculated
  17.     return tags[tag]
  18.   }
  19.   const result = !/Unknown/.test(document.createElement(tag) + '')
  20.   tags[tag] = result
  21.   return result
  22. }
  23.  
  24. const click = new WeakMap()
  25.  
  26. function pointerUp(e) { 
  27.   const curr = e.target;
  28.   if (!curr) return
  29.  
  30.   const action = click.get(curr)
  31.   if (action) action(e)
  32.  
  33.   // bubble to parent
  34.   if (curr?.parentNode?.tagName != 'BODY') {
  35.     pointerUp({ target: e.target.parentNode })
  36.   }
  37. }
  38.  
  39. document.addEventListener('pointerup', e => {
  40.   pointerUp(e)
  41. })
  42.  
  43. function attrs(el, props) {
  44.   const keys = Reflect.ownKeys(props)
  45.   for (let i = 0; i < keys.length; i++) {
  46.     const key = keys[i];
  47.     const val = props[key]
  48.     if (typeof val != 'function') {
  49.       el.setAttribute(key, val)
  50.     } else if (key === 'click') {
  51.       click.set(el, val)
  52.     }
  53.   }
  54. }
  55.  
  56. const textarea = document.createElement('textarea')
  57.  
  58. function node(type, ...args) {
  59.   let el;
  60.   const namedEl = isTag(type);
  61.   if (namedEl) {
  62.     el = document.createElement(type)
  63.   } else {
  64.     el = document.createElement('div')
  65.     el.className = type
  66.   }
  67.  
  68.   const leng = args.length
  69.   for (let i = 0; i < leng; i++) {
  70.     const arg = args[i]
  71.     if ((i === 1 || leng === 1)
  72.       && typeof arg === 'string') {
  73.         if (arg.includes('&')) {
  74.           textarea.innerHTML = arg
  75.           el.innerText = textarea.innerHTML
  76.         } else { 
  77.           el.innerText = arg
  78.         }
  79.     } else if (i === 0 && typeof arg === 'string') {
  80.       el.classList.add(arg)
  81.     } else { 
  82.       if (typeof arg === 'object') {
  83.         if (arg.el) { 
  84.           el.appendChild(arg.el)
  85.         } else {
  86.           attrs(el, arg)
  87.         }
  88.       } 
  89.     }
  90.   }
  91.   document.body.appendChild(el)
  92.   return { el }
  93. }
  94.  
  95.  
  96. const { header, h1, h2, style, div, button } = dom
  97.  
  98. style(`
  99.   body, html {
  100.     font-family: sans-serif;
  101.   }
  102.   .edit-me {
  103.     margin: 1em;
  104.     outline: 1px solid red;
  105.     padding: .5em;
  106.   }
  107. `)
  108.  
  109. header(
  110.   h1('Dom Thoughts'),
  111.   h2('sub-header', 'Can\'t help playing with this', 
  112.     { style: 'font-style: italic;' }
  113.   )
  114. )
  115. div('main', 
  116.   button('hello', 'Hello', { click: () => alert('hello') }),
  117.   div('edit-me', 'Edit Me', { contentEditable: true })
  118. )

Just playing around with DOM creation syntax, kind of reacty… This is the main part:

  1. const { header, h1, h2, style, div, button } = dom
  2.  
  3. style(`
  4.   body, html {
  5.     font-family: sans-serif;
  6.   }
  7.   .edit-me {
  8.     margin: 1em;
  9.     outline: 1px solid red;
  10.     padding: .5em;
  11.   }
  12. `)
  13.  
  14. header(
  15.   h1('Dom Thoughts'),
  16.   h2('sub-header', 'Can\'t help playing with this', 
  17.     { style: 'font-style: italic;' }
  18.   )
  19. )
  20. div('main', 
  21.   button('hello', 'Hello', { click: () => alert('hello') }),
  22.   div('edit-me', 'Edit Me', { contentEditable: true })
  23. )
// brainstorming // ui
Older Posts
Newer Posts

Recent

Archive

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