<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < script>
window. requestAnimFrame = ( function ( ) { return ( window. requestAnimationFrame || window. webkitRequestAnimationFrame || window. mozRequestAnimationFrame || window. oRequestAnimationFrame || window. msRequestAnimationFrame || function ( callback ) { window. setTimeout ( callback) ; } ) ;
} ) ; function init ( elemid ) { let canvas = document. getElementById ( elemid) , c = canvas. getContext ( "2d" ) , w = ( canvas. width = window. innerWidth) , h = ( canvas. height = window. innerHeight) ; c. fillStyle = "rgba(30,30,30,1)" ; c. fillRect ( 0 , 0 , w, h) ; return { c : c, canvas : canvas} ;
}
</ script> < linkrel = " stylesheet" href = " css/style.css" > </ head> < body> < canvasid = " canvas" > </ canvas> < scriptsrc = " js/script.js" > </ script> </ body> </ html> window. onload = function ( ) { class segm { constructor ( x, y, l ) { this . b = Math. random ( ) * 1.9 + 0.1 ; this . x0 = x; this . y0 = y; this . a = Math. random ( ) * 2 * Math. PI ; this . x1 = this . x0 + l * Math. cos ( this . a) ; this . y1 = this . y0 + l * Math. sin ( this . a) ; this . l = l; } update ( x, y ) { this . x0 = x; this . y0 = y; this . a = Math. atan2 ( this . y1 - this . y0, this . x1 - this . x0) ; this . x1 = this . x0 + this . l * Math. cos ( this . a) ; this . y1 = this . y0 + this . l * Math. sin ( this . a) ; } } class rope { constructor ( tx, ty, l, b, slq ) { this . res = l / slq; this . l = l; this . segm = [ ] ; this . segm. push ( new segm ( tx, ty, this . l / this . res) ) ; for ( let i = 1 ; i < this . res; i++ ) { this . segm. push ( new segm ( this . segm[ i - 1 ] . x1, this . segm[ i - 1 ] . y1, this . l / this . res) ) ; } this . b = b; } update ( t ) { this . segm[ 0 ] . update ( t. x, t. y) ; for ( let i = 1 ; i < this . res; i++ ) { this . segm[ i] . update ( this . segm[ i - 1 ] . x1, this . segm[ i - 1 ] . y1) ; } } show ( t ) { if ( t == "l" ) { c. beginPath ( ) ; for ( let i = 0 ; i < this . segm. length; i++ ) { c. lineTo ( this . segm[ i] . x0, this . segm[ i] . y0) ; } c. lineTo ( this . segm[ this . segm. length - 1 ] . x1, this . segm[ this . segm. length - 1 ] . y1) ; c. strokeStyle = "white" ; c. lineWidth = this . b; c. stroke ( ) ; c. beginPath ( ) ; c. arc ( this . segm[ 0 ] . x0, this . segm[ 0 ] . y0, 1 , 0 , 2 * Math. PI ) ; c. fillStyle = "white" ; c. fill ( ) ; c. beginPath ( ) ; c. arc ( this . segm[ this . segm. length - 1 ] . x1, this . segm[ this . segm. length - 1 ] . y1, 2 , 0 , 2 * Math. PI ) ; c. fillStyle = "white" ; c. fill ( ) ; } else { for ( let i = 0 ; i < this . segm. length; i++ ) { c. beginPath ( ) ; c. arc ( this . segm[ i] . x0, this . segm[ i] . y0, this . segm[ i] . b, 0 , 2 * Math. PI ) ; c. fillStyle = "white" ; c. fill ( ) ; } c. beginPath ( ) ; c. arc ( this . segm[ this . segm. length - 1 ] . x1, this . segm[ this . segm. length - 1 ] . y1, 2 , 0 , 2 * Math. PI ) ; c. fillStyle = "white" ; c. fill ( ) ; } } } let c = init ( "canvas" ) . c, canvas = init ( "canvas" ) . canvas, w = ( canvas. width = window. innerWidth) , h = ( canvas. height = window. innerHeight) , ropes = [ ] ; let nameOfVariable = "value" , mouse = { } , last_mouse = { } , rl = 50 , randl = [ ] , target = { x : w/ 2 , y : h/ 2 } , last_target = { } , t = 0 , q = 10 , da = [ ] , type = "l" ; for ( let i = 0 ; i < 100 ; i++ ) { ropes. push ( new rope ( w / 2 , h / 2 , ( Math. random ( ) * 1 + 0.5 ) * 500 , Math. random ( ) * 0.4 + 0.1 , Math. random ( ) * 15 + 5 ) ) ; randl. push ( Math. random ( ) * 2 - 1 ) ; da. push ( 0 ) ; } function draw ( ) { if ( mouse. x) { target. errx = mouse. x - target. x; target. erry = mouse. y - target. y; } else { target. errx = w / 2 + ( h / 2 - q) * Math. sqrt ( 2 ) * Math. cos ( t) / ( Math. pow ( Math. sin ( t) , 2 ) + 1 ) - target. x; target. erry = h / 2 + ( h / 2 - q) * Math. sqrt ( 2 ) * Math. cos ( t) * Math. sin ( t) / ( Math. pow ( Math. sin ( t) , 2 ) + 1 ) - target. y; } target. x += target. errx / 10 ; target. y += target. erry / 10 ; t += 0.01 ; for ( let i = 0 ; i < ropes. length; i++ ) { if ( randl[ i] > 0 ) { da[ i] += ( 1 - randl[ i] ) / 10 ; } else { da[ i] += ( - 1 - randl[ i] ) / 10 ; } ropes[ i] . update ( { x : target. x + randl[ i] * rl * Math. cos ( ( i * 2 * Math. PI ) / ropes. length + da[ i] ) , y : target. y + randl[ i] * rl * Math. sin ( ( i * 2 * Math. PI ) / ropes. length + da[ i] ) } ) ; if ( randl[ i] > - 0.5 ) { type = "l" ; } else { type = "o" ; } ropes[ i] . show ( type) ; } last_target. x = target. x; last_target. y = target. y; } canvas. addEventListener ( "mousemove" , function ( e ) { last_mouse. x = mouse. x; last_mouse. y = mouse. y; mouse. x = e. pageX - this . offsetLeft; mouse. y = e. pageY - this . offsetTop; } , false ) ; canvas. addEventListener ( "mouseleave" , function ( e ) { mouse. x = false ; mouse. y = false ; } ) ; function loop ( ) { window. requestAnimFrame ( loop) ; c. clearRect ( 0 , 0 , w, h) ; draw ( ) ; } window. addEventListener ( "resize" , function ( ) { ( w = canvas. width = window. innerWidth) , ( h = canvas. height = window. innerHeight) ; loop ( ) ; } ) ; loop ( ) ; setInterval ( loop, 1000 / 60 ) ;
} ;
body,
html { margin : 0px; padding : 0px; position : fixed; background : rgb ( 30, 30, 30) ; cursor : none;
}
