diff --git a/main.js b/main.js index b378692..680ce29 100644 --- a/main.js +++ b/main.js @@ -1,5 +1,7 @@ import WindowManager from './WindowManager.js' + + const t = THREE; let camera, scene, renderer, world; let near, far; @@ -19,36 +21,6 @@ let internalTime = getTime(); let windowManager; let initialized = false; - -// this code is essential to circumvent that some browser preload the content of some pages before you actually hit the url -document.addEventListener("visibilitychange", () => -{ - if (document.visibilityState != 'hidden' && !initialized) - { - init(); - } -}); - -window.onload = () => { - if (document.visibilityState != 'hidden') - { - init(); - } -}; - -function init () -{ - // add a short timeout because window.offsetX reports wrong values before a short period - setTimeout(() => { - setupScene(); - setupWindowManager(); - resize(); - updateWindowShape(false); - render(); - window.addEventListener('resize', resize); - }, 500) -} - // get time in seconds since beginning of the day (so that all windows use the same time) function getTime () { @@ -56,128 +28,164 @@ function getTime () } -function setupWindowManager () +if (new URLSearchParams(window.location.search).get("clear")) { - windowManager = new WindowManager(); - windowManager.setWinShapeChangeCallback(updateWindowShape); - windowManager.setWinChangeCallback(windowsUpdated); - - // here you can add your custom metadata to each windows instance - let metaData = {foo: "bar"}; + localStorage.clear(); +} +else +{ + // this code is essential to circumvent that some browser preload the content of some pages before you actually hit the url + document.addEventListener("visibilitychange", () => + { + if (document.visibilityState != 'hidden' && !initialized) + { + init(); + } + }); + + window.onload = () => { + if (document.visibilityState != 'hidden') + { + init(); + } + }; - // this will init the windowmanager and add this window to the centralised pool of windows - windowManager.init(metaData); + function init () + { + // add a short timeout because window.offsetX reports wrong values before a short period + setTimeout(() => { + setupScene(); + setupWindowManager(); + resize(); + updateWindowShape(false); + render(); + window.addEventListener('resize', resize); + }, 500) + } - // call update windows initially (it will later be called by the win change callback) - windowsUpdated(); -} + function setupWindowManager () + { + windowManager = new WindowManager(); + windowManager.setWinShapeChangeCallback(updateWindowShape); + windowManager.setWinChangeCallback(windowsUpdated); -function windowsUpdated () -{ - let wins = windowManager.getWindows(); + // here you can add your custom metadata to each windows instance + let metaData = {foo: "bar"}; - updateNumberOfCubes(); -} + // this will init the windowmanager and add this window to the centralised pool of windows + windowManager.init(metaData); -function updateNumberOfCubes () -{ - let wins = windowManager.getWindows(); + // call update windows initially (it will later be called by the win change callback) + windowsUpdated(); + } - // remove all cubes - cubes.forEach((c) => { - world.remove(c); - }) + function windowsUpdated () + { + let wins = windowManager.getWindows(); - cubes = []; + updateNumberOfCubes(); + } - // add new cubes - for (let i = 0; i < wins.length; i++) + function updateNumberOfCubes () { - let win = wins[i]; + let wins = windowManager.getWindows(); + + // remove all cubes + cubes.forEach((c) => { + world.remove(c); + }) + + cubes = []; + + // add new cubes + for (let i = 0; i < wins.length; i++) + { + let win = wins[i]; - let c = new t.Color(); - c.setHSL(i * .1, 1.0, .5); + let c = new t.Color(); + c.setHSL(i * .1, 1.0, .5); - let s = 100 + i * 50; - let cube = new t.Mesh(new t.BoxGeometry(s, s, s), new t.MeshBasicMaterial({color: c , wireframe: true})); - cube.position.x = win.shape.x + (win.shape.w * .5); - cube.position.y = win.shape.y + (win.shape.h * .5); + let s = 100 + i * 50; + let cube = new t.Mesh(new t.BoxGeometry(s, s, s), new t.MeshBasicMaterial({color: c , wireframe: true})); + cube.position.x = win.shape.x + (win.shape.w * .5); + cube.position.y = win.shape.y + (win.shape.h * .5); - world.add(cube); - cubes.push(cube); + world.add(cube); + cubes.push(cube); + } } -} -function updateWindowShape (easing = true) -{ - sceneOffsetTarget = {x: -window.screenX, y: -window.screenY}; - if (!easing) sceneOffset = sceneOffsetTarget; -} + function updateWindowShape (easing = true) + { + sceneOffsetTarget = {x: -window.screenX, y: -window.screenY}; + if (!easing) sceneOffset = sceneOffsetTarget; + } -function setupScene () -{ - camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000); - - camera.position.z = 2.5; - near = camera.position.z - .5; - far = camera.position.z + 0.5; - - scene = new t.Scene(); - scene.background = new t.Color(0.0); - scene.add( camera ); - - renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true}); - renderer.setPixelRatio(pixR); - - world = new t.Object3D(); - scene.add(world); - - renderer.domElement.setAttribute("id", "scene"); - document.body.appendChild( renderer.domElement ); -} + function setupScene () + { + camera = new t.OrthographicCamera(0, 0, window.innerWidth, window.innerHeight, -10000, 10000); + + camera.position.z = 2.5; + near = camera.position.z - .5; + far = camera.position.z + 0.5; + + scene = new t.Scene(); + scene.background = new t.Color(0.0); + scene.add( camera ); + + renderer = new t.WebGLRenderer({antialias: true, depthBuffer: true}); + renderer.setPixelRatio(pixR); + + world = new t.Object3D(); + scene.add(world); + + renderer.domElement.setAttribute("id", "scene"); + document.body.appendChild( renderer.domElement ); + } -function render () -{ - let t = getTime(); + function render () + { + let t = getTime(); - windowManager.update(); + windowManager.update(); - let falloff = .05; - sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff); - sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff); + let falloff = .05; + sceneOffset.x = sceneOffset.x + ((sceneOffsetTarget.x - sceneOffset.x) * falloff); + sceneOffset.y = sceneOffset.y + ((sceneOffsetTarget.y - sceneOffset.y) * falloff); - world.position.x = sceneOffset.x; - world.position.y = sceneOffset.y; + world.position.x = sceneOffset.x; + world.position.y = sceneOffset.y; - let wins = windowManager.getWindows(); + let wins = windowManager.getWindows(); - for (let i = 0; i < cubes.length; i++) - { - let cube = cubes[i]; - let win = wins[i]; - let _t = t;// + i * .2; + for (let i = 0; i < cubes.length; i++) + { + let cube = cubes[i]; + let win = wins[i]; + let _t = t;// + i * .2; - let posTarget = {x: win.shape.x + (win.shape.w * .5), y: win.shape.y + (win.shape.h * .5)} + let posTarget = {x: win.shape.x + (win.shape.w * .5), y: win.shape.y + (win.shape.h * .5)} - cube.position.x = cube.position.x + (posTarget.x - cube.position.x) * falloff; - cube.position.y = cube.position.y + (posTarget.y - cube.position.y) * falloff; - cube.rotation.x = _t * .5; - cube.rotation.y = _t * .3; - }; + cube.position.x = cube.position.x + (posTarget.x - cube.position.x) * falloff; + cube.position.y = cube.position.y + (posTarget.y - cube.position.y) * falloff; + cube.rotation.x = _t * .5; + cube.rotation.y = _t * .3; + }; - renderer.render(scene, camera); - requestAnimationFrame(render); -} + renderer.render(scene, camera); + requestAnimationFrame(render); + } -function resize () -{ - let width = window.innerWidth; - let height = window.innerHeight - - camera = new t.OrthographicCamera(0, width, 0, height, -10000, 10000); - camera.updateProjectionMatrix(); - renderer.setSize( width, height ); + function resize () + { + let width = window.innerWidth; + let height = window.innerHeight + + camera = new t.OrthographicCamera(0, width, 0, height, -10000, 10000); + camera.updateProjectionMatrix(); + renderer.setSize( width, height ); + } } \ No newline at end of file