function resize() {
let { width, height } = getDimensions();
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
setScaleFactor(width);
}
function paramChange(change) {
const { width, height } = getDimensions();
params[change.paramKey].value = change.newValue;
if (change.paramKey === 'vertices') {
let tileSize = width > height ? width / 25 : height / 25;
makePolygonArray(tileSize, ctx);
}
}
function tick(timestamp) {
let { width, height } = getDimensions();
let { ft, ts } = getSample();
let vol = smoothVol.sumAndProcess(ft);
let scale = Math.log2(vol + 2) * scaleFactor;
logoObject.scale.set(scale, scale, (scale + 0.8) ** 6);
if (renderer) {
renderer.render(scene, camera);
}
}
function tick() {
const { width, height } = getDimensions();
const { ft } = getSample();
// clear the canvas.
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillRect(0, 0, width, height);
if (params.ft.value) {
drawFt(width, height, ft);
}
}
function tick(skqw) {
const { width, height } = getDimensions();
const { ft, ts } = getSample();
ctx.globalCompositeOperation = 'source-over';
drawBg(width, height, ft);
ctx.globalCompositeOperation = 'screen';
drawBars(width, height, ft);
ctx.globalCompositeOperation = 'source-over';
drawWave(width, height, ts);
}
function resize() {
if (canvas) {
let {width, height} = getDimensions();
// resize the foreground canvas
ctx.translate(width/2, height/2);
// resize the bg canvas
let tileSize = width > height ? width / 25 : height / 25;
drawBg(width, height);
makePolygonArray(tileSize, ctx);
makeStarArray()
}
}
function tick(timestamp) {
let { width, height } = getDimensions();
let { ft, ts } = getSample();
let wave = smoother.process(ts);
if (geometry) {
let length = ts.length;
for (let j = 0; j < length; j++) {
let v = geometry.vertices[j];
v.set(
-(length / 2 * scale) + j * scale + Math.sin(params.param1.value / 5 * j) * params.param1.value,
wave[j] * 1000 + (Math.tan(params.param1.value / 5 * j) * params.param1.value),
0);
}
line.setGeometry(geometry);
}
renderer.render(scene, camera);
}
function tick(timestamp) {
let framesElapsed = getFrames(timestamp);
let {width, height} = getDimensions();
let {ft, ts} = getSample();
vol = smoother.sumAndProcess(ft);
ctx.fillStyle = 'rgba(0, 0, 0, 0.01)';
ctx.fillRect(-width / 2, -height / 2, width, height);
drawBg(width, height);
stars.forEach(star => star.drawStar(vol, framesElapsed));
rotateForeground();
tiles.forEach(tile => tile.render(ft, vol, tiles.length, params, vol));
tiles.forEach(tile => {
if (tile.highlight > 0) {
tile.drawHighlight(volume, params, vol);
}
});
}
function init() {
const { width, height } = getDimensions();
const { ft, ts } = getSample();;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, width / height, 10, 5000);
camera.position.set(0, 0, 700000/width);
camera.lookAt(new THREE.Vector3(0, 0, 0));
let canvas = createCanvas();
renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setSize(width, height);
scene = new THREE.Scene();
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 10, 50, 50 );
scene.add(light);
let length = ts.length;
geometry = new THREE.Geometry();
geometry.dynamic = true;
for(let j = 0; j < length; j ++ ) {
var v = new THREE.Vector3(-(length / 2 * scale) + j * scale, 0, 0);
geometry.vertices.push( v );
}
line = new MeshLine();
line.setGeometry( geometry );
line.lineWidth = 2;
line.sizeAttenuation = 1;
var material = new MeshLineMaterial();
var mesh = new THREE.Mesh(line.geometry, material);
scene.add( mesh );
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function init() {
const { width, height } = getDimensions();
const { ft } = getSample();
setScaleFactor(width);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(100, width / height, 1, 200000000);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
let canvas = createCanvas();
renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setSize(width, height);
let light = new THREE.PointLight(0xff0000, 1, 100);
light.position.set(10, 50, 50);
scene.add(light);
// instantiate a loader
var loader = new THREE.ObjectLoader();
logoObject = loader.parse(logoFile);
logoObject.geometry.center();
scene.add(logoObject);
// sky stuff
sky = new THREE.Sky();
scene.add(sky.mesh);
var effectController = {
turbidity: 10,
rayleigh: 2,
mieCoefficient: 0.005,
mieDirectionalG: 0.8,
luminance: 1,
inclination: 0.49, // elevation / inclination
azimuth: 0.25, // Facing front,
sun: ! true
};
// Add Sun Helper
sunSphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(20000, 16, 8),
new THREE.MeshBasicMaterial({ color: 0xffffff })
);
sunSphere.position.y = - 700000;
sunSphere.visible = false;
scene.add(sunSphere);
var distance = 400000;
var uniforms = sky.uniforms;
uniforms.turbidity.value = effectController.turbidity;
uniforms.rayleigh.value = effectController.rayleigh;
uniforms.luminance.value = effectController.luminance;
uniforms.mieCoefficient.value = effectController.mieCoefficient;
uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
var theta = Math.PI * (effectController.inclination - 0.5);
var phi = 2 * Math.PI * (effectController.azimuth - 0.5);
sunSphere.position.x = distance * Math.cos(phi);
sunSphere.position.y = distance * Math.sin(phi) * Math.sin(theta);
sunSphere.position.z = distance * Math.sin(phi) * Math.cos(theta);
sunSphere.visible = effectController.sun;
sky.uniforms.sunPosition.value.copy(sunSphere.position);
}
function resize() {
let { width, height } = getDimensions();
renderer.setSize(width, height);
}