Skip to content

Commit

Permalink
Fixing spawn-at initialization (#58)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kopiro
kopiro authored Jan 22, 2021
1 parent b941a1a commit 04b55d9
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 99 deletions.
144 changes: 78 additions & 66 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Siriwave</title>
<style>
body {
margin: 0;
background: #000;
color: #fff;
font-weight: 100;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
text-align: center;
}

a {
color: #fff;
}
<head>
<meta charset="utf-8" />
<title>Siriwave</title>
<style>
body {
margin: 0;
background: #000;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-align: center;
}

#container,
#container-9 {
width: 600px;
height: 300px;
background-size: cover;
margin: 20px;
margin: 0 auto;
border: 1px dashed rgba(255, 255, 255, 0.4);
}
a {
color: #fff;
}

footer {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
</style>
<script src="dist/siriwave.umd.js"></script>
<script type="text/javascript" src="etc/dat.gui.js"></script>
</head>
#container,
#container-9 {
width: 600px;
height: 300px;
background-size: cover;
margin: 20px;
margin: 0 auto;
border: 1px dashed rgba(255, 255, 255, 0.4);
}

<h1>SiriwaveJS</h1>
<p>The Apple® Siri wave-form<br />replicated in a JS library.</p>
table {
width: 100%;
margin: 0 auto;
}

<div id="background"></div>
footer {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.4);
}
</style>
<script src="dist/siriwave.umd.js"></script>
<script type="text/javascript" src="etc/dat.gui.js"></script>
</head>

<h3>Classic</h3>
<div id="container"></div>
<h1>SiriwaveJS</h1>
<p>The Apple® Siri wave-form<br />replicated in a JS library.</p>

<h3>iOS9+</h3>
<div id="container-9"></div>
<div id="background"></div>

<footer>
Installation guide and source code available
<a href="https://github.com/kopiro/siriwave">here</a>.
</footer>
<table>
<tr>
<td>
<h3>Classic</h3>
<div id="container"></div>
</td>
<td>
<h3>iOS9+</h3>
<div id="container-9"></div>
</td>
</tr>
</table>

<script>
var SW = new SiriWave({
container: document.getElementById("container"),
autostart: true,
});
var SW9 = new SiriWave({
style: "ios9",
container: document.getElementById("container-9"),
autostart: true,
});
<footer>
Installation guide and source code available
<a href="https://github.com/kopiro/siriwave">here</a>.
</footer>

window.onload = function () {
var gui = new dat.GUI();
gui.add(SW, "speed", 0, 1);
gui.add(SW, "amplitude", 0, 3);
gui.addColor(SW, "color");
<script>
var SW = new SiriWave({
container: document.getElementById("container"),
autostart: true,
});
var SW9 = new SiriWave({
style: "ios9",
container: document.getElementById("container-9"),
autostart: true,
});

var gui9 = new dat.GUI();
gui9.add(SW9, "speed", 0, 1);
gui9.add(SW9, "amplitude", 0, 3);
};
</script>
</html>
window.onload = function () {
var gui = new dat.GUI();
gui.add(SW, "speed", 0, 1);
gui.add(SW, "amplitude", 0, 3);
gui.addColor(SW, "color");

var gui9 = new dat.GUI();
gui9.add(SW9, "speed", 0, 1);
gui9.add(SW9, "amplitude", 0, 3);
};
</script>

</html>
8 changes: 4 additions & 4 deletions src/classic-curve.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ export class ClassicCurve implements ICurve {
this.definition = definition;
}

globalAttFn(x: number): number {
private globalAttFn(x: number): number {
return Math.pow(this.ATT_FACTOR / (this.ATT_FACTOR + Math.pow(x, this.ATT_FACTOR)), this.ATT_FACTOR);
}

_xpos(i: number): number {
private xPos(i: number): number {
return this.ctrl.width * ((i + this.GRAPH_X) / (this.GRAPH_X * 2));
}

_ypos(i: number): number {
private yPos(i: number): number {
return (
this.AMPLITUDE_FACTOR *
(this.globalAttFn(i) *
Expand All @@ -41,7 +41,7 @@ export class ClassicCurve implements ICurve {

// Cycle the graph from -X to +X every PX_DEPTH and draw the line
for (let i = -this.GRAPH_X; i <= this.GRAPH_X; i += this.ctrl.opt.pixelDepth!) {
ctx.lineTo(this._xpos(i), this.ctrl.heightMax + this._ypos(i));
ctx.lineTo(this.xPos(i), this.ctrl.heightMax + this.yPos(i));
}

ctx.stroke();
Expand Down
27 changes: 19 additions & 8 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ export default class SiriWave {
/**
* Convert an HEX color to RGB
*/
hex2rgb(hex: string): string | null {
private hex2rgb(hex: string): string | null {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
Expand All @@ -214,14 +214,14 @@ export default class SiriWave {
: null;
}

intLerp(v0: number, v1: number, t: number): number {
private intLerp(v0: number, v1: number, t: number): number {
return v0 * (1 - t) + v1 * t;
}

/**
* Interpolate a property to the value found in this.interpolation
*/
lerp(propertyStr: "amplitude" | "speed"): number | null {
private lerp(propertyStr: "amplitude" | "speed"): number | null {
const prop = this.interpolation[propertyStr];
if (prop !== null) {
this[propertyStr] = this.intLerp(this[propertyStr], prop, this.opt.lerpSpeed!);
Expand All @@ -235,7 +235,7 @@ export default class SiriWave {
/**
* Clear the canvas
*/
_clear() {
private clear() {
this.ctx.globalCompositeOperation = "destination-out";
this.ctx.fillRect(0, 0, this.width, this.height);
this.ctx.globalCompositeOperation = "source-over";
Expand All @@ -244,22 +244,22 @@ export default class SiriWave {
/**
* Draw all curves
*/
_draw() {
private draw() {
this.curves.forEach((curve) => curve.draw());
}

/**
* Clear the space, interpolate values, calculate new steps and draws
* @returns
*/
startDrawCycle() {
this._clear();
private startDrawCycle() {
this.clear();

// Interpolate values
this.lerp("amplitude");
this.lerp("speed");

this._draw();
this.draw();
this.phase = (this.phase + (Math.PI / 2) * this.speed) % (2 * Math.PI);

if (window.requestAnimationFrame) {
Expand Down Expand Up @@ -304,6 +304,17 @@ export default class SiriWave {
}
}

/**
* Dispose
*/
dispose() {
this.stop();
if (this.canvas) {
this.canvas.remove();
this.canvas = null;
}
}

/**
* Set a new value for a property (interpolated)
*/
Expand Down
39 changes: 18 additions & 21 deletions src/ios9-curve.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,13 @@ export class iOS9Curve implements ICurve {
this.amplitudes = [];
this.despawnTimeouts = [];
this.verses = [];

this.respawn();
}

getRandomRange(e: [number, number]): number {
private getRandomRange(e: [number, number]): number {
return e[0] + Math.random() * (e[1] - e[0]);
}

respawnSingle(ci: number): void {
private spawnSingle(ci: number): void {
this.phases[ci] = 0;
this.amplitudes[ci] = 0;

Expand All @@ -68,11 +66,11 @@ export class iOS9Curve implements ICurve {
this.verses[ci] = this.getRandomRange([-1, 1]);
}

getEmptyArray(count: number): number[] {
private getEmptyArray(count: number): number[] {
return new Array(count);
}

respawn(): void {
private spawn(): void {
this.spawnAt = Date.now();

this.noOfCurves = Math.floor(this.getRandomRange(this.NOOFCURVES_RANGES));
Expand All @@ -87,24 +85,19 @@ export class iOS9Curve implements ICurve {
this.verses = this.getEmptyArray(this.noOfCurves);

for (let ci = 0; ci < this.noOfCurves; ci++) {
this.respawnSingle(ci);
this.spawnSingle(ci);
}
}

globalAttFn(x: number): number {
private globalAttFn(x: number): number {
return Math.pow(this.ATT_FACTOR / (this.ATT_FACTOR + Math.pow(x, 2)), this.ATT_FACTOR);
}

sin(x: number, phase: number): number {
private sin(x: number, phase: number): number {
return Math.sin(x - phase);
}

_grad(x: number, a: number, b: number): number {
if (x > a && x < b) return 1;
return 1;
}

yRelativePos(i: number): number {
private yRelativePos(i: number): number {
let y = 0;

for (let ci = 0; ci < this.noOfCurves; ci++) {
Expand All @@ -123,7 +116,7 @@ export class iOS9Curve implements ICurve {
return y / this.noOfCurves;
}

_ypos(i: number): number {
private yPos(i: number): number {
return (
this.AMPLITUDE_FACTOR *
this.ctrl.heightMax *
Expand All @@ -133,11 +126,11 @@ export class iOS9Curve implements ICurve {
);
}

_xpos(i: number): number {
private xPos(i: number): number {
return this.ctrl.width * ((i + this.GRAPH_X) / (this.GRAPH_X * 2));
}

drawSupportLine() {
private drawSupportLine() {
const { ctx } = this.ctrl;

const coo: [number, number, number, number] = [0, this.ctrl.heightMax, this.ctrl.width, 1];
Expand All @@ -157,6 +150,10 @@ export class iOS9Curve implements ICurve {
ctx.globalAlpha = 0.7;
ctx.globalCompositeOperation = "lighter";

if (this.spawnAt === 0) {
this.spawn();
}

if (this.definition.supportLine) {
// Draw the support line
return this.drawSupportLine();
Expand All @@ -181,8 +178,8 @@ export class iOS9Curve implements ICurve {
ctx.beginPath();

for (let i = -this.GRAPH_X; i <= this.GRAPH_X; i += this.ctrl.opt.pixelDepth!) {
const x = this._xpos(i);
const y = this._ypos(i);
const x = this.xPos(i);
const y = this.yPos(i);
ctx.lineTo(x, this.ctrl.heightMax - sign * y);

minX = Math.min(minX, x);
Expand All @@ -197,7 +194,7 @@ export class iOS9Curve implements ICurve {
}

if (maxY < this.DEAD_PX && this.prevMaxY > maxY) {
this.respawn();
this.spawnAt = 0;
}

this.prevMaxY = maxY;
Expand Down

0 comments on commit 04b55d9

Please sign in to comment.