Wiggly Line Canvas
copy const canvas = document.body .appendChild ( document.createElement ( 'canvas' ) ) ; const c = canvas.getContext ( '2d' ) ; document.body .style .margin = 0 ; function resize( ) { canvas.width = innerWidth; canvas.height = innerHeight; } addEventListener( 'resize' , resize) ; resize( ) ; const PAD = 50 ; const RAD = 2 ; const SPEED = 20 ; const TWO_PI = Math .PI * 2 ; let mode = 'draw' ; let t = Math .random ( ) * TWO_PI, x = innerWidth / 2 , y = innerHeight / 2 , vx = 0 , vy = 0 , ta = 0 ; function loop( ) { for ( var i = 0 ; i < SPEED; i++ ) { t = Math .sin ( ta) * TWO_PI; vx = RAD * Math .cos ( t) ; vy = RAD * Math .sin ( t) ; ta += Math .random ( ) * 0.1 - 0.05 ; x += vx; y += vy; if ( Math .random ( ) < 0.005 ) { mode = 'no draw' ; } else if ( Math .random ( ) < 0.005 ) { mode = 'draw' ; } if ( mode === 'draw' ) { c.fillStyle = 'red' ; c.fillRect ( x, y, 2 , 2 ) ; } if ( x < - PAD) { x = innerWidth + PAD; } else if ( x > innerWidth + PAD) { x = - PAD; } if ( y < - PAD) { y = innerHeight + PAD; } else if ( y > innerHeight + PAD) { y = - PAD; } } requestAnimationFrame( loop) ; } loop( ) ;
Try it out…
Recently saw this in some very old code – cool trick for moving things in a wiggly way – or in this case, drawing a wiggly line.
Creative Coding Auto-Painting
copy Object .getOwnPropertyNames ( Math ) .map ( i => ( this [ i] = Math [ i] ) ) ; ( ( width = innerWidth * 2 , height = innerHeight * 2 , cnv = document.body .appendChild ( Object .assign ( document.createElement ( 'canvas' ) , { width, height } ) ) , c = cnv.getContext ( '2d' ) , r = ( n = 1 ) => Math .random ( ) * n, NUM = 50 , f = ( ) => ( { ax: r( width) , ay: r( height) , x: 0 , y: 0 , T: r( 9 ) , R: r( innerWidth * 0.8 ) + 40 , t: r( 6 ) , C: round( r( 255 ) ) , m: r( 5 ) + 1 } ) , cs, sn, dx, dy, ns = [ ...Array ( NUM) ] .map ( f) ) => { Object .assign ( cnv.style , { transformOrigin: '0 0' , transform: 'scale(.5)' } ) Object .assign ( document.body .style , { margin: 0 , padding: 0 } ) const clear = ( ) => { c.fillStyle = '#666668' c.fillRect ( 0 , 0 , width, height) c.globalAlpha = 0.5 } onresize = ( ) => { width = cnv.width = innerWidth * 2 height = cnv.height = innerHeight * 2 clear( ) } clear( ) setInterval( ( ) => { for ( i = 0 ; i < 30 ; i++ ) { ns.map ( ( n, i) => { with ( n) { x = ax + R * cos( t) y = ay + R * sin( t) * pow( sin( t * 0.5 ) , m) c.fillStyle = `rgba( ${ C} , ${ C} , ${ C} , .02) ` ; ( cs = cos( T) ) , ( sn = sin( T) ) , ( dx = x - ax) , ( dy = y - ay) c.fillRect ( cs * dx - sn * dy + ax, sn * dx + cs * dy + ay, 50 , 50 ) t += 0.1 R -= 0.01 if ( R < 5 ) ns[ i] = f( ) } } ) } } , 16 ) } ) ( )
Try it out…
Speed coded semi-golfed canvas texture. Best if viewed in fullscreen.
Wobbling Ball With Canvas
copy // same as yesterday but with canvas instead of svg const canvas = document.createElement ( 'canvas' ) , c = canvas.getContext ( '2d' ) ; document.body .appendChild ( canvas) ; document.body .style .margin = 0 ; let w = window.innerWidth , h = window.innerHeight , x = w / 2 , y = h / 2 , vx = vy = dx = dy = 0 , damp = 0.99 , div = 8 , ticks = 0 , wobbleChance = 0.03 , startTick = 50 ; function loop( ) { w = window.innerWidth ; h = window.innerHeight ; radius = w * 0.05 ; diam = radius * 2 ; diam2x = diam * 2 ; if ( x > w) { vx *= - 1 ; dx *= - 1 ; x = w; } else if ( x < 0 ) { vx *= - 1 ; dx *= - 1 ; x = 0 ; } if ( y > h) { vy *= - 1 ; dy *= - 1 ; y = h; } else if ( y < 0 ) { vy *= - 1 ; dy *= - 1 ; y = 0 } if ( Math .random ( ) < wobbleChance || ticks === startTick) { dx += Math .random ( ) * 10 - 5 ; dy += Math .random ( ) * 10 - 5 ; } dx *= damp; dy *= damp; vx += ( dx - vx) / div; vy += ( dy - vy) / div; x += vx; y += vy; // in most cases these days you // just clear the whole canvas, but for // this example we clear a rectangle around // the circle c.clearRect ( x - diam, y - diam, diam2x, diam2x ) ; // draw the path c.fillStyle = 'red' c.beginPath ( ) ; c.arc ( x, y, radius, 0 , Math .PI * 2 , false ) ; c.fill ( ) ; ticks++; window.requestAnimationFrame ( loop) ; } loop( ) ; function resize( ) { canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
A wobbling ball with canvas.
Wobbling Ball with SVG
copy const el = document.body .appendChild ( document.createElement ( 'div' ) ) ; el.innerHTML = ` < svg width= "100%" height= "100%" > < circle id= "circ" cx= "0" cy= "0" r= "50" fill= "red" style= "will-change: transform;" /> </ svg> < style> svg, div, body, html { overflow: visible; height: 100 %; width: 100 %; margin: 0 ; padding: 0 ; } </ style> `; let w = window.innerWidth , h = window.innerHeight , x = w / 2 , y = h / 2 , vx = vy = dx = dy = 0 , damp = 0.99 , div = 8 , ticks = 0 , wobbleChance = 0.03 , startTick = 50 ; function loop( ) { w = window.innerWidth ; h = window.innerHeight ; if ( x > w) { vx *= - 1 ; dx *= - 1 ; x = w; } else if ( x < 0 ) { vx *= - 1 ; dx *= - 1 ; x = 0 ; } if ( y > h) { vy *= - 1 ; dy *= - 1 ; y = h; } else if ( y < 0 ) { vy *= - 1 ; dy *= - 1 ; y = 0 } if ( Math .random ( ) < wobbleChance || ticks === startTick) { dx += Math .random ( ) * 10 - 5 ; dy += Math .random ( ) * 10 - 5 ; } dx *= damp; dy *= damp; vx += ( dx - vx) / div; vy += ( dy - vy) / div; x += vx; y += vy; circ.setAttribute ( 'transform' , `translate( ${ x} ${ y} ) `) ; ticks++; window.requestAnimationFrame ( loop) ; } loop( ) ; function resize( ) { const radius = Math .min ( w, h) * .05; // `window.circ` is the global id (⌐■_■) circ.r .baseVal .value = radius; } resize( ) ; window.addEventListener ( 'resize' , resize) ;
Try it out…
A wobbling ball with svg.
Quick SVG
copy const el = document.body .appendChild ( document.createElement ( 'div' ) ) ; el.innerHTML = `< svg style= 'overlow:visible' > < circle cx= "100" cy= "20" r= "20" fill= "red" /> < rect x= "100" y= "60" width= "20" height= "20" fill= "blue" /> </ svg> `;
Try it out…
Defining SVG like this in a template string is a fast and powerful way to start doing SVG that is controlled or generated by JavaScript. Here is another example:
copy const scribble = document.body .appendChild ( document.createElement ( 'div' ) ) ; const d = ( iter = 30 ) => { // make sure the iter is odd if ( iter % 2 == 0 ) iter += 1 ; // random cubic beziér let path = 'M ' ; for ( let i = 0 ; i < iter; i++ ) { const cmd = i == 1 ? 'C ' : ' ' path += cmd + Math .random ( ) * 200 + ' ' + Math .random ( ) * 200 ; } return path + 'z' ; } scribble.innerHTML = `< svg style= 'overlow:visible' viewBox= "0 0 200 200" > < path d= "${d()}" stroke= "#295896" stroke- width= "3" fill= "#ccc" fill- rule= "even-odd" vector- effect= "non-scaling-stroke" /> </ svg> < style> svg, div, body, html { overflow: visible; height: 100 %; width: 100 %; margin: 0 ; padding: 0 ; } </ style> `;
Try it out…
You’ll notice a somewhat hacky style tag as well… this is used to quickly fill the page with the SVG.