I have made this short code to move a object randomly on the screen. I used camera.lookat(). But while using it I observed that when the model/object moves to the sides of the screen, in order to look at the camera it changes its shape a little. In a way one can say that it skews a little.
I wanted to used camera.lookat() without this skewing of the object. I have been trying for a while now but couldn't figure out a way to do it. Can anyone help me out here please. Here is my code:
EDIT
while running code snippet here you may find a error footer here. It's because of unavailability of tween.js cdn. Wait for some time after clicking on "run snippet" here and you will see a tower moving here and there.
My JS:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xff0000, .5);
document.body.appendChild(renderer.domElement);
var light1 = new THREE.AmbientLight(0xffffff);
light1.position.set(0, -70, 100).normalize();
scene.add(light1);
var light2 = new THREE.AmbientLight(0xffffff);
light2.position.set(0, 70, 100).normalize();
scene.add(light2);
camera.position.z = 20;
var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;
loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf', function(gltf) {
cube = gltf.scene;
// gltf.scene.position.y -= 15;
// gltf.scene.position.x -= 24;
// gltf.scene.lookAt(camera.position);
gltf.scene.position.set(-40, 0, -3.75);
gltf.scene.scale.set(0.4, 0.4, 0.4);
// gltf.scene.rotation.y += 0.6;
// gltf.scene.rotation.z -= 0.3;
scene.add(gltf.scene);
renderer.render(scene, camera);
maketween();
});
//// Setup the animation loop.
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
function maketween() {
var randomX = Math.floor(Math.random() * 57) - 28;
var randomY = Math.floor(Math.random() * 23) - 10;
var tween = new TWEEN.Tween({
x: cube.position.x,
y: cube.position.y,
z: cube.position.z
}) // Create a new tween that modifies 'coords'.
.to({
x: randomX,
y: randomY,
z: 0
}, 1000) // Move to (300, 200) in 1 second.
.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.repeat(0)
.onUpdate(function(object) {
// console.log("tween",randomX,randomY,object.x);
if (object.x == randomX || object.x == 0) {
var randomX = Math.floor(Math.random() * 57) - 28;
var randomY = Math.floor(Math.random() * 23) - 10;
// console.log("*",randomX,randomY);
} else {
cube.position.x = object.x;
cube.position.y = object.y;
}
cube.lookAt(camera.position);
}).onComplete(() => {
// console.log("tween stopped");
maketween();
});
tween.chain(tween);
tween.start();
}
//BELOW THIS POINT IS TWEEN.JS (NOT MY CODE)
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.TWEEN = factory());
}(this, (function () { 'use strict';
var version = '18.4.2';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var _Group = function () {
this._tweens = {};
this._tweensAddedDuringUpdate = {};
};
_Group.prototype = {
getAll: function () {
return Object.keys(this._tweens).map(function (tweenId) {
return this._tweens[tweenId];
}.bind(this));
},
removeAll: function () {
this._tweens = {};
},
add: function (tween) {
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
},
remove: function (tween) {
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
},
update: function (time, preserve) {
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0) {
return false;
}
time = time !== undefined ? time : TWEEN.now();
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
if (tween && tween.update(time) === false) {
tween._isPlaying = false;
if (!preserve) {
delete this._tweens[tweenIds[i]];
}
}
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
return true;
}
};
var TWEEN = new _Group();
TWEEN.Group = _Group;
TWEEN._nextId = 0;
TWEEN.nextId = function () {
return TWEEN._nextId++;
};
// Include a performance.now polyfill.
// In node.js, use process.hrtime.
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
TWEEN.now = function () {
var time = process.hrtime();
// Convert [seconds, nanoseconds] to milliseconds.
return time[0] * 1000 + time[1] / 1000000;
};
}
// In a browser, use self.performance.now if it is available.
else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
// This must be bound, because directly assigning this function
// leads to an invocation exception in Chrome.
TWEEN.now = self.performance.now.bind(self.performance);
}
// Use Date.now if it is available.
else if (Date.now !== undefined) {
TWEEN.now = Date.now;
}
// Otherwise, use 'new Date().getTime()'.
else {
TWEEN.now = function () {
return new Date().getTime();
};
}
TWEEN.Tween = function (object, group) {
this._isPaused = false;
this._pauseStart = null;
this._object = object;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._repeat = 0;
this._repeatDelayTime = undefined;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = null;
this._easingFunction = TWEEN.Easing.Linear.None;
this._interpolationFunction = TWEEN.Interpolation.Linear;
this._chainedTweens = [];
this._onStartCallback = null;
this._onStartCallbackFired = false;
this._onUpdateCallback = null;
this._onRepeatCallback = null;
this._onCompleteCallback = null;
this._onStopCallback = null;
this._group = group || TWEEN;
this._id = TWEEN.nextId();
};
TWEEN.Tween.prototype = {
getId: function () {
return this._id;
},
isPlaying: function () {
return this._isPlaying;
},
isPaused: function () {
return this._isPaused;
},
to: function (properties, duration) {
this._valuesEnd = Object.create(properties);
if (duration !== undefined) {
this._duration = duration;
}
return this;
},
duration: function duration(d) {
this._duration = d;
return this;
},
start: function (time) {
this._group.add(this);
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._startTime = time !== undefined ? typeof time === 'string' ? TWEEN.now() + parseFloat(time) : time : TWEEN.now();
this._startTime += this._delayTime;
for (var property in this._valuesEnd) {
// Check if an Array was provided as property value
if (this._valuesEnd[property] instanceof Array) {
if (this._valuesEnd[property].length === 0) {
continue;
}
// Create a local copy of the Array with the start value at the front
this._valuesEnd[property] = [this._object[property]].concat(this._valuesEnd[property]);
}
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (this._object[property] === undefined) {
continue;
}
// Save the starting value, but only once.
if (typeof(this._valuesStart[property]) === 'undefined') {
this._valuesStart[property] = this._object[property];
}
if ((this._valuesStart[property] instanceof Array) === false) {
this._valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
this._valuesStartRepeat[property] = this._valuesStart[property] || 0;
}
return this;
},
stop: function () {
if (!this._isPlaying) {
return this;
}
this._group.remove(this);
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback !== null) {
this._onStopCallback(this._object);
}
this.stopChainedTweens();
return this;
},
end: function () {
this.update(Infinity);
return this;
},
pause: function(time) {
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time === undefined ? TWEEN.now() : time;
this._group.remove(this);
return this;
},
resume: function(time) {
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += (time === undefined ? TWEEN.now() : time)
- this._pauseStart;
this._pauseStart = 0;
this._group.add(this);
return this;
},
stopChainedTweens: function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
},
group: function (group) {
this._group = group;
return this;
},
delay: function (amount) {
this._delayTime = amount;
return this;
},
repeat: function (times) {
this._repeat = times;
return this;
},
repeatDelay: function (amount) {
this._repeatDelayTime = amount;
return this;
},
yoyo: function (yoyo) {
this._yoyo = yoyo;
return this;
},
easing: function (easingFunction) {
this._easingFunction = easingFunction;
return this;
},
interpolation: function (interpolationFunction) {
this._interpolationFunction = interpolationFunction;
return this;
},
chain: function () {
this._chainedTweens = arguments;
return this;
},
onStart: function (callback) {
this._onStartCallback = callback;
return this;
},
onUpdate: function (callback) {
this._onUpdateCallback = callback;
return this;
},
onRepeat: function onRepeat(callback) {
this._onRepeatCallback = callback;
return this;
},
onComplete: function (callback) {
this._onCompleteCallback = callback;
return this;
},
onStop: function (callback) {
this._onStopCallback = callback;
return this;
},
update: function (time) {
var property;
var elapsed;
var value;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback !== null) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
elapsed = (time - this._startTime) / this._duration;
elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
value = this._easingFunction(elapsed);
for (property in this._valuesEnd) {
// Don't update properties that do not exist in the source object
if (this._valuesStart[property] === undefined) {
continue;
}
var start = this._valuesStart[property] || 0;
var end = this._valuesEnd[property];
if (end instanceof Array) {
this._object[property] = this._interpolationFunction(end, value);
} else {
// Parses relative end values with start as base (e.g.: +10, -3)
if (typeof (end) === 'string') {
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
end = start + parseFloat(end);
} else {
end = parseFloat(end);
}
}
// Protect against non numeric properties.
if (typeof (end) === 'number') {
this._object[property] = start + (end - start) * value;
}
}
}
if (this._onUpdateCallback !== null) {
this._onUpdateCallback(this._object, elapsed);
}
if (elapsed === 1) {
if (this._repeat > 0) {
if (isFinite(this._repeat)) {
this._repeat--;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (typeof (this._valuesEnd[property]) === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
var tmp = this._valuesStartRepeat[property];
this._valuesStartRepeat[property] = this._valuesEnd[property];
this._valuesEnd[property] = tmp;
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
if (this._repeatDelayTime !== undefined) {
this._startTime = time + this._repeatDelayTime;
} else {
this._startTime = time + this._delayTime;
}
if (this._onRepeatCallback !== null) {
this._onRepeatCallback(this._object);
}
return true;
} else {
if (this._onCompleteCallback !== null) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration);
}
return false;
}
}
return true;
}
};
TWEEN.Easing = {
Linear: {
None: function (k) {
return k;
}
},
Quadratic: {
In: function (k) {
return k * k;
},
Out: function (k) {
return k * (2 - k);
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k;
}
return - 0.5 * (--k * (k - 2) - 1);
}
},
Cubic: {
In: function (k) {
return k * k * k;
},
Out: function (k) {
return --k * k * k + 1;
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k;
}
return 0.5 * ((k -= 2) * k * k + 2);
}
},
Quartic: {
In: function (k) {
return k * k * k * k;
},
Out: function (k) {
return 1 - (--k * k * k * k);
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k * k;
}
return - 0.5 * ((k -= 2) * k * k * k - 2);
}
},
Quintic: {
In: function (k) {
return k * k * k * k * k;
},
Out: function (k) {
return --k * k * k * k * k + 1;
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k * k * k;
}
return 0.5 * ((k -= 2) * k * k * k * k + 2);
}
},
Sinusoidal: {
In: function (k) {
return 1 - Math.cos(k * Math.PI / 2);
},
Out: function (k) {
return Math.sin(k * Math.PI / 2);
},
InOut: function (k) {
return 0.5 * (1 - Math.cos(Math.PI * k));
}
},
Exponential: {
In: function (k) {
return k === 0 ? 0 : Math.pow(1024, k - 1);
},
Out: function (k) {
return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k);
},
InOut: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
if ((k *= 2) < 1) {
return 0.5 * Math.pow(1024, k - 1);
}
return 0.5 * (- Math.pow(2, - 10 * (k - 1)) + 2);
}
},
Circular: {
In: function (k) {
return 1 - Math.sqrt(1 - k * k);
},
Out: function (k) {
return Math.sqrt(1 - (--k * k));
},
InOut: function (k) {
if ((k *= 2) < 1) {
return - 0.5 * (Math.sqrt(1 - k * k) - 1);
}
return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
}
},
Elastic: {
In: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
return -Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
},
Out: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
return Math.pow(2, -10 * k) * Math.sin((k - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
k *= 2;
if (k < 1) {
return -0.5 * Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI) + 1;
}
},
Back: {
In: function (k) {
var s = 1.70158;
return k * k * ((s + 1) * k - s);
},
Out: function (k) {
var s = 1.70158;
return --k * k * ((s + 1) * k + s) + 1;
},
InOut: function (k) {
var s = 1.70158 * 1.525;
if ((k *= 2) < 1) {
return 0.5 * (k * k * ((s + 1) * k - s));
}
return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
}
},
Bounce: {
In: function (k) {
return 1 - TWEEN.Easing.Bounce.Out(1 - k);
},
Out: function (k) {
if (k < (1 / 2.75)) {
return 7.5625 * k * k;
} else if (k < (2 / 2.75)) {
return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
} else if (k < (2.5 / 2.75)) {
return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
} else {
return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
}
},
InOut: function (k) {
if (k < 0.5) {
return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
}
return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;
}
}
};
TWEEN.Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = TWEEN.Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = TWEEN.Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = TWEEN.Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor(f = m * (1 + k));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
} else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = TWEEN.Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (- 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
}
}
};
TWEEN.version = version;
return TWEEN;
})));
MY HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.tutorialjinni.com/tween.js/18.5.0/Tween.js"></script>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="js/capture.js"></script>
</body>
</html>
The issue is the field of view is wide.
Similar to the way a wide angle lens distorts
The code had a 75 degree field of view (75 vertically)
Here's a 25 degree field of view. Had to move to the camera back.
var scene = new THREE.Scene();
var fieldOfView = 25;
var camera = new THREE.PerspectiveCamera(fieldOfView, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xff0000, .5);
document.body.appendChild(renderer.domElement);
var light1 = new THREE.AmbientLight(0xffffff);
light1.position.set(0, -70, 100).normalize();
scene.add(light1);
var light2 = new THREE.AmbientLight(0xffffff);
light2.position.set(0, 70, 100).normalize();
scene.add(light2);
camera.position.z = 80;
var loader = new THREE.GLTFLoader();
loader.crossOrigin = true;
loader.load('https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf', function(gltf) {
cube = gltf.scene;
// gltf.scene.position.y -= 15;
// gltf.scene.position.x -= 24;
// gltf.scene.lookAt(camera.position);
gltf.scene.position.set(-40, 0, -3.75);
gltf.scene.scale.set(0.4, 0.4, 0.4);
// gltf.scene.rotation.y += 0.6;
// gltf.scene.rotation.z -= 0.3;
scene.add(gltf.scene);
renderer.render(scene, camera);
maketween();
});
//// Setup the animation loop.
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
renderer.render(scene, camera);
}
requestAnimationFrame(animate);
function maketween() {
var randomX = Math.floor(Math.random() * 40) - 20;
var randomY = Math.floor(Math.random() * 20) - 10;
var tween = new TWEEN.Tween({
x: cube.position.x,
y: cube.position.y,
z: cube.position.z
}) // Create a new tween that modifies 'coords'.
.to({
x: randomX,
y: randomY,
z: 0
}, 1000) // Move to (300, 200) in 1 second.
.easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.repeat(0)
.onUpdate(function(object) {
// console.log("tween",randomX,randomY,object.x);
if (object.x == randomX || object.x == 0) {
var randomX = Math.floor(Math.random() * 57) - 28;
var randomY = Math.floor(Math.random() * 23) - 10;
// console.log("*",randomX,randomY);
} else {
cube.position.x = object.x;
cube.position.y = object.y;
}
cube.lookAt(camera.position);
}).onComplete(() => {
// console.log("tween stopped");
maketween();
});
tween.chain(tween);
tween.start();
}
//BELOW THIS POINT IS TWEEN.JS (NOT MY CODE)
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.TWEEN = factory());
}(this, (function () { 'use strict';
var version = '18.4.2';
/**
* Tween.js - Licensed under the MIT license
* https://github.com/tweenjs/tween.js
* ----------------------------------------------
*
* See https://github.com/tweenjs/tween.js/graphs/contributors for the full list of contributors.
* Thank you all, you're awesome!
*/
var _Group = function () {
this._tweens = {};
this._tweensAddedDuringUpdate = {};
};
_Group.prototype = {
getAll: function () {
return Object.keys(this._tweens).map(function (tweenId) {
return this._tweens[tweenId];
}.bind(this));
},
removeAll: function () {
this._tweens = {};
},
add: function (tween) {
this._tweens[tween.getId()] = tween;
this._tweensAddedDuringUpdate[tween.getId()] = tween;
},
remove: function (tween) {
delete this._tweens[tween.getId()];
delete this._tweensAddedDuringUpdate[tween.getId()];
},
update: function (time, preserve) {
var tweenIds = Object.keys(this._tweens);
if (tweenIds.length === 0) {
return false;
}
time = time !== undefined ? time : TWEEN.now();
// Tweens are updated in "batches". If you add a new tween during an
// update, then the new tween will be updated in the next batch.
// If you remove a tween during an update, it may or may not be updated.
// However, if the removed tween was added during the current batch,
// then it will not be updated.
while (tweenIds.length > 0) {
this._tweensAddedDuringUpdate = {};
for (var i = 0; i < tweenIds.length; i++) {
var tween = this._tweens[tweenIds[i]];
if (tween && tween.update(time) === false) {
tween._isPlaying = false;
if (!preserve) {
delete this._tweens[tweenIds[i]];
}
}
}
tweenIds = Object.keys(this._tweensAddedDuringUpdate);
}
return true;
}
};
var TWEEN = new _Group();
TWEEN.Group = _Group;
TWEEN._nextId = 0;
TWEEN.nextId = function () {
return TWEEN._nextId++;
};
// Include a performance.now polyfill.
// In node.js, use process.hrtime.
if (typeof (self) === 'undefined' && typeof (process) !== 'undefined' && process.hrtime) {
TWEEN.now = function () {
var time = process.hrtime();
// Convert [seconds, nanoseconds] to milliseconds.
return time[0] * 1000 + time[1] / 1000000;
};
}
// In a browser, use self.performance.now if it is available.
else if (typeof (self) !== 'undefined' &&
self.performance !== undefined &&
self.performance.now !== undefined) {
// This must be bound, because directly assigning this function
// leads to an invocation exception in Chrome.
TWEEN.now = self.performance.now.bind(self.performance);
}
// Use Date.now if it is available.
else if (Date.now !== undefined) {
TWEEN.now = Date.now;
}
// Otherwise, use 'new Date().getTime()'.
else {
TWEEN.now = function () {
return new Date().getTime();
};
}
TWEEN.Tween = function (object, group) {
this._isPaused = false;
this._pauseStart = null;
this._object = object;
this._valuesStart = {};
this._valuesEnd = {};
this._valuesStartRepeat = {};
this._duration = 1000;
this._repeat = 0;
this._repeatDelayTime = undefined;
this._yoyo = false;
this._isPlaying = false;
this._reversed = false;
this._delayTime = 0;
this._startTime = null;
this._easingFunction = TWEEN.Easing.Linear.None;
this._interpolationFunction = TWEEN.Interpolation.Linear;
this._chainedTweens = [];
this._onStartCallback = null;
this._onStartCallbackFired = false;
this._onUpdateCallback = null;
this._onRepeatCallback = null;
this._onCompleteCallback = null;
this._onStopCallback = null;
this._group = group || TWEEN;
this._id = TWEEN.nextId();
};
TWEEN.Tween.prototype = {
getId: function () {
return this._id;
},
isPlaying: function () {
return this._isPlaying;
},
isPaused: function () {
return this._isPaused;
},
to: function (properties, duration) {
this._valuesEnd = Object.create(properties);
if (duration !== undefined) {
this._duration = duration;
}
return this;
},
duration: function duration(d) {
this._duration = d;
return this;
},
start: function (time) {
this._group.add(this);
this._isPlaying = true;
this._isPaused = false;
this._onStartCallbackFired = false;
this._startTime = time !== undefined ? typeof time === 'string' ? TWEEN.now() + parseFloat(time) : time : TWEEN.now();
this._startTime += this._delayTime;
for (var property in this._valuesEnd) {
// Check if an Array was provided as property value
if (this._valuesEnd[property] instanceof Array) {
if (this._valuesEnd[property].length === 0) {
continue;
}
// Create a local copy of the Array with the start value at the front
this._valuesEnd[property] = [this._object[property]].concat(this._valuesEnd[property]);
}
// If `to()` specifies a property that doesn't exist in the source object,
// we should not set that property in the object
if (this._object[property] === undefined) {
continue;
}
// Save the starting value, but only once.
if (typeof(this._valuesStart[property]) === 'undefined') {
this._valuesStart[property] = this._object[property];
}
if ((this._valuesStart[property] instanceof Array) === false) {
this._valuesStart[property] *= 1.0; // Ensures we're using numbers, not strings
}
this._valuesStartRepeat[property] = this._valuesStart[property] || 0;
}
return this;
},
stop: function () {
if (!this._isPlaying) {
return this;
}
this._group.remove(this);
this._isPlaying = false;
this._isPaused = false;
if (this._onStopCallback !== null) {
this._onStopCallback(this._object);
}
this.stopChainedTweens();
return this;
},
end: function () {
this.update(Infinity);
return this;
},
pause: function(time) {
if (this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = true;
this._pauseStart = time === undefined ? TWEEN.now() : time;
this._group.remove(this);
return this;
},
resume: function(time) {
if (!this._isPaused || !this._isPlaying) {
return this;
}
this._isPaused = false;
this._startTime += (time === undefined ? TWEEN.now() : time)
- this._pauseStart;
this._pauseStart = 0;
this._group.add(this);
return this;
},
stopChainedTweens: function () {
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
this._chainedTweens[i].stop();
}
},
group: function (group) {
this._group = group;
return this;
},
delay: function (amount) {
this._delayTime = amount;
return this;
},
repeat: function (times) {
this._repeat = times;
return this;
},
repeatDelay: function (amount) {
this._repeatDelayTime = amount;
return this;
},
yoyo: function (yoyo) {
this._yoyo = yoyo;
return this;
},
easing: function (easingFunction) {
this._easingFunction = easingFunction;
return this;
},
interpolation: function (interpolationFunction) {
this._interpolationFunction = interpolationFunction;
return this;
},
chain: function () {
this._chainedTweens = arguments;
return this;
},
onStart: function (callback) {
this._onStartCallback = callback;
return this;
},
onUpdate: function (callback) {
this._onUpdateCallback = callback;
return this;
},
onRepeat: function onRepeat(callback) {
this._onRepeatCallback = callback;
return this;
},
onComplete: function (callback) {
this._onCompleteCallback = callback;
return this;
},
onStop: function (callback) {
this._onStopCallback = callback;
return this;
},
update: function (time) {
var property;
var elapsed;
var value;
if (time < this._startTime) {
return true;
}
if (this._onStartCallbackFired === false) {
if (this._onStartCallback !== null) {
this._onStartCallback(this._object);
}
this._onStartCallbackFired = true;
}
elapsed = (time - this._startTime) / this._duration;
elapsed = (this._duration === 0 || elapsed > 1) ? 1 : elapsed;
value = this._easingFunction(elapsed);
for (property in this._valuesEnd) {
// Don't update properties that do not exist in the source object
if (this._valuesStart[property] === undefined) {
continue;
}
var start = this._valuesStart[property] || 0;
var end = this._valuesEnd[property];
if (end instanceof Array) {
this._object[property] = this._interpolationFunction(end, value);
} else {
// Parses relative end values with start as base (e.g.: +10, -3)
if (typeof (end) === 'string') {
if (end.charAt(0) === '+' || end.charAt(0) === '-') {
end = start + parseFloat(end);
} else {
end = parseFloat(end);
}
}
// Protect against non numeric properties.
if (typeof (end) === 'number') {
this._object[property] = start + (end - start) * value;
}
}
}
if (this._onUpdateCallback !== null) {
this._onUpdateCallback(this._object, elapsed);
}
if (elapsed === 1) {
if (this._repeat > 0) {
if (isFinite(this._repeat)) {
this._repeat--;
}
// Reassign starting values, restart by making startTime = now
for (property in this._valuesStartRepeat) {
if (typeof (this._valuesEnd[property]) === 'string') {
this._valuesStartRepeat[property] = this._valuesStartRepeat[property] + parseFloat(this._valuesEnd[property]);
}
if (this._yoyo) {
var tmp = this._valuesStartRepeat[property];
this._valuesStartRepeat[property] = this._valuesEnd[property];
this._valuesEnd[property] = tmp;
}
this._valuesStart[property] = this._valuesStartRepeat[property];
}
if (this._yoyo) {
this._reversed = !this._reversed;
}
if (this._repeatDelayTime !== undefined) {
this._startTime = time + this._repeatDelayTime;
} else {
this._startTime = time + this._delayTime;
}
if (this._onRepeatCallback !== null) {
this._onRepeatCallback(this._object);
}
return true;
} else {
if (this._onCompleteCallback !== null) {
this._onCompleteCallback(this._object);
}
for (var i = 0, numChainedTweens = this._chainedTweens.length; i < numChainedTweens; i++) {
// Make the chained tweens start exactly at the time they should,
// even if the `update()` method was called way past the duration of the tween
this._chainedTweens[i].start(this._startTime + this._duration);
}
return false;
}
}
return true;
}
};
TWEEN.Easing = {
Linear: {
None: function (k) {
return k;
}
},
Quadratic: {
In: function (k) {
return k * k;
},
Out: function (k) {
return k * (2 - k);
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k;
}
return - 0.5 * (--k * (k - 2) - 1);
}
},
Cubic: {
In: function (k) {
return k * k * k;
},
Out: function (k) {
return --k * k * k + 1;
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k;
}
return 0.5 * ((k -= 2) * k * k + 2);
}
},
Quartic: {
In: function (k) {
return k * k * k * k;
},
Out: function (k) {
return 1 - (--k * k * k * k);
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k * k;
}
return - 0.5 * ((k -= 2) * k * k * k - 2);
}
},
Quintic: {
In: function (k) {
return k * k * k * k * k;
},
Out: function (k) {
return --k * k * k * k * k + 1;
},
InOut: function (k) {
if ((k *= 2) < 1) {
return 0.5 * k * k * k * k * k;
}
return 0.5 * ((k -= 2) * k * k * k * k + 2);
}
},
Sinusoidal: {
In: function (k) {
return 1 - Math.cos(k * Math.PI / 2);
},
Out: function (k) {
return Math.sin(k * Math.PI / 2);
},
InOut: function (k) {
return 0.5 * (1 - Math.cos(Math.PI * k));
}
},
Exponential: {
In: function (k) {
return k === 0 ? 0 : Math.pow(1024, k - 1);
},
Out: function (k) {
return k === 1 ? 1 : 1 - Math.pow(2, - 10 * k);
},
InOut: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
if ((k *= 2) < 1) {
return 0.5 * Math.pow(1024, k - 1);
}
return 0.5 * (- Math.pow(2, - 10 * (k - 1)) + 2);
}
},
Circular: {
In: function (k) {
return 1 - Math.sqrt(1 - k * k);
},
Out: function (k) {
return Math.sqrt(1 - (--k * k));
},
InOut: function (k) {
if ((k *= 2) < 1) {
return - 0.5 * (Math.sqrt(1 - k * k) - 1);
}
return 0.5 * (Math.sqrt(1 - (k -= 2) * k) + 1);
}
},
Elastic: {
In: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
return -Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
},
Out: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
return Math.pow(2, -10 * k) * Math.sin((k - 0.1) * 5 * Math.PI) + 1;
},
InOut: function (k) {
if (k === 0) {
return 0;
}
if (k === 1) {
return 1;
}
k *= 2;
if (k < 1) {
return -0.5 * Math.pow(2, 10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI);
}
return 0.5 * Math.pow(2, -10 * (k - 1)) * Math.sin((k - 1.1) * 5 * Math.PI) + 1;
}
},
Back: {
In: function (k) {
var s = 1.70158;
return k * k * ((s + 1) * k - s);
},
Out: function (k) {
var s = 1.70158;
return --k * k * ((s + 1) * k + s) + 1;
},
InOut: function (k) {
var s = 1.70158 * 1.525;
if ((k *= 2) < 1) {
return 0.5 * (k * k * ((s + 1) * k - s));
}
return 0.5 * ((k -= 2) * k * ((s + 1) * k + s) + 2);
}
},
Bounce: {
In: function (k) {
return 1 - TWEEN.Easing.Bounce.Out(1 - k);
},
Out: function (k) {
if (k < (1 / 2.75)) {
return 7.5625 * k * k;
} else if (k < (2 / 2.75)) {
return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75;
} else if (k < (2.5 / 2.75)) {
return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375;
} else {
return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375;
}
},
InOut: function (k) {
if (k < 0.5) {
return TWEEN.Easing.Bounce.In(k * 2) * 0.5;
}
return TWEEN.Easing.Bounce.Out(k * 2 - 1) * 0.5 + 0.5;
}
}
};
TWEEN.Interpolation = {
Linear: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = TWEEN.Interpolation.Utils.Linear;
if (k < 0) {
return fn(v[0], v[1], f);
}
if (k > 1) {
return fn(v[m], v[m - 1], m - f);
}
return fn(v[i], v[i + 1 > m ? m : i + 1], f - i);
},
Bezier: function (v, k) {
var b = 0;
var n = v.length - 1;
var pw = Math.pow;
var bn = TWEEN.Interpolation.Utils.Bernstein;
for (var i = 0; i <= n; i++) {
b += pw(1 - k, n - i) * pw(k, i) * v[i] * bn(n, i);
}
return b;
},
CatmullRom: function (v, k) {
var m = v.length - 1;
var f = m * k;
var i = Math.floor(f);
var fn = TWEEN.Interpolation.Utils.CatmullRom;
if (v[0] === v[m]) {
if (k < 0) {
i = Math.floor(f = m * (1 + k));
}
return fn(v[(i - 1 + m) % m], v[i], v[(i + 1) % m], v[(i + 2) % m], f - i);
} else {
if (k < 0) {
return v[0] - (fn(v[0], v[0], v[1], v[1], -f) - v[0]);
}
if (k > 1) {
return v[m] - (fn(v[m], v[m], v[m - 1], v[m - 1], f - m) - v[m]);
}
return fn(v[i ? i - 1 : 0], v[i], v[m < i + 1 ? m : i + 1], v[m < i + 2 ? m : i + 2], f - i);
}
},
Utils: {
Linear: function (p0, p1, t) {
return (p1 - p0) * t + p0;
},
Bernstein: function (n, i) {
var fc = TWEEN.Interpolation.Utils.Factorial;
return fc(n) / fc(i) / fc(n - i);
},
Factorial: (function () {
var a = [1];
return function (n) {
var s = 1;
if (a[n]) {
return a[n];
}
for (var i = n; i > 1; i--) {
s *= i;
}
a[n] = s;
return s;
};
})(),
CatmullRom: function (p0, p1, p2, p3, t) {
var v0 = (p2 - p0) * 0.5;
var v1 = (p3 - p1) * 0.5;
var t2 = t * t;
var t3 = t * t2;
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (- 3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1;
}
}
};
TWEEN.version = version;
return TWEEN;
})));
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/build/three.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.tutorialjinni.com/tween.js/18.5.0/Tween.js"></script>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="js/capture.js"></script>
</body>
</html>
Related
So I've been scouring the web to find a way to do this but nothing I've found fits the exact solution we are looking for.
I have an app that stores float numbers in a circular buffer. The circular buffer class can be found here https://www.npmjs.com/package/circular-buffer.
In my app new numbers are coming in every few miliseconds and the buffer holds around 60K values.
For the purpose of this question though I created a circular buffer of 10 with a stream of 100 randomly generated numbers to simulate the incoming data. This is the line that generates the simulated stream:
for (let i = 0; i < valuesToEnqueueForDemoPurposes.length; i++) {
With my current setup, it is taking the cpu too much time to convert the circular buffer to an array and then calculate its min, max, min position / index number, max position / index number and standard deviations (but the stddev is not the focus of this question).
Here is my current code:
stats = require("stats-lite");
var CircularBuffer = require("circular-buffer");
var circularBuffer10 = new CircularBuffer(10);
var valuesToEnqueueForDemoPurposes = Array.from(Array(100)).map(x=>Math.random() * 1000)
for (let i = 0; i < valuesToEnqueueForDemoPurposes.length; i++) {
var newValue = valuesToEnqueueForDemoPurposes[i];
circularBuffer10.enq(newValue);
let valuesArray = circularBuffer10.toarray();
var maxIndex = valuesArray.reduce((iMax, x, i, arr) => x > arr[iMax] ? i : iMax, 0);
var minIndex = valuesArray.reduce((iMin, x, i, arr) => x < arr[iMin] ? i : iMin, 0);
var max = valuesArray[maxIndex];
var min = valuesArray[minIndex];
var standardDeviation = stats.stdev(valuesArray);
console.log(maxIndex);
console.log(max);
console.log(minIndex);
console.log(min);
console.log(standardDeviation + "\n\n");
}
So I was wondering if it was possible to optimize this code with different data structures.
The closest answer I've found to solve this issue is from this SO answer: https://stackoverflow.com/a/48610455
It uses:
a queue of N items
a Min / Max Heap to track the min / max item.
A hash map to track the frequency of each item.
But the problem with this solution is that the heap is always growing and with the amount of differing incoming data I receive, this would cause a serious problem. And it also only calculates the maximum.
Also found this c++ solution but it is only for a normal queue, a max (not min) and I wasn't able to reproduce in javascript:
https://www.geeksforgeeks.org/design-a-queue-data-structure-to-get-minimum-or-maximum-in-o1-time/
Does anyone know if it would be possible, using whatever combination of data structures, to find the Max or Min in O(1) for this type of scenario (with or without circular buffers)?
Thanks to #thomas's advice I was able to alter the circular buffer class I was using so that the sum, mean,max, min and standard deviations are calculated on average at O(1) but at the worst O(N). Worked like a charm for the performance I needed.
Please note that for my purposes I have only altered the "unshift" method of the CBuffer circular buffer class . So the other methods won't be updating the max, min and standard deviations correctly. Here is the link to the jsfiddle:
https://jsfiddle.net/29f4an7s/
And here is my testing code:
// A standard deviation object constructor. Running deviation (avoid growing arrays) which
// is round-off error resistant. Based on an algorithm found in a Knuth book.
class StandardDeviation {
constructor() {
this.v = 0;
this.w = 0;
this.S = 0;
this.count = 0;
}
// Add a measurement. Also calculates updates to stepwise parameters which are later used
// to determine sigma.
add(measurement) {
this.count += 1;
this.w = this.v;
this.v = this.v + (measurement - this.v) / this.count;
this.S = this.S + (measurement - this.w) * (measurement - this.v);
}
// Performs the final step needed to get the standard deviation and returns it.
get() {
if (this.count < 2) {
// There are less measurements accumulated than necessary to perform computation
return 0.0;
} else {
return Math.sqrt(this.S / (this.count));
}
}
// Replaces the value x currently present in this sample with the
// new value y. In a sliding window, x is the value that
// drops out and y is the new value entering the window. The sample
// count remains constant with this operation.
replace(x, y) {
const deltaYX = y - x;
const deltaX = x - this.v;
const deltaY = y - this.v;
this.v = this.v + deltaYX / this.count;
const deltaYp = y - this.v;
const countMinus1 = this.count - 1;
this.S = this.S - this.count / countMinus1 * (deltaX * deltaX - deltaY * deltaYp) - deltaYX * deltaYp / countMinus1;
}
// Remove a measurement. Also calculates updates to stepwise parameters which are later used
// to determine sigma.
remove(x) {
this.w = (this.count * this.v - x) / (this.count - 1);
this.S -= (x - this.v) * (x - this.w);
this.v = this.w;
this.count -= 1;
}
}
function CBuffer() {
// handle cases where "new" keyword wasn't used
if (!(this instanceof CBuffer)) {
// multiple conditions need to be checked to properly emulate Array
if (arguments.length > 1 || typeof arguments[0] !== 'number') {
return CBuffer.apply(new CBuffer(arguments.length), arguments);
} else {
return new CBuffer(arguments[0]);
}
}
// if no arguments, then nothing needs to be set
if (arguments.length === 0)
throw new Error('Missing Argument: You must pass a valid buffer size');
// this is the same in either scenario
this.length = this.start = 0;
// set to callback fn if data is about to be overwritten
this.overflow = null;
// set to callback fn if data is about to be overwritten
this.maxIndex = null;
this.minIndex = null;
this.max = null;
this.min = null;
this.sum = null;
this.mean = null;
this.standardDeviation = new StandardDeviation();
// emulate Array based on passed arguments
if (arguments.length > 1 || typeof arguments[0] !== 'number') {
this.data = new Array(arguments.length);
this.end = (this.size = arguments.length) - 1;
this.push.apply(this, arguments);
} else {
this.data = new Array(arguments[0]);
this.end = (this.size = arguments[0]) - 1;
}
// need to `return this` so `return CBuffer.apply` works
return this;
}
function defaultComparitor(a, b) {
return a == b ? 0 : a > b ? 1 : -1;
}
function mod(n, m) {
return ((n % m) + m) % m;
}
CBuffer.prototype = {
// properly set constructor
constructor : CBuffer,
/* mutator methods */
// pop last item
pop : function () {
var item;
if (this.length === 0) return;
item = this.data[this.end];
// remove the reference to the object so it can be garbage collected
delete this.data[this.end];
this.end = (this.end - 1 + this.size) % this.size;
this.length--;
return item;
},
// push item to the end
push : function () {
var i = 0;
var returnOverflow = false;
// check if overflow is set, and if data is about to be overwritten
if (this.overflow && this.length + arguments.length > this.size) {
// call overflow function and send data that's about to be overwritten
for (; i < this.length + arguments.length - this.size; i++) {
returnOverflow = this.data[(this.end + i + 1) % this.size];
// this.overflow(this.data[(this.end + i + 1) % this.size], this);
}
}
// push items to the end, wrapping and erasing existing items
// using arguments variable directly to reduce gc footprint
for (i = 0; i < arguments.length; i++) {
this.data[(this.end + i + 1) % this.size] = arguments[i];
}
// recalculate length
if (this.length < this.size) {
if (this.length + i > this.size) this.length = this.size;
else this.length += i;
}
// recalculate end
this.end = (this.end + i) % this.size;
// recalculate start
this.start = (this.size + this.end - this.length + 1) % this.size;
// return number current number of items in CBuffer
return returnOverflow;
},
// reverse order of the buffer
reverse : function () {
var i = 0,
tmp;
for (; i < ~~(this.length / 2); i++) {
tmp = this.data[(this.start + i) % this.size];
this.data[(this.start + i) % this.size] = this.data[(this.start + (this.length - i - 1)) % this.size];
this.data[(this.start + (this.length - i - 1)) % this.size] = tmp;
}
return this;
},
// rotate buffer to the left by cntr, or by 1
rotateLeft : function (cntr) {
if (typeof cntr === 'undefined') cntr = 1;
if (typeof cntr !== 'number') throw new Error("Argument must be a number");
while (--cntr >= 0) {
this.push(this.shift());
}
return this;
},
// rotate buffer to the right by cntr, or by 1
rotateRight : function (cntr) {
if (typeof cntr === 'undefined') cntr = 1;
if (typeof cntr !== 'number') throw new Error("Argument must be a number");
while (--cntr >= 0) {
this.unshift(this.pop());
}
return this;
},
// remove and return first item
shift : function () {
var item;
// check if there are any items in CBuff
if (this.length === 0) return;
// store first item for return
item = this.data[this.start];
// recalculate start of CBuffer
this.start = (this.start + 1) % this.size;
// decrement length
this.length--;
return item;
},
// sort items
sort : function (fn) {
this.data.sort(fn || defaultComparitor);
this.start = 0;
this.end = this.length - 1;
return this;
},
// add item to beginning of buffer
unshift : function () {
var i = 0;
var returnOverflow = false;
if (this.length == this.size) {
returnOverflow = this.last();
}
for (i = 0; i < arguments.length; i++) {
this.data[(this.size + this.start - (i % this.size) - 1) % this.size] = arguments[i];
}
if (this.size - this.length - i < 0) {
this.end += this.size - this.length - i;
if (this.end < 0) this.end = this.size + (this.end % this.size);
}
if (this.length < this.size) {
if (this.length + i > this.size) this.length = this.size;
else this.length += i;
}
this.start -= arguments.length;
if (this.start < 0) this.start = this.size + (this.start % this.size);
this.recalculateMaxMin(arguments[0], returnOverflow);
this.sum += arguments[0];
if (returnOverflow) {
this.sum -= returnOverflow;
this.standardDeviation.replace(returnOverflow, arguments[0])
}
else {
this.standardDeviation.add(arguments[0]);
}
this.mean = this.sum / this.length;
return returnOverflow;
},
/* accessor methods */
// return index of first matched element
indexOf : function (arg, idx) {
if (!idx) idx = 0;
for (; idx < this.length; idx++) {
if (this.data[(this.start + idx) % this.size] === arg) return idx;
}
return -1;
},
// return last index of the first match
lastIndexOf : function (arg, idx) {
if (!idx) idx = this.length - 1;
for (; idx >= 0; idx--) {
if (this.data[(this.start + idx) % this.size] === arg) return idx;
}
return -1;
},
// return the index an item would be inserted to if this
// is a sorted circular buffer
sortedIndex : function(value, comparitor, context) {
comparitor = comparitor || defaultComparitor;
var isFull = this.length === this.size,
low = this.start,
high = isFull ? this.length - 1 : this.length;
// Tricky part is finding if its before or after the pivot
// we can get this info by checking if the target is less than
// the last item. After that it's just a typical binary search.
if (low && comparitor.call(context, value, this.data[high]) > 0) {
low = 0, high = this.end;
}
while (low < high) {
var mid = (low + high) >>> 1;
if (comparitor.call(context, value, this.data[mid]) > 0) low = mid + 1;
else high = mid;
}
return !isFull ? low :
// http://stackoverflow.com/a/18618273/1517919
(((low - this.start) % this.length) + this.length) % this.length;
},
/* iteration methods */
// check every item in the array against a test
every : function (callback, context) {
var i = 0;
for (; i < this.length; i++) {
if (!callback.call(context, this.data[(this.start + i) % this.size], i, this))
return false;
}
return true;
},
// loop through each item in buffer
// TODO: figure out how to emulate Array use better
forEach : function (callback, context) {
var i = 0;
for (; i < this.length; i++) {
callback.call(context, this.data[(this.start + i) % this.size], i, this);
}
},
// construct new CBuffer of same length, apply map function, and return new CBuffer
map : function (callback, context) {
var outCBuffer = new CBuffer(this.size);
for (var i = 0; i < this.length; i++) {
var n = (this.start + i) % this.size;
outCBuffer.push(callback.call(context, this.data[n], i, this));
}
return outCBuffer;
},
// check items agains test until one returns true
// TODO: figure out how to emulate Array use better
some : function (callback, context) {
var i = 0;
for (; i < this.length; i++) {
if (callback.call(context, this.data[(this.start + i) % this.size], i, this))
return true;
}
return false;
},
// calculate the average value of a circular buffer
avg : function () {
return this.length == 0 ? 0 : (this.sum() / this.length);
},
// loop through each item in buffer and calculate sum
sum : function () {
var index = this.length;
var s = 0;
while (index--) s += this.data[index];
return s;
},
// loop through each item in buffer and calculate sum
getMaxPosition : function () {
// return 0
return (this.start + this.start + this.maxIndex) % this.size;
},
// loop through each item in buffer and calculate sum
getStandardDeviation : function () {
// return 0
return this.standardDeviation.get();
},
// loop through each item in buffer and calculate sum
getMinPosition : function () {
// return 0
return (this.start + this.start + this.minIndex) % this.size;
},
recalculateMaxMin : function (newValue, returnOverflow) {
if (this.length == 1) {
this.max = newValue;
this.maxIndex = this.start;
this.min = newValue;
this.minIndex = this.start;
return;
}
// Max / Mins
if (newValue > this.max) {
this.max = newValue;
this.maxIndex = this.start;
}
if (newValue < this.min) {
this.min = newValue;
this.minIndex = this.start;
}
// If overflow max or min recalculate
if (
returnOverflow && (returnOverflow >= this.max || returnOverflow <= this.min)
) {
this.maxIndex = 0;
this.minIndex = 0;
this.max = this.data[0];
this.min = this.data[0];
for (let i = 0; i < this.length; i++) {
if (this.data[i] > this.max) {
this.maxIndex = i;
this.max = this.data[i];
}
if (this.data[i] < this.min) {
this.minIndex = i;
this.min = this.data[i];
}
}
}
},
// loop through each item in buffer and calculate median
median : function () {
if (this.length === 0)
return 0;
var values = this.slice().sort(defaultComparitor);
var half = Math.floor(values.length / 2);
if(values.length % 2)
return values[half];
else
return (values[half-1] + values[half]) / 2.0;
},
/* utility methods */
// reset pointers to buffer with zero items
// note: this will not remove values in cbuffer, so if for security values
// need to be overwritten, run `.fill(null).empty()`
empty : function () {
var i = 0;
this.length = this.start = 0;
this.end = this.size - 1;
return this;
},
// fill all places with passed value or function
fill : function (arg) {
var i = 0;
if (typeof arg === 'function') {
while(this.data[i] = arg(), ++i < this.size);
} else {
while(this.data[i] = arg, ++i < this.size);
}
// reposition start/end
this.start = 0;
this.end = this.size - 1;
this.length = this.size;
return this;
},
// return first item in buffer
first : function () {
return this.data[this.start];
},
// return last item in buffer
last : function () {
return this.data[this.end];
},
// return specific index in buffer
get : function (arg) {
return this.data[mod(this.start + arg, this.size)];
},
isFull : function (arg) {
return this.size === this.length;
},
// set value at specified index
set : function (idx, arg) {
return this.data[(this.start + idx) % this.size] = arg;
},
// return clean array of values
toArray : function () {
return this.slice();
},
// return a string based on the array
join : function(separator) {
if (!separator) separator = ',';
var outString = new String(this.data[0]);
for (var i = 1; i < this.length; i++) {
var n = (this.start + i) % this.size;
outString = outString.concat(separator, this.data[i]);
}
return outString;
},
// slice the buffer to an arraay
slice : function (start, end) {
var size = this.length;
start = +start || 0;
if (start < 0) {
if (start >= end)
return [];
start = (-start > size) ? 0 : size + start;
}
if (end == null || end > size)
end = size;
else if (end < 0)
end += size;
else
end = +end || 0;
size = start < end ? end - start : 0;
var result = Array(size);
for (var index = 0; index < size; index++) {
result[index] = this.data[(this.start + start + index) % this.size];
}
return result;
}
};
var bufferLength = 3;
var numbersToGenerate = 10;
var circularBufferN = new CBuffer(bufferLength);
var valuesToEnqueueForDemoPurposes = Array.from(Array(numbersToGenerate)).map(x=>Math.random() * 1000)
for (let i = 0; i < valuesToEnqueueForDemoPurposes.length; i++) {
var newValue = valuesToEnqueueForDemoPurposes[i];
console.log("\n\nNEW VALUE****************************************************************:");
console.log(newValue);
console.log("STARTING UNSHIFT:");
console.log(circularBufferN.unshift(newValue));
let valuesArray = circularBufferN.data;
var maxIndex = circularBufferN.maxIndex;
var minIndex = circularBufferN.minIndex;
var max = valuesArray[maxIndex];
var min = valuesArray[minIndex];
console.log("Max Index");
console.log(maxIndex);
console.log("Max:");
console.log(max);
console.log("Min Index:");
console.log(minIndex);
console.log("Min:");
console.log(min);
console.log("Start:");
console.log(circularBufferN.start);
console.log("ORDERED ARRAY:");
console.log(circularBufferN.toArray());
console.log("Max Position:");
console.log(circularBufferN.getMaxPosition());
console.log("Min Position:");
console.log(circularBufferN.getMinPosition());
console.log('Sum:');
console.log(circularBufferN.sum);
console.log("mean:");
console.log(circularBufferN.mean);
console.log("Derived Standard Deviation");
console.log(circularBufferN.getStandardDeviation());
}
I have a for loop like this:
var speed = 100;
var curve = [];
for (var i = 0; i < 5; i++) {
curve.push(i*speed);
}
So for the last loop its 400, the question is how do i implement ease in and out in the for loop? roughly in the end the result should be like this? [0,52,200,348,400]
EDIT:
var defaultSpin = 24;
var totalSlices = 12;
for (var i = 0; i < defaultSpin; i++) {
highlight(divs[i%totalSlices], i*100, 100);
}
function highlight(el, delay, duration) {
setTimeout(function() {
el.className += ' active';
setTimeout(function() {
el.className = 'pie';
}, duration)
}, delay)
}
It is a spin wheel with highlight instead of actually spinning it. I'm calling the above function with the loop. for now it only has constant speed because each loop difference is only 100 so the 1st hightlight delay is 0 and it start immediately. 2nd is 100, 3rd is 200 and so on.
Lots of common easing functions are shown here:
http://gizma.com/easing/
Here is an example of how to use one:
// from http://gizma.com/easing/
var easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
var steps = 4
var speed = 100
var curve = []
for (var i = 0; i < steps+1; i++) {
var stepValue = easeInOutQuad(i, 0, speed*steps, steps);
curve.push(stepValue);
}
console.log(curve); // [0, 50, 200, 350, 400]
Hey take a note of this snippet
/*\
* Raphael.easing_formulas
[ property ]
**
* Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:
# <ul>
# <li>“linear”</li>
# <li>“<” or “easeIn” or “ease-in”</li>
# <li>“>” or “easeOut” or “ease-out”</li>
# <li>“<>” or “easeInOut” or “ease-in-out”</li>
# <li>“backIn” or “back-in”</li>
# <li>“backOut” or “back-out”</li>
# <li>“elastic”</li>
# <li>“bounce”</li>
# </ul>
# <p>See also Easing demo.</p>
\*/
var ef = R.easing_formulas = {
linear: function (n) {
return n;
},
"<": function (n) {
return pow(n, 1.7);
},
">": function (n) {
return pow(n, .48);
},
"<>": function (n) {
var q = .48 - n / 1.04,
Q = math.sqrt(.1734 + q * q),
x = Q - q,
X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),
y = -Q - q,
Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),
t = X + Y + .5;
return (1 - t) * 3 * t * t + t * t * t;
},
backIn: function (n) {
var s = 1.70158;
return n * n * ((s + 1) * n - s);
},
backOut: function (n) {
n = n - 1;
var s = 1.70158;
return n * n * ((s + 1) * n + s) + 1;
},
elastic: function (n) {
if (n == !!n) {
return n;
}
return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;
},
bounce: function (n) {
var s = 7.5625,
p = 2.75,
l;
if (n < (1 / p)) {
l = s * n * n;
} else {
if (n < (2 / p)) {
n -= (1.5 / p);
l = s * n * n + .75;
} else {
if (n < (2.5 / p)) {
n -= (2.25 / p);
l = s * n * n + .9375;
} else {
n -= (2.625 / p);
l = s * n * n + .984375;
}
}
}
return l;
}
};
ef.easeIn = ef["ease-in"] = ef["<"];
ef.easeOut = ef["ease-out"] = ef[">"];
ef.easeInOut = ef["ease-in-out"] = ef["<>"];
ef["back-in"] = ef.backIn;
ef["back-out"] = ef.backOut;
This is a snippet from Raphael. Here you see you have a list of animation ease-in formulas.
Lets try one of them, e.g. ease-in
var pow = Math.pow;
function easeIn(n) {
return pow(n, 1.7);
}
function easeOut(n) {
return pow(n, .48);
}
function process(min, max, intervals, fN) {
var diff = 1 / intervals,
difference = max - min,
curve = [];
for (i = diff; i <= 1; i += diff) {
curve.push(min + (difference * fN(i)));
}
return curve;
}
console.log('easeIn: \n', process(0, 400, 5, easeIn));
console.log('easeOut: \n', process(0, 400, 5, easeOut));
This might not be in sync with the output you have expected. But these are the formulas a renowned JS SVG library like Rapahel uses. You would love this demo
How would I find out if a point (x,y,z) is on a line between pointA and pointB?
What I would like is a boolean function that would do this:
pointA // random THREE.Vector3
pointB // random THREE.Vector3
pointToCheck // random THREE.Vector3
var isOnLine = THREE.pointOnLine(pointA, pointB, pointToCheck)
if (isOnLine) {
console.log('point is on the line');
}
Here is an image for visualization:
Cross product of two vectors can help us to solve this problem.
function isPointOnLine (pointA, pointB, pointToCheck) {
var c = new THREE.Vector3();
c.crossVectors(pointA.clone().sub(pointToCheck), pointB.clone().sub(pointToCheck));
return !c.length();
}
THREE.isPointOnLineAndBetweenPoints = function (pointA, pointB, pointToCheck) {
if (!isPointOnLine(pointA, pointB, pointToCheck)) {
return false;
}
var dx = pointB.x - pointA.x;
var dy = pointB.y - pointA.y;
// if a line is a more horizontal than vertical:
if (Math.abs(dx) >= Math.abs(dy)) {
if (dx > 0) {
return pointA.x <= pointToCheck.x && pointToCheck.x <= pointB.x;
} else {
return pointB.x <= pointToCheck.x && pointToCheck.x <= pointA.x;
}
} else {
if (dy > 0 ) {
return pointA.y <= pointToCheck.y && pointToCheck.y <= pointB.y;
} else {
return pointB.y <= pointToCheck.y && pointToCheck.y <= pointA.y;
}
}
}
a call:
THREE.isPointOnLineAndBetweenPoints(new THREE.Vector3(1, 0, 0), new THREE.Vector3(2, 0, 0), new THREE.Vector3(2, 0, 0));
Use the following function if you wanna to know just whether this point is on a line or not:
isPointOnLine(new THREE.Vector3(1, 0, 0), new THREE.Vector3(2, 0, 0), new THREE.Vector3(2, 0, 0));
This much more simple way.
function isPointOnLine (pointA, pointB, pointToCheck) {
var c = new THREE.Vector3();
c.crossVectors(pointA.clone().sub(pointToCheck), pointB.clone().sub(pointToCheck));
return !c.length(); }
THREE.isPointOnLineAndBetweenPoints = function (pointA, pointB, pointToCheck) {
if (!isPointOnLine(pointA, pointB, pointToCheck)) {
return false;
}
let d = pointA.distanceTo(pointB);
return pointA.distanceTo(pointToCheck) < d && pointB.distanceTo(pointToCheck) < d;
}
You can generate the symmetric form of the equation for the three-dimensional line, plug in the points on pointToCheck, and determine if it's on the line. Here's the code:
// Pick two arbitrary points to be on the line
var pointA = new THREE.Vector3( -70, -4, -100 );
var pointB = new THREE.Vector3( 65, 22, 14 );
// Equation that takes in three points, pointA and pointB
// on a three-dimensional line and pointToCheck unknown, and
// returns true if pointToCheck is on the line and false if not
// optional param betweenCheck will additionally check if point
// is between pointA and pointB
var isOnLine = function(pointA, pointB, pointToCheck, betweenCheck) {
xVector = pointB.x - pointA.x;
yVector = pointB.y - pointA.y;
zVector = pointB.z - pointA.z;
vector = [xVector, yVector, zVector];
if (!!betweenCheck) {
// test if point is between pointA and pointB
if (pointToCheck.x < Math.min[pointA.x, pointB.x] ||
pointToCheck.x > Math.max[pointA.x, pointB.x]) {
return false;
}
if (pointToCheck.y < Math.min[pointA.y, pointB.y] ||
pointToCheck.y > Math.max[pointA.y, pointB.y]) {
return false;
}
if (pointToCheck.z < Math.min[pointA.z, pointB.z] ||
pointToCheck.z > Math.max[pointA.z, pointB.z]) {
return false;
}
}
// equation for the vector function generating this line is:
// [pointA.x, pointA.y, pointA.z] + t[vector], or
// [pointA.x + t * xVector, pointA.y + t * yVector,
// pointA.z + t * zVector], or
// parametric form:
// x = pointA.x + (t * xVector)
// y = pointA.y + (t * yVector)
// z = pointA.z + (t * zVector), or
// symmetric form:
// x - pointA.x y - pointA.y z - pointA.z
// ------------ = -------------- = --------------
// xVector yVector zVector
//
// So to test for whether pointToCheck is on line, we plug in
// its coordinates to x, y and z in the symmetric form
// and see if the equations balance
var x = (pointToCheck.x - pointA.x) / xVector;
var y = (pointToCheck.y - pointA.y) / yVector;
var z = (pointToCheck.z - pointA.z) / zVector;
var results = [x, y, z];
// Handle any axis where no change occurred by removing the
// point to check, as it's irrelevent to determining whether
// point to check is on the line.
for (var i = 0; i < 2; i++) {
if (isNaN(results[i])) {
results.splice(i, 1);
}
}
var first = results[0];
// Cycle through remaining results and make sure they are all
// the same
for (var i = 0; i < results.length; i++) {
// If any point is different, return false, as the point to
// check is not on the line
if (results[i] !== first) {
return false
}
}
// All the symmetric equations were equal (or irrelevant) and
// the pointToCheck is on the line
return true;
}
Here's some tests:
// Some quick testing on example lines (you can change the
// coords of pointA and pointB above and they will still pass)
pointsOnLine = [];
pointsOffLine = [];
pointsOnLineBetween = [];
pointsOffLineBetween = [];
var generatePoints = function() {
xVector = pointB.x - pointA.x;
yVector = pointB.y - pointA.y;
zVector = pointB.z - pointA.z;
vector = [xVector, yVector, zVector];
for (var i = 0; i < 100; i++) {
var t = parseInt(Math.random() * 100);
var direction = Math.random() < .5 ? true : false
if (!direction) {
t = -t;
}
var newPointCoords = new THREE.Vector3(
pointA.x + (xVector * t),
pointA.y + (yVector * t),
pointA.z + (zVector * t)
);
pointsOnLine.push(newPointCoords);
var newPointCoords = new THREE.Vector3(
pointA.x + (xVector * t) + parseInt(Math.random() * 100),
pointA.y + (yVector * t) - parseInt(Math.random() * 100),
pointA.z + (zVector * t) + parseInt(Math.random() * 100)
);
pointsOffLine.push(newPointCoords);
var x = ((Math.max(pointA.x, pointB.x) - Math.min(pointA.x, pointB.x)) /
2) + Math.min(pointA.x, pointB.x);
var y = ((Math.max(pointA.y, pointB.y) - Math.min(pointA.y, pointB.y)) /
2) + Math.min(pointA.y, pointB.y)
var z = ((Math.max(pointA.z, pointB.z) - Math.min(pointA.z, pointB.z)) /
2) + Math.min(pointA.z, pointB.z)
var newPointCoords = new THREE.Vector3(x, y, z);
pointsOnLineBetween.push(newPointCoords);
var x = ((Math.max(pointA.x, pointB.x) - Math.min(pointA.x, pointB.x)) /
Math.abs(t)) + Math.min(pointA.x, pointB.x);
var y = ((Math.max(pointA.y, pointB.y) - Math.min(pointA.y, pointB.y)) /
Math.abs(t) * 2) + Math.min(pointA.y, pointB.y)
var z = ((Math.max(pointA.z, pointB.z) - Math.min(pointA.z, pointB.z)) /
Math.abs(t) * 3) + Math.min(pointA.z, pointB.z)
var newPointCoords = new THREE.Vector3(x, y, z);
pointsOffLineBetween.push(newPointCoords);
}
}
generatePoints();
for (var i=0; i < pointsOnLine.length; i++) {
if (!isOnLine(pointA, pointB, pointsOnLine[i])) {
console.log('error', pointsOnLine[i]);
} else {
console.log('test passed -- point on line')
}
}
for (var i=0; i < pointsOffLine.length; i++) {
if (isOnLine(pointA, pointB, pointsOffLine[i])) {
console.log('error', pointsOffLine[i]);
} else {
console.log('test passed -- point off line')
}
}
for (var i=0; i < pointsOnLineBetween.length; i++) {
if (!isOnLine(pointA, pointB, pointsOnLineBetween[i], true)) {
console.log('error', pointsOnLineBetween[i]);
} else {
console.log('test passed -- point on line between')
}
}
for (var i=0; i < pointsOffLineBetween.length; i++) {
if (isOnLine(pointA, pointB, pointsOffLineBetween[i], true)) {
console.log('error', pointsOffLineBetween[i]);
} else {
console.log('test passed -- point off line between')
}
}
Plunkr.
I want to build a Thunderbird addon for encryption/decryption of email. I have the JavaScript code but I don't know how to use XUL to make it work.
Here is the JavaScript code in HTML: Fiddle.
var Alphabet = "!\"#$%&'()*+,-./0123456789:;<=>?#ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~ \n𮃩∆";
Alphabet = Alphabet.split("");
var Crypto = function (alpha, gen, C) {
var p, B, encrypt, decrypt, f, g, modInv, modPow, toAlpha, to10;
toAlpha = function (x) {
var y, p, l, n;
if (x === 0) {
return "!!!!";
}
y = [];
n = 4;
n = Math.ceil(n);
while (n--) {
p = Math.pow(alpha.length, n);
l = Math.floor(x / p);
y.push(alpha[l]);
x -= l * p;
}
y = y.join("");
return y;
};
to10 = function (x) {
var y, p, n;
y = 0;
p = 1;
x = x.split("");
n = x.length;
while (n--) {
y += alpha.indexOf(x[n]) * p;
p *= alpha.length;
}
return y;
};
modInv = function (gen, mod) {
var v, d, u, t, c, q;
v = 1;
d = gen;
t = 1;
c = mod % gen;
u = Math.floor(mod / gen);
while (d > 1) {
q = Math.floor(d / c);
d = d % c;
v = v + q * u;
if (d) {
q = Math.floor(c / d);
c = c % d;
u = u + q * v;
}
}
return d ? v : mod - u;
};
modPow = function (base, exp, mod) {
var c, x;
if (exp === 0) {
return 1;
} else if (exp < 0) {
exp = -exp;
base = modInv(base, mod);
}
c = 1;
while (exp > 0) {
if (exp % 2 === 0) {
base = (base * base) % mod;
exp /= 2;
} else {
c = (c * base) % mod;
exp--;
}
}
return c;
};
p = 91744613;
C = parseInt(C, 10);
if (isNaN(C)) {
C = Math.round(Math.sqrt(Math.random() * Math.random()) * (p - 2) + 2);
alert("Your new private key is "+C);
}
B = modPow(gen, C, p);
decrypt = function (a) {
var d, x, y;
x = a[1];
y = modPow(a[0], -C, p);
d = (x * y) % p;
d = Math.round(d) % p;
return alpha[d - 2];
};
encrypt = function (key, d) {
var k, a;
k = Math.ceil(Math.sqrt(Math.random() * Math.random()) * 1E10);
d = alpha.indexOf(d) + 2;
a = [];
a[0] = modPow(key[1], k, key[0]);
a[1] = (d * modPow(key[2], k, key[0])) % key[0];
return a;
};
f = function (message, key) {
var n, x, y, w;
y = [];
message = message.split("");
n = message.length;
while (n--) {
x = encrypt(key, message[n]);
y.push(toAlpha(x[0]));
y.push(toAlpha(x[1]));
}
y = y.join("");
return y;
};
g = function (message) {
var n, m, d, x;
m = [];
n = message.length / 8;
while (n--) {
x = message[8 * n + 4];
x += message[8 * n + 5];
x += message[8 * n + 6];
x += message[8 * n + 7];
m.unshift(x);
x = message[8 * n];
x += message[8 * n + 1];
x += message[8 * n + 2];
x += message[8 * n + 3];
m.unshift(x);
}
x = [];
d = [];
n = m.length / 2;
while (n--) {
x[0] = m[2 * n];
x[1] = m[2 * n + 1];
x[0] = to10(x[0]);
x[1] = to10(x[1]);
d.push(decrypt(x));
}
message = d.join("");
return message;
};
return {
pubKey: [p, gen, B],
priKey: C,
decrypt: g,
encrypt: f
};
};
var key = prompt("Do you already have a private key? If so, enter it here. Otherwise, a new one will be generated for you.");
var user = Crypto(Alphabet, 62, key);
var dataBox = document.getElementById("inputBox");
document.getElementById("userPriKeyBox").innerHTML = user.priKey;
document.getElementById("userPubKeyBox").innerHTML = user.pubKey.join(" ");
document.getElementById("encryptBox").onclick = function () {
var x, y, z;
x = dataBox.value;
if (x === "") {
alert("Please enter some data in the input box.");
return false;
}
y = document.getElementById("recPubKeyBox").value;
if (y === "") {
alert("Please enter a valid public key into the public key box.");
return false;
}
y = y.split(" ");
if (y.length != 3) {
alert("Please enter a valid public key into the public key box.");
return false;
}
y[0] = parseInt(y[0], 10);
y[1] = parseInt(y[1], 10);
y[2] = parseInt(y[2], 10);
if (isNaN(y[0]) || y[0] < 1 || isNaN(y[1]) || y[1] < 1 || isNaN(y[2]) || y[2] < 1) {
alert("Please enter a valid public key into the public key box.");
return false;
}
z = user.encrypt(x, y);
dataBox.value = z;
};
document.getElementById("decryptBox").onclick = function () {
var x, z;
x = dataBox.value;
if (x === "") {
alert("Please enter some data in the input box.");
return false;
}
z = user.decrypt(x);
dataBox.value = z;
};
<div style="font-family:monospace">Your private key:
<span id="userPriKeyBox"></span>
<br/>Your public key:
<span id="userPubKeyBox"></span>
<br/>Recipient's public key:
<input id="recPubKeyBox" style="font-family:monospace">
<br/>
<textarea id="inputBox" rows="15" cols="50" style="font-family:monospace"></textarea>
<br/>
<input type="button" value="Encrypt" id="encryptBox" />
<input type="button" value="Decrypt" id="decryptBox" />
<br/>
</div>
How can I use that JavaScript code in a Thunderbird addon?
This tutorial helped me a lot.
I hope it will help you to succeed with your extension, too.
I have a Javascript code, which I use to bring Night Mode effect on an HTML page...
The code goes something like this-
javascript: (function () {
function RGBtoHSL(RGBColor) {
with(Math) {
var R, G, B;
var cMax, cMin;
var sum, diff;
var Rdelta, Gdelta, Bdelta;
var H, L, S;
R = RGBColor[0];
G = RGBColor[1];
B = RGBColor[2];
cMax = max(max(R, G), B);
cMin = min(min(R, G), B);
sum = cMax + cMin;
diff = cMax - cMin;
L = sum / 2;
if (cMax == cMin) {
S = 0;
H = 0;
} else {
if (L <= (1 / 2)) S = diff / sum;
else S = diff / (2 - sum);
Rdelta = R / 6 / diff;
Gdelta = G / 6 / diff;
Bdelta = B / 6 / diff;
if (R == cMax) H = Gdelta - Bdelta;
else if (G == cMax) H = (1 / 3) + Bdelta - Rdelta;
else H = (2 / 3) + Rdelta - Gdelta; if (H < 0) H += 1;
if (H > 1) H -= 1;
}
return [H, S, L];
}
}
function getRGBColor(node, prop) {
var rgb = getComputedStyle(node, null).getPropertyValue(prop);
var r, g, b;
if (/rgb\((\d+),\s(\d+),\s(\d+)\)/.exec(rgb)) {
r = parseInt(RegExp.$1, 10);
g = parseInt(RegExp.$2, 10);
b = parseInt(RegExp.$3, 10);
return [r / 255, g / 255, b / 255];
}
return rgb;
}
function hslToCSS(hsl) {
return "hsl(" + Math.round(hsl[0] * 360) + ", " + Math.round(hsl[1] * 100) + "%, " + Math.round(hsl[2] * 100) + "%)";
}
var props = ["color", "background-color", "border-left-color", "border-right-color", "border-top-color", "border-bottom-color"];
var props2 = ["color", "backgroundColor", "borderLeftColor", "borderRightColor", "borderTopColor", "borderBottomColor"];
if (typeof getRGBColor(document.documentElement, "background-color") == "string") document.documentElement.style.backgroundColor = "white";
revl(document.documentElement);
function revl(n) {
var i, x, color, hsl;
if (n.nodeType == Node.ELEMENT_NODE) {
for (i = 0; x = n.childNodes[i]; ++i) revl(x);
for (i = 0; x = props[i]; ++i) {
color = getRGBColor(n, x);
if (typeof (color) != "string") {
hsl = RGBtoHSL(color);
hsl[2] = 1 - hsl[2];
n.style[props2[i]] = hslToCSS(hsl);
}
}
}
}
})()
I have saved this as a Bookmarklet in my Bookmark Bar on Google Chrome, but I want this to be automatically applied to every page I load. What should I do to achieve this?
You should write this as a userscript and run it with something like tampermonkey