Divide Rectangle Into Smaller Rectangles
copy 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!' ) } } ) }
Try it out…
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:
copy 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…
Random Color Strings
copy R = Math .random b = document.body b.style = 'background: black; font-family: sans-serif; text-transform: uppercase; color: white;' setInterval( _ => { if ( R( ) < .9) { s = '' for ( i= 0 ; i< R( ) * 30 + 4 ; i++ ) s+= ( ~~( R( ) * 0xff) ) .toString ( 36 ) .replace ( R( ) < .9 ? /[0-9]/g : '' , '' ) b.innerHTML += ` < n style= "color:hsl(${R()*360}, 30%, 50%)" > ${ s} </ n> `+ ( R( ) < .1? '<br>' : '' ) ; } } , 100 )
Try it out…
Make some random strings and give them a random color… a friend of mine showed a work in progress forked codepen – so I created a golfed version/variation…
Fake RNG
copy let anchorslet idxlet leng = 10 let size = 200 let px = 0 let py = 0 function seed( ) { idx = 0 anchors = ( Date .now ( ) + '' ) .split `` .reverse ( ) .map ( v => parseFloat( v) / 10 ) .splice ( 0 , leng) } let last = 0 let zoom = 1 function rand( ) { if ( idx > size * size) seed( ) px += zoom py += ~~( px / size) if ( px >= size) px = 0 if ( py >= size) py = 0 const point = { x: anchors[ idx % leng] , y: anchors[ ( idx + 1 ) % leng] } idx++ let dists = [ ] for ( let i = 0 ; i < anchors.length ; i += 2 ) { let dx = px - anchors[ i] * size let dy = py - anchors[ i + 1 ] * size dists.push ( Math .sqrt ( dx * dx + dy * dy) ) } dists.sort ( ) last += ( dists[ 0 ] / size - last) / 4 return last } seed( ) let d = documentlet b = d.body with ( b.appendChild ( Object .assign ( d.createElement `canvas`, { width: 400 , height: 400 } ) ) .getContext `2d`) { fillStyle = 'black' fillRect( 0 , 0 , 400 , 400 ) for ( let i = 0 ; i < 200 ; i++ ) { for ( let j = 0 ; j < 200 ; j++ ) { const c = rand( ) * 255 fillStyle = `rgb( ${ c} , ${ c} , ${ c} ) ` fillRect( j * 2 , i * 2 , 1 , 2 ) } } }
Try it out…
Another one for genuary “Create your own pseudo-random number generator and visually check the results.”
Speed Coded Cosine Dither
copy d = document b = d.body wh = 300 hs = wh / 2 S = 1.5 with( b.appendChild ( Object .assign ( d.createElement `canvas`, { width: wh, height: wh } ) ) .getContext `2d`) { canvas.style .transformOrigin = '0 0' canvas.style .transform = `scale( ${ S} ) ` canvas.style .imageRendering = 'pixelated' fillStyle = 'gray' fillRect( 0 , 0 , wh, wh) shadowBlur = 80 shadowColor = 'black' ; shadowOffsetY = 20 for ( let i = 0 ; i < 70 ; i++ ) { save( ) translate( hs, hs) rotate( i / 33 ) scale( 1 - i / 100 , 1 ) translate( - hs, - hs) fillStyle = `hsl( ${ i << 2 } , 50 %, 50 % ) ` beginPath( ) arc( hs, hs, hs * .8, 0 , 7 ) fill( ) restore( ) shadowColor = 'transparent' shadowBlur = 0 } C = Object .assign ( d.createElement `canvas`, { width: wh, height: wh } ) .getContext ( '2d' ) C.drawImage ( canvas, 0 , 0 ) ; im = getImageData( 0 , 0 , wh, wh) ; p = im.data size = wh * wh * 4 modd = Math .random ( ) * 5550 for ( let i = 0 ; i < size; i += 4 ) { if ( Math .random ( ) < 0.0001 ) modd = Math .random ( ) * 5550 M = Math .cos ( i % modd) * 255 p[ i] = M < p[ i] ? 255 : 0 ; p[ i + 1 ] = M < p[ i + 1 ] ? 255 : 0 ; p[ i + 2 ] = M < p[ i + 2 ] ? 255 : 0 ; } putImageData( im, 0 , 0 ) ; globalCompositeOperation = 'hard-light' drawImage( C.canvas , 0 , 0 ) ; }
Try it out
Some speed-coded canvas stuff with a dither inspired by #genuary2022
valueOf for Shorter Function Calls
copy r= { valueOf: _=> Math .random ( ) } console.log ( + r) console.log ( + r) console.log ( + r)
Try it out…
Use valueOf
to shorten function calls. I learned this trick over at stackexchange codegolf here from user cyoce .