Skip to content

Commit

Permalink
added clear code
Browse files Browse the repository at this point in the history
  • Loading branch information
@bgstaal
bgstaal committed Nov 23, 2023
1 parent c446f74 commit c1ea630
Showing 1 changed file with 133 additions and 125 deletions.
258 changes: 133 additions & 125 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import WindowManager from './WindowManager.js'



const t = THREE;
let camera, scene, renderer, world;
let near, far;
Expand All @@ -19,165 +21,171 @@ 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 ()
{
return (new Date().getTime() - today) / 1000.0;
}


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 );
}
}

0 comments on commit c1ea630

Please sign in to comment.