)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

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…

Inverse of a Function

  1. const expoIn = t => 
  2.   (t==0) ? 0 : Math.pow(2, 10 * (t - 1))
  3.  
  4. const expoInInverse= t => 
  5.   (t==0) ? 0 : ((Math.log(t) + 10 * Math.log(2)) / Math.log(2)) / 10
  6.  
  7.  
  8. console.log(expoIn(.35) + ' ' +  expoInInverse(expoIn(.35)))

Very nice inverse function calculator by user fawad over at Wolfram Alpha. Was attempting to invert a standard “exponential in” easing function – after some futzing I resorted to the calculator 😀

Normalize Value Between 0 and 1

  1. const d = document.body.appendChild(
  2.   document.createElement`div`)
  3. d.innerHTML = `
  4. <input 
  5.   id="input"
  6.   type="range" 
  7.   min="-2" max="5" 
  8.   value="0">
  9. `
  10.  
  11. let val = 0;
  12.  
  13. console.log('drag slider...')
  14.  
  15. const range = (input.max - input.min);
  16.  
  17. input.oninput = () => {
  18.   val = (input.value - input.min) / range
  19.   console.log(input.value + ' - normalized = ' + val)
  20. }
// html // javascript // math // ui

Decompose Matrix

  1. const deltaTransformPoint = (matrix, point) => {
  2.   return {
  3.     x: point.x * matrix.a + point.y * matrix.c,
  4.     y: point.x * matrix.b + point.y * matrix.d
  5.   }
  6. }
  7.  
  8. const decomposeMatrix = matrix => {
  9.   let px = deltaTransformPoint(matrix, { x: 0, y: 1 })
  10.   let py = deltaTransformPoint(matrix, { x: 1, y: 0 })
  11.   let skewX = FROM_RADS * Math.atan2(px.y, px.x) - 90
  12.   let skewY = FROM_RADS * Math.atan2(py.y, py.x)
  13.  
  14.   return {
  15.     tx: matrix.e,
  16.     ty: matrix.f,
  17.     scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),
  18.     scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),
  19.     skewX: skewX,
  20.     skewY: skewY,
  21.     rotation: skewX
  22.   }
  23. }

Get the scale, translation, rotationa and skew values from a matrix.

Great stackoverflow answer from user dave

// graphics // math // matrix

Iterative Square Root

  1. //------------------------------------------------------------------
  2. float function_IterativeSquareRoot (float x) {
  3.   // http://en.wikipedia.org/wiki/Methods_of_computing_square_roots
  4.   // Ancient Babylonian technology
  5.   functionName = "Iterative (Heron's) Square Root";
  6.   float y = 0.5; 
  7.   int n = 6;
  8.   for (int i=0; i<n; i++) {
  9.     y = (y + x/y)/2.0;
  10.   }
  11.   return y;
  12. }

Was browsing some code by Golan Levin and stumbled on this…

There are some real gems in the repo – might port some stuff from there in the future…

snippet.zone ~ 2021-22 /// {s/z}