EaselJS triangle with rounded corners? - javascript

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;

Related

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.

What is the best way to programatically draw the border(s) of a group of squares?

I am building a tool which will ultimately leverage the Google Maps API v3 to build up an area on a map constructed of squares of a fixed edge length (e.g. 10 metres) on a fixed “grid” system (e.g., co-ordinates spaced out every 0.0001 latlong units starting at earth’s 0,0 point).
I have written code where users can click on an area on the map and the code draws an outline and fill of the square where it's found. Users can click on other adjacent locations to that square to build up a larger and larger “blocky” polygon, and can click on individual squares to delete them. I have tested all this myself in both HTML5 canvas/JavaScript as well as the Google Maps API.
Now I want to write code that removes any internal edges/vertices so that it only draws the outermost boundaries of this polygon so that it is actually drawn as one large polygon, rather than a collection of squares. Think of it this way: even though we know countries like Australia, USA etc., are comprised of a number of states, when we draw the border around the country we are not usually interested in the borders of all the states and can delete those lines in between and just draw the outer boundary. This is the same thing I want to accomplish, just using a grid of squares rather than complex polygons.
My current code is here:
https://jsfiddle.net/wyxcvmdf/14/
HTML:
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #000000;"></canvas>
<!--etc.-->
JavaScript:
// don't forget to set load type in jsfiddle to no wrap in <body>
// define the global variable and some helper variables to make the code shorter
var gv = {};
gv.o = function(id) {
return document.getElementById(id)
};
gv.i = 'innerHTML';
// etc.
A couple of explanatory notes about my code:
• The “origin point” for every square is the vertex at the bottom left corner of that square. No particular reason for this.
• The “drawing direction” in terms of how HTML5 canvas draws the outline is counter-clockwise from the origin point. Again, no particular reason for this.
• You can’t “click” to add squares yet as it’s just a proof of concept, so you add squares by entering the x and y co-ordinates in the relevant text entry boxes
The use cases/tests required to prove my code which I have thought of are:
Square added to polygon with 1 duplicate vertex (working)
Square added to polygon with 2 and 3 duplicate vertices in all cases: adjacent edges, non-adjacent edges, non-sequential vertices (currently working for first case only)
Square added to polygon with 4 duplicate vertices in all cases: plugging a hole, plugging part of a hole, joining multiple polygons (currently working for first case only)
Square removed from polygon with 1 duplicate vertex in cases described above (not developed yet, but should effectively be “reverse” of addition code)
Square removed from polygon with 2 and 3 duplicate vertices in cases described above (not developed yet, but should effectively be “reverse” of addition code)
Square removed from polygon with 4 duplicate vertices in cases described above (not developed yet, but should effectively be “reverse” of addition code)
Square addition/removal on outside of polygon with multiple inner borders, i.e., holes (not developed yet, may be tricky)
Square addition/removal on inside of polygon with multiple inner borders, i.e., holes (not developed yet, may be tricky)
Note 1: My use of “squares”, “edge” etc., instead of "polygons", etc., is just for simplicity of explanation.
Note 2: I have performed quite a bit of research on similar problems and possible solutions but haven’t really found anything which will meet my needs. The research I’ve done is on:
Travelling Salesman Problem. However, this is not about optimising a path – it is about making sure a path is “drawable” and hence heading in one direction. Overlapping vertices are totally fine as long as the resulting shape looks like what a user would expect it to.
Convex hull algorithm. Not really applicable as the hull could be convex, concave or even non-contiguous! Also, I think that by simplifying to a grid system I have removed the problem of having many scattered vertices where you need to determine how far they are from a centre point, use trigonometry etc.
Concave hull solutions. This gets closer to solving my problem, however what I have seen is that there are many plug-ins for commercial tools (e.g. ArcGIS) to do this, but no generic code (irrespective of programming language) which covers all of my use cases.
Tile-based games. You would think that any tile-based game which requires drawing boundaries around tiles (e.g. A player’s territory in a real-time strategy game) would have solved this problem, but not from what I can see.
You say "draw" rather than calculate the outside vertices, so ...
You can use clipping plus compositing to "hollow out" your set of squares.
Assume you have determined that these squares are inside your desired boundary (either partially or fully inside):
var aInside=[ {x:60,y:60},{x:80,y:60},{x:40,y:60},{x:60,y:40},{x:60,y:80} ];
An illustration of squares that are inside your desired boundary.
Then, to draw just the boundary of the set of squares, you can:
Stroke (not fill) each of your inside squares: context.rect
Restrict futher drawing to the stroked rects: context.clip
Cause all new drawing to erase existing pixels: context.globalCompositeOperation = 'destination-out'
Fill the entire canvas with a solid color: context.fillRect(0,0,canvas.width,canvas.height).
The trick: Stroking a rectangle actually draws a stroke half-inside & half-outside the rectangle, so step#4 will erase the inside of the set of rectangles but (importantly!) will leave the half outside stroke.
So you end up with this:
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var aInside=[ {x:60,y:60},{x:80,y:60},{x:40,y:60},{x:60,y:40},{x:60,y:80} ];
// stroke all inside squares
ctx.save();
ctx.beginPath();
for(var i=0;i<aInside.length;i++){
var s=aInside[i];
ctx.rect(s.x,s.y,20,20);
}
ctx.stroke();
// clip to cause all new drawing to be inside the stroked squares
ctx.clip();
// set compositing to use new drawings to "erase" existing drawings
ctx.globalCompositeOperation='destination-out';
// Fill (===erase!) the entire canvas
// Clipping causes only the clipping area to be erased
// so the inside of the rects set is "hollowed out"
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.restore();
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=150 height=150></canvas>
An Algorithmic Note: If you want a set of the surviving vertices rather than a drawing, you can modify the Marching Squares Algorithm to return only the inflection points. Those inflection points are the vertices of your outside boundary.
This method addresses only drawing/appearance - it does not produce any new polygons. But it allow you to use a collection of polygons (any shape, here rectangles) and merge them visually to produce a merged outline. I base this answer on one of my earlier answers, but modified and adopted to fit the scenario here:
Draw all the rectangles as solids
Re-draw them offset around all edges and corners extruded to the thickness you want
Redraw the original rectangles but with global composite mode set to destination-outand centered on top
There are a few steps, but it works pretty fast.
A couple of notes:
If you have an existing background it would be necessary to use an off-screen canvas as a temporary stage. Not shown here, though the steps would be the same except that you would do these steps on the off-screen context and at the end you would copy the content from the off-screen canvas on top of the existing content of your display canvas.
If you have a lot of rectangles it can be optimized by drawing each single rectangle to a separate off-screen canvas without redrawing anything else. Then you just use this off-screen canvas as a source when you do the extrusion process shown below (see link above for example, just replace image with off-screen canvas itself as source).
It can be further optimized by checking if a rectangle is embedded and if so remove it from the collection.
Demo
var ctx = c.getContext("2d"),
rw = 50, rh = 50, // some demo size
rectangles = []; // rectangle collection
function render(ctx) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = "#a00";
ctx.globalCompositeOperation = "source-over"; // draw using standard mode3
// we will draw the same rects on top of each other eight times
// this will extrude the edge so we can in the next step punch a
// hole in the drawing and leave only the extrusion -
// offset array (x,y) pairs
var i, d = 2, // d = number of pixels to offset
offsets = [-d, -d, 0, -d, d, -d, d, 0, d, d, 0, d, -d, d, -d, 0];
for(i = 0; i < offsets.length; i += 2) {
ctx.setTransform(1,0,0,1, offsets[i], offsets[i+1]);
drawRects()
}
// punch hole in the center
ctx.setTransform(1,0,0,1,0,0); // reset transformatons
ctx.globalCompositeOperation = "destination-out"; // "erase" mode
drawRects(); // draw a final time, wo/ extrusion
function drawRects() {
ctx.beginPath();
rectangles.forEach(function(r) {
ctx.rect(r.x, r.y, r.w, r.h)
}); // loop through collection and draw
ctx.fill()
}
}
// demo stuff --
c.onclick = function(e) {
var r = this.getBoundingClientRect(), // for demo, get mouse position
x = e.clientX - r.left,
y = e.clientY - r.top;
// add rectangle to list
rectangles.push({ // generate a rect. from center
x: x - rw*0.5,
y: y - rh*0.5,
w: rw,
h: rh
});
render(ctx); // the key process
};
canvas {border:1px solid #000}
Click on the canvas below to place rectangles:<br>
<canvas width=600 height=600 id=c></canvas>

Agar.io style ripple effect for canvas arcs

I really love how they created the online game agario. I have been thinking: "How did they created this ripple effect for the edges?"
There are a few things I could think of:
1) The border is made of many vector points, therefore allowing flexible animation of the border.
2) The border is a predefined gif like animation.
3) There are many invisible pixels around the edge. They loop around the arc and activate a few groups of those pixels, therefore creating an illusion that the border is "contracting" and "retracting".
How can something like this be done in HTML5 canvas? Do you think one of my 3 ideas for a solution apply or is it more complex than that?
What you can do is repeatedly draw a sine wave around the circumference of a circle.
The equations to get the sine wave [x,y] point at any angle around a circle are:
var x = centerX+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
var y = centerY+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);
The centerX, centerY and radius define the circle.
The amplitude determines how far from the circle's circumference the sine wave will travel.
The sineCount is the number of complete sine waves that will be drawn around the circle.
The angle is the current angle around the circle which you desire the "sined" [x,y].
Here's an example and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cx=150;
var cy=150;
var radius=100;
var amp=10;
var sineCount=10;
ctx.beginPath();
for(var i=0;i<360;i++){
var angle=i*Math.PI/180;
var pt=sineCircleXYatAngle(cx,cy,radius,amp,angle,sineCount);
ctx.lineTo(pt.x,pt.y);
}
ctx.closePath();
ctx.stroke();
function sineCircleXYatAngle(cx,cy,radius,amplitude,angle,sineCount){
var x = cx+(radius+amplitude*Math.sin(sineCount*angle))*Math.cos(angle);
var y = cy+(radius+amplitude*Math.sin(sineCount*angle))*Math.sin(angle);
return({x:x,y:y});
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>
(late reply but probably more accurate than the accepted answer)
I was also wondering how this effect was done and since I couldn't find any informations about it I decided to dive into the obfuscated code.
Firstly, one should note that the cells are not circles but rather polygons. Every point of the polygon is constrained to keep the same distance from the center, which makes the calculations much easier. In addition each point has a velocity which is represented by a scalar (a positive velocity tends to move the point away from the center while a negative one will bring it closer). Whenever a point is out of the map or touches another point of a different cell, its velocity is decreased. At each iteration the velocity is added to the point and then increased by a small amount (natural decay).
With this set of rules and some (minor) additional constraints you should be able to reproduce this effect. I tried myself and ended up with a pretty good result.
Edit: I also made a Scala.js fiddle: https://scalafiddle.io/sf/FMoNM7c/0

Drawing asymmetrical ellipses in HTML5 Canvas using js?

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.

Canvas coordinates in Fabric.js have offset

I just started with fabric.js and I have a (probably beginner) error:
I am using fabric with jquery with the following code:
$(document).ready(function () {
canvas = new fabric.StaticCanvas('scroller');
canvas.add(
new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' })
);
});
This code should draw a 140x100 Rectangle on the canvas.
Sadly, only a quarter of the Rectangle appears.
If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas.
So it seems, that the canvas origin is not at 0/0, but at sth. higher.
Does someone know how to fix this or what I am doing wrong?
Thanks in advance,
McFarlane
Here is a jsfiddle link with some examples http://jsfiddle.net/pukster/sdQ7U/2/
My guess is that fabric.js calculates everything from the origin (middle point) since it is drawing exactly one quarter of a rectangle even with a canvas 10 times the size of the rectangle. My guess is that top and left actually refer to the origin and not the top and left sides of the imaginary bounding box. Trouble is there is very little documentation on fabricjs. Is there any reason you are using fabricjs and not easeljs
EDIT Here's the same fiddle but with squares instead of rectangles (it is more clear) http://jsfiddle.net/pukster/sdQ7U/3/
EDIT OK I am now almost absolutely certain that fabric.js uses the center as the top/left. I ripped their example off of their site and overlayed it with the transparent couterpart to those shapes had they been coded in pure canvas http://jsfiddle.net/pukster/uathZ/2/ (blue border is the limit of the canvas element).
What you see is that the boxes are exactly offset by half but the circle (I only drew a semi circle otherwise it would not have been discernable) is perfectly overlapped. This is b/c in HTML Canvas, the circle coordinates (x,y) refer to the origin and not the top left. I did not bother with the triangle b/c my trigonometry is a bit rusty. I personally think it's misleading to use the terms top and left, when x and y would have been more representative and shorter.
Yes, this is highly unexpected and even more undocumented.
Workaround:
Set
originX: "left"
originY: "top"
for each created object.
edit: or use kangax simpler solution in the comment below.
I want to comment but lack the reputation to do so. So anyway, here is what happens when I do the following:
fabric.Object.prototype.originX = "left";
fabric.Object.prototype.originY = "top";
The shape gets rendered fine but when I select it for resizing or moving, it gets offset to a different location. The best approach seems to be to set the coordinates for every object separately using the set() method.

Categories