Animating multiple items in Paper.js while anchored to a path - javascript

I have five rectangles placed at different points along a circle like this - http://imgur.com/uVYkwl7.
Upon clicking any rectangle i want the circle to move to the left of the screen, gradually scaling down it's radius until the circle's center reaches x=0. I'd like the five rectangles to move along with the circle while its being scaled down and also adjust their own positions and scale on the circle so that they are within the view's bounds, like this - http://imgur.com/acDG0Aw
I'd appreciate any help on how to go about doing this. Heres my code for getting to the 1st image and animating the circle:
var radius = 300;
var center = view.center;
var circle = new Path.Circle({
center: view.center,
radius: radius,
strokeColor: 'black',
name: 'circle'
});
var path = new Path.Rectangle({
size: [230, 100],
fillColor: '#1565C0'
});
var rectText = ['Text 1',
'Text 2',
'Text 3',
'Text 4',
'Text 5'
];
var symbol = new Symbol(path);
var corners = [
new Point(center.x, center.y - radius),
new Point(center.x - radius, center.y - radius / 2),
new Point(center.x + radius, center.y - radius / 2),
new Point(center.x - radius, center.y + radius / 2),
new Point(center.x + radius, center.y + radius / 2)
];
var rectClicked = false;
var clickedRect = null;
var rectClick = function(event) {
rectClicked = true;
clickedRect = this;
};
function onFrame(event) {
// Your animation code goes in here
if (rectClicked) {
for (var i = 0; i < 1; i++) {
var item = project.activeLayer.children[i];
if (item.name == 'circle') {
if (item.position.x < 0) {
rectClicked = false;
} else {
item.position.x -= 10;
item.scale(1/1.01);
}
}
}
}
}
// Place the instances of the symbol:
for (var i = 0; i < corners.length; i++) {
var placedSymbol = symbol.place(corners[i]);
placedSymbol.onMouseDown = rectClick;
var rText = new PointText({
point: placedSymbol.bounds.topLeft + 20,
content: rectText[i],
fontSize: '20',
fillColor: 'white'
});
}

Paper.js provides rotations around a pivot out of the box.
var pivotPoint = new Point(10, 5);
circle.rotate(30,pivotPoint);
Here is the docs reference for this behaviour and here is a very basic Sketch example to illustrate this
The above snippet will rotate a circle(you can change this to rectangle in your case) by 30 degrees around a pivot point at coordinates 10,5 on the x/y axis.
Thus what you describe is certainly doable as long as the path that your elements will follow is always circular.
Bear in mind that in order for the pivot rotation to work the way you want them to you need to update the pivotPoint and reinitiate the rotation again.
Note: In case you want to move along an arbitrary shape instead of circular path, you should search for Paper.js animation-along-a-path which is something that I've seen been done before without much difficulty - e.g this simple Sketch by the creator of Paper.js himself.
The sketch I provided above is a basic example of rotation around a pivot point.
I'm dumping the Sketch code here in case the link goes dead:
//Create a center point
var centerCircle = new Path.Circle(paper.view.center, 100);
centerCircle.strokeColor = 'black';
centerCircle.dashArray = [10, 12];
//Create the circles
var circle1Radius = 30;
var circle1 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle1Radius, circle1Radius);
circle1.fillColor = '#2196F3';
var circle2Radius = 40;
var circle2 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle2.fillColor = '#E91E63';
var circle3Radius = 40;
var circle3 = new Path.Circle((centerCircle.position-centerCircle.bounds.width/2)+circle2Radius, circle2Radius);
circle3.fillColor = '#009688';
var i=0;
var animationGap = 125; //how long to move before animating the next circle
var rotationSpeed = 2;
function onFrame(event) {
circle1.rotate(rotationSpeed,centerCircle.position);
if(i>animationGap)
circle2.rotate(rotationSpeed,centerCircle.position);
if(i>animationGap*2)
circle3.rotate(rotationSpeed,centerCircle.position);
i++;
}

Related

How to use L.canvas to draw a fluctuating circle

I am a back-end programmer who is using leaflet for the first time. I don’t know much about js animation steps. I want to use L.canvas to draw a dynamic circle, just like the picture below.
Specify the range of the circle or the latitude and longitude of the center of the circle, and the radius will continue to fluctuate and spread outward, similar to water waves (this effect in the picture is made by me using a highly encapsulated animation library)
I hope someone can provide me with an example, or give me a suggestion so that I can smoothly draw a dynamic circle on the map. thanks a lot
You can create mutliple circles and update the radius each millisecond:
var canvasRenderer = L.canvas();
function createWavingCircle(latlng, color, fromRadius, toRadius){
var circle = L.circle(latlng, {radius: fromRadius, color, renderer: canvasRenderer}).addTo(map);
var nextCircle;
var interval = setInterval(()=>{
var radius = circle.getRadius()+1;
if(radius <= toRadius){
circle.setRadius(radius);
if(Math.round((radius / toRadius) * 100) >= 30 && !nextCircle){
nextCircle = createWavingCircle(latlng, color, fromRadius, toRadius);
}
} else {
if(nextCircle && nextCircle.getRadius() >= toRadius){
circle.remove();
clearInterval(interval);
}
}
},1)
return circle;
}
// replace this values with your custom ones
createWavingCircle(map.getCenter(), 'red', 10, 400);
https://plnkr.co/edit/IT5VcxokeCWpkpEx
Create a new L.canvas object and specify the desired options, and use the addTo() method to add the circle to your map.
This will create a circle that is initially drawn with a radius of 10, and will have its radius redrawn with a new random value every second. The circle will continue to fluctuate in size until the setInterval() loop is stopped.
import { L } from 'leaflet';
const circle = L.canvas({
center: [51.505, -0.09],
radius: 10,
color: 'red',
});
circle.addTo(map);
setInterval(() => {
const newRadius = Math.random() * 50;
circle.setRadius(newRadius);
}, 1000);
Hope it works!
// build CircleMarker
createFloatCircle(latLng, color, fromRadius, toRadius){
var _this = this;
var circle = L.circleMarker(latLng,
{radius: fromRadius,
color: color,
renderer: L.canvas({ padding: 0.5 }),
fillColor: color,
fillOpacity: 0.5,
stroke: false,
});
circle.addTo(_this.offMap);
setInterval(() => {
var newRadius = circle.getRadius() + 1;
if(newRadius <= toRadius){
circle.setRadius(newRadius);
} else {
circle.setRadius(fromRadius);
}
circle.setStyle({fillColor: _this.getColor(newRadius, fromRadius, toRadius)});
}, 20);
},
getColor(radius, fromRadius, toRadius){
var _this = this;
var color = 'red';
var percent = (radius - fromRadius) / (toRadius - fromRadius);
var red = Math.round(255 * percent);
var green = Math.round(255 * (1 - percent));
color = 'rgb(' + red + ',' + green + ',0)';
return color;
},
This is my implementation, as the circle expands, the color of the layer gradually deepens

Adding Arrows or Overlay animation in Flight Animation example in OpenLayers 6

I want to add moving arrows or overlay animation in the Flights Animation example in OpenLayers 6.
I tried doing the overlay moving animation with JavaScript setInterval(), but so far I have only succeeded in animating a single LineString, that too after the line is finished drawing. I wanted to add the moving animation as the line is being drawn, kind of like tracing the LineString's path.
Can someone please help me with this?
Following is the code snippet where I have tried to add the moving animation:
var markerEl = document.getElementById('geo-marker');
var marker = new Overlay({
positioning: 'center-center',
offset: [0, 0],
element: markerEl,
stopEvent: false
});
map.addOverlay(marker);
function animateFlights(event) {
var coords;
var vectorContext = getVectorContext(event);
var frameState = event.frameState;
var features = flightSource.getFeatures();
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (!feature.get('finished')) {
coords = feature.getGeometry().getCoordinates();
var elapsedTime = frameState.time - feature.get('start');
var elapsedPoints = elapsedTime * pointsPerMs;
if (elapsedPoints >= coords.length) {
feature.set('finished', true);
}
var maxIndex = Math.min(elapsedPoints, coords.length);
var currentLine = new LineString(coords.slice(0, maxIndex));
vectorContext.setStyle(strokeStyle1);
vectorContext.drawGeometry(currentLine);
if (feature.get('finished')) {
var interval = setInterval(
function () { return animatePath(coords, interval) }, 10);
}
}
}
map.render();
}
function animatePath(path, clearInterval) {
if (i == path.length) {
stopAnimatePath(clearInterval);
}
marker.setPosition(path[i]);
i = i + 1;
}
function stopAnimatePath(clearInterval) {
clearInterval(clearInterval);
}
Here is a link to a snapshot of how my app looks right now
Trace your LineString
It should be enough to set your map center to the last point of your LineString if you update often enough
map.getView().setCenter(lastPoint)
If it gets laggy use
var pan = ol.animation.pan({
source: map.getView().getCenter()
});
map.beforeRender(pan);
map.getView().setCenter(lastPoint);
Draw arrows
To draw arrows on your LineString you can use the following style
var styleFunction = function (feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring
new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 2
})
})
];
geometry.forEachSegment(function (start, end) {
var dx = end[0] - start[0];
var dy = end[1] - start[1];
var rotation = Math.atan2(dy, dx);
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(end),
image: new ol.style.RegularShape({
fill: new ol.style.Fill({color: '#000'}),
points: 3,
radius: 8,
rotation: -rotation,
angle: Math.PI / 2 // rotate 90°
})
}));
});
return styles;
};
more details: https://stackoverflow.com/a/58237497/546526

How can I draw a 2d diamond with paper.js

I want to draw a diamond using paper.js. The shape and colors of the diamond should change randomly everytime I re-run the function. How do i go about this task
Here is a sketch demonstrating a possible implementation.
// Diamond random size settings
const MIN_RADIUS = 10;
const MAX_RADIUS = 50;
// Draw first diamond.
let diamond = drawDiamond(view.center);
// Display instructions.
new PointText({
content: 'Click to draw a new diamond',
point: view.center + [0, -80],
justification: 'center'
});
// Draws a random diamond around the given point and returns it.
function drawDiamond(point) {
// Get random radiuses.
const verticalRadius = getRandomRadius();
const horizontalRadius = getRandomRadius();
// Calculate diamond points.
const top = point + [0, -verticalRadius];
const bottom = point + [0, verticalRadius];
const left = point + [-horizontalRadius, 0];
const right = point + [horizontalRadius, 0];
// Build path.
return new Path({
segments: [top, right, bottom, left],
fillColor: Color.random()
});
}
function getRandomRadius() {
return MIN_RADIUS + Math.random() * (MAX_RADIUS - MIN_RADIUS);
}
// On mouse down...
function onMouseDown() {
// ...delete existing diamond...
diamond.remove();
// ...and draw a new one.
diamond = drawDiamond(view.center);
}
var diamond = new Path.RegularPolygon(new Point(x,y), 4, 50);
diamond.fillColor = '#e9e9ff';
diamond.selected = true;
diamond.rotate(45);
x,y -> your coordinates
to generate random color have a look at this Random color generator
as of your final code should look something like this
function diamonds(){
var diamond = new Path.RegularPolygon(new Point(x,y), 4, 50);
diamond.fillColor = getRandomColor();
diamond.selected = true;
diamond.rotate(45);
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

KineticJS, Paint like program, brush gaps

I am trying to do something like paint with KineticJS. I am trying to draw the color with circles that originate from the mouse position. However the eventlistener of the mouse position seems too slow and when I move the mouse too fast the circles drawn are far from each other resulting this:
I have seen people filling array with points drawing lines between them, but I thought thats very bad for optimization because after dubbing the screen too much the canvas starts lagging because it has too much lines that it redraws every frame. I decided to cancel the cleaning of the layer and I am adding new circle at the current mouse position and I remove the old one for optimization. However since Im not drawing lines on fast mouse movement it leaves huge gaps. I would be very grateful if anyone can help me with this.
Here is my code:
(function() {
var stage = new Kinetic.Stage({
container: 'main-drawing-window',
width: 920,
height: 750
}),
workplace = document.getElementById('main-drawing-window'),
layer = new Kinetic.Layer({
clearBeforeDraw: false
}),
border = new Kinetic.Rect({
stroke: "black",
strokeWidth: 2,
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight()
}),
brush = new Kinetic.Circle({
radius: 20,
fill: 'red',
strokeWidth: 2,
x: 100,
y: 300
});
Input = function() {
this.mouseIsDown = false;
this.mouseX = 0;
this.mouseY = 0;
this.offsetX = 0;
this.offsetY = 0;
};
var input = new Input();
document.documentElement.onmousedown = function(ev) {
input.mouseIsDown = true;
};
document.documentElement.onmouseup = function(ev) {
input.mouseIsDown = false;
};
document.documentElement.onmousemove = function(ev) {
ev = ev || window.event;
// input.mouseX = (ev.clientX - workplace.offsetLeft);
// input.mouseY = (ev.clientY - workplace.offsetTop);
input.mouseX = (ev.offsetX);
input.mouseY = (ev.offsetY);
};
function DistanceBetweenPoints(x1, y1, x2, y2) {
return Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
}
var canvasDraw = setInterval(function() {
// console.log(input);
if (input.mouseIsDown) {
workplace.style.cursor = "crosshair";
var currentBrushPosition = brush.clone();
currentBrushPosition.setX(input.mouseX);
currentBrushPosition.setY(input.mouseY);
// var distance = DistanceBetweenPoints(brush.getX(), brush.getY(), currentBrushPosition.getX(), currentBrushPosition.getY());
// if (distance > brush.getRadius() * 2) {
// var fillingLine = new Kinetic.Line({
// points: [brush.getX(), brush.getY(), currentBrushPosition.getX(), currentBrushPosition.getY()],
// stroke: 'yellow',
// strokeWidth: brush.getRadius()*2,
// lineJoin: 'round'
// });
// // layer.add(fillingLine);
// }
layer.add(currentBrushPosition);
brush.remove();
brush = currentBrushPosition;
layer.draw();
// if (fillingLine) {
// fillingLine.remove();
// }
}
if (!input.mouseIsDown) {
workplace.style.cursor = 'default';
}
}, 16);
layer.add(border);
stage.add(layer);
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coloring Game</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
</head>
<body>
<div id="main-drawing-window"></div>
<script type="text/javascript" src="./JS files/canvas-draw.js"></script>
</body>
</html>
Don't use individual Kinetic.Circles for each mousemove. Every Kinetic object is a "managed" object and that management takes up a lot of resources. KineticJS will slow to a crawl as the number of circles increases with every mousemove.
Instead, use a Kinetic.Shape and draw you circles onto the canvas with
// This is Pseudo-code since I haven't worked with KineticJS in a while
shapeContext.beginPath();
shapeContext.arc(mouseX,mouseY,20,0,Math.PI*2);
shapeContext.fillStrokeShape(this);
This will probably clear your problem, but if the mouse is moved very far in a single mousemove then you might have to draw a lineTo (instead of arc) between the last mouse point and the current far-away mouse point.

PaperJS random point

I've got this code. What I want the code to do is to make the ball move and when the ball goes over a grey spot (holes) it goes back to the starting point. I've done that by creating a random place for the grey holes. I simply need to find a way to define the position of these holes even though they are randomized.
var startPoint = new Path.Circle(new Point(40, 40), 40);
startPoint.fillColor = "green";
//finishPoint
var finishPoint = new Path.Circle(new Point(1300, 600), 40);
finishPoint.fillColor = "red";
var ball = new Path.Circle(new Point(40, 40), 20);
ball.fillColor = "black";
//holes
var path = new Path(new Point(20, 20), new Point(20, 23));
path.style = {
strokeColor: 'grey',
strokeWidth: 70,
strokeCap: 'round'
};
var holes = new Symbol(path);
for (var i = 0; i < 10; i++) {
var placement = view.size * Point.random();
var placed = holes.place(placement);
}
var vector = new Point(0, 0);
function onFrame(event) {
ball.position += vector / 100;
}
var moves = new Point(100, 1);
function onKeyDown(event) {
if (event.key === "s") {
vector.y += 10;
}
if (event.key === "d") {
vector.x += 10;
}
if (event.key === "a") {
vector.x -= 10;
}
if (event.key === "w") {
vector.y -= 10;
}
var ballPlace = ball.position;
if (ballPlace.isClose(finishPoint.position, 40) == true) {
var text = new PointText(view.center);
text.content = 'Congratulations';
text.style = {
fontFamily: 'Courier New',
fontWeight: 'bold',
fontSize: 100,
fillColor: 'gold',
justification: 'center'
};
ball.remove();
}
if(ballPlace.isClose(placement.position, 40) == true) {
ball = new Point(40, 40);
}
};
and I want the ball to go back to Point(40, 40) when it goes over a grey hole (var holes) but I can't get it to work. Any idea how to fix this?
You want to test the ball's position against the holes to see if the ball goes back to the starting position. The simplest way I can think of to do this is to create a group of the holes then test the position of the ball against that group. In the following code the ball's position is simulated via the onMouseMove function and the holes are flashed red to indicate when the ball would be returned to the the starting position.
var holes = [];
var hole;
for (var i = 0; i < 10; i++) {
hole = new Path.Circle(view.size * Point.random(), 10);
hole.fillColor = 'grey';
holes.push(hole);
}
holes = new Group(holes);
onMouseMove = function(e) {
if (holes.hitTest(e.point)) {
holes.fillColor = 'red';
} else {
holes.fillColor = 'grey';
}
Here's an implementation: sketch. It should be straightforward to replaced onMouseMove with onFrame, move the ball as you currently do, and then test to see if it falls into a hole.
In order to test if the ball is over a hole you can remove on the onMouseMove function and replace it with:
onFrame = function(e) {
ball.position += vector / 100;
if (holes.hitTest(ball.position)) {
// move the ball wherever you want to move it, position text,
// etc. you might have to loop through the array to find which
// hole was hit.
}
}
#Luke Park is right about using an array.
Trial each new point, by ensuring it is a distance from all other existing points. Example below (not scaled to view.size).
p = Point.random();
while ( isTooClose(p, points) ) {
p = Point.random();
}
It's possible for this to loop infinitely, but if you're populating the area sparsely, there should be no problem.
isTooClose tests each point in array p, where distance = sqrt(dxdx + dydy). If you have many points, you can optimise by avoiding sqrt(), by testing whether the raw dx and dy values are smaller than the test radius.
You can also use a similar function on each frame, to test for collision.

Categories