p5.js Array: Multiple Objects getting Spliced instead of Single - javascript

I'm trying to create a moving array of decorative circles, and as soon as a circle moves off the edge of the screen I would like to remove it from the array. I have tried both splicing and filtering from the array – however, as soon as I do this, all the circles in the array get deleted, instead of just the intended one. Checked multiple sources and tried different thinkgs but I simply can't figure out what's going wrong. You can have a look at the demo here in the p5.js editor: https://editor.p5js.org/devalladares/sketches/v6bWAiISM
Main code here if it helps:
function setup() {
//Create new Circle
for (let i = 0; i < circleNumber; i++) {
circles.push(new createCircle())
}
}
function draw() {
for (let i = circles.length - 1; i >= 0; i--) {
circles[i].update(i * 200)
//This is the problem: Simply cannot figure it out
//Splicing
if (circles[i].isDead()) {
circles.splice(i, 1)
}
}
//Filtering
// circles = circles.filter(x => !x.isDead())
}
//Class to create Circle
class createCircle {
constructor() {
this.circle = []
this.origin = i * gap + emptySpace2
this.pos = 0
this.xPos = width / 5
this.create()
}
create() {
for (let i = 0; i < ringNumber; i++) {
this.circle.push(new circleRing())
}
}
update(dist) {
push()
this.xPos -= xSpeed
this.pos = this.xPos + dist / 1.8
translate(this.pos, this.origin / 1.15)
scale(0.6, 0.6)
for (let circles of this.circle) {
circles.update()
}
pop()
}
isDead() {
if (this.pos < 40) {
return true;
} else {
return false;
}
}
}
Thanks in advance!!

Your issue isn't the most obvious thing in the world, but it comes from your for-loop and how you're updating your circles' x positions:
for (let i = circles.length - 1; i >= 0; i--) {
circles[i].update(i * 200)
When you delete a circle, the subsequent circles all shift down one index in your array, meaning if you delete the circle at index 0, the circle at index 1 now becomes the circle at index 0, which when you apply your cricles[i].update(i * 200) in the next call to draw(), i*200 will evaluate to 0, which causes your circle to shift into the "kill zone".
Instead, you store an internal circleNum property in your circles when you create them, and adjust your position based on that:
class createCircle {
constructor(circleNum) {
this.circle = [];
this.pos = 0;
this.xPos = width / 5;
this.circleNum = circleNum;
this.create();
}
...
}
Then when you create your circle, pass in the index:
//Create new Circle
for (let i = 0; i < circleNumber; i++) {
circles.push(new createCircle(i))
}
also, change how you call .update():
circles[i].update(200);
and lastly, use circleNum when calculating the new pos (as circleNum will remain consistent unlike i):
this.pos = this.xPos + (this.circleNum*dist) / 1.8;

Related

trying to make a drawn line move like a laser in javascript

I made this red line in JavaScript that goes to closest target (balloon 1 to 3) to the player but I need to make it so that it moves like a laser starting from player position into the target position. I thought about multiple ways of implementing this with no luck.
function Tick() {
// Erase the sprite from its current location.
eraseSprite();
for (var i = 0; i < lasers.length; i++) {
lasers[i].x += lasers[i].direction.x * laserSpeed;
lasers[i].y += lasers[i].direction.y * laserSpeed;
//Hit detection here
}
function detectCharClosest() {
var ballon1char = {
x: balloon1X,
y: balloon1Y
};
var ballon2char = {
x: balloon2X,
y: balloon2Y
};
var ballon3char = {
x: balloon3X,
y: balloon3Y,
};
ballon1char.distanceFromPlayer = Math.sqrt((CharX - balloon1X) ** 2 + (CharY - balloon1Y) ** 2);
ballon2char.distanceFromPlayer = Math.sqrt((CharX - balloon2X) ** 2 + (CharY - balloon2Y) ** 2);
ballon3char.distanceFromPlayer = Math.sqrt((CharX - balloon3X) ** 2 + (CharY - balloon3Y) ** 2);
var minDistance = Math.min(
ballon1char.distanceFromPlayer,
ballon2char.distanceFromPlayer,
ballon3char.distanceFromPlayer);
console.log(ballon1char);
console.log(ballon2char);
console.log(ballon3char);
for (let i = 0; i < 3; i++) {
if (minDistance == ballon1char.distanceFromPlayer)
return ballon1char
if (minDistance == ballon2char.distanceFromPlayer)
return ballon2char
if (minDistance == ballon3char.distanceFromPlayer)
return ballon3char
}
}
function loadComplete() {
console.log("Load is complete.");
canvas = document.getElementById("theCanvas");
ctx = canvas.getContext("2d");
myInterval = self.setInterval(function () { Tick() }, INTERVAL);
myInterval = self.setInterval(function () { laserTicker(detectCharClosest()) }, 2000);
function laserTicker(balloon) {
//gets the closest ballon to go to
laserDo(balloon);
}
function laserDo(balloon) {
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "#F44336"; // "red";
ctx.moveTo(CharX + 16, CharY + 16);
ctx.lineTo(balloon.x, balloon.y);
// lasers.push({x: })
ctx.stroke();
}
I didn't put all of my code here so If something doesn't make sense please tell me. I'm still new to JavaScript and learning it. One way I thought I could make this work was by taking the distance between the player and the target and dividing it by the speed on the x and y axis then changing having it start from the player position and keeps on adding up on both axis until it reaches the target. That didn't work out though. If you have any suggestions then please tell me.
Thanks

Issues with keyIsDown() in p5js

I'm trying to make a basic 2d game with p5js and p5.play. An issue that seems to cause issues every time I try to do anything is the keyIsDown function. Is there a way to determine if a key is down before pressing it? If I used
upKey = keyIsDown(UP_ARROW);
upKey will show as undefined until I press the up arrow. Is there any way to assign the respective boolean values to these types of things prior to pressing them?
As of now, my game will not properly work until I have pressed every involed key one time.
The keyIsDown() function checks if the key is currently down, i.e. pressed. It can be used if you have an object that moves, and you want several keys to be able to affect its behaviour simultaneously, such as moving a sprite diagonally.
Note that the arrow keys will also cause pages to scroll so you may want to use other keys for your game.. but if you want to use arrow keys this is the code snippet from the reference page
let x = 100;
let y = 100;
function setup() {
createCanvas(512, 512);
}
function draw() {
if (keyIsDown(LEFT_ARROW)) {
x -= 5;
}
if (keyIsDown(RIGHT_ARROW)) {
x += 5;
}
if (keyIsDown(UP_ARROW)) {
y -= 5;
}
if (keyIsDown(DOWN_ARROW)) {
y += 5;
}
clear();
fill(255, 0, 0);
ellipse(x, y, 50, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
To implement similar logic without the use of arrow keys you will need to determine the key code of the keys you want to use.
Here is an example that uses awsd keys and also logs out the key code of the currently pressed key.
let x = 50;
let y = 50;
function setup() {
createCanvas(512, 512);
}
function keyPressed(){
console.log(keyCode);
}
function draw() {
if (keyIsDown(65)) {
x -= 5;
if (x < 0) x = 0;
}
if (keyIsDown(68)) {
x += 5;
if (x > width) x = width;
}
if (keyIsDown(87)) {
y -= 5;
if (y < 0) y = 0;
}
if (keyIsDown(83)) {
y += 5;
if ( y > height) y = height;
}
clear();
fill(255, 0, 0);
ellipse(x, y, 50, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

How to efficiently manipulate pixels in HTML5 canvas?

So I am fooling around with pixel manipulation in canvas. Right now I have code that allows you to draw to canvas. Then, when you have something drawn, there is a button you can press to manipulate the pixels, translating them either one tile to the right or one tile to the left, alternating every other row. The code looks something like this:
First, pushing the button will start a function that creates two empty arrays where the pixel data is going to go. Then it goes through the pixels, row by row, making each row it's own array. All the row arrays are added into one array of all the pixels data.
$('#shift').click(function() {
var pixels = [];
var rowArray = [];
// get a list of all pixels in a row and add them to pixels array
for (var y = 0; y < canvas.height; y ++) {
for (var x = 0; x < canvas.width; x ++) {
var src = ctx.getImageData(x, y, 1, 1)
var copy = ctx.createImageData(src.width, src.height);
copy.data.set(src.data);
pixels.push(copy);
};
rowArray.push(pixels);
pixels = [];
};
Continuing in the function, next it clears the canvas and shifts the arrays every other either going one to the right or one to the left.
// clear canvas and points list
clearCanvas(ctx);
// take copied pixel lists, shift them
for (i = 0; i < rowArray.length; i ++) {
if (i % 2 == 0) {
rowArray[i] = rowArray[i].concat(rowArray[i].splice(0, 1));
} else {
rowArray[i] = rowArray[i].concat(rowArray[i].splice(0, rowArray[i].length - 1));
};
};
Last part of the function now takes the shifted lists of pixel data and distributes them back onto the canvas.
// take the new shifted pixel lists and distribute
// them back onto the canvas
var listCounter = 0;
var listCounter2 = 0;
for (var y = 0; y < canvas.height; y ++) {
for (var x = 0; x < canvas.width; x ++) {
ctx.putImageData(rowArray[listCounter][listCounter2], x, y);
listCounter2 ++;
}
listCounter2 = 0;
listCounter ++;
}
});
As of right now, it works fine. No data is lost and pixels are shifted correctly. What I am wondering if possible, is there a way to do this that is more efficient? Right now, doing this pixel by pixel takes a long time so I have to go by 20x20 px tiles or higher to have realistic load times. This is my first attempt at pixel manipulation so there is probably quite a few things I'm unaware of. It could be my laptop is not powerful enough. Also, I've noticed that sometimes running this function multiple times in a row will significantly reduce load times. Any help or suggestions are much appreciated!
Full function :
$('#shift').click(function() {
var pixels = [];
var rowArray = [];
// get a list of all pixels in a row and add them to pixels array
for (var y = 0; y < canvas.height; y ++) {
for (var x = 0; x < canvas.width; x ++) {
var src = ctx.getImageData(x, y, 1, 1)
var copy = ctx.createImageData(src.width, src.height);
copy.data.set(src.data);
pixels.push(copy);
};
rowArray.push(pixel);
pixels = [];
};
// clear canvas and points list
clearCanvas(ctx);
// take copied pixel lists, shift them
for (i = 0; i < pixelsListList.length; i ++) {
if (i % 2 == 0) {
rowArray[i] = rowArray[i].concat(rowArray[i].splice(0, 1));
} else {
rowArray[i] = rowArray[i].concat(rowArray[i].splice(0, rowArray[i].length - 1));
};
};
// take the new shifted pixel lists and distribute
// them back onto the canvas
var listCounter = 0;
var listCounter2 = 0;
for (var y = 0; y < canvas.height; y ++) {
for (var x = 0; x < canvas.width; x ++) {
ctx.putImageData(rowArray[listCounter][listCounter2], x, y);
listCounter2 ++;
}
listCounter2 = 0;
listCounter ++;
}
});
Performance pixel manipulation.
The given answer is so bad that I have to post a better solution.
And with that a bit of advice when it comes to performance critical code. Functional programming has no place in code that requires the best performance possible.
The most basic pixel manipulation.
The example does the same as the other answer. It uses a callback to select the processing and provides a set of functions to create, filter, and set the pixel data.
Because images can be very large 2Megp plus the filter is timed to check performance. The number of pixels, time taken in µs (1/1,000,000th second), pixels per µs and pixels per second. For realtime processing of a HD 1920*1080 you need a rate of ~125,000,000 pixels per second (60fps).
NOTE babel has been turned off to ensure code is run as is. Sorry IE11 users time to upgrade don`t you think?
canvas.addEventListener('click', ()=>{
var time = performance.now();
ctx.putImageData(processPixels(randomPixels,invertPixels), 0, 0);
time = (performance.now() - time) * 1000;
var rate = pixelCount / time;
var pps = (1000000 * rate | 0).toLocaleString();
info.textContent = "Time to process " + pixelCount.toLocaleString() + " pixels : " + (time | 0).toLocaleString() + "µs, "+ (rate|0) + "pix per µs "+pps+" pixel per second";
});
const ctx = canvas.getContext("2d");
const pixelCount = innerWidth * innerHeight;
canvas.width = innerWidth;
canvas.height = innerHeight;
const randomPixels = putPixels(ctx,createImageData(canvas.width, canvas.height, randomRGB));
function createImageData(width, height, filter){
return processPixels(ctx.createImageData(width, height), filter);;
}
function processPixels(pixelData, filter = doNothing){
return filter(pixelData);
}
function putPixels(context,pixelData,x = 0,y = 0){
context.putImageData(pixelData,x,y);
return pixelData;
}
// Filters must return pixeldata
function doNothing(pd){ return pd }
function randomRGB(pixelData) {
var i = 0;
var dat32 = new Uint32Array(pixelData.data.buffer);
while (i < dat32.length) { dat32[i++] = 0xff000000 + Math.random() * 0xFFFFFF }
return pixelData;
}
function invertPixels(pixelData) {
var i = 0;
var dat = pixelData.data;
while (i < dat.length) {
dat[i] = 255 - dat[i++];
dat[i] = 255 - dat[i++];
dat[i] = 255 - dat[i++];
i ++; // skip alpha
}
return pixelData;
}
.abs {
position: absolute;
top: 0px;
left: 0px;
font-family : arial;
font-size : 16px;
background : rgba(255,255,255,0.75);
}
.m {
top : 100px;
z-index : 10;
}
#info {
z-index : 10;
}
<div class="abs" id="info"></div>
<div class="abs m">Click to invert</div>
<canvas class="abs" id="canvas"></canvas>
Why functional programming is bad for pixel processing.
To compare below is a timed version of George Campbell Answer that uses functional programming paradigms. The rate will depend on the device and browser but is 2 orders of magnitude slower.
Also if you click, repeating the invert function many times you will notice the GC lags that make functional programming such a bad choice for performance code.
The standard method (first snippet) does not suffer from GC lag because it barely uses any memory apart from the original pixel buffer.
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
//maybe put inside resize event listener
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const pixelCount = innerWidth * innerHeight;
//create some test pixels (random colours) - only once for entire width/height, not for each pixel
let randomPixels = createImageData(width, height, randomRGB);
//create image data and apply callback for each pixel, set this in the ImageData
function createImageData(width, height, cb){
let createdPixels = ctx.createImageData(width, height);
if(cb){
let pixelData = editImageData(createdPixels, cb);
createdPixels.data.set(pixelData);
}
return createdPixels;
}
//edit each pixel in ImageData using callback
//pixels ImageData, cb Function (for each pixel, returns r,g,b,a Boolean)
function editImageData(pixels, cb = (p)=>p){
return Array.from(pixels.data).map((pixel, i) => {
//red or green or blue or alpha
let newValue = cb({r: i%4 === 0, g:i%4 === 1, b:i%4 === 2, a:i%4 === 3, value: pixel});
if(typeof newValue === 'undefined' || newValue === null){
throw new Error("undefined/null pixel value "+typeof newValue+" "+newValue);
}
return newValue;
});
}
//callback to apply to each pixel (randomize)
function randomRGB({a}){
if(a){
return 255; //full opacity
}
return Math.floor(Math.random()*256);
};
//another callback to apply, this time invert
function invertRGB({a, value}){
if(a){
return 255; //full opacity
}
return 255-value;
};
ctx.putImageData(randomPixels, 0, 0);
//click to change invert image data (or any custom pixel manipulation)
canvas.addEventListener('click', ()=>{
var time = performance.now();
randomPixels.data.set(editImageData(randomPixels, invertRGB));
ctx.putImageData(randomPixels, 0, 0);
time = (performance.now() - time) * 1000;
var rate = pixelCount / time;
var pps = (1000000 * rate | 0).toLocaleString();
if(rate < 1){
rate = "less than 1";
}
info.textContent = "Time to process " + pixelCount.toLocaleString() + " pixels : " + (time|0).toLocaleString() + "µs, "+ rate + "pix per µs "+pps+" pixel per second";
});
.abs {
position: absolute;
top: 0px;
left: 0px;
font-family : arial;
font-size : 16px;
background : rgba(255,255,255,0.75);
}
.m {
top : 100px;
z-index : 10;
}
#info {
z-index : 10;
}
<div class="abs" id="info"></div>
<div class="abs m">George Campbell Answer. Click to invert</div>
<canvas class="abs" id="canvas"></canvas>
Some more pixel processing
The next sample demonstrates some basic pixel manipulation.
Random. Totaly random pixels
Invert. Inverts the pixel colors
B/W. Converts to simple black and white (not perceptual B/W)
Noise. Adds strong noise to pixels. Will reduce total brightness.
2 Bit. Pixel channel data is reduced to 2 bits per RGB.
Blur. Most basic blur function requires a copy of the pixel data to work and is thus expensive in terms of memory and processing overheads. But as NONE of the canvas/SVG filters do the correct logarithmic filter this is the only way to get a good quality blur for the 2D canvas. Unfortunately it is rather slow.
Channel Shift. Moves channels blue to red, red to green, green to blue
Shuffle pixels. Randomly shuffles pixels with one of its neighbours.
For larger images. To prevent filters from blocking the page you would move the imageData to a worker and process the pixels there.
document.body.addEventListener('click', (e)=>{
if(e.target.type !== "button" || e.target.dataset.filter === "test"){
testPattern();
pixels = getImageData(ctx);
info.textContent = "Untimed content render."
return;
}
var time = performance.now();
ctx.putImageData(processPixels(pixels,pixelFilters[e.target.dataset.filter]), 0, 0);
time = (performance.now() - time) * 1000;
var rate = pixelCount / time;
var pps = (1000000 * rate | 0).toLocaleString();
info.textContent = "Filter "+e.target.value+ " " +(e.target.dataset.note ? e.target.dataset.note : "") + pixelCount.toLocaleString() + "px : " + (time | 0).toLocaleString() + "µs, "+ (rate|0) + "px per µs "+pps+" pps";
});
const ctx = canvas.getContext("2d");
const pixelCount = innerWidth * innerHeight;
canvas.width = innerWidth;
canvas.height = innerHeight;
var min = Math.min(innerWidth,innerHeight) * 0.45;
function testPattern(){
var grad = ctx.createLinearGradient(0,0,0,canvas.height);
grad.addColorStop(0,"#000");
grad.addColorStop(0.5,"#FFF");
grad.addColorStop(1,"#000");
ctx.fillStyle = grad;
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
"000,AAA,FFF,F00,00F,A00,00A,FF0,0FF,AA0,0AA,0F0,F0F,0A0,A0A".split(",").forEach((col,i) => {
circle("#"+col, min * (1-i/16));
});
}
function circle(col,size){
ctx.fillStyle = col;
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, size, 0 , Math.PI * 2);
ctx.fill();
}
testPattern();
var pixels = getImageData(ctx);
function getImageData(ctx, x = 0, y = 0,width = ctx.canvas.width, height = ctx.canvas.height){
return ctx.getImageData(x,y,width, height);
}
function createImageData(width, height, filter){
return processPixels(ctx.createImageData(width, height), filter);;
}
function processPixels(pixelData, filter = doNothing){
return filter(pixelData);
}
function putPixels(context,pixelData,x = 0,y = 0){
context.putImageData(pixelData,x,y);
return pixelData;
}
// Filters must return pixeldata
function doNothing(pd){ return pd }
function randomRGB(pixelData) {
var i = 0;
var dat32 = new Uint32Array(pixelData.data.buffer);
while (i < dat32.length) { dat32[i++] = 0xff000000 + Math.random() * 0xFFFFFF }
return pixelData;
}
function randomNoise(pixelData) {
var i = 0;
var dat = pixelData.data;
while (i < dat.length) {
dat[i] = Math.random() * dat[i++];
dat[i] = Math.random() * dat[i++];
dat[i] = Math.random() * dat[i++];
i ++; // skip alpha
}
return pixelData;
}
function twoBit(pixelData) {
var i = 0;
var dat = pixelData.data;
var scale = 255 / 196;
while (i < dat.length) {
dat[i] = (dat[i++] & 196) * scale;
dat[i] = (dat[i++] & 196) * scale;
dat[i] = (dat[i++] & 196) * scale;
i ++; // skip alpha
}
return pixelData;
}
function invertPixels(pixelData) {
var i = 0;
var dat = pixelData.data;
while (i < dat.length) {
dat[i] = 255 - dat[i++];
dat[i] = 255 - dat[i++];
dat[i] = 255 - dat[i++];
i ++; // skip alpha
}
return pixelData;
}
function simpleBW(pixelData) {
var bw,i = 0;
var dat = pixelData.data;
while (i < dat.length) {
bw = (dat[i] + dat[i+1] + dat[i+2]) / 3;
dat[i++] = bw;
dat[i++] = bw;
dat[i++] = bw;
i ++; // skip alpha
}
return pixelData;
}
function simpleBlur(pixelData) {
var i = 0;
var dat = pixelData.data;
var buf = new Uint8Array(dat.length);
buf.set(dat);
var w = pixelData.width * 4;
i += w;
while (i < dat.length - w) {
dat[i] = (buf[i-4] + buf[i+4] + buf[i+w] + buf[i-w] + buf[i++] * 2) / 6;
dat[i] = (buf[i-4] + buf[i+4] + buf[i+w] + buf[i-w] + buf[i++] * 2) / 6;
dat[i] = (buf[i-4] + buf[i+4] + buf[i+w] + buf[i-w] + buf[i++] * 2) / 6;
i ++; // skip alpha
}
return pixelData;
}
function channelShift(pixelData) {
var r,g,i = 0;
var dat = pixelData.data;
while (i < dat.length) {
r = dat[i];
g = dat[i+1];
dat[i] = dat[i+2];
dat[i+1] = r;
dat[i+2] = g;
i += 4;
}
return pixelData;
}
function pixelShuffle(pixelData) {
var r,g,b,n,rr,gg,bb,i = 0;
var dat = pixelData.data;
var next = [-pixelData.width*4,pixelData.width*4,-4,4];
var len = dat.length;
while (i < dat.length) {
n = (i + next[Math.random() * 4 | 0]) % len;
r = dat[i];
g = dat[i+1];
b = dat[i+2];
dat[i] = dat[n];
dat[i+1] = dat[n + 1];
dat[i+2] = dat[n + 2];
dat[n] = r;
dat[n+1] = g;
dat[n+2] = b;
i += 4;
}
return pixelData;
}
const pixelFilters = {
randomRGB,
invertPixels,
simpleBW,
randomNoise,
twoBit,
simpleBlur,
channelShift,
pixelShuffle,
}
.abs {
position: absolute;
top: 0px;
left: 0px;
font-family : arial;
font-size : 16px;
}
.m {
top : 30px;
z-index : 20;
}
#info {
z-index : 10;
background : rgba(255,255,255,0.75);
}
<canvas class="abs" id="canvas"></canvas>
<div class="abs" id="buttons">
<input type ="button" data-filter = "randomRGB" value ="Random"/>
<input type ="button" data-filter = "invertPixels" value ="Invert"/>
<input type ="button" data-filter = "simpleBW" value ="B/W"/>
<input type ="button" data-filter = "randomNoise" value ="Noise"/>
<input type ="button" data-filter = "twoBit" value ="2 Bit" title = "pixel channel data is reduced to 2 bits per RGB"/>
<input type ="button" data-note="High quality blur using logarithmic channel values. " data-filter = "simpleBlur" value ="Blur" title = "Blur requires a copy of pixel data"/>
<input type ="button" data-filter = "channelShift" value ="Ch Shift" title = "Moves channels blue to red, red to green, green to blue"/>
<input type ="button" data-filter = "pixelShuffle" value ="Shuffle" title = "randomly shuffles pixels with one of its neighbours"/>
<input type ="button" data-filter = "test" value ="Test Pattern"/>
</div>
<div class="abs m" id="info"></div>
It makes more sense to use something like ctx.getImageData or .createImageData only once per image, not for each pixel.
You can loop the ImageData.data "array-like" Uint8ClampedArray. Each 4 items in the array represent a single pixel, these being red, green, blue, and alpha parts of the pixel. Each can be an integer between 0 and 255, where [0,0,0,0,255,255,255,255,...] means the first pixel is transparent (and black?), and the second pixel is white and full opacity.
here is something I just made, not benchmarked but likely more efficient.
It creates image data, and you can edit image data by passing in a function to the edit image data function, the callback function is called for each pixel in an image data and returns an object containing value (between 0 and 255), and booleans for r, g, b.
For example for invert you can return 255-value.
this example starts with random pixels, clicking them will apply the invertRGB function to it.
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
//maybe put inside resize event listener
let width = window.innerWidth;
let height = window.innerHeight;
canvas.width = width;
canvas.height = height;
//create some test pixels (random colours) - only once for entire width/height, not for each pixel
let randomPixels = createImageData(width, height, randomRGB);
//create image data and apply callback for each pixel, set this in the ImageData
function createImageData(width, height, cb){
let createdPixels = ctx.createImageData(width, height);
if(cb){
let pixelData = editImageData(createdPixels, cb);
createdPixels.data.set(pixelData);
}
return createdPixels;
}
//edit each pixel in ImageData using callback
//pixels ImageData, cb Function (for each pixel, returns r,g,b,a Boolean)
function editImageData(pixels, cb = (p)=>p){
let i = 0;
let len = pixels.data.length;
let outputPixels = [];
for(i=0;i<len;i++){
let pixel = pixels.data[i];
outputPixels.push( cb(i%4, pixel) );
}
return outputPixels;
}
//callback to apply to each pixel (randomize)
function randomRGB(colour){
if( colour === 3){
return 255; //full opacity
}
return Math.floor(Math.random()*256);
};
//another callback to apply, this time invert
function invertRGB(colour, value){
if(colour === 3){
return 255; //full opacity
}
return 255-value;
};
ctx.putImageData(randomPixels, 0, 0);
//click to change invert image data (or any custom pixel manipulation)
canvas.addEventListener('click', ()=>{
let t0 = performance.now();
randomPixels.data.set(editImageData(randomPixels, invertRGB));
ctx.putImageData(randomPixels, 0, 0);
let t1 = performance.now();
console.log(t1-t0+"ms");
});
#canvas {
position: absolute;
top: 0;
left: 0;
}
<canvas id="canvas"></canvas>
code gist: https://gist.github.com/GCDeveloper/c02ffff1d067d6f1b1b13341a72efe79
check out https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas which should help, including loading an actual image as ImageData for usage.

Algorithm to place x items equidistantly on an n by m wrapping grid

I'm creating a simple grid based browser game where I would like to place players and target cells (think king-of-the-hill) equidistantly. Ideally this would be done in such a way that each player would also be equally distant from the nearest target cell.
Here are the requirements:
The game needs to support 2 to 20 players.
The n by m grid can be any size, but the more 'square-like' the better. (The principle behind 'square-like' is to reduce the maximum required distance to travel across the grid - keep things more accessible)
The number of target cells is flexible.
Each player should have equal access to the same number of targets.
The minimum distance between any player or target and any other player or target is 4.
Note that each cell has 8 immediate neighbors (yes diagonals count as a distance of 1), and edges wrap. Meaning those at the bottom are logically adjacent to those at the top, and same for left/right.
I've been trying to think of a good algorithm to place players and targets in varying distributions without having to create a specific pre-determined grid for each number of players. I discovered k-means clustering and Lloyd's Algorithm, but I'm not very familiar with them, and don't really know how to apply them to this specific case, particularly since the number of target cells is flexible, which I would think should simplify the solution a bit.
Here's a snippet of vastly simplified code creating a pre-determined 6 player grid, just to show the essence of what I'm aiming for:
var cellSize = 20;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function Cell(x, y) {
this.x = x * cellSize + cellSize / 2;
this.y = y * cellSize + cellSize / 2;
this.id = x + '-' + y;
this.neighbors = [];
this.type = null;
}
Cell.prototype.draw = function() {
var color = '#ffffff';
if (this.type === 'base') {
color = '#0000ff';
} else if (this.type === 'target') {
color = '#ff0000';
}
var d = cellSize / 2;
ctx.fillStyle = color;
ctx.fillRect(this.x - d, this.y - d, this.x + d, this.y + d);
ctx.rect(this.x - d, this.y - d, this.x + d, this.y + d);
ctx.strokeStyle = '#000';
ctx.lineWidth = 3;
ctx.stroke();
};
// Pre-set player and target cells for 6 players as an example
var playerCells = ['0-0', '8-0', '16-0', '0-8', '8-8', '16-8'];
var targetCells = ['4-4', '12-4', '20-4', '4-12', '12-12', '20-12'];
var n = 24;
var m = 16;
canvas.width = n * cellSize + 6;
canvas.height = m * cellSize + 6;
var cellList = [];
for (var i = 0; i < n; i++) {
for (var j = 0; j < m; j++) {
var cell = new Cell(i, j);
if (playerCells.indexOf(cell.id) > -1) {
cell.type = 'base';
} else if (targetCells.indexOf(cell.id) > -1) {
cell.type = 'target';
}
cellList.push(cell);
}
}
// Give each cell a list of it's neighbors so we know where things can move
for (var i = 0; i < cellList.length; i++) {
var cell = cellList[i];
var neighbors = [];
// Get the cell indices around the current cell
var cx = [cell.x - 1, cell.x, cell.x + 1];
var cy = [cell.y - 1, cell.y, cell.y + 1];
var ci, cj;
for (ci = 0; ci < 3; ci++) {
if (cx[ci] < 0) {
cx[ci] = n - 1;
}
if (cx[ci] >= n) {
cx[ci] = 0;
}
if (cy[ci] < 0) {
cy[ci] = m - 1;
}
if (cy[ci] >= m) {
cy[ci] = 0;
}
}
for (ci = 0; ci < 3; ci++) {
for (cj = 0; cj < 3; cj++) {
// Skip the current node since we don't need to link it to itself
if (cellList[n * ci + cj] === cell) {
continue;
}
neighbors.push(cellList[n * ci + cj]);
}
}
}
drawGrid();
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < cellList.length; i++) {
cellList[i].draw();
}
}
It creates a grid that looks like this:
Where blue cells are players and red cells are targets.
Does anyone have any suggestions for how to go about this?
Links to helpful material would be greatly appreciated.
Are there any gurus out there who can drum up an awesome placement algorithm which satisfies all of the above conditions?
It would be AMAZING if the solution also allows the number of target cells and/or minimum distance to be configurable for any number of players and still satisfies all of the conditions, although that's not strictly necessary.
EDIT
After some other game design considerations, I changed the minimum distance between player & target to 4 instead of 2. The text, code, and image above have been changed accordingly. At the time of this edit, no solutions were constrained by that requirement, so it shouldn't affect anything.
EDIT 2
If you are proposing a solution, please provide JavaScript code (or at least pseudo-code) outlining the detailed steps of your solution. Also please explain how the solution meets the requirements. Thank you!
Are you constrained to a flat plane? If you can move to 3D, then you can use the Fibonacci Spiral to generate an arbitrary number of equidistant points on a sphere. There's a really nice processing sketch of this at work at http://www.openprocessing.org/sketch/41142 (with the code to go with it). The image below shows what it looks like. One benefit is that you automatically get the 'wrapping' included.
If you have to stick to 2D, then you could try the above followed by a spherical to planar projection that preserves the mapping. This may be a bit more complicated than you're looking for though...
As already said, there probably is no perfect solution meeting all of your requirements exactly without exorbitant calculation expenses.1
Approach
My approach would be to replace the same distance to all targets requirement by a more flexible condition.
In the following example, I introduced a heat property for each cell, which should intuitively represent availability/proximity of targets.
It's calculated by adding up heat in relation to each target on the map.
The heat of in relation to a target is simply 1 divided by the distance (manhattan in my example) between them.
Maybe you'll want to use different implementations for the functions heat and distance.
Player positioning
For distributing players, we do the following:
Keep a list off all cells, sorted by heat
Start at some cell (currently user-selected), find it in the sorted list and use its neighbors (with similar heat values) for player positions
This assures that heat values for player cells are always as close as possible.
An even better solution would be to search for a sequence of similar-as-possible heat values in the sorted list and use those.
Example code
Reload to have different target positions
var numPlayers = 4;
var numTargets = numPlayers;
var gridSize = numPlayers * 4;
var minDistance = 4;
var targetPositions = [];
for (var i = 0; i < numTargets; i++) {
// TODO: Make sure targets don't get too close
targetPositions[i] = randomPos();
}
var heatMap = [];
for (var i = 0; i < gridSize; i++) {
heatMap[i] = [];
for (var j = 0; j < gridSize; j++) {
heatMap[i][j] = heat(i, j);
}
}
printHeat();
function heat(x, y) {
var result = 0;
for (var i in targetPositions) {
var pos = targetPositions[i];
result += 1 / distance(x - pos.x, y - pos.y); // XXX: What about zero division?
}
return result;
}
function distance(l1, l2) {
// manhattan distance
return Math.abs(l1) + Math.abs(l2);
}
function randomPos() {
return {
x: random(gridSize),
y: random(gridSize),
toString: function() {
return this.x + '/' + this.y
}
};
function random(max) {
return Math.floor(Math.random() * max);
}
}
function printHeat() {
for (var i = 0; i < gridSize; i++) {
var tr = $('<tr>');
$('#heat').append(tr);
for (var j = 0; j < gridSize; j++) {
var heatVal = heatMap[i][j];
var td = $('<td> ' + heatVal + ' </td>');
if (heatVal > numTargets) // hack
td.addClass('target');
td.attr('data-x', i).attr('data-y', j);
td.css('background-color', 'rgb(' + Math.floor(heatVal * 255) + ',160,80)');
tr.append(td);
}
}
}
var cellsSorted = $('td').sort(function(a, b) {
return numOfCell(a) > numOfCell(b);
}).toArray();
$('td').click(function() {
$('.player').removeClass('player');
var index = cellsSorted.indexOf(this);
// TODO: Don't just search downwards, but in both directions with lowest difference
for (var k = 0; k < numPlayers; k++) {
var newIndex = index - k; // XXX Check against outOfBounds
var cell = cellsSorted[newIndex];
if (!validPlayerCell(cell)) {
// skip one
k--;
index--;
continue;
}
$(cell).addClass('player');
}
});
function validPlayerCell(cell) {
var otherItems = $('.player, .target').toArray();
for (var i in otherItems) {
var item = otherItems[i];
var xa = parseInt($(cell).attr('data-x'));
var ya = parseInt($(cell).attr('data-y'));
var xb = parseInt($(item).attr('data-x'));
var yb = parseInt($(item).attr('data-y'));
if (distance(xa - xb, ya - yb) < minDistance)
return false;
}
return true;
}
function numOfCell(c) {
return parseFloat($(c).text());
}
body {
font-family: sans-serif;
}
h2 {
margin: 1ex 0;
}
td {
border: 1px solid #0af;
padding: 0.5ex;
font-family: monospace;
font-size: 10px;
max-width: 4em;
height: 4em;
overflow: hidden;
text-overflow: ellipsis;
}
td.target {
border-color: #f80;
}
td.player {
border-color: black;
}
td.player::after {
font-family: sans-serif;
content: "player here";
position: absolute;
color: white;
background-color: rgba(0, 0, 0, 0.5);
font-weight: bold;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click a cell to distribute players</h2>
<table id="heat">
</table>
Same in JSFiddle to play around with variables
Open ends
This example has been stitched together quite quickly. You'll notice there are several open ends and uncovered corner cases. I just made it to outline my idea.
Not covered:
Wrapping at edges: This probably only affects the dist function
Distance among targets: They're just randomly thrown somewhere on the map
Selection of positions just searches downward the heat list: This could be done smarter, e.g. shortest distance to original selected cell
Automatic distribution of players (without clicking): You might just want to take a random one to start with
1I mean, theoretically you could just try all possible variations and check if they're correct (if you have a large cluster in your backyard).
One intuitive solution that comes to mind is to divide the plane symmetrically according to the number of players, place one player and its target/s randomly and then reflect the placement symmetrically in the other sections. Bind the grid theoretically in a circle (or vice versa), then divide and reflect.
In a (theoretical) infinite-resolution grid, with its center as the center of a polar coordinate system, we could first place one player and it's targets (by the way, these can be placed anywhere on the grid and the symmetry will still hold), then to place the other n - 1 players and target/s, increment the initial degree by 360° / n each time, keeping the same radius. However, since your grid will have a practical size limit, you will need to somehow guarantee that the reflected cells exist on the grid, perhaps by a combination of restricting the initial generation and/or modifying the grid size/parity.
Something along the lines of:
var numPlayers = 6;
var ts = 2;
var r = 8
function convertFromPolar(cs) {
return [Math.round(cs[0] * Math.cos(cs[1] * Math.PI / 180)) + r
,Math.round(cs[0] * Math.sin(cs[1] * Math.PI / 180)) + r];
}
var first = [r,0];
var targets = [];
for (var i = 0; i < ts; i++) {
var _first = first.slice();
_first[0] = _first[0] - 4 - Math.round(Math.random() * 3);
_first[1] = _first[1] + Math.round(Math.random() * 8);
targets.push(_first);
}
var playerCells = [];
var targetCells = [];
for (var i = 0; i < numPlayers; i++) {
playerCells.push(convertFromPolar(first).join('-'));
first[1] = (first[1] + 360 / numPlayers) % 360;
for (var j = 0; j < ts; j++) {
targetCells.push(convertFromPolar(targets[j]).join('-'));
targets[j][1] = (targets[j][1] + 360 / numPlayers) % 360;
}
}
var cellSize = 20;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
function Cell(x, y) {
this.x = x * cellSize + cellSize / 2;
this.y = y * cellSize + cellSize / 2;
this.id = x + '-' + y;
this.neighbors = [];
this.type = null;
}
Cell.prototype.draw = function() {
var color = '#ffffff';
if (this.type === 'base') {
color = '#0000ff';
} else if (this.type === 'target') {
color = '#ff0000';
} else if (this.type === 'outOfBounds') {
color = '#000000';
}
var d = cellSize / 2;
ctx.fillStyle = color;
ctx.fillRect(this.x - d, this.y - d, this.x + d, this.y + d);
ctx.rect(this.x - d, this.y - d, this.x + d, this.y + d);
ctx.strokeStyle = '#000';
ctx.lineWidth = 3;
ctx.stroke();
};
var n = 24;
var m = 16;
canvas.width = n * cellSize + 6;
canvas.height = m * cellSize + 6;
var cellList = [];
for (var i = 0; i < n; i++) {
for (var j = 0; j < m; j++) {
var cell = new Cell(i, j);
if (playerCells.indexOf(cell.id) > -1) {
cell.type = 'base';
} else if (targetCells.indexOf(cell.id) > -1) {
cell.type = 'target';
} else if (Math.pow(i - r,2) + Math.pow(j - r,2) > (r + 2)*(r + 2) ) {
cell.type = 'outOfBounds';
}
cellList.push(cell);
}
}
// Give each cell a list of it's neighbors so we know where things can move
for (var i = 0; i < cellList.length; i++) {
var cell = cellList[i];
var neighbors = [];
// Get the cell indices around the current cell
var cx = [cell.x - 1, cell.x, cell.x + 1];
var cy = [cell.y - 1, cell.y, cell.y + 1];
var ci, cj;
for (ci = 0; ci < 3; ci++) {
if (cx[ci] < 0) {
cx[ci] = n - 1;
}
if (cx[ci] >= n) {
cx[ci] = 0;
}
if (cy[ci] < 0) {
cy[ci] = m - 1;
}
if (cy[ci] >= m) {
cy[ci] = 0;
}
}
for (ci = 0; ci < 3; ci++) {
for (cj = 0; cj < 3; cj++) {
// Skip the current node since we don't need to link it to itself
if (cellList[n * ci + cj] === cell) {
continue;
}
neighbors.push(cellList[n * ci + cj]);
}
}
}
drawGrid();
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < cellList.length; i++) {
cellList[i].draw();
}
}
Perhaps I'm missing something, but can't you just make the grid as N copies of one random placement within bounds (N being the number of players)?
Define `p = (x,y)` as first player location
Make target/s randomly for `p` at least 4 cells away and
within either a horizontal or vertical rectangular limit
Now define the grid as (N - 1) copies of the rectangle with space added
so as to make the regtangles form a square (if that's the final shape you want),
and observe minimum distance from other players
Since each rectangle is exactly the same, each player has equal access to the same number of targets.
I think the distance can't be exactly the same for every player in every combination, so you want to create a configuration that minimizes unfairnesses among players.
Do you know Hooke's law for strings? I imagine a situation in which all players and targets are connected with compressed strings that push proportionally to the current distance (with wraps). Let the system evolve from a particular initial configuration, even if it is not the fairest, but just an initial guess. The advantage is that you won't need to brute force it, you just leave it to adjust itself.
To rise the chances of convergence, you will need to implement friction/drag. I've been working with physics simulations, that is why I wrote this answer.
The disadvantage is: maybe it demands too much research effort before the implementation, which you were trying to avoid as you mentioned not being familiar with the said algorithms.

How to detect if an object is at cordinates on canvas element?

I'm working on creating a tic-tac-toe game in canvas. I'm currently stuck at a point where I detect if there is a symbol(X or O) already at x/y cordinates on the canvas.
I tried using ImageData to check if an element is present but it returns an error if nothing is there. I also thought perhaps I could assign an ID to the square or the symbol. However that doesn't seem to be possible from what I've read.
Any help would be appreciated.
You can see the game running here http://jsfiddle.net/weeklygame/dvJ5X/30/
function TTT() {
this.canvas = document.getElementById('ttt');
this.context = this.canvas.getContext('2d');
this.width = this.width;
this.height = this.height;
this.square = 100;
this.boxes = [];
this.turn = Math.floor(Math.random() * 2) + 1;
this.message = $('.message');
};
var ttt = new TTT();
TTT.prototype.currentPlayer = function() {
var symbol = (this.turn === 1) ? 'X' : 'O';
ttt.message.html('It is ' + symbol + '\'s turn');
};
// Draw the board
TTT.prototype.draw = function(callback) {
// Draw Grid
for(var row = 0; row <= 200; row += 100) {
var group = [];
for(var column = 0; column <= 200; column += 100) {
group.push(column);
this.context.strokeStyle = 'white';
this.context.strokeRect(column,row,this.square,this.square);
};
this.boxes.push(group);
};
callback;
};
// Get center of the click area cordinates
TTT.prototype.cordinates = function(e) {
var row = Math.floor(e.clientX / 100) * 100,
column = Math.floor(e.clientY / 100) * 100;
return [row, column];
};
// Check if the clicked box has symbol
TTT.prototype.check = function(row, column) {
};
// Get cordinates and set image in container
TTT.prototype.click = function(e) {
var cordinates = ttt.cordinates(e),
x = cordinates[0] + 100 / 2,
y = cordinates[1] + 100 / 2,
image = new Image();
if (ttt.turn === 1) {
image.src = 'http://s8.postimg.org/tdp7xn6lt/naught.png';
ttt.turn = 2;
} else {
image.src = 'http://s8.postimg.org/9kd44xt81/cross.png';
ttt.turn = 1;
};
ttt.context.drawImage(image, x - (image.width / 2), y - (image.height / 2));
ttt.currentPlayer();
};
function render() {
ttt.draw($('#ttt').on("click", ttt.click));
ttt.currentPlayer();
};
(function init() {
render();
})();
Would it not be easier for you to keep track of the grid positions using an array. When you place something on the grid allocate that position in the array. That way rather than having to work out a way to read it from the Canvas you just look in the array. This also allows you to quickly redraw the canvas from the array when needed, such as when the screen resizes...
To detect which field was clicked, iterate through your 9 fields and check if the clicked position is in the area where the field is drawn.
To be able to do this, store the state of your fields (position and if it has a X, O or nothing in it). You should also store the 9 fields in an array, so you can easily iterate over them. I would store it in a two dimensional array (3x3).
function Field(x, y) {
this.x = x;
this.y = y;
this.value = null; // Can be null, 'X' or 'O'
}
Initialisation of the tic tac toe field:
var fields = [
[new Field(0,0), new Field(1,0), new Field(2,0)],
[new Field(0,1), new Field(1,1), new Field(2,1)],
[new Field(0,2), new Field(1,2), new Field(2,2)]
];
Iteration:
for (var y = 0; y <= 2; y++) {
for (var x = 0; x <= 2; x++) {
var field = fields[y][x];
// Do something with the field.
}
}
I would store the position of the fields with model coordinates. So you multiply the coordinates with a value to get the coordinates for drawing on the canvas.

Categories

Resources