Elasticity
copy let pointX = pointY = 0 ; document.addEventListener ( 'mousemove' , e => { pointX = e.clientX ; pointY = e.clientY ; } ) ; document.addEventListener ( 'touchmove' , e => { pointX = e.touches [ 0 ] .clientX pointY = e.touches [ 0 ] .clientY } ) ; let el = document.body .appendChild ( document.createElement `div` ) ; const size = 20 ; const halfSize = size / 2 ; Object .assign ( el.style , { position: 'absolute' , width: `${ size} px`, height: `${ size} px`, background: 'red' , left: 0 , top: 0 } ) let x = vx = 0 ; const loop = ( ) => { vx = ( ( pointX - x) * .2 + vx) * .79; x += vx; el.style .transform = `translate( ${ x - halfSize} px, 50px) `; requestAnimationFrame( loop) ; } loop( ) ; let info = document.body .appendChild ( document.createElement `div` ) ; info.innerHTML = 'move mouse or finger left/right' ;
Try it out…
Basic interactive elasticity with mouse or touch
Easy Hex Color Invert
copy let color = 0xFFFF00; function toHexString( col) { return '#' + ( '000000' + col.toString ( 16 ) ) .substr ( - 6 ) ; } function onClick( ) { // invert the color color ^= 0xFFFFFF; document.body .style .background = toHexString( color) ; } onClick( ) ; document.addEventListener ( 'click' , onClick) ; console.log ( 'try a different initial color' ) ; console.log ( 'click anywhere to invert background...' ) ;
Try it out…
Easily invert a hex color. Expanding on yesterdays post – just one of many reasons you may want to work with colors in their integer form.
Random Value From Array
copy const modes = [ 'walk' , 'run' , 'hide' , 'jump' , 'dance' ] ; const randomMode = modes[ Math .floor ( modes.length * Math .random ( ) ) ] ; console.log ( randomMode) ; // turn it into a function: function randomChoice( arr) { return arr[ Math .floor ( arr.length * Math .random ( ) ) ] ; } const colors = [ 'red' , 'green' , 'blue' , 'black' , 'white' ] ; console.log ( randomChoice( colors) ) ; console.log ( randomChoice( modes) ) ;
Try it out…
Grab a random value from an array.
Animation Along Path SVG
copy const el = document.body .appendChild ( document.createElement ( 'div' ) ) ; el.innerHTML = ` < svg width= "100%" height= "100%" viewBox= "0 0 550 496" > < path d= "M 20 10 C 100 100 300 00 300 100 200 200 150 300 20 10" stroke= "black" fill= 'none' vector- effect= "non-scaling-stroke" /> < circle cx= "20" cy= "10" r= "6" fill= "red" /> </ svg> < style> svg, div, body, html { overflow: visible; height: 100 %; width: 100 %; margin: 0 ; padding: 0 ; } </ style> `; const circle = el.querySelector ( 'circle' ) ; const path = el.querySelector ( 'path' ) ; const length = path.getTotalLength ( ) ; let pos = 0 ; function loop( ) { pos += 3 ; if ( pos > length) { pos = 0 ; } const point = path.getPointAtLength ( pos) ; circle.cx .baseVal .value = point.x ; circle.cy .baseVal .value = point.y ; requestAnimationFrame( loop) ; } loop( ) ;
Try it out
SVG has an easy way to animate something along an arbitrary path… getPointAtLength
Ellipse Path SVG
copy const ellipse = ( cx, cy, rx, ry) => { if ( ry == null ) ry = rx; return ` M${ cx- rx} ${ cy} a${ rx} ${ ry} 0 1 0 ${ rx* 2 } 0a${ rx} , ${ ry} 0 1 0 - ${ rx* 2 } , 0 ` } const svg = `< svg style= "overflow:hidden;stroke:black;fill:none" > < path d= "${ellipse(80, 50, 30)}" /> < path d= "${ellipse(80, 120, 60, 20)}" /> < path d= "${ellipse(150, 60, 20, 40)}" /> </ svg> ` document.body .innerHTML = svg;
Try it out
Draw an ellipse inside an svg path. I saw this method over on this stackoverflow thread at some point and tweaked it a little bit. Very nice simple solution from user yogi