Develop Reference

Creating a piano in p5.js

I am creating a piano using p5.js. I need help with the color change. When a user presses a key, I want the key to flash a quick color change to let them know that they pressed the key.
In my code, the color does change when you click on the first key, however, when I click a little bit outside the first key, the first key still changes color.
Is my distance a little off? Or is there a more effective way to do this?
function setup() {
createCanvas(990, 600);
}
function draw() {
background(220);
fill(255);
rect(0, 300, 70, 400);
rect(70, 300, 70, 400);
rect(140, 300, 70, 400);
rect(210, 300, 70, 400);
rect(280, 300, 70, 400);
rect(350, 300, 70, 400);
rect(420, 300, 70, 400);
rect(490, 300, 70, 400);
rect(560, 300, 70, 400);
rect(630, 300, 70, 400);
rect(700, 300, 70, 400);
rect(770, 300, 70, 400);
rect(840, 300, 70, 400);
rect(910, 300, 70, 400);
fill(0);
rect(50, 300, 38, 180);
rect(120, 300, 38, 180);
rect(260, 300, 38, 180);
rect(330, 300, 38, 180);
rect(400, 300, 38, 180);
rect(540, 300, 38, 180);
rect(610, 300, 38, 180);
rect(750, 300, 38, 180);
rect(820, 300, 38, 180);
rect(890, 300, 38, 180);
text("mouse x: "+mouseX+" mouse y:"+mouseY, width/2,height-30);
}
function mousePressed() {
cursor(HAND);
}
function mouseReleased() {
cursor(ARROW);
let d = dist(mouseX, mouseY, 0, 300);
if (d < 300) {
fill(0);
rect(0, 300, 70, 400);
}
}

You're checking whether the mouse position is withing 300 pixels of the point 0,300. This sets up a circle with a center of 0,300 and a radius of 300. Try drawing that in your scene to see where your clickable area is.
Your keys are rectangles, so you should be using point-rectangle intersection to check whether the mouse is inside a particular key. Google is your friend here, but basically you want to check whether mouseX is between the left and right edges, and mouseY is between the top and bottom edges.
Finally, note that you're only ever showing the "flash" for a single frame. I personally can't even see it. You probably want to show the flash for longer, using the millis() function or the frameCount variable for timing. (Again, Google is your friend!)
Shameless self-promotion: here is a tutorial on collision detection, including point-rectangle intersection. It's for Processing, but the ideas are the same in P5.js.

Picking a random item from an array? [duplicate]

This question already has answers here:
Getting a random value from a JavaScript array
(28 answers)
Closed 4 years ago.
so I'm making a small game on the HTML5 Canvas. I have an array of images which are displayed on the canvas, and a button (which is just an event listener checking if a certain area of the canvas is clicked.) When this button is clicked, I would like a random image to be selected so that I can have it perform a task (running a function, and an animation, which I will implement after the random selection is sorted).
I am assuming I can use some variant of math.random() to randomly select an image, but do I first need to assign each of the images to a value, e.g. if there was 5 images, 0 to 4?
Here is the array code:
var imageArray = new Array();
imageArray[0] = "./assets/1.png";
imageArray[1] = "./assets/2.png";
imageArray[2] = "./assets/3.png";
imageArray[3] = "./assets/4.png";
imageArray[4] = "./assets/5.png";
var box = new Image();
box.onload = function () {
ctx.drawImage(box, 50, 180, 150, 133);
ctx.drawImage(box, 220, 180, 150, 133);
ctx.drawImage(box, 390, 180, 150, 133);
ctx.drawImage(box, 50, 320, 150, 133);
ctx.drawImage(box, 220, 320, 150, 133);
ctx.drawImage(box, 390, 320, 150, 133);
ctx.drawImage(box, 50, 460, 150, 133);
ctx.drawImage(box, 220, 460, 150, 133);
ctx.drawImage(box, 390, 460, 150, 133);
};
box.src = imageArray[4];

To get a random integer, you can do the following:
Math.floor(Math.random() * max);
Where max is maximum number you want to generate, or in your case length of array. In case where max is 4 possible outputs are 0, 1, 2, 3.

you can try something like that :
Math.floor(Math.random()*imageArray.length)
it give you a random number between 0 and your array length
take a look at this, it can help you
Generating random whole numbers in JavaScript in a specific range?

drawing svg element in different container using javascript

I have 2 svg container and I want to draw different svg elements in both container. Let us suppose:
<div><svg height="100" width="100" id="svg1" class="svg"> </svg></div>
<div><svg height="100" width="100" id="svg2" class="svg"> </svg></div>
Now suppose I want to draw a rectangle in 1st one and a line in 2nd one using id in javascript and snap.svg. How can i achieve it?

Read the Getting Started and Documentation part on snapsvg.io then it should be a simple task.
var s1 = Snap("#svg1");
s1.rect(50, 50, 50, 50);
var s2 = Snap("#svg2");
var line = s2.line(50, 50, 100, 100);
line.attr({
stroke: "#000",
strokeWidth: 5,
strokeLinecap:"round"
});

I just little bit enhanced the reply of #ctron with a jsfiddle and some explanations.
var s1 = Snap("#svg1")
, s2 = Snap("#svg2")
// Create rect and save in a variable
, rect = s1.rect(50, 50, 50, 50)
// Create line and save in a variable
, line = s2.line(50, 50, 100, 100);
rect.attr({fill:"red"})
line.attr({
stroke: "#0f0",
strokeWidth: 5,
strokeLinecap:"round"
});
JSFiddle

fabric js: Polygon perPixelTargetFind

I'm creating a Polygon with fabric.js and set its value "perPixelTargetFind" true.
When you click, for example, on the right top end (not inside the polygon, inside its bounding box), the polygon gets selcected, although "perPixelTargetFind" is set ( I though with this value it is only possible to select an object by directly clicking on it).
The polygon should only be selected, if you click directly on it, is this possible?
Here is a link to the issue on jsfiddle: Polygon perPixelTargetFind
And here is my code so far:
var canvas = new fabric.Canvas('canvas');
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
document.getElementById("canvas").tabIndex = 1000;
var pol = new fabric.Polygon([
{x: 200, y: 0},
{x: 250, y: 50},
{x: 250, y: 100},
{x: 150, y: 100},
{x: 150, y: 50} ], {
left: 250,
top: 150,
fill: 'green',
perPixelTargetFind: true
}
);
canvas.add(pol);
thank you for your help! :)

Place an Image inside a Polygon with Snap.svg

I have a polygon (in fact it's a hexagon) painted with Adobe's Snap.svg:
var s = Snap('#test');
var hexagon = s.paper.polygon([
0, 50,
50, 0,
100, 0,
150, 50,
100, 100,
50, 100,
0, 50
]);
hexagon.attr({
stroke: '#fff',
strokeWidth: 1
});
Instead of filling the polygon with some paint, I want to place an image inside of it. The only thing I have found in the docs is the image function, but I don't know how to insert it. Anyone any idea?
======
Final Solution:
var image = s.paper.image('http://placekitten.com/g/200/300', 0, 0, 150, 150);
image = image.pattern(0, 0, 150, 150);
...
hexagon.attr({
stroke: '#fff',
strokeWidth: 1,
fill: image
});

You can't directly fill an element with an image you have to go via a pattern.
What this means is that you need to create a pattern that contains an image and then fill the shape with the pattern.