mirror of
https://iceshrimp.dev/Crimekillz/jointrashposs.git
synced 2024-11-25 10:19:07 +01:00
kakkokari-gtyih
parent
6205376368
commit
f267440b0c
@ -1,84 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import * as Calc from './utils/calc';
|
||||
import * as Ease from './utils/ease';
|
||||
import { Loader } from './loader';
|
||||
import { System } from './system';
|
||||
|
||||
export class Drop {
|
||||
private loader: Loader;
|
||||
private system: System;
|
||||
|
||||
private array: Drop[];
|
||||
private group: THREE.Object3D;
|
||||
private x: number;
|
||||
private y: number;
|
||||
private z: number;
|
||||
private size: number;
|
||||
private color: number;
|
||||
private opacity: number;
|
||||
private strength: number;
|
||||
private yBase: number;
|
||||
|
||||
private progress: number = 0;
|
||||
private rate: number = 0.01;
|
||||
|
||||
private geometry: System['boxGeometry'];
|
||||
private material: THREE.MeshBasicMaterial;
|
||||
private mesh: THREE.Mesh;
|
||||
|
||||
constructor(config, system) {
|
||||
this.system = system;
|
||||
this.loader = this.system.loader;
|
||||
|
||||
this.array = config.array;
|
||||
this.group = config.group;
|
||||
this.x = config.x;
|
||||
this.y = config.y;
|
||||
this.z = config.z;
|
||||
this.size = config.size;
|
||||
this.color = config.color;
|
||||
this.opacity = config.opacity;
|
||||
this.strength = config.strength;
|
||||
|
||||
this.yBase = config.y;
|
||||
|
||||
this.createMesh();
|
||||
}
|
||||
|
||||
createMesh() {
|
||||
this.geometry = this.system.boxGeometry;
|
||||
|
||||
this.material = new THREE.MeshBasicMaterial({
|
||||
color: this.color,
|
||||
transparent: true,
|
||||
opacity: this.opacity,
|
||||
depthTest: false,
|
||||
precision: 'lowp'
|
||||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(this.geometry, this.material);
|
||||
|
||||
this.mesh.position.x = this.x;
|
||||
this.mesh.position.y = this.y;
|
||||
this.mesh.position.z = this.z;
|
||||
|
||||
this.mesh.scale.set(this.size, this.size, this.size);
|
||||
|
||||
this.group.add(this.mesh);
|
||||
}
|
||||
|
||||
update(i) {
|
||||
this.progress += this.rate * this.loader.deltaTimeNormal;
|
||||
this.mesh.position.y = this.yBase - Ease.inExpo(this.progress, 0, 1, 1) * this.yBase;
|
||||
this.mesh.scale.set(this.size, this.size + this.size * 16 * Ease.inExpo(this.progress, 0, 1, 1), this.size);
|
||||
this.mesh.material.opacity = Ease.inExpo(this.progress, 0, 1, 1);
|
||||
|
||||
if(this.progress >= 1) {
|
||||
this.geometry.dispose();
|
||||
this.material.dispose();
|
||||
this.group.remove(this.mesh);
|
||||
this.array.splice(i, 1);
|
||||
this.system.createRipple(this.mesh.position.x, this.mesh.position.z, this.strength);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,117 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { System } from './system';
|
||||
|
||||
export class Loader {
|
||||
public timescale: number = 0.75;
|
||||
public camera: THREE.PerspectiveCamera;
|
||||
public clock: THREE.Clock;
|
||||
public deltaTimeSeconds: number;
|
||||
public deltaTimeMilliseconds: number;
|
||||
public deltaTimeNormal: number;
|
||||
public elapsedMilliseconds: number;
|
||||
public system: System;
|
||||
public scene: THREE.Scene;
|
||||
public renderer: THREE.WebGLRenderer;
|
||||
private diffTime: number;
|
||||
private raf: ReturnType<typeof window.requestAnimationFrame> | null;
|
||||
private dom: HTMLElement;
|
||||
|
||||
constructor(container: HTMLElement) {
|
||||
this.dom = container;
|
||||
|
||||
this.raf = null;
|
||||
|
||||
this.setupTime();
|
||||
this.setupScene();
|
||||
this.setupCamera();
|
||||
this.setupRenderer();
|
||||
this.listen();
|
||||
this.onResize();
|
||||
|
||||
this.system = new System(this, {
|
||||
particleColor: tinycolor(getComputedStyle(this.dom).getPropertyValue('--c-text')).toHexString(),
|
||||
dropColor: tinycolor(getComputedStyle(this.dom).getPropertyValue('--c-brand')).toHexString(),
|
||||
rippleColor: tinycolor(getComputedStyle(this.dom).getPropertyValue('--c-brand')).toHexString(),
|
||||
});
|
||||
this.loop();
|
||||
}
|
||||
|
||||
setupTime() {
|
||||
this.clock = new THREE.Clock();
|
||||
this.deltaTimeSeconds = this.clock.getDelta() * this.timescale;
|
||||
this.deltaTimeMilliseconds = this.deltaTimeSeconds * 1000;
|
||||
this.deltaTimeNormal = this.deltaTimeMilliseconds / (1000 / 60);
|
||||
this.elapsedMilliseconds = 0;
|
||||
}
|
||||
|
||||
setupScene() {
|
||||
this.scene = new THREE.Scene();
|
||||
}
|
||||
|
||||
setupCamera() {
|
||||
this.camera = new THREE.PerspectiveCamera(70, 0, 0.0001, 10000);
|
||||
|
||||
//this.camera.position.x = 0;
|
||||
//this.camera.position.y = 0;
|
||||
//this.camera.position.z = 20;
|
||||
|
||||
this.camera.position.x = 0;
|
||||
this.camera.position.y = -30;
|
||||
this.camera.position.z = 0;
|
||||
}
|
||||
|
||||
setupRenderer() {
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
alpha: true,
|
||||
antialias: true
|
||||
});
|
||||
|
||||
this.dom.appendChild(this.renderer.domElement);
|
||||
}
|
||||
|
||||
update() {
|
||||
this.deltaTimeSeconds = this.clock.getDelta();
|
||||
if(this.diffTime) {
|
||||
this.deltaTimeSeconds -= this.diffTime;
|
||||
this.diffTime = 0;
|
||||
}
|
||||
this.deltaTimeSeconds *= this.timescale;
|
||||
this.deltaTimeMilliseconds = this.deltaTimeSeconds * 1000;
|
||||
this.deltaTimeNormal = this.deltaTimeMilliseconds / (1000 / 60);
|
||||
this.elapsedMilliseconds += this.deltaTimeMilliseconds;
|
||||
|
||||
this.system.update();
|
||||
}
|
||||
|
||||
render() {
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
|
||||
listen() {
|
||||
window.addEventListener('resize', () => this.onResize());
|
||||
}
|
||||
|
||||
onResize() {
|
||||
const width = this.dom.offsetWidth;
|
||||
const height = this.dom.offsetHeight;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
|
||||
this.renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
|
||||
this.renderer.setSize(width, height);
|
||||
}
|
||||
|
||||
loop() {
|
||||
this.update();
|
||||
this.render();
|
||||
this.raf = window.requestAnimationFrame(() => this.loop());
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.raf) {
|
||||
window.cancelAnimationFrame(this.raf);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import * as Calc from './utils/calc';
|
||||
import * as Ease from './utils/ease';
|
||||
import { Loader } from './loader';
|
||||
import { System } from './system';
|
||||
|
||||
export class Particle {
|
||||
private loader: Loader;
|
||||
private system: System;
|
||||
|
||||
private lerpFactor = 0.3;
|
||||
private dampFactor = 0.3;
|
||||
|
||||
private group: THREE.Object3D;
|
||||
private x: number;
|
||||
private y: number;
|
||||
private z: number;
|
||||
private size: number;
|
||||
private color: number;
|
||||
private opacity: number;
|
||||
|
||||
public base: THREE.Vector3;
|
||||
public velocity: THREE.Vector3;
|
||||
private geometry: THREE.SphereBufferGeometry;
|
||||
private material: THREE.MeshBasicMaterial;
|
||||
private mesh: THREE.Mesh;
|
||||
|
||||
constructor(config, system) {
|
||||
this.system = system;
|
||||
this.loader = this.system.loader;
|
||||
|
||||
this.group = config.group;
|
||||
this.x = config.x;
|
||||
this.y = config.y;
|
||||
this.z = config.z;
|
||||
this.size = config.size;
|
||||
this.color = config.color;
|
||||
this.opacity = config.opacity;
|
||||
|
||||
this.createMesh();
|
||||
|
||||
this.base = new THREE.Vector3(config.x, config.y, config.z);
|
||||
this.velocity = new THREE.Vector3(0, 0, 0);
|
||||
}
|
||||
|
||||
createMesh() {
|
||||
this.geometry = this.system.sphereGeometry;
|
||||
|
||||
this.material = new THREE.MeshBasicMaterial({
|
||||
color: this.color,
|
||||
transparent: true,
|
||||
opacity: this.opacity,
|
||||
depthTest: false,
|
||||
precision: 'lowp'
|
||||
});
|
||||
|
||||
this.mesh = new THREE.Mesh(this.geometry, this.material);
|
||||
|
||||
this.mesh.position.x = this.x;
|
||||
this.mesh.position.y = this.y;
|
||||
this.mesh.position.z = this.z;
|
||||
|
||||
this.mesh.scale.set(this.size, this.size, this.size);
|
||||
|
||||
this.group.add(this.mesh);
|
||||
}
|
||||
|
||||
update() {
|
||||
const scale = 0.075 + (Math.abs(this.velocity.y) / 25)
|
||||
this.mesh.scale.set(scale, scale, scale);
|
||||
|
||||
//const opacity = 0.15 + (Math.abs(this.velocity.y) / 1)
|
||||
//this.mesh.material.opacity = Calc.clamp(opacity, 0.15, 1);
|
||||
const opacity = 0 + (Math.abs(this.velocity.y) / 1)
|
||||
this.mesh.material.opacity = Calc.clamp(opacity, 0, 1);
|
||||
|
||||
this.velocity.y += (this.base.y - this.mesh.position.y) * this.lerpFactor;
|
||||
this.velocity.multiplyScalar(this.dampFactor);
|
||||
this.mesh.position.add(this.velocity);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,95 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import { MeshLineGeometry as MeshLine, MeshLineMaterial } from 'meshline';
|
||||
import * as Calc from './utils/calc';
|
||||
import * as Ease from './utils/ease';
|
||||
import { Loader } from './loader';
|
||||
import { System } from './system';
|
||||
|
||||
export class Ripple {
|
||||
private loader: Loader;
|
||||
private system: System;
|
||||
|
||||
private array: Ripple[];
|
||||
private group: THREE.Object3D;
|
||||
private sphere: THREE.Sphere;
|
||||
private strength: number; // 波の高さ
|
||||
private threshold: number;
|
||||
private growth: number;
|
||||
private life: number;
|
||||
private decay: number;
|
||||
private influence: THREE.Vector3;
|
||||
private geometry: MeshLine;
|
||||
private material: THREE.LineBasicMaterial;
|
||||
private mesh: THREE.Mesh;
|
||||
|
||||
constructor(config, system) {
|
||||
this.system = system;
|
||||
this.loader = this.system.loader;
|
||||
|
||||
this.array = config.array;
|
||||
this.group = config.group;
|
||||
this.sphere = new THREE.Sphere(new THREE.Vector3(config.x, config.y, config.z), 0);
|
||||
this.strength = config.strength ? config.strength : Calc.rand(7, 15);
|
||||
this.threshold = Calc.rand(5, 20);
|
||||
this.growth = Calc.rand(0.2, 0.5);
|
||||
this.life = 1;
|
||||
this.decay = Calc.rand(0.01, 0.02);
|
||||
this.influence = new THREE.Vector3();
|
||||
const points = [];
|
||||
const resolution = 64;
|
||||
for (let j = 0; j < (Math.PI * 2) + ((Math.PI) / resolution); j += (2 * Math.PI) / resolution) {
|
||||
points.push(Math.cos(j), Math.sin(j), 0);
|
||||
}
|
||||
this.geometry = new MeshLine();
|
||||
this.geometry.setPoints(points);
|
||||
|
||||
this.material = new MeshLineMaterial({
|
||||
lineWidth: 0.25,
|
||||
color: config.color,
|
||||
opacity: 1,
|
||||
transparent: true,
|
||||
depthTest: false,
|
||||
});
|
||||
this.material.onBeforeRender = () => {};
|
||||
this.mesh = new THREE.Mesh(this.geometry, this.material);
|
||||
this.mesh.rotation.x = Math.PI / 2;
|
||||
this.mesh.position.x = this.sphere.center.x;
|
||||
this.mesh.position.y = 0;
|
||||
this.mesh.position.z = this.sphere.center.z;
|
||||
this.group.add(this.mesh);
|
||||
}
|
||||
|
||||
getInfluenceVector(vec) {
|
||||
this.influence.set(0, 0, 0);
|
||||
let distance = this.sphere.distanceToPoint(vec);
|
||||
|
||||
if(distance <= this.threshold ) {
|
||||
let ease = Ease.inOutSine(this.threshold - distance, 0, 1, this.threshold);
|
||||
let power = (this.strength * ease * this.life);
|
||||
this.influence.addVectors(vec, this.sphere.center).multiplyScalar(power);
|
||||
}
|
||||
|
||||
return this.influence;
|
||||
}
|
||||
|
||||
update(i) {
|
||||
this.sphere.radius += (this.growth * this.life) * this.loader.deltaTimeNormal;
|
||||
this.life -= this.decay * this.loader.deltaTimeNormal;
|
||||
|
||||
this.mesh.position.y = (1 - this.life) * -2;
|
||||
let newScale = 0.001 + this.sphere.radius;
|
||||
this.mesh.scale.set(newScale, newScale, newScale);
|
||||
this.mesh.material.opacity = this.life / 3;
|
||||
|
||||
if(this.life <= 0) {
|
||||
this.destroy(i);
|
||||
}
|
||||
}
|
||||
|
||||
destroy(i) {
|
||||
this.geometry.dispose();
|
||||
this.material.dispose();
|
||||
this.group.remove(this.mesh);
|
||||
this.array.splice(i, 1);
|
||||
}
|
||||
}
|
||||
@ -1,152 +0,0 @@
|
||||
import * as THREE from 'three';
|
||||
import * as Calc from './utils/calc';
|
||||
import * as Ease from './utils/ease';
|
||||
import { Drop } from './drop';
|
||||
import { Loader } from './loader';
|
||||
import { Particle } from './particle';
|
||||
import { Ripple } from './ripple';
|
||||
|
||||
function hexToInt(rrggbb: string): number {
|
||||
if (rrggbb.startsWith('#')) rrggbb = rrggbb.substr(1);
|
||||
return parseInt(rrggbb, 16);
|
||||
}
|
||||
|
||||
export class System {
|
||||
public loader: Loader;
|
||||
private drops: Drop[] = [];
|
||||
private ripples: Ripple[] = [];
|
||||
private particles: Particle[] = [];
|
||||
|
||||
public sphereGeometry: THREE.SphereGeometry;
|
||||
public boxGeometry: THREE.BoxGeometry;
|
||||
private center: THREE.Vector3;
|
||||
private particleGroup: THREE.Object3D;
|
||||
|
||||
private size = 96;
|
||||
private cols = 32;
|
||||
private rows = 32;
|
||||
|
||||
private tick: number = 0;
|
||||
private dropTick = 0;
|
||||
private dropTickMin = 25;
|
||||
private dropTickMax = 30;
|
||||
|
||||
private particleColor: number;
|
||||
private rippleColor: number;
|
||||
private dropColor: number;
|
||||
|
||||
constructor(loader, config: { particleColor: string; rippleColor: string; dropColor: string; }) {
|
||||
this.loader = loader;
|
||||
|
||||
this.particleColor = hexToInt(config.particleColor);
|
||||
this.rippleColor = hexToInt(config.rippleColor);
|
||||
this.dropColor = hexToInt(config.dropColor);
|
||||
|
||||
this.sphereGeometry = new THREE.SphereGeometry(1, 16, 16);
|
||||
this.boxGeometry = new THREE.BoxGeometry(1, 1, 1);
|
||||
this.center = new THREE.Vector3();
|
||||
this.loader.camera.lookAt(this.center);
|
||||
|
||||
this.particleGroup = new THREE.Object3D();
|
||||
this.particleGroup.scale.set(1, 1, 1);
|
||||
|
||||
this.loader.scene.add(this.particleGroup);
|
||||
|
||||
for(let col = 0; col < this.cols; col++) {
|
||||
for(let row = 0; row < this.rows; row++) {
|
||||
let x = Calc.map(col, 0, this.cols - 1, -this.size / 2, this.size / 2);
|
||||
let y = 0;
|
||||
let z = Calc.map(row, 0, this.rows - 1, -this.size / 2, this.size / 2);
|
||||
|
||||
this.particles.push(new Particle({
|
||||
group: this.particleGroup,
|
||||
x: x,
|
||||
y: y,
|
||||
z: z,
|
||||
size: 0.01,
|
||||
color: this.particleColor,
|
||||
opacity: 0.01
|
||||
}, this));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createDrop(x?, y?, z?, strength?) {
|
||||
this.drops.push(new Drop({
|
||||
array: this.drops,
|
||||
group: this.particleGroup,
|
||||
x: x === undefined ? Calc.rand(-this.size / 2, this.size / 2) : x,
|
||||
y: y === undefined ? Calc.rand(30, 50) : y,
|
||||
z: z === undefined ? Calc.rand(-this.size / 2, this.size / 2) : z,
|
||||
size: 0.15,
|
||||
color: this.dropColor,
|
||||
opacity: 0,
|
||||
strength: strength
|
||||
}, this));
|
||||
}
|
||||
|
||||
updateDrops() {
|
||||
let i = this.drops.length;
|
||||
while(i--) {
|
||||
this.drops[i].update(i);
|
||||
}
|
||||
}
|
||||
|
||||
createRipple(x, z, strength) {
|
||||
this.ripples.push(new Ripple({
|
||||
array: this.ripples,
|
||||
group: this.particleGroup,
|
||||
x: x,
|
||||
y: -0.1,
|
||||
z: z,
|
||||
color: this.rippleColor,
|
||||
strength: strength
|
||||
}, this));
|
||||
}
|
||||
|
||||
updateRipples() {
|
||||
let i = this.ripples.length;
|
||||
while(i--) {
|
||||
this.ripples[i].update(i);
|
||||
}
|
||||
}
|
||||
|
||||
update() {
|
||||
{
|
||||
let i = this.particles.length;
|
||||
while(i--) {
|
||||
this.particles[i].update();
|
||||
}
|
||||
}
|
||||
|
||||
if(this.tick >= this.dropTick) {
|
||||
this.createDrop();
|
||||
this.dropTick = Calc.randInt(this.dropTickMin, this.dropTickMax);
|
||||
this.tick = 0;
|
||||
}
|
||||
|
||||
this.updateDrops();
|
||||
this.updateRipples();
|
||||
|
||||
{
|
||||
let i = this.particles.length;
|
||||
while(i--) {
|
||||
let j = this.ripples.length;
|
||||
while(j--) {
|
||||
let particle = this.particles[i];
|
||||
let ripple = this.ripples[j];
|
||||
let influence = ripple.getInfluenceVector(particle.base);
|
||||
influence.setX(0);
|
||||
influence.setZ(0);
|
||||
particle.velocity.add(influence);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.particleGroup.rotation.x = Math.cos(this.loader.elapsedMilliseconds * 0.0005) * 0.1;
|
||||
this.particleGroup.rotation.y = Math.PI * 0.25 + Math.sin(this.loader.elapsedMilliseconds * 0.0005) * -0.2;
|
||||
|
||||
this.tick += this.loader.deltaTimeNormal;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,201 +0,0 @@
|
||||
/*
|
||||
------------------------------------------
|
||||
| rand:float - returns random float
|
||||
|
|
||||
| min:number - minimum value
|
||||
| max:number - maximum value
|
||||
| ease:function - easing function to apply to the random value
|
||||
|
|
||||
| Get a random float between two values,
|
||||
| with the option of easing bias.
|
||||
------------------------------------------ */
|
||||
export function rand(min, max?, ease?) {
|
||||
if(max === undefined) {
|
||||
max = min;
|
||||
min = 0;
|
||||
}
|
||||
let random = Math.random();
|
||||
if(ease) {
|
||||
random = ease(Math.random(), 0, 1, 1);
|
||||
}
|
||||
return random * (max - min) + min;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| randInt:integer - returns random integer
|
||||
|
|
||||
| min:number - minimum value
|
||||
| max:number - maximum value
|
||||
| ease:function - easing function to apply to the random value
|
||||
|
|
||||
| Get a random integer between two values,
|
||||
| with the option of easing bias.
|
||||
------------------------------------------ */
|
||||
export function randInt(min, max?, ease?) {
|
||||
if(max === undefined) {
|
||||
max = min;
|
||||
min = 0;
|
||||
}
|
||||
let random = Math.random();
|
||||
if(ease) {
|
||||
random = ease(Math.random(), 0, 1, 1);
|
||||
}
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| randArr:item - returns random iem from array
|
||||
|
|
||||
| arr:array - the array to randomly pull from
|
||||
|
|
||||
| Get a random item from an array.
|
||||
------------------------------------------ */
|
||||
export function randArr(arr) {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| map:number - returns a mapped value
|
||||
|
|
||||
| val:number - input value
|
||||
| inputMin:number - minimum of input range
|
||||
| inputMax:number - maximum of input range
|
||||
| outputMin:number - minimum of output range
|
||||
| outputMax:number - maximum of output range
|
||||
|
|
||||
| Get a mapped value from and input min/max
|
||||
| to an output min/max.
|
||||
------------------------------------------ */
|
||||
export function map(val, inputMin, inputMax, outputMin, outputMax) {
|
||||
return ((outputMax - outputMin) * ((val - inputMin) / (inputMax - inputMin))) + outputMin;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| clamp:number - returns clamped value
|
||||
|
|
||||
| val:number - value to be clamped
|
||||
| min:number - minimum of clamped range
|
||||
| max:number - maximum of clamped range
|
||||
|
|
||||
| Clamp a value to a min/max range.
|
||||
------------------------------------------ */
|
||||
export function clamp(val, min, max) {
|
||||
return Math.max(Math.min(val, max), min);
|
||||
}
|
||||
|
||||
export function lerp(current, target, mix) {
|
||||
return current + (target - current) * mix;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| roundToUpperInterval:number - returns rounded up value
|
||||
|
|
||||
| value:number - value to be rounded
|
||||
| interval:number - interval
|
||||
|
|
||||
| Round up a value to the next highest interval.
|
||||
------------------------------------------ */
|
||||
export function roundToUpperInterval(value, interval) {
|
||||
if(value % interval === 0) {
|
||||
value += 0.0001;
|
||||
}
|
||||
return Math.ceil(value / interval) * interval;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| roundDownToInterval:number - returns rounded down value
|
||||
|
|
||||
| value:number - value to be rounded
|
||||
| interval:number - interval
|
||||
|
|
||||
| Round down a value to the next lowest interval.
|
||||
------------------------------------------ */
|
||||
export function roundToLowerInterval(value, interval) {
|
||||
if(value % interval === 0) {
|
||||
value -= 0.0001;
|
||||
}
|
||||
return Math.floor(value / interval) * interval;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| roundToNearestInterval:number - returns rounded value
|
||||
|
|
||||
| value:number - value to be rounded
|
||||
| interval:number - interval
|
||||
|
|
||||
| Round a value to the nearest interval.
|
||||
------------------------------------------ */
|
||||
export function roundToNearestInterval(value, interval) {
|
||||
return Math.round(value / interval) * interval;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| intersectSphere:boolean - returns if intersecting or not
|
||||
|
|
||||
| a:object - sphere 1 with radius, x, y, and z
|
||||
| b:object - sphere 2 with radius, x, y, and z
|
||||
|
|
||||
| Check if two sphere are intersecting
|
||||
| in 3D space.
|
||||
------------------------------------------ */
|
||||
export function intersectSphere(a, b) {
|
||||
let distance = Math.sqrt(
|
||||
(a.x - b.x) * (a.x - b.x) +
|
||||
(a.y - b.y) * (a.y - b.y) +
|
||||
(a.z - b.z) * (a.z - b.z)
|
||||
);
|
||||
return distance < (a.radius + b.radius);
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| getIndexFromCoords:number - returns index
|
||||
|
|
||||
| x:number - x value (column)
|
||||
| y:number - y value (row)
|
||||
| w:number - width of grid
|
||||
|
|
||||
| Convert from grid coords to index.
|
||||
------------------------------------------ */
|
||||
export function getIndexFromCoords(x, y, w) {
|
||||
return x + (y * w);
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| getCoordsFromIndex:object - returns coords
|
||||
|
|
||||
| i:number - index
|
||||
| w:number - width of grid
|
||||
|
|
||||
| Convert from index to grid coords.
|
||||
------------------------------------------ */
|
||||
export function getCoordsFromIndex(i, w) {
|
||||
return {
|
||||
x: i % w,
|
||||
y: Math.floor(i / w)
|
||||
}
|
||||
}
|
||||
|
||||
export function visibleHeightAtZDepth(depth, camera) {
|
||||
// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269
|
||||
let cameraOffset = camera.position.z;
|
||||
if ( depth < cameraOffset ) depth -= cameraOffset;
|
||||
else depth += cameraOffset;
|
||||
let vFOV = camera.fov * Math.PI / 180;
|
||||
return 2 * Math.tan( vFOV / 2 ) * Math.abs( depth );
|
||||
}
|
||||
|
||||
export function visibleWidthAtZDepth(depth, camera) {
|
||||
// https://discourse.threejs.org/t/functions-to-calculate-the-visible-width-height-at-a-given-z-depth-from-a-perspective-camera/269
|
||||
let height = visibleHeightAtZDepth( depth, camera );
|
||||
return height * camera.aspect;
|
||||
}
|
||||
@ -1,433 +0,0 @@
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inQuad:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inQuad.
|
||||
------------------------------------------ */
|
||||
export function inQuad(t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outQuad:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outQuad.
|
||||
------------------------------------------ */
|
||||
export function outQuad(t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutQuad:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutQuad.
|
||||
------------------------------------------ */
|
||||
export function inOutQuad(t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inCubic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inCubic.
|
||||
------------------------------------------ */
|
||||
export function inCubic(t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outCubic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outCubic.
|
||||
------------------------------------------ */
|
||||
export function outCubic(t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutCubic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutCubic.
|
||||
------------------------------------------ */
|
||||
export function inOutCubic(t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inQuart:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inQuart.
|
||||
------------------------------------------ */
|
||||
export function inQuart(t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outQuart:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outQuart.
|
||||
------------------------------------------ */
|
||||
export function outQuart(t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutQuart:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutQuart.
|
||||
------------------------------------------ */
|
||||
export function inOutQuart(t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inQuint:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inQuint.
|
||||
------------------------------------------ */
|
||||
export function inQuint(t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outQuint:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outQuint.
|
||||
------------------------------------------ */
|
||||
export function outQuint(t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutQuint:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutQuint.
|
||||
------------------------------------------ */
|
||||
export function inOutQuint(t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inSine:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inSine.
|
||||
------------------------------------------ */
|
||||
export function inSine(t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outSine:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outSine.
|
||||
------------------------------------------ */
|
||||
export function outSine(t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutSine:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutSine.
|
||||
------------------------------------------ */
|
||||
export function inOutSine(t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inExpo:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inExpo.
|
||||
------------------------------------------ */
|
||||
export function inExpo(t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outExpo:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outExpo.
|
||||
------------------------------------------ */
|
||||
export function outExpo(t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutExpo:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutExpo.
|
||||
------------------------------------------ */
|
||||
export function inOutExpo(t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inCirc:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inCirc.
|
||||
------------------------------------------ */
|
||||
export function inCirc(t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outCirc:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outCirc.
|
||||
------------------------------------------ */
|
||||
export function outCirc(t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutCirc:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutCirc.
|
||||
------------------------------------------ */
|
||||
export function inOutCirc(t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inElastic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inElastic.
|
||||
------------------------------------------ */
|
||||
export function inElastic(t, b, c, d) {
|
||||
let s=1.70158;let p=0;let a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; let s=p/4; }
|
||||
else s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outElastic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on outElastic.
|
||||
------------------------------------------ */
|
||||
export function outElastic(t, b, c, d) {
|
||||
let s=1.70158;let p=0;let a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; let s=p/4; }
|
||||
else s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutElastic:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
|
|
||||
| Get an eased float value based on inOutElastic.
|
||||
------------------------------------------ */
|
||||
export function inOutElastic(t, b, c, d) {
|
||||
let s=1.70158;let p=0;let a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; let s=p/4; }
|
||||
else s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inBack:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
| s:number - strength
|
||||
|
|
||||
| Get an eased float value based on inBack.
|
||||
------------------------------------------ */
|
||||
export function inBack(t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| outBack:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
| s:number - strength
|
||||
|
|
||||
| Get an eased float value based on outBack.
|
||||
------------------------------------------ */
|
||||
export function outBack(t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
}
|
||||
|
||||
/*
|
||||
------------------------------------------
|
||||
| inOutBack:float - returns eased float value
|
||||
|
|
||||
| t:number - current time
|
||||
| b:number - beginning value
|
||||
| c:number - change in value
|
||||
| d:number - duration
|
||||
| s:number - strength
|
||||
|
|
||||
| Get an eased float value based on inOutBack.
|
||||
------------------------------------------ */
|
||||
export function inOutBack(t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user