diff --git a/assets/js/particles/drop.ts b/assets/js/particles/drop.ts deleted file mode 100644 index 0e7aa15f..00000000 --- a/assets/js/particles/drop.ts +++ /dev/null @@ -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); - } - } -} diff --git a/assets/js/particles/loader.ts b/assets/js/particles/loader.ts deleted file mode 100644 index f6df78f3..00000000 --- a/assets/js/particles/loader.ts +++ /dev/null @@ -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 | 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); - } - } -} diff --git a/assets/js/particles/particle.ts b/assets/js/particles/particle.ts deleted file mode 100644 index edd5863e..00000000 --- a/assets/js/particles/particle.ts +++ /dev/null @@ -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); - } - -} diff --git a/assets/js/particles/ripple.ts b/assets/js/particles/ripple.ts deleted file mode 100644 index 6306a1a2..00000000 --- a/assets/js/particles/ripple.ts +++ /dev/null @@ -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); - } -} diff --git a/assets/js/particles/system.ts b/assets/js/particles/system.ts deleted file mode 100644 index d02f229b..00000000 --- a/assets/js/particles/system.ts +++ /dev/null @@ -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; - } -} - diff --git a/assets/js/particles/utils/calc.ts b/assets/js/particles/utils/calc.ts deleted file mode 100644 index fdd49b9f..00000000 --- a/assets/js/particles/utils/calc.ts +++ /dev/null @@ -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; -} diff --git a/assets/js/particles/utils/ease.ts b/assets/js/particles/utils/ease.ts deleted file mode 100644 index 723891f9..00000000 --- a/assets/js/particles/utils/ease.ts +++ /dev/null @@ -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; -}