We Keep Coding

How can I replace my cursor with a circle instead of drawing it to canvas in p5.js?

The problem: I'm trying to create a simple drawing app using p5.js. Instead of the standard cursor image, I'd like to show a circle at my cursor location that represents the size of the drawing brush.
Potential solution 1: Replace the cursor using the cursor() function native to p5.
Why it doesn't work: The p5 cursor function only takes the following parameters:
ARROW, CROSS, HAND, MOVE, TEXT, or WAIT, or path for image
As such, there's no native way to replace the cursor using the ellipse class.
Potential solution 2: Use the noCursor() function and then draw the circle at the cursor location, while also drawing the background, as such:
var brushSize = 50;
function setup() {
createCanvas(1080,720);
noCursor();
}
function draw() {
background(100);
ellipse(mouseX,mouseY,brushSize);
}
Why it doesn't work: While this solution gets the desired effect i.e. replacing the cursor with a circle the size of the brush, the constantly updating background prevents me from actually drawing to the canvas with the brush when I want to.
Is there some way I can replace the cursor without actually drawing the ellipse to the canvas? Is there any way to save and then instantly reload a canvas in p5? I couldn't find such a method searching through the API docs. Any hints are appreciated.

According to the reference, you can pass a URL into the cursor() function to set an image.
If you want to use an image that you draw, you're going to have to draw them ahead of time and save them to files, and then use those files. Something like this:
cursor('images/ellipse-15.png');
Where ellipse-15.png is an image that you generated ahead of time, to match when brushSize is 15, for example.
Btw P5.js is just setting the cursor CSS property. You can read more about it here.
If you want to go with the noCursor() approach and draw the ellipse yourself, you could draw your drawing to a buffer (the createGraphics() function is your friend) and then draw the ellipse on top of that every frame. I'd still probably use a cross cursor just because there's going to be some annoying lag if you draw it yourself.

Create a circular DIV inside the canvas container and show it on top of the actual canvas.

Javascript letters created out of smoke particles

I would like to have my title heading be created from a smoke animation using javascript. Like here this type of smoke moving to create letters but how would i be able to manipulate the smoke here?: http://jsfiddle.net/Ujz4P/1563/
How do I for example make it form into 'john'
function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,400,400);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
Is there a simpler way to do this?

I think the algorithm can be like...
Get a vector representation of text. Search for a lib to do this, e.g Google "js font to vector path".
You'll end up with a collection of vectors representing your text. Further segment the vectors so that there are points along the lines. E.g. a capital "L" might be first depicted with just 2 vectors for its 2 sides, but you want to segment the vectors so that each side can have multiple points.
All of the points generated by step 1 and 2 are your destination coordinates for the smoke particles. In other words, if your smoke particles were drawn at these destination coordinates, they would spell out the text you want.
Assign random coords to the smoke particles.
On each render, move the smoke particles closer to its assigned destination coord using tweening. (You can also accomplish this with CSS transform). For a more natural look, you might add some random wandering to the particle movements so that they eventually get to their destination coords without beelining.
That's the gist, and feel free to ask for clarification on anything.

There are plenty of great websites that generates gifs for title sequences. Perhaps you could just embed a gif into your HTML.
Hope this helps.

Constrain a sprite within a polygon area in Phaser

I am creating a click and point adventure game. I have a character walking in the area but I'm unsure as to how to constrain where his feet can venture to. In the attached image, I have his feet in yellow, but I must not allow him to go outside the blue polygon area on the floor.
Any ideas on how to make this work? Please bear in mind, I'm creating a tween for the character to follow when the user clicks the screen. If he bumps into an area outside of the polygon, it will make the player (pink rectangle) stop.
I've tried arcade physics but that's only for square based sprites. I guess I have to use p2 physics? Can I use p2 physics on shapes or maybe a simple line like the polygon area?

You don't need to use any of Phasers physics engines to handle this, you can do it using the Polygon geometry object and just check if the click is within the polygon or not.
Here's an online example: http://phaser.io/examples/v2/geometry/polygon-contains
But the code is quite simple. First create a polygon (be aware about overlapping points and the way the poly winds, see docs for details):
poly = new Phaser.Polygon([ new Phaser.Point(200, 100), new Phaser.Point(350, 100), new Phaser.Point(375, 200), new Phaser.Point(150, 200) ]);
and then just check if they've clicked within it:
if (poly.contains(game.input.x, game.input.y))
{
// allow walk
}

how do I merge paper.js items into a raster image?

I am using paper.js to create an application in which I can markup an image then save it.
My lowest layer of my paper project is a raster of the image. The next layer up is where vector graphic markup is done using various paper.js items. When an item is committed I copy it to the lower (raster) layer where it is preserved. But it is just a child item of the layer, not part of the rasterized image. If I capture the raster as an image with toDataURL the child items are not part of the image (I wouldn't expect them to be).
How do I insert/overlay part of the rasterized image with an paper.js item? I can rasterize the item first, but then I need to know how to merge the two rasters with one overlaying part of the other? If I convert to a raster first then pixels that are not in the actual paperjs item but are in the enclosing rectangle will need to be transparent, i.e., not overlay the rasterized image.

You can create a raster object from the whole layer, then convert that to a DataURL string:
var tempImg = project.layers[0].rasterize();
var dataString = tempImg.toDataURL();
tempImg.remove();

strokeRect - Canvas drawing with HTML 5

Hi I am playing around with shapes and canvas and I have a question:
So say I have this code that draws a nice rectangle on the canvas:
$("#create_rectangle").bind("click", function() {
if(canvas[0].getContext){
var ctx = canvas[0].getContext('2d');
ctx.strokeRect(50,50,50,50);
}
});
Now I say I want to store a reference to that rectangle so that I can make alteration to it at a later stage. The stokeRect() method does not seem to return any value. How do I reference that particular rectangle that was created?

Well you can't reference it, but you can include it in a draw function which depending your arguments allow you to move/rotate hide etc.
It very depend on what you want to do with this shape.
This tutorial can be helpfull to understand manipulation of shape.
http://simonsarris.com/blog/140-canvas-moving-selectable-shapes

You can't.
Canvas is basically just a canvas. You throw some paint at it, it dries and you're done. You can't take your paint and move it somewhere else—but you can paint over it.
What you may want is SVG. It keeps track of shapes and other assorted things so that you can change them, deal with interactions much more precisely, et cetera.