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

zxlp Hidden Sierpiński

  1. // https://actionsnippet.com/?p=349
  2. // zxlp : Hidden Sierpiński
  3. const canvas = document.createElement('canvas')
  4. const c = canvas.getContext('2d')
  5.  
  6. let s = .5
  7. canvas.width = innerWidth * s
  8. canvas.height = innerHeight * s
  9. canvas.style.transformOrigin = '0 0'
  10. canvas.style.scale = 1 / s
  11. canvas.style.imageRendering = 'pixelated'
  12. document.body.append(canvas)
  13.  
  14. const frame = document.createElement('canvas')
  15. const fc = frame.getContext('2d')
  16. frame.width = canvas.width
  17. frame.height = canvas.height
  18.  
  19. const copy = document.createElement('canvas')
  20. const cc = copy.getContext('2d')
  21. copy.width = canvas.width
  22. copy.height = canvas.height
  23.  
  24. frame.style.left = '100px' 
  25. frame.style.top = '100px'
  26.  
  27. fc.fillStyle = 'red'
  28. fc.fillRect(0, 0, 100, 100)
  29.  
  30. const _ = c.getImageData(0, 0, canvas.width, canvas.height)
  31.  
  32. const size = canvas.width * canvas.height * 4
  33.  
  34. let mx = 0
  35. let mouseX = 0
  36.  
  37. onpointermove = e => {
  38.   mx = e.clientX
  39. }
  40.  
  41. function loop() {
  42.   mouseX += (mx - mouseX) / 50
  43.  
  44.   for (let i = 0; i < size; i += 4) {
  45.     let ox = (~~(i / 4)) % canvas.width
  46.     let oy = (~~(i / 4)) / canvas.width
  47.     let col = ((ox | oy) * mouseX / 20) % 255
  48.  
  49.     _.data[i] = 0
  50.     _.data[i + 1] = col
  51.     _.data[i + 2] = col
  52.     _.data[i + 3] = 255
  53.   }
  54.  
  55.   c.putImageData(_, 0, 0)
  56.  
  57.   requestAnimationFrame(loop);
  58. }
  59. loop();

port of an old actionsnippet (see here) – made a youtube short of it at some point here…

// binary // canvas // color // graphics // hacks // hex // javascript // math // oldschool // tricks

Concatenative JavaScript

  1. const vars = {}
  2.  
  3. const as = s => v => vars[s] = v
  4.  
  5. const def = s => v => {
  6.   vars[s] = v
  7. }
  8.  
  9. const set = (last, prop, val) => {
  10.   last[prop] = val
  11. }
  12.  
  13. const put = (last, prop, val) => {
  14.   last[prop] = val
  15.   return last
  16. }
  17.  
  18. const of = k => run.last[k]
  19. const $ = k => () => vars[k]
  20.  
  21. const run = (prog, log) => {
  22.   run.stack = []
  23.   let curr
  24.   for (let i = 0; i < prog.length; i++) {
  25.     let val = prog[i]
  26.     if (val != null && val === $) { 
  27.       run.stack.push(val())
  28.     } else if (typeof val === 'function') {
  29.       let ctx = null
  30.       if (document.body[val.name]) { 
  31.         ctx = document.body 
  32.         val = val.bind(ctx)
  33.       } else if (document[val.name]) { 
  34.         ctx = document
  35.         val = val.bind(ctx)
  36.       } 
  37.  
  38.       if (log) console.log('exec', 
  39.         val.name == 'bound ' ? '\u03BB' : val.name, run.stack)
  40.  
  41.       curr = val.apply(ctx, run.stack)
  42.       if (curr != run.stack) { 
  43.         run.stack = curr != null ? [curr] : []
  44.         if (typeof curr === 'object') {
  45.           run.last = curr
  46.         }
  47.       }
  48.     } else {
  49.       if (val != null) run.stack.push(val)
  50.     }
  51.   }
  52. }
  53.  
  54. const showStack = () => {
  55.   console.log('- stack:', run.stack)
  56.   console.log('  -> last object', run.last)
  57.   return run.stack
  58. }
  59.  
  60. const _ = new Proxy({}, { 
  61.   get: (o, key) => (() => (...a) => 
  62.     run.last[key].apply(run.last, a)
  63.   )()
  64. })
  65.  
  66. // try it out
  67.  
  68. run( 
  69.   [ 'div', 
  70.     document.createElement, 
  71.     document.body.appendChild, 
  72.     as`myDiv`,
  73.     'innerHTML', 'mini <b>concatenative</b>', set,
  74.     'style', of, 'color', 'green', set,
  75.  
  76.     'just logging the element', $`myDiv`, console.log, 
  77.  
  78.     'canvas', document.createElement, 
  79.     document.body.appendChild, 
  80.     'width', 500, put,
  81.     'height', 500, put,
  82.     def`myCanvas`,
  83.  
  84.     '2d',
  85.     _.getContext,
  86.     'fillStyle', 'red', set,
  87.     100, 30, _.translate,
  88.     0, 0, 10, 100, _.fillRect,
  89.     20, 0, 10, 100, _.fillRect,
  90.     .2, _.rotate,
  91.     -30, 25, 100, 10, _.fillRect,
  92.     -20, 55, 100, 10, _.fillRect,
  93.  
  94.     {}, 
  95.     'name', 'zevan', put,
  96.     'age', 82, put,
  97.     JSON.stringify,
  98.     as`person`,
  99.  
  100.     showStack
  101.   ]
  102. )
  103. console.log(vars);

I recently spent some time reading about and playing with the FORTH language. I keep finding myself creating weird vaguely FORTH inspired snippets now… This one processes an array that’s in a concatenative format like this:

[ 'hello world', Date.now(), console.log ]

Arguments are collected on a stack and passed to a function when a function is hit in the array. There are some odd helper functions for setting properties, setting nested properties, running functions with a specific context etc…

Here is GPT4’s mostly correct explanation of what it does

This is a rather unusual piece of JavaScript code that creates a simple “programming language” based on the concept of a stack machine, and runs a “program” in this language. It resembles some sort of DSL (domain-specific language) or script-like construct.

Here are what the main components do:

  1. vars: This is a dictionary that stores variables defined in the program.
  2. as: This is a function that takes a string s and returns a function that takes a value v, storing v in vars under the key s.
  3. def: Similar to as, it defines a variable in vars.
  4. set: This function is used to set the property of an object. It takes the object last, the property name prop, and the value val, and assigns val to the property prop of the object last.
  5. put: Similar to set, it sets the property of an object and returns the updated object.
  6. of: This function gets the property with name k of the last object returned by the program.
  7. $: This function is a getter for variables in vars.
  8. run: This is the main function that runs the program. The program is an array of actions, where an action can be a function, an object with a name of ‘get’ (which pushes the result of calling the function onto the stack), or a value (which is pushed onto the stack).
  9. showStack: This function logs the current state of the stack and the last object returned.
  10. _: This creates a new Proxy object that allows arbitrary methods to be called on the last object returned by the program.

The run function is then called with a list of actions to perform. The actions include creating a div and canvas element, appending them to the body of the document, setting their properties, and drawing on the canvas. It also creates an object with a name and age, converts it to JSON, and stores it in a variable. Finally, it shows the state of the stack and logs all the variables.

// arrays // hacks // humor // javascript // meta // obfuscation // oldschool // proxies // speed-coded // speedcoding

Divide Rectangle Into Smaller Rectangles

  1. const rand = num => ~~(Math.random() * num)
  2.  
  3. let rectNum = 2 + rand(10)
  4. let rectCount = 0
  5.  
  6. document.body.appendChild(document.createElement('div')).innerText =
  7.   'click anywhere to regenerate'
  8.  
  9. function reset() {
  10.   ;[...document.querySelectorAll('.rect')].forEach(rect => rect.remove())
  11.   rectNum = 2 + rand(10)
  12.   rectCount = 0
  13.   newRect(300, 300, 50, 50)
  14. }
  15. reset()
  16. onpointerup = reset
  17.  
  18. function newRect(w, h, xp, yp) {
  19.   const rect = document.body.appendChild(document.createElement('div'))
  20.  
  21.   rect.classList.add('rect')
  22.   rectCount++
  23.  
  24.   Object.assign(rect.style, {
  25.     position: 'absolute',
  26.     left: `${xp}px`,
  27.     top: `${yp}px`,
  28.     width: `${w}px`,
  29.     height: `${h}px`,
  30.     outline: `1px solid black`,
  31.   })
  32.  
  33.   const props = {
  34.     x: xp,
  35.     y: yp,
  36.     height: h,
  37.     width: w,
  38.     seed: rand(3),
  39.     divide() {
  40.       const div = 2 + rand(5 * Math.random() * Math.random())
  41.       if (rand(2) == rand(2)) {
  42.         const newHeight = this.height / div
  43.  
  44.         newRect(this.width, this.height - newHeight, this.x, this.y)
  45.         newRect(this.width, newHeight, this.x, this.y + this.height - newHeight)
  46.       } else {
  47.         const newWidth = w / div
  48.         newRect(this.width - newWidth, this.height, this.x, this.y)
  49.         newRect(newWidth, this.height, this.x + this.width - newWidth, this.y)
  50.       }
  51.       rect.remove()
  52.     },
  53.   }
  54.   window.requestAnimationFrame(() => {
  55.     if (rectCount < rectNum) {
  56.       props.divide()
  57.     } else {
  58.       console.log('DONE!')
  59.     }
  60.   })
  61. }

This snippet comes to mind from time to time – one easy way to divide a rectangle into smaller rectangles- I actually went back and looked it up as it was an answer to a student question from 2006. The original one was written in ActionScript 2. Have a look:

  1. var wormNum:Number = 123;
  2. var wormCount:Number = 0;
  3. newWorm(400, 400, 0, 0);
  4. this.onEnterFrame = function() {
  5. 	if (wormCount < wormNum) {
  6. 		for (var props:String in this) {
  7. 			if (this[props]._x != undefined) {
  8. 				this[props].divide();
  9. 			}
  10. 		}
  11. 	}
  12. };
  13. function newWorm(w, h, xp, yp) {
  14. 	var currWorm:MovieClip = this.createEmptyMovieClip("box"+wormCount, this.getNextHighestDepth());
  15. 	wormCount++;
  16. 	box(w, h, currWorm, random(0xFFFFFF));
  17. 	currWorm._x = xp;
  18. 	currWorm._y = yp;
  19. 	currWorm.seed = random(3);
  20. 	currWorm.divide = function() {
  21. 		var div = random(4)+(1+Math.random()*1);
  22. 		if (random(2) == random(2)) {
  23. 			// divide vertically
  24. 			var nh:Number = this._height/div;
  25. 			newWorm(this._width, this._height-nh, this._x, this._y);
  26. 			newWorm(this._width, nh, this._x, this._y+this._height-nh);
  27. 		} else {
  28. 			// divide horizonatlly
  29. 			var nw:Number = this._width/div;
  30. 			newWorm(this._width-nw, this._height, this._x, this._y);
  31. 			newWorm(nw, this._height, this._x+this._width-nw, this._y);
  32. 		}
  33. 		this.removeMovieClip();
  34. 	};
  35. }
  36. function box(w:Number, h:Number, mc:MovieClip, col:Number):Void {
  37. 	with (mc) {
  38. 		lineStyle(0, 0, 20);
  39. 		beginFill(col, 10);
  40. 		moveTo(0, 0);
  41. 		lineTo(w, 0);
  42. 		lineTo(w, h);
  43. 		lineTo(0, h);
  44. 		endFill();
  45. 	}
  46. }

Don’t remember why I called them worms instead of rectangles, some AS2 types floating around…

// graphics // humor // javascript // math // oldschool // random // speedcoding

Pass a Class

  1. function callMethods(evt) {
  2.   const e = new evt
  3.   e.one()
  4.   e.two()
  5. }
  6.  
  7. callMethods(class {
  8.   one() {
  9.     console.log('one')
  10.   }
  11.  
  12.   two() {
  13.     console.log('two')
  14.   }
  15. })

This is so tempting for something I want to do… but too strange to use probably… maybe…

// functions // hacks // humor // objects // oldschool // oop

Destructure in Every Function

  1. // read through the comments of this snippet...
  2.  
  3. function dist1(x1, y1, x2, y2) {
  4.   const dx = x1 - x2
  5.   const dy = y1 - y2
  6.   return Math.sqrt(dx**2 + dy**2)
  7. }
  8.  
  9. function dist2({x1, y1, x2, y2}) {
  10.   const dx = x1 - x2
  11.   const dy = y1 - y2
  12.   return Math.sqrt(dx**2 + dy**2)
  13. }
  14.  
  15. // What's the difference here... well
  16. dist1(50, 50, 100, 100)
  17.  
  18. // vs
  19.  
  20. dist2({ x1: 50, y1: 50, x2: 100, y2: 100 })
  21.  
  22. // so what?
  23.  
  24. // With `dist2` the order of the arguments doesn't matter
  25. // and the arguments are named now as a result of being keys
  26. // in an object
  27.  
  28. // How many times have you changed a core function or method as you're
  29. // working on a project?
  30.  
  31. // Let's see another example:
  32.  
  33. // circle(100, 200, 300, 'red', 'blue', 0, 0)
  34.  
  35. // Can you guess what those arguments are? It's not really a big deal
  36. // and editors help with this, typescript helps with this... but what about:
  37.  
  38. circle({ 
  39.   x: 10, 
  40.   y: 110, 
  41.   radius: 120, 
  42.   fill: 'red', 
  43.   stroke: 'blue', 
  44.   velocityX: 0, 
  45.   velocitY: 0
  46. })
  47.  
  48. // how about...
  49. circle({ radius: 50, fill: 'blue' })
  50.  
  51. // or...
  52. circle({ stroke: 'green', x: 40, velocityX: 1 })
  53.  
  54. // etc...
  55. circle({ 
  56.   radius: 50,
  57.   stroke: 'black', x: 200, 
  58.   fill: 'teal',
  59.   velocityY: 1, velocityX: -1 })
  60.  
  61. // In combination with default arguments we end up with a very easy pattern for functions/methods
  62. // with a complex argument signature. gsap (aka TweenLite/TweenMax) has used this pattern for many
  63. // years. I've seen similar things in many languages...
  64.  
  65. // How does the circle function look?
  66.  
  67. function circle({ 
  68.   x = 0, y = 0, 
  69.   radius = 30, 
  70.   fill = 'black', 
  71.   stroke = 'transparent', 
  72.   velocityX = 0, velocityY = 0}) {
  73.  
  74.   const diam = radius * 2;
  75.  
  76.   const circle = document.body.appendChild(
  77.     Object.assign(
  78.       document.createElement('div'), 
  79.       { style: `
  80.         position: absolute;
  81.         left: ${x}px;
  82.         top: ${y}px;
  83.         width: ${diam}px;
  84.         height: ${diam}px;
  85.         background: ${fill};
  86.         border: 3px solid ${stroke};
  87.         border-radius: 100%;
  88.       `
  89.       }
  90.     )
  91.   )
  92.   if (velocityX != 0 || velocityY != 0) {
  93.     setInterval(() => {
  94.       x += velocityX
  95.       y += velocityY
  96.       circle.style.left = `${x}px`
  97.       circle.style.top = `${y}px`
  98.     }, 16)
  99.   }
  100.   return circle
  101. }
  102.  
  103.  
  104. // here is a golfed distance function - for no reason
  105. d=(a,b,c,d,e=a-c,f=b-d)=>Math.sqrt(e*e+f*f)
  106. console.log(
  107.   dist1(0, 0, 140, 140) ===
  108.   d(0, 0, 140, 140)
  109. )
// functions // humor // javascript // oldschool // tricks
Older Posts

Recent

Archive

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