We Keep Coding

Is there a way to change tint of selected pixels in a Sprite?

Hello dear StackOverflow's community!
This is my very first question on the site, so I hope I'll be clear enough. Also, I am a French guy and I apologize in advance for the language mistakes!
Let me explain my situation (I like to be precise so it will be a bit long) :
I am currently doing an internship in my University. Here's the topic : my teacher made a 2D serious game based on image processing, where each player (4 maximum) must replace the right colors on each part of an animal. She used the XNA framework of Visual Studio to do it.
My task is to develop a new version of this game using Javascript technologies, particularly Pixi.js.
The game works like this : the main Container of the application is separated in 4 areas, one per player ; each of these areas sets its background using a Sprite that I create from the grey-scaled image of the animal the player chosed. At the center of the screen is a color palette represented by an array of Sprites. From this I can drag n' drop a color to the animal Sprite, and the region that represents a part of its body detects the drop. Everything works fine until here, but this is the point where I encounter difficulties.
I would like to change the tint of only the pixels corresponding to this region. The positions of these pixels are registered in an array I create from a text file, that's how I can detect which region receives the color.
I already tried to use a Graphics object from Pixi to redraw the color above the Sprite, but it is extremely slow. I also tried to use Filter, but since I want to color only some pixels and not the entire Sprite, I need to pass (using uniforms) the array of positions to my WebGL shader to make it verify for each pixel if it is part of the ones I want to change. But the shader needs me to declare this array indicating its size. I cannot do that because every region has a different number of pixels.
I am blocked now, and I don't know how to perform what I want...
Is there any solution that does not imply separating my image in several Sprites? I think it would work but if there can be another way, allowing me to avoid this, I would be very thankful!
Thanks in advance, and sorry that this message is so long!

Feathered edge Ellipse p5.js

Im looking to create an ellipse with a feathered or soft edge, as if it has been drawn with a spray can. I cant get my head around it...?? :-i
Any Help will be truly appreciated.

You have to break this down further. Pretend you have a friend who has never seen anything drawn with a spray can, so they have no idea what that looks like. Your goal is to give your friend a piece of paper, a pencil, and a list of steps they can follow to create the effect even though they've never seen it before.
Write down a series of steps (in English, not in code) that your friend could follow using the pen and paper. Remember that your friend has never seen the effect before, so you have to be as specific as possible. Try to break steps down into smaller sub-steps whenever possible. Maybe try watching videos of the effect in slow motion to figure out exactly what's going on.
When you have the list of steps written down, that's an algorithm that you can think about implementing with code.
Even though this doesn't feel like programming, this process of breaking your main goal down into several smaller steps is at the core of programming (especially creative coding).
That being said, I can help you get started by offering several approaches you might want to play with.
Just use an image stamp. Draw the effect beforehand and then just draw that image to the canvas, optionally randomly rotating and coloring it.
Or draw a series of circles, maybe getting more transparent as they get further from the center.
Or draw a random dot within a random range at a random angle. Do this several times per frame.

Simple Falling Sand Toy Lag

Well, after looking this problem up three times and finding nothing really relevant to my question, I will now ask.
I got curious and decided to experiment to see if I could make a very basic falling sand toy in canvas.
I did successfully do it, as the "sand" builds up on the ground like it should, but it slows down very quickly because of the hit detection between airborne particles and ground particles.
See for yourself Edit: Possibly dead link, here's a JsFiddle instead.
Particles are spawned by clicking and holding the mouse button. And after you've spawned approximately 200 particles, it gets brought to its knees.
for(i in P){
if(P[i].Y<canvas.height-1){
P[i].Y++
for(j in G){//This loop seems to cause the lag
if(P[i].X==G[j].X&&P[i].Y==G[j].Y-1){
G[G.length]={X:P[i].X,Y:P[i].Y}
}
}
}else{
G[G.length]={X:P[i].X,Y:P[i].Y}
}
}
I'm just wondering if there's something I'm doing horribly wrong; I'm pretty sure it's not supposed to lag that badly. I'm also wondering if there's a way to do it without nested loops, but it seems the only way I've been able to make this work is by checking every individual airborne particle against every individual ground particle, which makes it lag.
If the link is broken, say the word and I'll post the entire code here.
Thanks

It is easier to remember the height of each pile of sand (eg for each column or x-coordinate in the canvas) and check against that. You can directly use the index (should be the same as the x-coordinate), so you do not require to loop through all ground positions to find the correct one.
You need only one check for each airborne sand piece, namely the check with the height of the pile of the corresponding column.
Additionally when the sand has hit the pile, remove it from the 'active particle' list, so you do not need to check it each time, keeping the outer for-loop as small/short as possible.
Redraw each pile using the height of the pile (does not work well when the sand grains have separate colors...) or put the sand that is not falling anymore in a separate memory structure to redraw the piles properly.

Is processing.js a good option to implement this idea?

I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)

I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.

HTML5 Canvas Collision Detection "globalCompositeOperation" performance

Morning,
Over the past few months I have been tinkering with the HTML5 Canvas API and have had quite a lot of fun doing so.
I've gradually created a number of small games purely for teaching myself the do's and don'ts of game development. I am at a point where I am able to carry out basic collision detection, i.e. collisions between circles and platforms (fairly simple for most out there but it felt like quite an achievement when you first get it working, and even better when you understand what is actually going on). I know pixel collision detection is not for every game purely because in many scenarios you can achieve good enough results using the methods discussed above and this method is obviously quite expensive on resources.
But I just had a brainwave (It is more than likely somebody else has thought of this and I am way down the field but I've googled it and found nothing)....so here goes....
Would it possible to use/harness the "globalCompositeOperation" feature of canvas. My initial thoughts were to set its method to "xor" and then check the all pixels on the canvas for transparency, if a pixel is found there must be a collision. Right? Obviously at this point you need to work out which objects the pixel in question is occupied by and how to react but you would have to do this for other other techniques.
Saying that is the canvas already doing this collision detection behind the scenes in order to work out when shapes are overlapping? Would it be possible to extend upon this?
Any ideas?
Gary

The canvas doesn't do this automatically (probably b/c it is still in its infancy). easeljs takes this approach for mouse enter/leave events, and it is extremely inefficient. I am using an algorithmic approach to determining bounds. I then use that to see if the mouse is inside or outside of the shape. In theory, to implement hit detection this way, all you have to do is take all the points of both shapes, and see if they are ever in the other shape. If you want to see some of my code, just let me know
However, I will say that, although your way is very inefficient, it is globally applicable to any shape.

I made a demo on codepen which does the collision detection using an off screen canvas with globalCompositeOperation set to xor as you mentioned. The code is short and simple, and should have OK performance with smallish "collision canvases".
http://codepen.io/sakri/pen/nIiBq

if you are using a Xor mode fullscreen ,the second step is to getImageData of the screen, which is a high cost step, and next step is to find out which objects were involved in the collision.
No need to benchmark : it will be too slow.
I'd suggest rather you use the 'classical' bounding box test, then a test on the inner BBOxes of objects, and only after you'd go for pixels, locally.
By inner bounding box, i mean a rectangle for which you're sure to be completely inside your object, the reddish part in this example :
So use this mixed strategy :
- do a test on the bounding boxes of your objects.
- if there's a collision in between 2 BBoxes, perform an inner bounding box test : we are sure there's a collision if the sprite's inner bboxes overlaps.
- then you keep the pixel-perfect test only for the really problematic cases, and you need only to draw both sprites on a temporary canvas that has the size of the bigger sprite. You'll be able to perform a much much faster getImageData. At this step, you know which objects are involved in the collision.
Notice that you can draw the sprites with a scale, on a smaller canvas, to get faster getImageData at the cost of a lower resolution.
Be sure to disable smoothing, and i think that already a 8X8 canvas should be enough (it depends on average sprite speed in fact. If your sprites are slow, increase the resolution).
That way the data is 8 X 8 X 4 = 256 bytes big and you can keep a good frame-rate.
Rq also that, when deciding how you compute the inner BBox, you can allow a given number of empty pixels to get into that inner BBox, trading accuracy for speed.