pixijs containsPoint and use hitArea - javascript

I want to check if there is a point in an area of the sprite
But the containsPoint method does not include the area and checks it as full.
const box = Sprite.from(box2Texture)
box.anchor.set(0.5, 0.5)
box.position.set(50, 25)
box.scale.set(0.3)
box.hitArea = new Polygon([-50, 0, 0, -25, 50, 0, 0, 25])

Related

Adding images & texts one below another based on previous image /text position

How to add images or texts sequentially by calculating the y cordinates in jspdf
Here is the demo code
I could not find any method that can help me calculate the Y cordinate of last image so that I can add next image or text after it
doc.text('Something written over here', 15, 18);
doc.addImage(base64_img, 10, 20, 0, 0); // should be added with y position based on text that ends above it.
doc.addImage(base64_img, 10, 40, 0, 0); // < 40 should be some val that should be next value of Y after 1st image
doc.addImage(base64_img, 10, 70, 0, 0);
You could try to 'play' with the size of the chars and the lenght of your string, something like this:
const yourText = 'Something written over here';
const sizeChar = 20;
const textWith = yourText.length * sizeChar;
doc.setFontSize(sizeChar);
doc.text(yourText, 15, 18);
doc.addImage(base64_img, 10, textWith, 0, 0);

clearRect produces white box (not removes set colors)

I have multiple stacked contexts in a canvas (each will be displaying circles, then deleting cirles, creating new circle in new location on the context). I was testing the feasibility with this code:
var radius = 10;
cx2 = document.getElementById("myCanvasID").getContext('2d');
cx2.beginPath();
cx2.arc(150, 150, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();
//ctx2.fillColor = "rgba(0-255, 0-255, 0-255, 0-1)"
cx2.clearRect(0,0,300,300);
//cx2.globalCompositeOperation = "destination-out"
//cx2.fillStyle = 'rgba(0, 255, 0, 0)';
// cx2.fillRect(0, 0, 300, 300);
// cx2.globalCompositeOperation = "destination-in"
cx2.beginPath();
cx2.arc(180, 180, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();
The issue with clearRect is that it leaves a white rectangle and I want to have it transparent, as the layer below has a background.
Other layers will be stacked on top and all needs to be transparent, the deleting of the circle and redrawing should not affect this.
I have tried a few other commands, but none have worked so far. clearRect gives me this white rectangle:
https://jsfiddle.net/dorien/tghgsw5g/
You have one context: .getContext('2d') returns the CanvasRenderingContext2D for the canvas. It does not create new contexts. So, when you cx2.clearRect(0,0,300,300); you're also clearing cx1 because, well, it's the same context.
If you want separate "layers" you need to create separate <canvas>'s and position them on top of each other.

Javascript - Array Assignment

I am currently taking a course on Javascript at Khan Academy and Im having some trouble with one of the assignments. I have posted the question there, but I have noticed that there is less volunteers willing to help there, so I thought I`d ask here.
I have an Assignment on JS Arrays ( https://www.khanacademy.org/computing/computer-programming/programming/arrays/p/project-make-it-rain ) with the following requirements:
To make an animation of rain, it's best if we use arrays to keep track of the drops and their different properties.
Start with this simple code and build on it to make a cool rain animation. Here are some ideas for what you could do:
Add more drops to the arrays.
Make it so that the drops start back at the top once they've reached the bottom, using a conditional.
Make an array of colors, so that every drop is a different color.
Make other things rain, like snowflakes (using more shape commands) or avatars (using the image commands).
Make it so that when the user clicks, a new drop is added to the array.
Initialize the arrays using a for loop and random() function, at the beginning of the program.
Question 1)
I've got it to use a random colour when the raindrop is called, but it overwrites the previous drop's colour if you call it before the previous drop goes off screen. I've tried moving the fill function outside the loop, and around the loop to no avail. Can anyone give me some insight on this? What am I doing wrong?
Question 2)
I've got a conditional (if/else) to make the raindrop start back at the top, but it drops much slower the second time, and only repeats once. Having trouble figuring out the logic of why this is happening in order to "debug" it.
Current code:
var xPositions = [100];
var yPositions = [0];
var colors = [
color(255, 0, 0),
color(255, 128, 0),
color(255, 255, 0),
color(0, 255, 0),
color(0, 0, 255),
color(128, 0, 255)
];
background(204, 247, 255);
fill(colors[Math.floor(Math.random() * colors.length)]);
// Raindrops (random color)
draw = function() {
background(204, 247, 255);
for (var i = 0; i < xPositions.length; i++) {
if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
noStroke();
ellipse(xPositions[i], yPositions[i], 10, 10);
yPositions[i] += 5;
} else { // when it hits the bottom, set the yPositions variable to 0 and restart
ellipse(xPositions[i], yPositions.push(0), 10, 10);
yPositions[i] += 5;
}
}
};
var mouseClicked = function() {
xPositions.push(mouseX);
yPositions.push(mouseY);
fill(colors[Math.floor(Math.random() * colors.length)]);
draw();
};
Question 1)
You need to make a fill call for each raindrop that is drawn, per iteration of the for loop inside draw. For a raindrop to maintain its color as it falls (between draw calls) you need to store its color in an additional array, and initialize the corresponding color when you create new drops.
Question 2)
Simply reset the y value in the y array to make the drop start over. I'm not sure what the ellipse call was doing in your code - see below.
// initial raindrop values
var xPositions = [100];
var yPositions = [0];
var colors = [
color(255, 0, 0),
color(255, 128, 0),
color(255, 255, 0),
color(0, 255, 0),
color(0, 0, 255),
color(128, 0, 255)
];
// initialize the first raindrop to a random color
var dropColors = [colors[Math.floor(Math.random() * colors.length)]];
background(204, 247, 255);
draw = function() {
background(204, 247, 255);
for (var i = 0; i < xPositions.length; i++) {
if (yPositions[i] < 400) { // if the raindrop hasnt hit the bottom
noStroke();
// set the fill color for this drop
fill(dropColors[i]);
ellipse(xPositions[i], yPositions[i], 10, 10);
yPositions[i] += 5;
} else { // when it hits the bottom, set the yPositions variable to 0
yPositions[i] = 5;
}
}
};
var mouseClicked = function() {
xPositions.push(mouseX);
yPositions.push(mouseY);
dropColors.push(colors[Math.floor(Math.random() * colors.length)]);
draw();
};

Kineticjs - Fixed fill pattern of shape being rotated

I use kineticjs to work with shapes and transitions. For now I have made next code example:
http://jsfiddle.net/z6LaH/2/
hexagon = new Kinetic.RegularPolygon({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
sides: 6,
radius: hexRadius,
cornerRadius: 0,
fillPatternImage: img,
fillPatternOffset: [150, -150],
//fill: 'white',
stroke: 'black',
strokeWidth: 0
});
hexagon.on('mouseover touchstart', function() {
this.transitionTo({
cornerRadius: transRadius,
rotation: Math.PI / 2,
scale: {x: 0.75, y: 0.75},
easing: 'ease-in',
duration: duration,
callback: function() {
hexagon.transitionTo({
scale: {x: 1.1, y: 1.1},
duration: duration * 7,
easing: 'elastic-ease-out'
});
}
});
});
As you can see, fill pattern is rotating with shape. I need it to be fixed. So my question is:
Is it posible to make fixed fill pattern, while shape is rotating, and how?
UPDATE:
I got next approach: rotate fill pattern in opposite direction.
http://jsfiddle.net/z6LaH/3/
Is there any more elegant way to do the same?
Eric has just added the ability to save a user-defined clipping function to layers and groups.
First, you define a function that draws a clipping region on a layer or group
var layer = new Kinetic.Layer({
clipFunc: function(canvas) {
var context = canvas.getContext();
context.rect(0, 0, 400, 100);
}
});
Then you call the .clip() function to apply the clip. Here is Kinetic’s clip() function in the source code:
_clip: function(container) {
var context = this.getContext();
context.save();
this._applyAncestorTransforms(container);
context.beginPath();
container.getClipFunc()(this);
context.clip();
context.setTransform(1, 0, 0, 1, 0, 0);
}
The clip() function applies existing transforms before doing the clip. If you don’t like the transform part of the Kinetic function, you can always use “container.getClipFunc()” and then build your own myClipWithoutTransform() based on the _clip function above.

How to draw hyperbola using javascript

Can some one help me to draw hyperbola using JavaScript.As i am able to draw parabola now. but in hyperbola getting confused. For parabola i used:
function drawParabola(y)
{
myGraph.context.clearRect(0, 0, myGraph.canvas.width, myGraph.canvas.height);
myGraph = new Graph({
canvasId: "myCanvas",
minX: -10,
minY: -10,
maxX: 10,
maxY: 10,
unitsPerTick: 1
});
myGraph.drawEquation(function(x){
return y*x*x;
}, "red", 2);
}
Please suggest me for hyperbola

Categories