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

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

What is Clicked?

  1. document.addEventListener('click', e => console.log(e.target))

Try that one in your console and then click on stuff. I use that frequently when debugging…

// dom // tricks // ui

Cut Hole in Canvas (eraser)

  1. document.body.style.background = 'gray';
  2. const canvas = document.createElement('canvas');
  3. const c = canvas.getContext('2d');
  4.  
  5. canvas.width = 300;
  6. canvas.height = 300;
  7.  
  8. c.fillStyle='rgba(255, 0, 0, 0.8)'
  9. c.fillRect(0, 0, canvas.width, canvas.height);
  10.  
  11. c.globalCompositeOperation = 'destination-out';
  12. c.fillStyle = 'black';
  13. c.fillRect(100, 100, 150, 50);
  14.  
  15. document.body.appendChild(canvas);

destination-out is great for creating masks and eraser tools – things like that – in this case a 150×50 rectangle is cut out of a red background.

// canvas // color // graphics // tricks
Older Posts
Newer Posts

Recent

Archive

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