Skip to content
Permalink
Browse files

Adding Dat GUI and new UI interface

  • Loading branch information
kopiro committed Oct 26, 2018
1 parent 83f5636 commit 3f3afaa47203ebb802695bfc9b2140b7deb0ee25
Showing with 1,677 additions and 64 deletions.
  1. +1,561 −0 dat.gui.js
  2. +10 −5 dist/siriwave.js
  3. +10 −5 dist/siriwave.m.js
  4. +1 −1 dist/siriwave.min.js
  5. +84 −48 index.html
  6. +3 −1 src/curve.js
  7. +2 −1 src/ios9curve.js
  8. +6 −3 src/siriwave.js
1,561 dat.gui.js

Large diffs are not rendered by default.

@@ -60,7 +60,8 @@
var ctx = this.ctrl.ctx;
ctx.moveTo(0, 0);
ctx.beginPath();
ctx.strokeStyle = 'rgba(' + this.ctrl.color + ',' + this.definition.opacity + ')';
var color = this.ctrl.color.replace(/rgb\(/g, '').replace(/\)/g, '');
ctx.strokeStyle = 'rgba(' + color + ',' + this.definition.opacity + ')';
ctx.lineWidth = this.definition.lineWidth; // Cycle the graph from -X to +X every PX_DEPTH and draw the line

for (var i = -this.GRAPH_X; i <= this.GRAPH_X; i += this.ctrl.opt.pixelDepth) {
@@ -497,7 +498,7 @@
* Color of the wave (used in Classic iOS)
*/

this.color = this._hex2rgb(this.opt.color);
this.color = 'rgb(' + this._hex2rgb(this.opt.color) + ')';
/**
* An object containing controller variables that need to be interpolated
* to an another value before to be actually changed
@@ -626,6 +627,11 @@
key: "_lerp",
value: function _lerp(propertyStr) {
this[propertyStr] = lerp_1(this[propertyStr], this.interpolation[propertyStr], this.opt.lerpSpeed);

if (this[propertyStr] == this.interpolation[propertyStr]) {
this.interpolation[propertyStr] = null;
}

return this[propertyStr];
}
/**
@@ -686,9 +692,8 @@
this._clear(); // Interpolate values


this._lerp('amplitude');

this._lerp('speed');
if (this.interpolation.amplitude) this._lerp('amplitude');
if (this.interpolation.speed) this._lerp('speed');

this._draw();

@@ -57,7 +57,8 @@ function () {
var ctx = this.ctrl.ctx;
ctx.moveTo(0, 0);
ctx.beginPath();
ctx.strokeStyle = 'rgba(' + this.ctrl.color + ',' + this.definition.opacity + ')';
var color = this.ctrl.color.replace(/rgb\(/g, '').replace(/\)/g, '');
ctx.strokeStyle = 'rgba(' + color + ',' + this.definition.opacity + ')';
ctx.lineWidth = this.definition.lineWidth; // Cycle the graph from -X to +X every PX_DEPTH and draw the line

for (var i = -this.GRAPH_X; i <= this.GRAPH_X; i += this.ctrl.opt.pixelDepth) {
@@ -367,7 +368,7 @@ function () {
* Color of the wave (used in Classic iOS)
*/

this.color = this._hex2rgb(this.opt.color);
this.color = 'rgb(' + this._hex2rgb(this.opt.color) + ')';
/**
* An object containing controller variables that need to be interpolated
* to an another value before to be actually changed
@@ -496,6 +497,11 @@ function () {
key: "_lerp",
value: function _lerp(propertyStr) {
this[propertyStr] = lerp(this[propertyStr], this.interpolation[propertyStr], this.opt.lerpSpeed);

if (this[propertyStr] == this.interpolation[propertyStr]) {
this.interpolation[propertyStr] = null;
}

return this[propertyStr];
}
/**
@@ -556,9 +562,8 @@ function () {
this._clear(); // Interpolate values


this._lerp('amplitude');

this._lerp('speed');
if (this.interpolation.amplitude) this._lerp('amplitude');
if (this.interpolation.speed) this._lerp('speed');

this._draw();

Large diffs are not rendered by default.

@@ -1,65 +1,104 @@
<html>

<head>
<title>SiriWave</title>
<title>Siriwave</title>
<meta charset="utf-8" />
<style>
body {
background: #000;
padding: 20px;
padding: 60px 20px;
margin: 0;
color: #fff;
font-family: sans-serif;
font-weight: 100;
font-family: "SF Pro Display","Helvetica Neue","Helvetica","Arial",sans-serif;
text-align: center;
}
h1, h2, h3, h4 {
letter-spacing: -.009em;
line-height: 1.0625;
font-weight: 600;
}
h1 {
font-size: 64px;
margin-bottom: 0;
}
h2 {
font-size: 32px;
}
p {
font-size: 21px;
line-height: 1.38105;
font-weight: 400;
}
a {
color: #fff;
}
#background {
background: #000 url("https://www.valuewalk.com/wp-content/uploads/2018/06/mojave_dynamic_1.jpeg") center no-repeat;
background-size: cover;
-webkit-filter: blur(10px);
position: fixed;
z-index: -1;
top: -40px;
left: -40px;
right: -40px;
bottom: -40px;
}
#background:after {
content: '';
background: rgba(0,0,0,.5);
position: fixed;
z-index: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#container,
#container-9 {
width: 600px;
height: 300px;
background: url("back.png") center no-repeat;
background-size: cover;
margin: 20px;
margin: 0 auto;
border: 1px dashed rgba(255,255,255,.4);
}
#controls {
margin-top: 30px;
}
footer {
max-width: 400px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.4);
margin: 40px auto 20px auto;
font-size: 16px;
font-weight: 400;
color: #ccc;
}
</style>
<script src="dist/siriwave.js"></script>
<script type="text/javascript" src="dat.gui.js"></script>

#controls > div {
margin-top: 20px;
}
</head>

#controls > div label {
width: 150px;
display: inline-block;
text-align: right;
margin-right: 10px;
}
<h1>SiriwaveJS</h1>
<p>The Apple® Siri wave-form<br>replicated in a JS library.</p>

#controls > div input {
width: 300px;
}
</style>
<script src="./dist/siriwave.js"></script>
</head>
<div id="background"></div>

<h1>SiriWave</h1>
<h2>Classic</h2>
<div id="container"></div>

<h1>SiriWave iOS9</h1>
<h2>iOS9+</h2>
<div id="container-9"></div>

<div id="controls">
<div>
<label for="ctrl-speed">Speed - <b id="ctrl-show-speed"></b></label>
<input type="range" min="0" max="2" step="0.1" id="ctrl-speed" />
</div>
<div>
<label for="ctrl-amplitude">Amplitude - <b id="ctrl-show-amplitude"></b></label>
<input type="range" min="0" max="1" step="0.1" id="ctrl-amplitude" />
</div>
</div>
<footer>
Installation guide and source code available <a href="https://github.com/kopiro/siriwave">here</a>.
</footer>

<script>
var SW = new SiriWave({
@@ -71,20 +110,17 @@ <h1>SiriWave iOS9</h1>
container: document.getElementById('container-9'),
autostart: true,
});
var SWs = [SW, SW9];
</script>
<script>
for (let e of ['speed', 'amplitude']) {
let ctrl = document.querySelector('#ctrl-' + e);
let show = document.querySelector('#ctrl-show-' + e);
ctrl.value = SWs[0][e];
show.innerText = ctrl.value;
ctrl.addEventListener('change', () => {
show.innerText = ctrl.value;
for (let sw of SWs) sw.set(e, ctrl.value);
});
}
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>
@@ -37,7 +37,9 @@ export default class Curve {

ctx.moveTo(0, 0);
ctx.beginPath();
ctx.strokeStyle = 'rgba(' + this.ctrl.color + ',' + this.definition.opacity + ')';

const color = this.ctrl.color.replace(/rgb\(/g, '').replace(/\)/g, '');
ctx.strokeStyle = 'rgba(' + color + ',' + this.definition.opacity + ')';
ctx.lineWidth = this.definition.lineWidth;

// Cycle the graph from -X to +X every PX_DEPTH and draw the line
@@ -108,7 +108,8 @@ export default class iOS9Curve {
}

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

_drawSupportLine(ctx) {
@@ -79,7 +79,7 @@ export default class SiriWave {
/**
* Color of the wave (used in Classic iOS)
*/
this.color = this._hex2rgb(this.opt.color);
this.color = 'rgb(' + this._hex2rgb(this.opt.color) + ')';

/**
* An object containing controller variables that need to be interpolated
@@ -168,6 +168,9 @@ export default class SiriWave {
*/
_lerp(propertyStr) {
this[propertyStr] = lerp(this[propertyStr], this.interpolation[propertyStr], this.opt.lerpSpeed);
if (this[propertyStr] == this.interpolation[propertyStr]) {
this.interpolation[propertyStr] = null;
}
return this[propertyStr];
}

@@ -201,8 +204,8 @@ export default class SiriWave {
this._clear();

// Interpolate values
this._lerp('amplitude');
this._lerp('speed');
if (this.interpolation.amplitude) this._lerp('amplitude');
if (this.interpolation.speed) this._lerp('speed');

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

0 comments on commit 3f3afaa

Please sign in to comment.
You can’t perform that action at this time.