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

### Multiplicative Persistence

1. `const multp = (val, count = 1, res) => `
2. `  (res = (val + '').split```
3. `    .reduce((a, b) => a * b, 1) + '').length > 1 ?`
4. `      multp(res, count + 1) : count`
5. ` `
6. ` `
7. `console.log('test:', multp(2678789))`

Started watching this youtube video from numberphile and instantly made this half-golfed thing

Found this:

`f=n=>[n,...n>9?f(eval([...n+''].join`*`)):[]]`

By Arnauld over at codegolf.stackexchange

will definitely remember: `[...n+'']`

// golfed // hacks // humor // javascript // math

### Parametric Equation for Rectangle

1. `// from http://math.stackexchange.com/questions/69099/equation-of-a-rectangle`
2. `const rect = (px, py, rx, ry, t) => ({`
3. `  x: px + rx + rx * (Math.abs(Math.cos(t)) * Math.cos(t) + Math.abs(Math.sin(t)) * Math.sin(t)),`
4. `  y: py + ry + ry * (Math.abs(Math.cos(t)) * Math.cos(t) - Math.abs(Math.sin(t)) * Math.sin(t))`
5. `})`
6. ` `
7. `const SIZE = 200`
8. ` `
9. `const c = document.body.appendChild(`
10. `  Object.assign(document.createElement`canvas`,`
11. `    { width: SIZE, height: SIZE }`
12. `  )).getContext`2d``
13. ` `
14. `c.fillStyle = 'black'`
15. `c.fillRect(0, 0, SIZE, SIZE)`
16. ` `
17. `let t = 0`
18. `setInterval(() => {`
19. `  const { x, y } = rect(20, 20, 60, 70, t)`
20. `  c.fillStyle = 'rgba(255, 0, 0, .1)'`
21. `  c.fillRect(x, y, 10, 10)`
22. `  t += .05`
23. `}, 16)`

Wanted to know how to do this for something back in 2015. Great math stackexchange answer here: http://math.stackexchange.com/questions/69099/equation-of-a-rectangle

Could be optimized but leaving as is to match:

```x = p(|cos t|cos t + |sin t| sin t)
y = p(|cos t|cos t - |sin t| sin t)
```

One small change here is to add the width and height to the offset so that it draws from the upper left hand corner instead of the center…

### 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
snippet.zone ~ 2021-24 /// {s/z}