JS mini-game in grid, browser frozen after first replication - javascript
I'm trying to create a small game that replicate neighbors cells in a grid. I use a web worker that draw replicate cells every seconds. I'm able to replicate the first second. If my initial cell is row3col3, the new replicated cells will be :
row3col2, row3col4
row2col3, row4col3
The problem is, after the first second (and the replication), the game freezes, and i'm not able to do something. Can't click on cells, etc.
EDIT : After few seconds, it go to '00:02' but Chrome crashed "Aw, Snap! Something went wrong...' [RELOAD]
EDIT 2 : After looking on the memory used, It appears I have an memory overflow, 16000 Mb ! My method is bad, so.
I know my code is not really optimised, and I think that is the problem. Unfortunatly, i'm not able to do more efficient code, so I ask some help to you guys, to give me some ways to explore.
Here the code :
var lastClicked;
var cellTab = Array();
var replicant = Array();
var newReplicant = Array();
var count = 5;
var rows = 20;
var cols = 20;
var randomRow = Math.floor((Math.random() * rows));
var randomCol = Math.floor((Math.random() * cols));
var grid = clickableGrid(rows, cols,randomRow,randomCol,cellTab, function(el,row,col,i){
console.log("You clicked on element:",el);
console.log("You clicked on row:",row);
console.log("You clicked on col:",col);
console.log("You clicked on item #:",i);
$(el).addClass('clicked');
lastClicked = el;
});
document.getElementById("game").appendChild(grid);
function clickableGrid( rows, cols, randomRow, randomCol, cellTab, callback ){
var i=0;
var grid = document.createElement('table');
grid.className = 'grid';
for (var r=0;r<rows;++r){
var tr = grid.appendChild(document.createElement('tr'));
for (var c=0;c<cols;++c){
var cell = tr.appendChild(document.createElement('td'));
$(cell).addClass('row'+r+'col'+c);
if(randomCol == c && randomRow == r)
{
storeCoordinate(r, c, replicant);
$(cell).css('background', '#000000');
}
storeCoordinate(r, c, cellTab);
cell.addEventListener('click',(function(el,r,c,i){
return function(){
callback(el,r,c,i);
}
})(cell,r,c,i),false);
}
}
return grid;
}
function storeCoordinate(xVal, yVal, array)
{
array.push({x: xVal, y: yVal});
}
function replicate(replicant)
{
for (var i = 0; i < replicant.length; i++) {
console.log(replicant);
var supRowX = replicant[i].x-1;
var supRowY = replicant[i].y;
storeCoordinate(supRowX, supRowY, newReplicant);
var subRowX = replicant[i].x+1;
var subRowY = replicant[i].y;
storeCoordinate(subRowX, subRowY, newReplicant);
var supColsX = replicant[i].x;
var supColsY = replicant[i].y-1;
storeCoordinate(supColsX, supColsY, newReplicant);
var subColsX = replicant[i].x;
var subColsY = replicant[i].y+1;
storeCoordinate(subColsX, subColsY, newReplicant);
}
}
function drawReplicant(replicant, cellTab)
{
for (var i = 0; i < replicant.length; i++) {
if($.inArray(replicant[i], cellTab))
{
$('.row'+replicant[i].x+'col'+replicant[i].y).css('background', '#000000');
}
}
}
var w = null; // initialize variable
// function to start the timer
function startTimer()
{
// First check whether Web Workers are supported
if (typeof(Worker)!=="undefined"){
// Check whether Web Worker has been created. If not, create a new Web Worker based on the Javascript file simple-timer.js
if (w==null){
w = new Worker("w.countdown.js");
}
// Update timer div with output from Web Worker
w.onmessage = function (event) {
document.getElementById("timer").innerHTML = event.data;
console.log(event.data);
replicate(replicant);
replicant = newReplicant;
drawReplicant(replicant, cellTab);
};
} else {
// Web workers are not supported by your browser
document.getElementById("timer").innerHTML = "Sorry, your browser does not support Web Workers ...";
}
}
// function to stop the timer
function stopTimer()
{
w.terminate();
timerStart = true;
w = null;
}
startTimer();
And here, the web worker :
var timerStart = true;
function myTimer(d0)
{
// get current time
var d=(new Date()).valueOf();
// calculate time difference between now and initial time
var diff = d-d0;
// calculate number of minutes
var minutes = Math.floor(diff/1000/60);
// calculate number of seconds
var seconds = Math.floor(diff/1000)-minutes*60;
var myVar = null;
// if number of minutes less than 10, add a leading "0"
minutes = minutes.toString();
if (minutes.length == 1){
minutes = "0"+minutes;
}
// if number of seconds less than 10, add a leading "0"
seconds = seconds.toString();
if (seconds.length == 1){
seconds = "0"+seconds;
}
// return output to Web Worker
postMessage(minutes+":"+seconds);
}
if (timerStart){
// get current time
var d0=(new Date()).valueOf();
// repeat myTimer(d0) every 100 ms
myVar=setInterval(function(){myTimer(d0)},1000);
// timer should not start anymore since it has been started
timerStart = false;
}
Maybe it's because I use jQuery ?
Related
Tracking content consumption in SPA and wanting to prevent the custom event pushed on wrong pages
I want to track the content consumption behavior on our SPA blog website. I refer to this blog post and modify its example to set a custom HTML tag in GTM like this, and the following tag will be triggered after a gtm_history event is triggered on blog article pages.
var contentContainer = "my article class";
var wordsPerMinute = 250;
var is_error = false;
var event_timer_reached = 'content_time_reached';
// Calculated Variables
var contentEl = document.querySelector(contentContainer);
if (contentEl == null) { is_error = true; }
/**
* Start content consumption plugin
*/
function initContentConsumption() {
var timeToRead = null;
var interval = null;
var contentEl = document.querySelectorAll(contentContainer);
var wordContentCount = wordCount(contentEl);
if (contentEl && wordContentCount) {
// Time to read by wordsPerMinute
timeToRead = (wordContentCount / wordsPerMinute).toFixed(2);
interval = timeToRead * 60 * 1000;
pageReadTimer(interval);
}
}
function pageReadTimer(interval) {
window.setTimeout(function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'event': event_timer_reached });
}
, interval);
}
function wordCount(words) {
var count = 0;
for (var i = 0; i < words.length; i++) {
var cleanWords = words[i].innerText.replace(/\n\n/g, " ");
cleanWords = cleanWords.replace(/\n|\t/g, " ");
count += cleanWords.split(" ").length;
}
return count;
}
if(is_error==false){initContentConsumption()}
I expect the code to work as follows:
Calculate the characters of the blog post and suggest a minimal reading time
Push a "content-time-reached" event only when the reader stays on the page over the minimal reading time
So far, the code works fine if readers do spend more time reading a specific post. However, if it is not the case, the event might be pushed to the wrong page.
Say a reader selects post-A with the suggested reading time of 45 sec. If he only stays on the post for 30 seconds, goes to another Post B (say post-B has the suggested reading time of 60 seconds), and stays for 15 seconds, the event "content-time-reached" will still be fired. How it should work is that the event should not be pushed on either post-A or post-B since the reader doesn't stay longer on the blog post pages respectively than each post's suggested reading time.
I know the issue is that I use the "setTimeout" function to push the event, and it will push it whenever a reader stays on the site longer than any single blog's suggested reading time. I've changed my scripts based on the guidance of this post, added a new data layer variable named "custom.timer.running," and changed the "setTimeout" to "setInterval" and "clearInterval." However, it turned out that the tag was not fired at all.
var contentContainer = "my article class";
var wordsPerMinute = 250;
var is_error = false;
var event_timer_reached = 'content_time_reached';
var timerNumber = 1;
var limit = 1;
/**
* Start content consumption plugin
*/
function initContentConsumption() {
var timeToRead = null;
var interval = null;
var contentEl = document.querySelectorAll(contentContainer);
var wordContentCount = wordCount(contentEl);
if (contentEl && wordContentCount) {
// Time to read by wordsPerMinute
timeToRead = (wordContentCount / wordsPerMinute).toFixed(2);
interval = timeToRead * 60 * 1000;
pageReadTimer(interval);
}
}
function pageReadTimer(interval) {
var fireTimer = function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ 'event': event_timer_reached,
'custom.timer.running' : 'false'});
timerNumber += 1;
if(limit < timerNumber){
window.clearInterval(timerId);}
}
if ({{custom.timer.running}} == 'false') {
window.dataLayer.push({ 'custom.timer.running' : 'true'});
var timerId = window.setInterval(fireTimer, interval); }
}
function wordCount(words) {
var count = 0;
for (var i = 0; i < words.length; i++) {
var cleanWords = words[i].innerText.replace(/\n\n/g, " ");
cleanWords = cleanWords.replace(/\n|\t/g, " ");
count += cleanWords.split(" ").length;
}
return count;
}
initContentConsumption()
why is MIDI scripter dropping events after 20x loops in MainStage 3
my drum riff script seems to work up until the riff is repeated (i think around) 20 times. then some notes like snare... start to dissappear. if i hit the global stop and play again it works. also if i reload the script it doesn't help which makes me think... but come up with the road to nowhere. any ideas?
The problem starts at beat position 640 (20x 32 beats per loop).
const riffs = [
['11th Hour',[[1,49,114,1,0],[0,49,0,1.25,0],[1,46,89,1.501,20],[1,36,101,1.748,0],[0,46,0,1.751,20],[0,36,0,1.998,0],[1,46,92,2.001,30],[0,46,0,2.251,30],[1,36,114,2.495,0],[1,46,84,2.498,30],[0,36,0,2.745,0],[0,46,0,2.748,30],[1,38,120,2.999,0],[1,46,113,3.003,30],[0,38,64,3.249,0],[0,46,0,3.253,30],[1,46,85,3.499,20],[0,46,0,3.749,20],[1,46,88,4.002,30],[0,46,0,4.252,30],[1,46,87,4.504,30],[1,36,77,4.743,0],[0,46,0,4.754,30],[0,36,0,4.993,0],[1,36,114,4.999,0],[1,46,107,5.002,30],[0,36,0,5.249,0],[0,46,0,5.252,30],[1,46,82,5.506,30],[1,36,106,5.744,0],[0,46,0,5.756,30],[0,36,0,5.994,0],[1,46,92,5.999,30],[0,46,0,6.249,30],[1,36,114,6.489,0],[1,46,84,6.504,20],[0,36,0,6.739,0],[0,46,0,6.754,20],[1,46,113,6.992,30],[1,38,120,7,0],[0,46,0,7.242,30],[0,38,64,7.25,0],[1,46,81,7.505,20],[0,46,0,7.755,20],[1,46,90,7.999,30],[1,36,102,8.243,0],[0,46,0,8.248,30],[0,36,0,8.493,0],[1,38,120,8.495,0],[1,46,113,8.498,30],[0,38,64,8.745,0],[0,46,0,8.748,30],[1,36,114,8.995,0],[1,46,107,9.002,30],[0,36,0,9.245,0],[0,46,0,9.252,30],[1,46,85,9.502,20],[1,36,101,9.745,0],[0,46,0,9.752,20],[0,36,0,9.995,0],[1,46,93,9.998,30],[0,46,0,10.248,30],[1,36,114,10.49,0],[1,46,84,10.498,20],[0,36,0,10.74,0],[0,46,0,10.748,20],[1,38,120,10.995,0],[1,46,113,10.998,30],[0,38,64,11.245,0],[0,46,0,11.248,30],[1,46,81,11.495,30],[0,46,0,11.745,30],[1,46,90,12,30],[0,46,0,12.25,30],[1,46,84,12.498,20],[1,36,77,12.737,0],[0,46,0,12.748,20],[0,36,0,12.988,0],[1,36,114,12.994,0],[1,46,107,13,30],[0,36,0,13.244,0],[0,46,0,13.25,30],[1,46,88,13.498,30],[1,36,104,13.734,0],[0,46,0,13.748,30],[0,36,0,13.984,0],[1,46,86,13.995,30],[0,46,0,14.245,30],[1,36,114,14.494,0],[1,46,89,14.501,20],[0,36,0,14.744,0],[0,46,0,14.751,20],[1,46,113,14.99,30],[1,38,120,14.994,0],[0,46,0,15.24,30],[1,36,99,15.242,0],[0,38,64,15.244,0],[0,36,0,15.492,0],[1,46,88,15.501,20],[1,36,106,15.735,0],[0,46,0,15.751,20],[0,36,0,15.985,0],[1,46,89,15.997,30],[0,46,0,16.247,30],[1,38,83,16.49,0],[0,38,64,16.74,0],[1,40,105,16.743,0],[1,57,114,16.991,0],[0,40,64,16.993,0],[1,36,114,16.993,0],[0,57,0,17.241,0],[0,36,0,17.243,0],[1,46,86,17.499,30],[1,36,101,17.744,0],[0,46,0,17.749,30],[0,36,0,17.994,0],[1,46,88,18,30],[0,46,0,18.25,30],[1,36,114,18.494,0],[1,46,84,18.499,30],[0,36,0,18.744,0],[0,46,0,18.749,30],[1,46,113,19,30],[1,38,120,19.003,0],[0,46,0,19.25,30],[0,38,64,19.253,0],[1,46,81,19.503,20],[0,46,0,19.753,20],[1,46,91,19.999,30],[0,46,0,20.249,30],[1,46,84,20.5,30],[0,46,0,20.75,30],[1,36,114,20.998,0],[1,46,107,20.999,30],[0,36,0,21.248,0],[0,46,0,21.249,30],[1,46,85,21.502,20],[1,36,98,21.74,0],[0,46,0,21.752,20],[0,36,0,21.99,0],[1,46,85,22.003,30],[0,46,0,22.253,30],[1,36,114,22.497,0],[1,46,86,22.5,20],[0,36,0,22.747,0],[0,46,0,22.75,20],[1,46,113,22.992,30],[1,38,120,23,0],[0,46,0,23.242,30],[0,38,64,23.25,0],[1,46,85,23.502,30],[0,46,0,23.752,30],[1,46,91,24.002,30],[1,36,99,24.241,0],[0,46,0,24.252,30],[0,36,0,24.491,0],[1,38,120,24.496,0],[1,46,113,24.502,30],[0,38,64,24.746,0],[0,46,0,24.752,30],[1,36,114,24.996,0],[1,46,107,24.996,30],[0,46,0,25.246,30],[0,36,0,25.246,0],[1,46,89,25.498,20],[1,36,102,25.743,0],[0,46,0,25.748,20],[0,36,0,25.993,0],[1,46,91,25.999,30],[0,46,0,26.249,30],[1,36,114,26.49,0],[1,46,88,26.503,20],[0,36,0,26.74,0],[0,46,0,26.753,20],[1,46,113,26.994,30],[1,38,120,27.001,0],[0,46,0,27.244,30],[0,38,64,27.251,0],[1,46,89,27.5,30],[0,46,0,27.75,30],[1,46,93,28,30],[0,46,0,28.25,30],[1,46,81,28.499,20],[0,46,0,28.749,20],[1,36,114,28.997,0],[1,46,107,29,30],[0,36,0,29.247,0],[0,46,0,29.25,30],[1,46,86,29.505,30],[1,36,105,29.741,0],[0,46,0,29.755,30],[0,36,0,29.991,0],[1,46,94,30,30],[0,46,0,30.25,30],[1,36,114,30.498,0],[1,46,86,30.501,30],[0,36,0,30.748,0],[0,46,0,30.751,30],[1,46,113,30.997,30],[1,38,120,30.998,0],[0,46,0,31.247,30],[0,38,64,31.248,0],[1,36,102,31.492,0],[1,46,86,31.503,30],[0,36,64,31.742,0],[0,46,0,31.753,30],[1,47,99,31.992,0],[1,33,110,31.994,0],[1,40,110,32.008,0],[0,47,64,32.241,0],[0,33,64,32.244,0],[0,40,64,32.258,0],[1,36,86,32.494,0],[0,36,64,32.744,0]]],
['Black Veil',[[1,36,118,0.994,0],[1,33,39,0.998,0],[1,57,118,1.002,0],[0,36,0,1.244,0],[0,33,64,1.248,0],[0,57,0,1.252,0],[1,45,72,1.497,0],[1,33,13,1.501,0],[1,36,87,1.738,0],[0,45,0,1.747,0],[0,33,64,1.751,0],[0,36,0,1.987,0],[1,45,86,1.999,0],[1,33,39,2.001,0],[1,38,123,2.003,0],[0,45,0,2.249,0],[0,33,64,2.252,0],[0,38,0,2.253,0],[1,45,72,2.501,0],[1,33,7,2.502,0],[1,36,62,2.748,0],[0,45,0,2.751,0],[0,33,64,2.752,0],[1,33,41,2.993,0],[1,36,118,2.995,0],[0,36,0,2.995,0],[1,45,88,2.996,0],[0,33,64,3.243,0],[0,36,0,3.245,0],[0,45,0,3.246,0],[1,45,73,3.498,0],[1,33,13,3.503,0],[0,45,0,3.748,0],[0,33,64,3.753,0],[1,45,85,3.999,0],[1,33,36,4.002,0],[1,38,123,4.003,0],[0,45,0,4.249,0],[0,33,64,4.252,0],[0,38,0,4.253,0],[1,45,72,4.502,0],[1,33,7,4.504,0],[0,45,0,4.752,0],[0,33,64,4.754,0],[1,36,118,4.997,0],[1,33,40,5.003,0],[1,45,80,5.003,0],[0,36,0,5.247,0],[0,45,0,5.253,0],[0,33,64,5.253,0],[1,45,74,5.502,0],[1,33,11,5.504,0],[1,36,92,5.738,0],[0,45,0,5.752,0],[0,33,64,5.754,0],[0,36,0,5.988,0],[1,45,84,6,0],[1,33,35,6.001,0],[1,38,123,6.002,0],[1,36,88,6.242,0],[0,45,0,6.25,0],[0,33,64,6.251,0],[0,38,0,6.252,0],[0,36,0,6.492,0],[1,33,8,6.498,0],[1,45,72,6.501,0],[1,36,61,6.741,0],[0,33,64,6.748,0],[0,45,0,6.751,0],[0,36,0,6.991,0],[1,45,87,6.992,0],[1,33,41,6.996,0],[1,36,118,6.996,0],[0,45,0,7.242,0],[0,36,0,7.246,0],[0,33,64,7.246,0],[1,36,93,7.49,0],[1,45,81,7.499,0],[1,33,16,7.503,0],[0,36,0,7.74,0],[0,45,0,7.749,0],[0,33,64,7.753,0],[1,45,81,7.997,0],[1,33,34,8,0],[1,38,123,8,0],[0,45,0,8.247,0],[0,33,64,8.25,0],[0,38,0,8.251,0],[1,45,69,8.497,0],[1,33,16,8.503,0],[0,45,0,8.747,0],[0,33,64,8.753,0],[1,36,118,8.997,0],[1,33,40,9,0],[1,45,84,9.002,0],[0,36,0,9.247,0],[0,33,64,9.25,0],[0,45,0,9.252,0],[1,45,76,9.495,0],[1,33,5,9.497,0],[0,45,0,9.745,0],[0,33,64,9.747,0],[1,38,123,9.998,0],[1,45,84,10,0],[1,33,33,10.001,0],[0,38,0,10.248,0],[0,45,0,10.25,0],[0,33,64,10.251,0],[1,45,73,10.495,0],[1,33,12,10.504,0],[1,36,62,10.742,0],[0,45,0,10.745,0],[0,33,64,10.754,0],[1,45,86,10.991,0],[0,36,0,10.992,0],[1,36,118,10.993,0],[1,33,35,10.998,0],[0,45,0,11.241,0],[0,36,0,11.243,0],[0,33,64,11.248,0],[1,45,77,11.497,0],[1,33,15,11.503,0],[0,45,0,11.747,0],[0,33,64,11.753,0],[1,45,82,11.997,0],[1,38,123,11.998,0],[1,33,36,12,0],[1,36,91,12.238,0],[0,45,0,12.247,0],[0,38,0,12.248,0],[0,33,64,12.25,0],[0,36,0,12.488,0],[1,45,71,12.494,0],[1,33,10,12.495,0],[0,45,0,12.744,0],[0,33,64,12.745,0],[1,36,118,12.995,0],[1,33,37,12.997,0],[1,45,82,13,0],[0,36,0,13.245,0],[0,33,64,13.247,0],[0,45,0,13.25,0],[1,33,12,13.495,0],[1,45,69,13.498,0],[1,36,85,13.738,0],[0,33,64,13.745,0],[0,45,0,13.748,0],[0,36,0,13.988,0],[1,45,86,13.995,0],[1,33,42,13.995,0],[1,38,123,14,0],[1,36,92,14.234,0],[0,45,0,14.245,0],[0,33,64,14.245,0],[0,38,0,14.25,0],[0,36,0,14.484,0],[1,45,70,14.493,0],[1,33,7,14.501,0],[0,45,0,14.743,0],[1,36,63,14.743,0],[0,33,64,14.751,0],[1,45,82,14.99,0],[0,36,0,14.993,0],[1,33,43,14.995,0],[1,36,118,14.995,0],[0,45,0,15.24,0],[0,36,0,15.245,0],[0,33,64,15.245,0],[1,36,93,15.491,0],[1,33,15,15.498,0],[1,45,89,15.498,0],[0,36,0,15.741,0],[0,33,64,15.748,0],[0,45,0,15.748,0],[1,47,116,15.993,0],[1,45,86,15.995,0],[1,33,41,15.997,0],[1,36,85,16.241,0],[0,47,64,16.243,0],[0,45,0,16.245,0],[0,33,64,16.247,0],[0,36,64,16.361,0],[1,36,99,16.363,0],[1,47,116,16.496,0],[1,45,77,16.497,0],[1,33,6,16.503,0],[0,36,64,16.612,0],[1,36,107,16.736,0],[0,47,64,16.746,0],[0,45,0,16.747,0],[0,33,64,16.753,0],[0,36,64,16.986,0],[1,36,118,16.995,0],[1,33,32,16.996,0],[1,57,118,16.999,0],[0,36,0,17.245,0],[0,33,64,17.246,0],[0,57,0,17.249,0],[1,45,74,17.494,0],[1,33,7,17.502,0],[0,45,0,17.744,0],[1,36,84,17.745,0],[0,33,64,17.752,0],[0,36,0,17.995,0],[1,45,86,17.996,0],[1,38,123,18,0],[1,33,38,18.001,0],[0,45,0,18.246,0],[0,38,0,18.25,0],[0,33,64,18.251,0],[1,33,10,18.499,0],[1,45,78,18.5,0],[1,36,57,18.741,0],[0,33,64,18.749,0],[0,45,0,18.75,0],[0,36,0,18.991,0],[1,36,118,18.994,0],[1,33,43,18.995,0],[1,45,85,19,0],[0,36,0,19.244,0],[0,33,64,19.245,0],[0,45,0,19.25,0],[1,45,75,19.499,0],[1,33,5,19.503,0],[0,45,0,19.749,0],[0,33,64,19.753,0],[1,33,42,19.999,0],[1,45,86,19.999,0],[1,38,123,20.003,0],[0,45,0,20.249,0],[0,33,64,20.249,0],[0,38,0,20.253,0],[1,45,77,20.501,0],[1,33,12,20.505,0],[0,45,0,20.751,0],[0,33,64,20.755,0],[1,33,32,20.994,0],[1,45,81,20.994,0],[1,36,118,20.998,0],[0,45,0,21.244,0],[0,33,64,21.244,0],[0,36,0,21.248,0],[1,45,70,21.499,0],[1,33,8,21.502,0],[1,36,88,21.748,0],[0,45,0,21.749,0],[0,33,64,21.752,0],[0,36,0,21.998,0],[1,33,43,21.999,0],[1,45,88,21.999,0],[1,38,123,22.003,0],[0,45,0,22.249,0],[0,33,64,22.249,0],[0,38,0,22.253,0],[1,33,14,22.498,0],[1,45,72,22.501,0],[1,36,59,22.747,0],[0,33,64,22.748,0],[0,45,0,22.751,0],[1,45,89,22.992,0],[0,36,0,22.994,0],[1,36,118,22.994,0],[1,33,36,23.001,0],[0,45,0,23.242,0],[0,36,0,23.244,0],[0,33,64,23.251,0],[1,36,93,23.493,0],[1,45,79,23.496,0],[1,33,15,23.505,0],[0,36,0,23.743,0],[0,45,0,23.746,0],[0,33,64,23.755,0],[1,33,33,23.999,0],[1,45,89,23.999,0],[1,38,123,24.003,0],[1,36,91,24.24,0],[0,45,0,24.249,0],[0,33,64,24.249,0],[0,38,0,24.253,0],[0,36,0,24.49,0],[1,45,77,24.494,0],[1,33,11,24.503,0],[0,45,0,24.744,0],[0,33,64,24.753,0],[1,33,41,24.996,0],[1,45,80,24.996,0],[1,36,118,24.998,0],[0,45,0,25.246,0],[0,33,64,25.246,0],[0,36,0,25.248,0],[1,33,11,25.498,0],[1,45,74,25.499,0],[1,36,86,25.745,0],[0,33,64,25.748,0],[0,45,0,25.749,0],[0,36,0,25.995,0],[1,38,123,26,0],[1,45,88,26.001,0],[1,33,41,26.002,0],[0,38,0,26.25,0],[0,45,0,26.251,0],[0,33,64,26.252,0],[1,33,8,26.498,0],[1,45,71,26.499,0],[1,36,56,26.737,0],[0,33,64,26.748,0],[0,45,0,26.749,0],[0,36,0,26.988,0],[1,33,35,26.994,0],[1,36,118,26.994,0],[1,45,89,27.001,0],[0,36,0,27.244,0],[0,33,64,27.244,0],[0,45,0,27.251,0],[1,45,71,27.495,0],[1,33,13,27.505,0],[0,45,0,27.745,0],[0,33,64,27.755,0],[1,45,87,28.001,0],[1,33,41,28.002,0],[1,38,123,28.003,0],[0,45,0,28.251,0],[0,33,64,28.252,0],[0,38,0,28.253,0],[1,45,77,28.499,0],[1,33,8,28.501,0],[0,45,0,28.749,0],[0,33,64,28.751,0],[1,36,118,28.994,0],[1,45,84,28.999,0],[1,33,43,29.002,0],[1,36,80,29.243,0],[0,36,0,29.243,0],[0,45,0,29.249,0],[0,33,64,29.252,0],[0,36,0,29.493,0],[1,45,70,29.495,0],[1,33,13,29.501,0],[1,36,86,29.742,0],[0,45,0,29.745,0],[0,33,64,29.751,0],[0,36,0,29.992,0],[1,45,87,30,0],[1,38,123,30.001,0],[1,33,35,30.002,0],[0,45,0,30.25,0],[0,38,0,30.251,0],[0,33,64,30.252,0],[1,45,77,30.497,0],[1,33,14,30.498,0],[1,36,58,30.745,0],[0,45,0,30.747,0],[0,33,64,30.748,0],[0,36,0,30.995,0],[1,40,116,31.015,0],[1,40,116,31.232,0],[0,40,64,31.233,0],[0,40,64,31.482,0],[1,38,104,31.498,0],[1,38,48,31.744,0],[0,38,64,31.744,0],[0,38,64,31.994,0],[1,40,116,31.999,0],[1,38,104,32.244,0],[0,40,64,32.248,0],[0,38,64,32.494,0],[1,38,114,32.498,0],[1,38,104,32.741,0],[0,38,64,32.741,0],[0,38,64,32.992,0]]],
['Crimson',[[1,49,117,0.999,0],[1,36,116,1,0],[0,49,0,1.249,0],[0,36,0,1.25,0],[1,57,76,1.507,0],[0,57,0,1.757,0],[1,57,93,2.005,0],[1,38,122,2.008,0],[0,57,0,2.255,0],[0,38,0,2.258,0],[1,57,83,2.51,0],[1,36,94,2.745,0],[0,57,0,2.76,0],[0,36,0,2.995,0],[1,57,78,3.006,0],[1,36,74,3.251,0],[0,57,0,3.256,0],[0,36,0,3.499,0],[1,36,116,3.499,0],[1,57,89,3.507,0],[0,36,0,3.749,0],[0,57,0,3.757,0],[1,57,99,4.006,0],[1,38,122,4.011,0],[0,57,0,4.257,0],[0,38,0,4.261,0],[1,57,74,4.511,0],[0,57,0,4.761,0],[1,36,116,5.001,0],[1,57,94,5.006,0],[0,36,0,5.251,0],[0,57,0,5.256,0],[1,57,65,5.513,0],[1,36,99,5.744,0],[0,57,0,5.763,0],[0,36,0,5.994,0],[1,57,91,6.006,0],[1,38,122,6.008,0],[0,57,0,6.256,0],[0,38,0,6.258,0],[1,57,76,6.505,0],[1,36,95,6.752,0],[0,57,0,6.755,0],[0,36,0,7.002,0],[1,57,79,7.004,0],[0,57,0,7.254,0],[1,36,116,7.499,0],[1,57,78,7.511,0],[0,36,0,7.749,0],[0,57,0,7.761,0],[1,38,122,8.007,0],[1,57,88,8.007,0],[1,36,96,8.245,0],[0,57,0,8.257,0],[0,38,0,8.257,0],[0,36,0,8.495,0],[1,36,115,8.498,0],[1,57,80,8.506,0],[0,36,0,8.748,0],[0,57,0,8.756,0],[1,57,93,8.997,0],[1,36,116,9.001,0],[0,57,0,9.247,0],[0,36,0,9.251,0],[1,57,75,9.505,0],[0,57,0,9.755,0],[1,38,122,10.005,0],[1,57,105,10.008,0],[0,38,0,10.255,0],[0,57,0,10.258,0],[1,57,76,10.505,0],[1,36,97,10.748,0],[0,57,0,10.755,0],[0,36,0,10.998,0],[1,57,80,11,0],[0,57,0,11.25,0],[1,36,116,11.495,0],[1,57,82,11.506,0],[0,36,0,11.745,0],[0,57,0,11.756,0],[1,57,98,12.005,0],[1,38,122,12.008,0],[1,36,98,12.243,0],[0,57,0,12.255,0],[0,38,0,12.258,0],[0,36,0,12.493,0],[1,57,80,12.507,0],[0,57,0,12.757,0],[1,36,116,12.998,0],[1,57,93,13.006,0],[0,36,0,13.248,0],[0,57,0,13.256,0],[1,57,74,13.507,0],[1,36,92,13.743,0],[0,57,0,13.757,0],[0,36,0,13.993,0],[1,38,122,14.003,0],[1,57,90,14.004,0],[0,38,0,14.253,0],[0,57,0,14.254,0],[1,57,75,14.505,0],[1,36,99,14.748,0],[0,57,0,14.755,0],[0,36,0,14.998,0],[1,57,84,15.003,0],[1,36,75,15.248,0],[0,57,0,15.253,0],[0,36,0,15.498,0],[1,36,116,15.498,0],[1,57,81,15.507,0],[0,36,0,15.748,0],[0,57,0,15.757,0],[1,57,89,16.007,0],[1,38,122,16.008,0],[1,36,94,16.243,0],[0,57,0,16.257,0],[0,38,0,16.258,0],[1,48,111,16.478,0],[0,36,0,16.493,0],[1,45,118,16.51,0],[0,48,64,16.728,0],[0,45,64,16.751,0],[1,45,112,16.751,0],[1,49,117,17,0],[0,45,64,17.001,0],[1,36,116,17.002,0],[0,49,0,17.25,0],[0,36,0,17.252,0],[1,57,86,17.505,0],[0,57,0,17.755,0],[1,57,104,18.004,0],[1,38,122,18.009,0],[0,57,0,18.254,0],[0,38,0,18.259,0],[1,57,76,18.507,0],[1,36,91,18.754,0],[0,57,0,18.757,0],[1,57,81,19.003,0],[0,36,0,19.004,0],[0,57,0,19.253,0],[1,36,116,19.499,0],[1,57,96,19.504,0],[0,36,0,19.749,0],[0,57,0,19.754,0],[1,57,102,20.007,0],[1,38,122,20.008,0],[1,36,92,20.251,0],[0,57,0,20.257,0],[0,38,0,20.258,0],[0,36,0,20.501,0],[1,57,68,20.511,0],[0,57,0,20.761,0],[1,36,116,21.002,0],[1,57,99,21.007,0],[0,36,0,21.252,0],[0,57,0,21.257,0],[1,57,84,21.513,0],[1,36,95,21.747,0],[0,57,0,21.763,0],[0,36,0,21.997,0],[1,38,122,22.006,0],[1,57,100,22.009,0],[0,38,0,22.256,0],[0,57,0,22.259,0],[1,57,83,22.511,0],[1,36,94,22.752,0],[0,57,0,22.761,0],[0,36,0,23.002,0],[1,57,66,23.005,0],[1,36,75,23.245,0],[0,57,0,23.255,0],[0,36,0,23.495,0],[1,36,116,23.501,0],[1,57,85,23.508,0],[0,36,0,23.751,0],[0,57,0,23.758,0],[1,57,105,24.007,0],[1,38,122,24.01,0],[0,57,0,24.257,0],[0,38,0,24.26,0],[1,57,72,24.511,0],[0,57,0,24.761,0],[1,57,99,24.998,0],[1,36,116,25.004,0],[0,57,0,25.248,0],[0,36,0,25.254,0],[1,57,69,25.504,0],[1,36,93,25.751,0],[0,57,0,25.754,0],[0,36,0,26.001,0],[1,57,91,26.005,0],[1,38,122,26.006,0],[0,57,0,26.255,0],[0,38,0,26.256,0],[1,57,79,26.509,0],[1,36,91,26.75,0],[0,57,0,26.759,0],[0,36,0,27,0],[1,57,81,27.005,0],[0,57,0,27.255,0],[1,36,116,27.499,0],[1,57,97,27.504,0],[0,36,0,27.749,0],[0,57,0,27.754,0],[1,57,88,28.007,0],[1,38,122,28.009,0],[0,57,0,28.257,0],[0,38,0,28.259,0],[1,57,78,28.507,0],[0,57,0,28.757,0],[1,36,116,29.003,0],[1,57,101,29.007,0],[0,36,0,29.253,0],[0,57,0,29.257,0],[1,57,78,29.511,0],[1,36,96,29.75,0],[0,57,0,29.761,0],[0,36,0,30,0],[1,38,122,30.006,0],[1,57,89,30.008,0],[0,38,0,30.256,0],[0,57,0,30.258,0],[1,57,73,30.506,0],[1,36,93,30.755,0],[0,57,0,30.756,0],[1,57,83,30.998,0],[0,36,0,31.005,0],[1,36,70,31.246,0],[0,57,0,31.248,0],[1,48,104,31.484,0],[0,36,0,31.496,0],[1,47,102,31.521,0],[0,48,64,31.734,0],[1,36,112,31.748,0],[0,47,64,31.771,0],[0,36,64,31.998,0],[1,36,112,32.252,0],[1,47,98,32.461,0],[0,36,64,32.502,0],[1,43,107,32.518,0],[0,47,64,32.711,0],[0,43,64,32.768,0]]]
];
var riffData = riffs[0][1];
var NeedsTimingInfo = true;
var ResetParameterDefaults = true;
function ParameterChanged(index, value)
{
var name = PluginParameters[index].name;
Trace("parameterChanged($index:"+index+" ["+name+"], $value:"+value+")");
if (name == 'Riff')
{
setRiff(value);
}
}
function setRiff(riff)
{
Trace("Riff Changed To: "+riff+": "+riffs[riff][0]);
riffData = riffs[riff][1];
MIDI.allNotesOff();
}
function ProcessMIDI()
{
var musicInfo = GetTimingInfo();
if (musicInfo.playing)
{
var blockStartBeat = musicInfo.blockStartBeat;
var blockEndBeat = musicInfo.blockEndBeat;
var riffStart = blockStartBeat - (blockStartBeat % 32);
var length = riffData.length;
var i = 0;
for (i; i < length; i++)
{
var data = riffData[i];
var pos = data[3] + riffStart;
// its before the process block
if (pos < blockStartBeat)
{
continue;
}
// its after the process block
if (pos > blockEndBeat)
{
break;
}
//Trace("["+data[0]+","+data[1]+","+data[2]+","+data[3]+","+data[4]+"] ");
if (data[0] == 1)
{
note = new NoteOn();
}
else
{
note = new NoteOff();
}
note.pitch = data[1];
note.velocity = data[2];
note.articulationID = data[4];
note.sendAtBeat(pos);
// no more riff events but might still be processing so begin next riff
if (i + 1 >= length)
{
riffStart+= 32;
i = 0;
}
}
}
}
//define the UI -----------------------------------------------------------------
var PluginParameters = [];
// add select riff control
PluginParameters.push(
{
name: "Riff",
type: "menu",
valueStrings: [
riffs[0][0],
riffs[1][0]
],
defaultValue: 0
});
The scripter plugin was loaded on a drum kit software instrument channel and works great for the most part.
I've traced each beat with another scripter plugin and all the notes have been logged, so i assume they've all been sent properly. All the notes should be there but they just can't be heard.
I've tried all kinds of things, i'm stuck!
HTML Canvas in for loop only displaying after loop completes
I'm having a bit of trouble making a progress graph. This is my first time using canvas so I'm a little new to the concept. This page is going to be a little prime number benchmark for an assignment at school. I haven't done the algorithm yet so right now that just counts up. I wanted to have a graph display the progress of the benchmark to the user so it doesn't look like the page has just frozen. I've broken the benchmark down into "sprints", where the device will calculate numbers for a set period of time and then update the graph. Problem is, the graph doesn't seem to update until the end of the "benchmark". Any recommendations?
The javascript is below (execBench is probably the most relevant function):
function startBench() {
// move to benchmark display
//showPage("bench");
jQuery.mobile.changePage("#bench");
setTimeout(
function () {
// run benchmark
var score = execBench(10);
//set score and move page
$(".result").text(score);
setTimeout(function () {
showPage("result");
}, 4000);
}, 2000);
}
function debugmsg(message) {
console.log(message);
}
function execBench(time) {
var graphUpdateRate = 2; // horizontal "resolution" of graph/sprint length in s
var sprintCount = Math.floor(time / graphUpdateRate);
debugmsg("Running " + sprintCount + " " + graphUpdateRate + "-second sprints");
var currentTime = new Date();
var sprintDeadline = currentTime;
var counter = 0; // "score" for the end, # of primes generated
var lastPrime = 0;
var record = []; // datapoints for graph
for (var i = 0; i < sprintCount; i++) {
// perform calculations
sprintDeadline = incrementDate(new Date(), graphUpdateRate);
while (currentTime < sprintDeadline) {
currentTime = Date.now();
lastPrime = generatePrime(lastPrime);
counter++;
}
// report progress
record.push(counter);
drawGraph(document.getElementById('progGraph'), record, sprintCount);
}
return counter;
}
function generatePrime(min) {
//placeholder for algorithm
min++;
return min;
}
function drawGraph(canvas, dataPoints, maxPoints) {
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var xIncrement = width / maxPoints;
var xBegin = 0;
var prevPoint = 0;
var yScale = -1 * height / Math.max(...dataPoints);
//reset canvas
canvas.width = canvas.width;
context.clearRect(0, 0, canvas.width, canvas.height);
//move context to bottom right and set scale
context.translate(0, height);
context.scale(1, 1);
context.strokeStyle = "#ed1e79";
for (dataPoint in dataPoints) {
currentPoint = (dataPoints[dataPoint] * yScale);
context.beginPath();
context.moveTo(xBegin, prevPoint);
context.lineTo(xBegin + xIncrement, currentPoint);
context.lineWidth = 3;
context.lineCap = 'round';
context.stroke();
prevPoint = currentPoint;
xBegin += xIncrement;
}
debugmsg(Math.max(...dataPoints));
return;
}
function incrementDate(date, seconds) {
return new Date(date.getTime() + (seconds * 1000));
}
As an example of using requestAnimationFrame(), you could try something like this.
function execBench(time) {
var graphUpdateRate = 2; // horizontal "resolution" of graph/sprint length in s
var sprintCount = Math.floor(time / graphUpdateRate);
debugmsg("Running " + sprintCount + " " + graphUpdateRate + "-second sprints");
var currentTime = new Date();
var sprintDeadline = currentTime;
var counter = 0; // "score" for the end, # of primes generated
var lastPrime = 0;
var record = []; // datapoints for graph
var i = 0;
(function drawSprint() {
// perform calculations
sprintDeadline = incrementDate(new Date(), graphUpdateRate);
while (currentTime < sprintDeadline) {
currentTime = Date.now();
lastPrime = generatePrime(lastPrime);
counter++;
}
// report progress
record.push(counter);
drawGraph(document.getElementById('progGraph'), record, sprintCount);
i++;
if (i < sprintCount) {
requestAnimationFrame(drawSprint);
}
})();
return counter;
}
Your while loop is "blocking". It eats up CPU, not allowing javascript and probably much else on the computer to do anything. Instead, use setTimeout(fn, t) to schedule the next update. setTimeout() is non blocking. Its fn will execute in a fresh event thread in t milliseonds time (or shortly thereafter). Between setTimouts, your computer's processor will have the capacity to instruct the graphich card to render the canvas.
Javascript for loop doesn't work (adding numbers to a total)
I am using Jasmine for JS testing, and unfortunately I can't get the following test to pass.
it('should know the total game score', function() {
frame1 = new Frame;
frame2 = new Frame;
game = new Game;
frame1.score(3, 4);
frame2.score(5, 5);
expect(game.totalScore()).toEqual(17)
});
The error message I get is as follows: Error: Expected 0 to equal 17.
The code is as follows:
function Game() {
this.scorecard = []
};
Game.prototype.add = function(frame) {
this.scorecard.push(frame)
};
// Why is this not working!!???
Game.prototype.totalScore = function() {
total = 0;
for(i = 0; i < this.scorecard.length; i++)
{
total +=this.scorecard[i].rollOne + this.scorecard[i].rollTwo;
}
return total;
};
function Frame() {};
Frame.prototype.score = function(first_roll, second_roll) {
this.rollOne = first_roll;
this.rollTwo = second_roll;
return this
};
Frame.prototype.isStrike = function() {
return (this.rollOne === 10);
};
Frame.prototype.isSpare = function() {
return (this.rollOne + this.rollTwo === 10) && (this.rollOne !== 10)
};
Adding the numbers together manually seems to work e.g. total = game.scorecard[0].rollOne + this.scorecard[0].rollTwo , but the for loop (even though it looks correct) doesn't seem to work. Any help would be greatly appreciated :)
I am not pretty sure, but it seems that you are not calling the "Add" method, so no data is added to the scorecard.
You have to add the Frames to your game i guess
it('should know the total game score', function () {
frame1 = new Frame;
frame2 = new Frame;
game = new Game;
// those lines are missing
game.add(frame1);
game.add(frame2);
frame1.score(3, 4);
frame2.score(5, 5);
expect(17).toEqual(game.totalScore())
});
otherwise, the scorecard-array is empty and the total score is therefore equal to 0.
missing (so no data is added to the scorecard.) game.Add(frame1); game.Add(frame2);
I'm trying to stop snow script and clear the page after x seconds
How can I make the snow clear after a certain time. I've tried using variables and the calling a timeout which switches on to false and stops the makesnow() function but that doesn't seem to clear the page at all.
<script language="javascript">
ns6 = document.getElementById;
ns = document.layers;
ie = document.all;
/*******************[AccessCSS]***********************************/
function accessCSS(layerID) { //
if(ns6){ return document.getElementById(layerID).style;} //
else if(ie){ return document.all[layerID].style; } //
else if(ns){ return document.layers[layerID]; } //
}/***********************************************************/
/**************************[move Layer]*************************************/
function move(layer,x,y) { accessCSS(layer).left=x; accessCSS(layer).top = y; }
function browserBredde() {
if (window.innerWidth) return window.innerWidth;
else if (document.body.clientWidth) return document.body.clientWidth;
else return 1024;
}
function browserHoyde() {
if (window.innerHeight) return window.innerHeight;
else if (document.body.clientHeight) return document.body.clientHeight;
else return 800;
}
function makeDiv(objName,parentDiv,w,h,content,x,y,overfl,positionType)
{
// positionType could be 'absolute' or 'relative'
if (parentDiv==null) parentDiv='body';
var oDiv = document.createElement ("DIV");
oDiv.id = objName;
if (w) oDiv.style.width = w;
if (h) oDiv.style.height= h;
if (content) oDiv.innerHTML=content;
if (positionType==null) positionType="absolute";
oDiv.style.position = positionType;
if (x) oDiv.style.left=x; else oDiv.style.left=-2000;
if (y) oDiv.style.top=y; else oDiv.style.top=-2000;
if (overfl) oDiv.style.overflow=overfl; else oDiv.style.overflow="hidden";
eval(' document.'+parentDiv+'.appendChild (oDiv); ');
delete oDiv;
}
var snowC=0;
var x = new Array();
var y = new Array();
var speed = new Array();
var t=0;
var cC = new Array();
var ra = new Array();
function makeSnow() {
x[snowC] = Math.round(Math.random()*(browserBredde()-60));
y[snowC] = 10;
makeDiv("snow"+snowC,"body",32,32,'<img src="http://i693.photobucket.com/albums/vv296/KIBBLESGRAMMY/CAT/Orange-tabby-cat-icon.gif">');
speed[snowC] = Math.round(Math.random()*8)+1;
cC[snowC]=Math.random()*10;
ra[snowC] = Math.random()*7;
snowC++;
}
function moveSnow() {
var r = Math.round(Math.random()*100);
if (r>70 && snowC<20) makeSnow();
for (t=0;t<snowC;t++) {
y[t]+=speed[t];move("snow"+t,x[t],y[t]);
if (y[t]>browserHoyde()-50) {y[t] = 10;x[t] = Math.round(Math.random()*(browserBredde()-60));}
cC[t]+=0.01;
x[t]+=Math.cos(cC[t]*ra[t]);
}
setTimeout('moveSnow()',20);
}
moveSnow();
</script>
makeSnow just adds the snowflakes. Stopping that, as you say, does not clear anything. moveSnow handles the animation, and calls itself at a timeout. If instead of setting a timeout for the next moveSnow each time, you set it up to run in an interval just once, you would have an easier time stopping it.
window.snowAnimation = window.setInterval(moveSnow, 20);
If you add a css class to your snow flakes, it would be easier to target them for deletion.
oDiv.className = 'snowflake';
Then your clear function could look something like:
function clearSnow() {
window.clearTimeout(window.snowAnimation);
var flakes = document.getElementsByTagName('snowflake');
for(var i = 0, l = flakes.length; i < l; i++) {
document.body.removeChild(flakes[i]);
}
}
Timeout doesnt help, it helps you only to stop creating new snowdivs, however if you see makeDiv is the one which creates new divs on to the body, if you clear / display:none the divs which got created on makeDiv i hope it will clear all the divs on the screen.
You need to remove the divs that were created. It might be easier if you give them all some sort of class, like ".snowflake" as you create them (in makeDiv), then start removing them from the dom.
You will have to clear the elements created after the time you wanna stop snow falling.
Following code snippet will help you to clear the elements
if(count < 500){
setTimeout('moveSnow()',20);
}else{
var i = 0;
var elem = document.getElementById('snow'+i);
do{
elem.parentNode.removeChild(elem);
elem = document.getElementById('snow'+ ++i);
}while(elem != null)
}
count++;
you have to create a global variable count.