Snippet Zone

Parametric Equation for Rectangle

// from http://math.stackexchange.com/questions/69099/equation-of-a-rectangle

```
const rect = (px, py, rx, ry, t) => ({
```

  x: px + rx + rx * (Math.abs(Math.cos(t)) * Math.cos(t) + Math.abs(Math.sin(t)) * Math.sin(t)),

  y: py + ry + ry * (Math.abs(Math.cos(t)) * Math.cos(t) - Math.abs(Math.sin(t)) * Math.sin(t))

```
})
```
```
 
```
```
const SIZE = 200
```
```
 
```
```
const c = document.body.appendChild(
```

  Object.assign(document.createElement`canvas`,

```
    { width: SIZE, height: SIZE }
```
```
  )).getContext`2d`
```
```
 
```
```
c.fillStyle = 'black'
```
```
c.fillRect(0, 0, SIZE, SIZE)
```
```
 
```
```
let t = 0
```
```
setInterval(() => {
```

  const { x, y } = rect(20, 20, 60, 70, t)

```
  c.fillStyle = 'rgba(255, 0, 0, .1)'
```
```
  c.fillRect(x, y, 10, 10)
```
```
  t += .05
```
```
}, 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…

April 14, 2023

// animation // graphics // javascript // math

Divide Rectangle Into Smaller Rectangles

const rand = num => ~~(Math.random() * num)

```
 
```
```
let rectNum = 2 + rand(10)
```
```
let rectCount = 0
```
```
 
```

document.body.appendChild(document.createElement('div')).innerText =

```
  'click anywhere to regenerate'
```
```
 
```
```
function reset() {
```

  ;[...document.querySelectorAll('.rect')].forEach(rect => rect.remove())

```
  rectNum = 2 + rand(10)
```
```
  rectCount = 0
```
```
  newRect(300, 300, 50, 50)
```
```
}
```
```
reset()
```
```
onpointerup = reset
```
```
 
```
```
function newRect(w, h, xp, yp) {
```

  const rect = document.body.appendChild(document.createElement('div'))

```
 
```
```
  rect.classList.add('rect')
```
```
  rectCount++
```
```
 
```
```
  Object.assign(rect.style, {
```
```
    position: 'absolute',
```
```
    left: `${xp}px`,
```
```
    top: `${yp}px`,
```
```
    width: `${w}px`,
```
```
    height: `${h}px`,
```
```
    outline: `1px solid black`,
```
```
  })
```
```
 
```
```
  const props = {
```
```
    x: xp,
```
```
    y: yp,
```
```
    height: h,
```
```
    width: w,
```
```
    seed: rand(3),
```
```
    divide() {
```

      const div = 2 + rand(5 * Math.random() * Math.random())

```
      if (rand(2) == rand(2)) {
```

        const newHeight = this.height / div

```
 
```

        newRect(this.width, this.height - newHeight, this.x, this.y)

        newRect(this.width, newHeight, this.x, this.y + this.height - newHeight)

```
      } else {
```
```
        const newWidth = w / div
```

        newRect(this.width - newWidth, this.height, this.x, this.y)

        newRect(newWidth, this.height, this.x + this.width - newWidth, this.y)

```
      }
```
```
      rect.remove()
```
```
    },
```
```
  }
```
```
  window.requestAnimationFrame(() => {
```
```
    if (rectCount < rectNum) {
```
```
      props.divide()
```
```
    } else {
```
```
      console.log('DONE!')
```
```
    }
```
```
  })
```
```
}
```

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:

```
var wormNum:Number = 123;
```
```
var wormCount:Number = 0;
```
```
newWorm(400, 400, 0, 0);
```
```
this.onEnterFrame = function() {
```
```
	if (wormCount < wormNum) {
```
```
		for (var props:String in this) {
```
```
			if (this[props]._x != undefined) {
```
```
				this[props].divide();
```
```
			}
```
```
		}
```
```
	}
```
```
};
```
```
function newWorm(w, h, xp, yp) {
```

	var currWorm:MovieClip = this.createEmptyMovieClip("box"+wormCount, this.getNextHighestDepth());

```
	wormCount++;
```
```
	box(w, h, currWorm, random(0xFFFFFF));
```
```
	currWorm._x = xp;
```
```
	currWorm._y = yp;
```
```
	currWorm.seed = random(3);
```
```
	currWorm.divide = function() {
```

		var div = random(4)+(1+Math.random()*1);

```
		if (random(2) == random(2)) {
```
```
			// divide vertically
```
```
			var nh:Number = this._height/div;
```

			newWorm(this._width, this._height-nh, this._x, this._y);

			newWorm(this._width, nh, this._x, this._y+this._height-nh);

```
		} else {
```
```
			// divide horizonatlly
```
```
			var nw:Number = this._width/div;
```

			newWorm(this._width-nw, this._height, this._x, this._y);

			newWorm(nw, this._height, this._x+this._width-nw, this._y);

```
		}
```
```
		this.removeMovieClip();
```
```
	};
```
```
}
```

function box(w:Number, h:Number, mc:MovieClip, col:Number):Void {

```
	with (mc) {
```
```
		lineStyle(0, 0, 20);
```
```
		beginFill(col, 10);
```
```
		moveTo(0, 0);
```
```
		lineTo(w, 0);
```
```
		lineTo(w, h);
```
```
		lineTo(0, h);
```
```
		endFill();
```
```
	}
```
```
}
```

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

December 28, 2022

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

Inverse of a Function

```
const expoIn = t => 
```

  (t==0) ? 0 : Math.pow(2, 10 * (t - 1))

```
 
```
```
const expoInInverse= t => 
```

  (t==0) ? 0 : ((Math.log(t) + 10 * Math.log(2)) / Math.log(2)) / 10

```
 
```
```
 
```

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 😀

July 6, 2022

// javascript // math

Normalize Value Between 0 and 1

```
const d = document.body.appendChild(
```
```
  document.createElement`div`)
```
```
d.innerHTML = `
```
```
<input 
```
```
  id="input"
```
```
  type="range" 
```
```
  min="-2" max="5" 
```
```
  value="0">
```
```
`
```
```
 
```
```
let val = 0;
```
```
 
```
```
console.log('drag slider...')
```
```
 
```
```
const range = (input.max - input.min);
```
```
 
```
```
input.oninput = () => {
```

  val = (input.value - input.min) / range

  console.log(input.value + ' - normalized = ' + val)

```
}
```

July 5, 2022

// html // javascript // math // ui

Decompose Matrix

const deltaTransformPoint = (matrix, point) => {

```
  return {
```

    x: point.x * matrix.a + point.y * matrix.c,

    y: point.x * matrix.b + point.y * matrix.d

```
  }
```
```
}
```
```
 
```
```
const decomposeMatrix = matrix => {
```

  let px = deltaTransformPoint(matrix, { x: 0, y: 1 })

  let py = deltaTransformPoint(matrix, { x: 1, y: 0 })

  let skewX = FROM_RADS * Math.atan2(px.y, px.x) - 90

  let skewY = FROM_RADS * Math.atan2(py.y, py.x)

```
 
```
```
  return {
```
```
    tx: matrix.e,
```
```
    ty: matrix.f,
```

    scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b),

    scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d),

```
    skewX: skewX,
```
```
    skewY: skewY,
```
```
    rotation: skewX
```
```
  }
```
```
}
```

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

Great stackoverflow answer from user dave

March 28, 2022

// graphics // math // matrix

Older Posts

Newer Posts

Parametric Equation for Rectangle

Divide Rectangle Into Smaller Rectangles

Inverse of a Function

Normalize Value Between 0 and 1

Decompose Matrix

Recent

Archive