Menu
I’m trying to get a javascript run on the size of the entire page.
The script was taken from: [url]http://codepen.io/soulwire/pen/Ffvlo
I changed it quite a bit to get the desired effect to do what I wanted.
[url]www.insania.co
The site runs on cargo, so everything had to be placed into the user created HTML. What I’d like to achieve is to get the ‘background’ effect to fill out the entire screen with perhaps margins.
If you look at the website and go to the “Your Mom” page (I’m sorry ? ) you can see that the actual script stops halfway through the page.
I tried a javascript (first few lines that give an alert) to save the window size into a variable and use that to define the NUM_PARTICLE, but it doesn’t work. The closest I could get is using screen.height / width.
Is there a way to perhaps scale the div to the screen size (CSS width=100%; didn’t work either), or ‘scale the script’? Because changing particle density or spacing can make the website awful heavy.
I hope it’s clear so far, if you have questions ask !
[code=html]<body>
<script src=’https://gist.github.com/mrdoob/838785/raw/a19a753b441d6ad41707c58f06dbe17f3470423c/RequestAnimationFrame.js’></script>
<script src=’https://raw.github.com/mrdoob/stats.js/master/build/stats.min.js’></script>
<script type=”text/javascript”>
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
alert(“hello world. The value of Height is: ” + height);
var NUM_PARTICLES = ( ( ROWS = screen.height/6 ) * ( COLS = screen.width/8 ) ),
THICKNESS = Math.pow( 80, 2.8 ),
SPACING = 8,
MARGIN = 100,
COLOR = 250,
DRAG = 0.95,
EASE = 0.05,
/*
used for sine approximation, but Math.sin in Chrome is still fast enough :)http://jsperf.com/math-sin-vs-sine-approximation
B = 4 / Math.PI,
C = -4 / Math.pow( Math.PI, 2 ),
P = 0.225,
*/
container,
particle,
canvas,
mouse,
stats,
list,
ctx,
tog,
man,
dx, dy,
mx, my,
d, t, f,
a, b,
i, n,
w, h,
p, s,
r, c
;
particle = {
vx: 0,
vy: 0,
x: 0,
y: 0
};
function init() {
container = document.getElementById( ‘container’ );
canvas = document.createElement( ‘canvas’ );
ctx = canvas.getContext( ‘2d’ );
man = false;
tog = true;
list = [];
w = canvas.width = COLS * SPACING + MARGIN ;
h = canvas.height = ROWS * SPACING + MARGIN ;
container.style.marginLeft = Math.round( w * -0.5 ) + ‘px’;
container.style.marginTop = Math.round( h * -0.5 ) + ‘px’;
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = Object.create( particle );
p.x = p.ox = MARGIN + SPACING * ( i % COLS );
p.y = p.oy = MARGIN + SPACING * Math.floor( i / COLS );
list[i] = p;
}
container.addEventListener( ‘mousemove’, function(e) {
bounds = container.getBoundingClientRect();
mx = e.clientX – bounds.left;
my = e.clientY – bounds.top;
man = true;
});
if ( typeof Stats === ‘function’ ) {
document.body.appendChild( ( stats = new Stats() ).domElement );
}
container.appendChild( canvas );
}
function step() {
if ( stats ) stats.begin();
if ( tog = !tog ) {
if ( !man ) {
t = +new Date() * 0.001;
mx = w * 0.5 + ( Math.cos( t * 2.1 ) * Math.cos( t * 0.9 ) * w * 0.45 );
my = h * 0.5 + ( Math.sin( t * 3.2 ) * Math.tan( Math.sin( t * 0.8 ) ) * h * 0.45 );
}
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = list[i];
d = ( dx = mx – p.x ) * dx + ( dy = my – p.y ) * dy;
f = -THICKNESS / d;
if ( d < THICKNESS ) {
t = Math.atan2( dy, dx );
p.vx += f * Math.cos(t);
p.vy += f * Math.sin(t);
}
p.x += ( p.vx *= DRAG ) + (p.ox – p.x) * EASE;
p.y += ( p.vy *= DRAG ) + (p.oy – p.y) * EASE;
}
} else {
b = ( a = ctx.createImageData( w+15, h+5 ) ).data;
for ( i = 0; i < NUM_PARTICLES; i++ ) {
p = list[i];
b[n = ( ~~p.x + ( ~~p.y * w ) ) * 4] = b[n+1] = b[n+2] = COLOR, b[n+3] = 50;
}
ctx.putImageData( a, 0, 0 );
}
if ( stats ) stats.end();
requestAnimationFrame( step );
}
init();
step();
</script>
<div id=’container’></div>