I've been trying to draw an asymmetrical ellipse using HTML5 Javascript,
My first try was using the arc and the scale but I was only able to generate symmetrical ellipses using that,
So my second try was using bezier curves. Which had as main problem that I don't understand how they work...
In the end, I ended up with something like this:
http://jsfiddle.net/eLEUD/4/
It works, but I have the modifiers hardcoded in there, as soon as you change the points, it stops working. I have no idea how to calculate them though...
Who can help me further?
The bezierCurveTo function actually draws the last three nodes of a Cubic Bezier Curve
Cubic bezier curves require 4 points to be drawn:
P1: the starting point of the curve.
P2: the first point the curve heads towards but does not touch.
P3: the sencond point the curve heads towards but does not touch.
P4: the end point of the curve.
Given that, the code looks like this (assuming P1,P2,P3,P4 are point structures):
//move to the first part of the curve
context.moveTo(P1.x, P1.y);
//draw the curve.
context.bezierCurveTo(P2.x, P2.y,
P3.x, P3.y,
P4.x, P4.y);
The bezierCurveTo function treats the whatever point the canvas context is sitting at as the first anchor point.
As for drawing your egg shape, you're just going to have to fiddle with it until you're happy with whatever shape you're looking for.
I hope that helps.
EDIT
It seems like maybe you're trying to draw an egg shape inside the diamond shape... so I've updated your fiddle to do that. See the green egg shape here:
http://jsfiddle.net/blesh/zVWrH/1/
What I did is calculate the other points around the diamond: northeast, north-by-northeast, etc. and used those as anchor points.
I hope that helps.
Related
I'm currently writting a 3D implementation of the boids algorithm in P5.js but I'm having trouble orienting my boids according to their direction (velocity). Rotations are limited to RotateX(), RotateY() and RotateZ(). The simplest solution that I feel should work goes along these lines :
push();
translate(this.pos);
rotateZ(createVector(this.vel.x, this.vel.y).heading());
rotateY(createVector(this.vel.x, this.vel.z).heading());
beginShape();
// Draw Boid Vertices..
endShape();
pop();
But it doesn't.
I've written a much smaller version of the program which contains only the orientation for randomly generated particles that go in a single direction. It is available here directly on the p5js website : https://editor.p5js.org/itsKaspar/sketches/JvypSPGGh
There is a default orbit control so you can zoom and drag the mouse to check the orientation of the particles.
Thanks so much, I've been stuck on this for half a day now
From your demo, the z component is flipped, and you can test this from only trying one of the rotations at a time. Second, chaining rotations in 3D this way will usually not do what you want, as rotating will change the "up" or "right" vector of the coordinate system attached to a certain object. For example, rotating about the up (-y for p5) vector, or the yaw angle, will rotate the right vector. The second rotation then needs to be about the rotated right vector (now pitch), so you can't just use rotateX/Y/Z as they are still in world space instead of object space. Note that I'm completely ignoring roll in this solution, but if you look at the boids from the front and top angles, it should be aligned with the velocities
var right = p5.Vector(this.vel.x, 0, this.vel.z);
rotate(atan(this.vel.y/ this.vel.x), right);
rotateY(atan2(-this.vel.z, this.vel.x));
I get two (xy) coordinates dynamically, one defining the start and another defining the end of a curve. In order to generate a Bezier curve between them, I want to define a third (xy) coordinate as control - with a third point, I can draw a a Bezier curve perfectly, but my problem is that I do not know how to get the coordinate for the control point (xy).
For a line drawed by the xy start point and the xy end point (black line) I find one point in the coords xy (yellow circle) formed by the cross of drawing a intersection line (green line) in the middle of the line given and a 45 degrees staring in the xy start point (red line).
I added a image example to explain it better.
How can I create a triangle with rounded corners in EaselJS? I'm using drawPolyStar to create the triangle,
var polystar = new createjs.Shape();
polystar.graphics.drawPolyStar(100, 100, 60, 3, 0, -90);
This is an image of what I want the triangle to look like:
EDIT: Image link doesn't seem to work. This is what the triangle should look like :
But actual triangle has sharp corners.
There are no canvas APIs for rounding corners of polygons that works like the roundRect API.
There are a few approaches I can think of:
Do the round corners yourself using arcTo. This would take some math to figure out, and there may even be some libraries or examples floating around.
[EDIT] I spent a little time making a sample https://jsfiddle.net/lannymcnie/cga60tsf/1/
Using rounded stroke edges, you can sort of fake it. This fiddle shows how a thick line with round ends can make the outer edges look round. You could draw another smaller triangle on top to give the desired effect.
Sample
// Line outer radius
context.lineJoin = "round";
context.lineWidth = cornerRadius;
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.
I am trying to smoothen the transition from a diagonal line to a horizontal line by using arcs of circles that I calculate with a little calculus. The problem I am running into is that it seems as though I can't get the arcs to be positioned correctly.
For example: jsfiddle.net/5Wa9e/2
It might just be a problem with my calculations but from "inspection" it seems as though I have the right circles. I want the red points on the right to always be at the bottom of the circle at the point where the tangent is horizontal.
I am using: A#{radius},#{radius} 0 0 0 #{curveEndX},#{curveEndY}" to define the arc. Am I missing something?
--edit--
It was just my math. Turns out the arcs I see are just fallback mechanisms for when the SVG renderer can't find a circle matching my constraints.
--edit--
end result: jsfiddle.net/5Wa9e/2