My code has to see if there is a ball in a mapPoint and then changing the color of the pixels where the ball is by the color of the ball.
Here is my code:
function UpdateColorInMapPoints(mapPointIndexs)
{
mapPointIndexs.forEach(mapPointIndex => {
var mapPointData=ballsMap[mapPointIndex]
var ballsAtTheMapPoint=ballsMap[mapPointIndex].balls;
var temperature;
if(ballsAtTheMapPoint.length>0)
{
temperature=balls[ballsAtTheMapPoint[ballsAtTheMapPoint.length-1]].temperature;
}else
{
temperature="none1";
}
var column,line=0;
while(line<scale)
{
column=0;
while(column<scale)
{
putTemperatureColorAt(temperature,(mapPointData.horizontalPosition*scale+column)*4+(mapPointData.verticalPosition*scale+line)*4*imgWidth*scale);
column++;
}
line++;
}
});
canvasContext.putImageData(ImgData,0,0);
}
function putTemperatureColorAt(temperature,index)
{
switch(Math.round(temperature))
{
case -5:
ImgData.data[index+0]=0;
ImgData.data[index+1]=255;
ImgData.data[index+2]=255;
ImgData.data[index+3]=255;
break;
case -4:
ImgData.data[index+0]=50;
ImgData.data[index+1]=255;
ImgData.data[index+2]=200;
ImgData.data[index+3]=255;
break;
case -3:
ImgData.data[index+0]=100;
ImgData.data[index+1]=255;
ImgData.data[index+2]=150;
ImgData.data[index+3]=255;
break;
case -2:
ImgData.data[index+0]=150;
ImgData.data[index+1]=255;
ImgData.data[index+2]=100;
ImgData.data[index+3]=255;
break;
case -1:
ImgData.data[index+0]=200;
ImgData.data[index+1]=255;
ImgData.data[index+2]=50;
ImgData.data[index+3]=255;
break;
case 0:
ImgData.data[index+0]=255;
ImgData.data[index+1]=255;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 1:
ImgData.data[index+0]=255;
ImgData.data[index+1]=200;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 2:
ImgData.data[index+0]=255;
ImgData.data[index+1]=150;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 3:
ImgData.data[index+0]=255;
ImgData.data[index+1]=100;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 4:
ImgData.data[index+0]=255;
ImgData.data[index+1]=50;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case 5:
ImgData.data[index+0]=255;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
case "none1":
ImgData.data[index+0]=0;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
default:
console.log("Impossible to find color:"+temperature);
}
}
when i run the code, console say : "Impossible to find color: none1"
this means that temperature="none1" but if temperature="none1" the outpout of switch shouldn't be default cause there is case "none1":
case "none1":
ImgData.data[index+0]=0;
ImgData.data[index+1]=0;
ImgData.data[index+2]=0;
ImgData.data[index+3]=255;
break;
I very don't understand wath's wrong, i hope my english wasn't too bad.
Change your switch to the following:
switch (isFinite(temperature) ? Math.round(temperature) : temperature) {
// ...
}
You want to avoid rounding on a non-finite value aka an invalid Number.
Example
const process = (temperature) => {
switch (isFinite(temperature) ? Math.round(temperature) : temperature) {
case 0: return 'Zero';
case 1: return 'One';
case 'none1': return 'None';
default: throw new Error(`Unknown temperature: ${temperature}`);
}
};
console.log(process(0.2)); // Zero
console.log(process(0.8)); // One
console.log(process('none1')); // None
console.log(process(undefined)); // throw Error
Check your switch statement.
console.log(Math.round("none1"))
Related
How I get out from the loop if switch-case implemented (there is a switch inside the loop).
function playInbestPlace() {
console.log("hello from playInbestPlace ")
findEmptyarea();
for (var i = 0; i < indexOfEmpty.length; i++) {
var elem = indexOfEmpty[i];
switch (elem) {
case 0:
cells[elem].childNodes[0].append("o");
break;
case 2:
cells[elem].childNodes[0].append("o");
break;
case 4:
cells[elem].childNodes[0].append("o");
break;
case 6:
cells[elem].childNodes[0].append("o");
break;
case 8:
cells[elem].childNodes[0].append("o");
break;
}
}
}
I want it to get out if any case valid.
you can add a variable found and break out of the loop if it's true :
function playInbestPlace() {
console.log("hello from playInbestPlace ")
findEmptyarea();
for (var i = 0; i < indexOfEmpty.length; i++) {
var elem = indexOfEmpty[i];
var found = false; // initial found is false
switch (elem) {
case 0:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 2:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 4:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 6:
cells[elem].childNodes[0].append("o");
found = true;
break;
case 8:
cells[elem].childNodes[0].append("o");
found = true;
break;
}
if(found) // break out if it's true
break;
}
}
You could use a flag variable to break from the loop when some condition is verified.
function playInbestPlace() {
console.log("hello from playInbestPlace ");
findEmptyarea();
var keepOnLooping = true;
for (var i = 0; keepOnLooping && i < indexOfEmpty.length; i++) {
if (elem % 2 === 0) {
cells[elem].childNodes[0].append("o");
keepOnLooping = false;
}
}
}
I've also added epascarello optimization in my answer.
https://jsfiddle.net/b3nyzp9n/
When probabilityAPI.card() is called, it returns ' of '
It seems like this.apicardrankvar doesn't exist at all.
So when I defined apicardrankvar and apicardsuitvar, it returned "undefined of undefined".
I am trying to get it to say a card name, such as "3 of Diamonds"
var probabilityAPI = {
coin: function() {
if(Math.random() >= 0.5) {
return "Heads";
} else if(Math.random() > 0.5){
return "Tails";
}},
dice: function() {
return Math.floor(Math.random() * (Math.floor(7) - Math.ceil(1))) + Math.ceil(1);
},
spinner: function() {
return Math.floor(Math.random() * (Math.floor(9) - Math.ceil(0))) + Math.ceil(1);
},
apimarblevar: Math.floor(Math.random() * (Math.floor(6) - Math.ceil(1))) + Math.ceil(1),
marble: function(apimarblevar) {
switch(this.apimarblevar)
{
case 1:
return "A"
break;
case 2:
return "B"
break;
case 3:
return "C"
break;
case 4:
return "D"
break;
case 5:
return "E"
break;
}
},
apidreidelvar: Math.floor(Math.random() * (Math.floor(5) - Math.ceil(1))) + Math.ceil(1),
dreidel: function() {
switch(this.apidreidelvar) {
case 1:
return "Nun"
break;
case 2:
return "Gimel"
break;
case 3:
return "He"
break;
case 4:
return "Shin"
break;
}
},
apicardsuitvar: "",
apicardrankvar: "",
apicardrankrandom: Math.floor(Math.random() * (Math.floor(14) - Math.ceil(1))) + Math.ceil(1),
apicardsuit: function(){
switch(this.apidreidelvar) {
case 1:
this.apicardsuitvar = "Clubs"
break;
case 2:
this.apicardsuitvar = "Diamonds"
break;
case 3:
this.apicardsuitvar = "Hearts"
break;
case 4:
this.apicardsuitvar = "Spades"
break;
}
},
apicardrank: function() {
switch(this.apicardrankrandom) {
case 1:
this.apicardrankvar = "Ace"
break;
case 2:
this.apicardrankvar = "2"
break;
case 3:
this.apicardrankvar = "3"
break;
case 4:
this.apicardrankvar = "4"
break;
case 5:
this.apicardrankvar = "5"
break;
case 6:
this.apicardrankvar = "6"
break;
case 7:
this.apicardrankvar = "7"
break;
case 8:
this.apicardrankvar = "8"
break;
case 9:
this.apicardrankvar = "9"
break;
case 10:
this.apicardrankvar = "10"
break;
case 11:
this.apicardrankvar = "Jack"
break;
case 12:
this.apicardrankvar = "Queen"
break;
case 13:
this.apicardrankvar = "King"
break;
}
},
card: function() {
return this.apicardrankvar + " of " + this.apicardsuitvar
}
};
probabilityAPI.card();
Please tell me how I can do with two parameters and simplify this code to a normal state. Thank you! This logic is very necessary for me, I hope for your indulgence.
var treshhold_two = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
switch (ratio) {
case 2:
treshhold = 2798,6;
break;
case 4:
treshhold = 3678,16;
break;
case 6:
treshhold = 5757,12;
break;
}
break;
case >0,01:
switch (attack, ratio) {
case 0,03,2:
treshhold = -5,75712;
break;
case 0,03,4:
treshhold = -5,75712 * 1,1;
break; // -45%
case 0,03,6:
treshhold = -5,75712 * 0,96;
break; // -52%, and etc.
...
}
break;
}
}
Try:
var treshhold_two = 0;
function Test(attack, ratio) {
if(attack == 0,01) {
switch (ratio) {
case 2:
treshhold = 2798,6;
break;
case 4:
treshhold = 3678,16;
break;
case 6:
treshhold = 5757,12;
break;
}
}
else {
switch (attack) {
case 0,03:
if(ratio==2) treshhold = -5,75712;
if(ratio==4) treshhold = -5,75712 * 1,1;
if(ratio==6) treshhold = -5,75712 * 0,96;
break;
...
}
}
}
//option:1
var treshhold = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
if(ratio==2) treshhold = 2798,6;
if(ratio==4) treshhold = 3678,16;
if(ratio==6) treshhold = 5757,12;
break;
case 0,03:
if(ratio==2) treshhold = -5,75712;
if(ratio==4) treshhold = -5,75712 * 1,1;
if(ratio==6) treshhold = -5,75712 * 0,96;
break;
// ...
}
}
}
//option:2
var treshhold = 0;
function Test(attack, ratio) {
switch (attack) {
case 0,01:
switch (ratio) {
case 2: treshhold = 2798,6; break;
case 4: treshhold = 3678,16; break;
case 6: treshhold = 5757,12; break;
}
case 0,03:
switch (ratio) {
case 2: treshhold = -5,75712; break;
case 4: treshhold = -5,75712 * 1,1; break;
case 6: treshhold = -5,75712 * 0,96;; break;
}
// ...
}
}
//option:3
var treshhold = 1223456;
function Test(ratio, attack) {
switch (ratio) {
case 2:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
case 4:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
case 6:
switch (attack) {
case 0,01: ... break;
case 0,03: ... break;
case 0,1: ... break;
}
break;
}
// option?
var treshhold_two = 0;
function Test(attack, ratio) {
if (attack == 0.01) {
switch (ratio) {
case 2:
treshhold = 2798.6;
break;
case 4:
treshhold = 3678.16;
break;
case 6:
treshhold = 5757.12;
break;
}
}
else if (attack > 0.01) {
switch (attack, ratio) {
case 0,03,2: // what does it mean ?
treshhold = -5.75712;
break;
case 0,03,4: // what does it mean ?
treshhold = -5.75712 * 1.1;
break; // -45%
case 0,03,6: // what does it mean ?
treshhold = -5.75712 * 0.96;
break; // -52%, and etc.
...
}
}
}
I want to simplify this long jquery/javascript code, can you help me? I still learn :)
Here's my jquery code:
$('.pagination-link').click(function() {
setTimeout(function() {
currentAnchor = $('body').attr('class');
switch (currentAnchor) {
case 'active-slide-1':
$('#rond').removeClass().addClass('rond1').animate();
break;
case 'active-slide-2':
$('#rond').removeClass().addClass('rond2').animate();
break;
case 'active-slide-3':
$('#rond').removeClass().addClass('rond3').animate();
break;
case 'active-slide-4':
$('#rond').removeClass().addClass('rond4').animate();
break;
case 'active-slide-5':
$('#rond').removeClass().addClass('rond5').animate();
break;
case 'active-slide-6':
$('#rond').removeClass().addClass('rond6').animate();
break;
case 'active-slide-7':
$('#rond').removeClass().addClass('rond7').animate();
break;
case 'active-slide-8':
$('#rond').removeClass().addClass('rond8').animate();
break;
default:
$('#rond').removeClass();
}
}, 50);
});
$('.overlay-menu > ul > li > a').click(function() {
setTimeout(function() {
currentAnchor = $('body').attr('class');
switch (currentAnchor) {
case 'active-slide-1':
$('#rond').removeClass().addClass('rond1').animate();
break;
case 'active-slide-2':
$('#rond').removeClass().addClass('rond2').animate();
break;
case 'active-slide-3':
$('#rond').removeClass().addClass('rond3').animate();
break;
case 'active-slide-4':
$('#rond').removeClass().addClass('rond4').animate();
break;
case 'active-slide-5':
$('#rond').removeClass().addClass('rond5').animate();
break;
case 'active-slide-6':
$('#rond').removeClass().addClass('rond6').animate();
break;
case 'active-slide-7':
$('#rond').removeClass().addClass('rond7').animate();
break;
case 'active-slide-8':
$('#rond').removeClass().addClass('rond8').animate();
break;
default:
$('#rond').removeClass();
}
}, 50);
});
$(window).mousewheel(function() {
setTimeout(function() {
currentAnchor = $('body').attr('class');
switch (currentAnchor) {
case 'active-slide-1':
$('#rond').removeClass().addClass('rond1').animate();
break;
case 'active-slide-2':
$('#rond').removeClass().addClass('rond2').animate();
break;
case 'active-slide-3':
$('#rond').removeClass().addClass('rond3').animate();
break;
case 'active-slide-4':
$('#rond').removeClass().addClass('rond4').animate();
break;
case 'active-slide-5':
$('#rond').removeClass().addClass('rond5').animate();
break;
case 'active-slide-6':
$('#rond').removeClass().addClass('rond6').animate();
break;
case 'active-slide-7':
$('#rond').removeClass().addClass('rond7').animate();
break;
case 'active-slide-8':
$('#rond').removeClass().addClass('rond8').animate();
break;
default:
$('#rond').removeClass();
}
}, 50);
});
I don't know if I have to use php to get the end of currentAnchor and put it as a parameters. Thank you for your help !
EDIT: I found that the default case is not necessary in my code. But I learn something new if I had my defaut case was important. So, here it's the new one:
function rondClass() {
setTimeout(function() {
currentAnchor = $('body').attr('class');
var currentClass = currentAnchor.replace('active-slide-', 'rond');
$('#rond').removeClass().addClass(currentClass).animate();
}, 50);
}
$('.pagination-link').click(rondClass);
$('.overlay-menu > ul > li > a').click(rondClass);
$(window).mousewheel(rondClass);
Thank you everyone !
You could just replace active-slide- with rond.
var currentAnchor = $('body').attr('class');
var newClass = currentAnchor.replace('active-slide-', 'rond');
$('#rond').removeClass().addClass(newClass).animate();
To handle the default case, you can handle this using indexOf or match:
// indexOf version
if (currentAnchor.indexOf('active-slide-') !== 0) {
$('#rond').removeClass();
} else {
$('#rond').removeClass().addClass(newClass).animate();
}
// match version
if (!currentAnchor.match(/^active-slide-/)) {
$('#rond').removeClass();
} else {
$('#rond').removeClass().addClass(newClass).animate();
}
Replace switch/case with programmatic approach and extract function to avoid code duplication.
var onClick = function() {
setTimeout(function() {
currentAnchor = $('body').attr('class');
var slide = currentAnchor.match(/active\-slide\-(\d)/);
if (slide) {
$('#rond').removeClass().addClass('rond' + slide[1]).animate();
} else {
$('#rond').removeClass();
}
}, 50)
})
$('.overlay-menu > ul > li > a').click(onClick);
$('.pagination-link').click(onClick);
I'm trying to draw some text in an array of colors to the screen. However, when using jQuery's $.append() with the <span> tag, it stops my loop and does not color anything. This is what it looks like:
var pixelsjson = '[{"red":232,"green":255,"blue":255},{"red":230,"green":255,"blue":255},{"red":229,"green":255,"blue":255},{"red":228,"green":255,"blue":255},{"red":227,"green":255,"blue":255},{"red":226,"green":255,"blue":255},{"red":224,"green":255,"blue":255},{"red":223,"green":255,"blue":255},{"red":222,"green":255,"blue":255},{"red":221,"green":254,"blue":255},{"red":220,"green":254,"blue":255},{"red":219,"green":254,"blue":255},{"red":217,"green":253,"blue":255},{"red":215,"green":253,"blue":255},{"red":213,"green":251,"blue":255},{"red":210,"green":250,"blue":255},{"red":207,"green":248,"blue":255},{"red":203,"green":246,"blue":255},{"red":200,"green":244,"blue":255},{"red":196,"green":242,"blue":255},{"red":96,"green":247,"blue":154},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54},{"red":0,"green":255,"blue":54}]]';
var pixels = JSON.parse(pixelsjson);
var imgheight = 80;
var imgwidth = 106;
$(document).ready(function () {
var drawcount = 0;
for (var i = 0; i < imgheight; i++) {
$("#image").append("<br>");
for (var j = 0; j < imgwidth; j++) {
$("#image").append("<span style='color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'>");
switch (drawcount % 18) {
case 0:
$("#image").append("/");
break;
case 2:
$("#image").append("-");
break;
case 3:
$("#image").append("/");
break;
case 4:
$("#image").append("-");
break;
case 5:
$("#image").append("/");
break;
case 6:
$("#image").append("-");
break;
case 7:
$("#image").append("(");
break;
case 8:
$("#image").append("8");
break;
case 9:
$("#image").append("8");
break;
case 10:
$("#image").append(")");
break;
case 11:
$("#image").append("-");
break;
case 12:
$("#image").append("\\");
break;
case 13:
$("#image").append("-");
break;
case 14:
$("#image").append("\\");
break;
case 15:
$("#image").append("-");
break;
case 16:
$("#image").append("\\");
break;
case 17:
$("#image").append(" ");
break;
}
$("#image").append("</span>");
drawcount++;
}
}
});
This is the html:
<div id="image" style="font-family:Courier New, Courier, monospace; font-size: 10px;"></div>
I updated the script to:
$(document).ready(function () {
var drawcount = 0;
for (var i = 0; i < imgheight; i++) {
$("#image").append("<br>");
for (var j = 0; j < imgwidth; j++) {
$("#image").append("<span style='position:relative; color: rgba(" + pixels[i][j].red + " , " + pixels[i][j].green + " , " + pixels[i][j].blue + ", 1);'></span>");
switch (drawcount % 18) {
case 0:
$("#image span").append("/");
break;
case 2:
$("#image span").append("-");
break;
case 3:
$("#image span").append("/");
break;
case 4:
$("#image span").append("-");
break;
case 5:
$("#image span").append("/");
break;
case 6:
$("#image span").append("-");
break;
case 7:
$("#image span").append("(");
break;
case 8:
$("#image span").append("8");
break;
case 9:
$("#image span").append("8");
break;
case 10:
$("#image span").append(")");
break;
case 11:
$("#image span").append("-");
break;
case 12:
$("#image span").append("\\");
break;
case 13:
$("#image span").append("-");
break;
case 14:
$("#image span").append("\\");
break;
case 15:
$("#image span").append("-");
break;
case 16:
$("#image span").append("\\");
break;
case 17:
$("#image span").append(" ");
break;
}
//$("#image").append("</span>");
drawcount++;
}
}
});
However, now the <br> tag isn't working (as before). However, the colors are working.