I want to use HTML5 canvas to draw a large circle and then evenly space x number of circles around it's path,
So far I have modified this: http://jsfiddle.net/m1erickson/pL5jP/
To this: http://jsfiddle.net/dQUxy/6/
I can get them how I want if I draw them manually like so (example)
Draw(startx, starty);
Draw(startx+47, starty+47);
Draw(startx+80, starty+80);
Not very elegant. What would be the mathematical solution to drawing say, 14 circles evenly spaced around the path?
Never mind, I found raphael.js which did the job elegantly
http://raphaeljs.com/hand.html
Related
I want to implement rotating rectangle around cicrle in such way, that circle has no rotation, and rectangle has. All object's are Box2D Body objects. Here is picture, what I want to have:
In my case rectangle touches circle, but I think it doesn't matter.
At first I tried to do it with two Fictures for same Body, but there was a problem with rotation: I couldn't have one ficture with rotation and another without.
I think, it should be somehow connected with joints, but I don't know what exactly Joint I should use. Maybe are there another solutions?
I think DistanceJointDef will do the tricks
you could put the radius if the circle as the distance with a little margin if you want
you also have to reduce the friction of bodies so the rectangle can move smoothly
DistanceJointDef djd = new DistanceJointDef();
djd.bodyA = bodyRactangle;
djd.bodyB = bodyCirlce;
djd.length = radius + margin;
world.createJoint(djd);
bodyRactangle is a dynamic body
bodyCirlce is a static body
try that for a start, hope it is helpful
Good luck !!
I'm developing a simple a graphical editor for my flash-based app. In my editor there's a posibility of scaling, range of scaling is big (maximum scale is 16.0, minimum scale is 0.001 and default scale is 0.2). So it's quite possible that a user can draw a line with thickness 0.1 or 300.0, and it looks that line possible thickness (in Graphics.lineStyle()) has upper border. As I found out from livedocs maximum value is 255. So if thickness is greater then 255.0 there'is drawn a line of thickness 255.0. Whether mentioned upper border exists and how big is it. Here're my questions:
Right now I'm drawing lines with drawPath() or lineTo() methods. Natural walkarround if thickness is greater then 255.0 is to draw a rectange instead of segment and two circles on the ends of segment (instead of lineTo()). Or even to draw two thin segments and two half-circles and fill interior. Maybe there's more elegant/quick solution?
Another question is if the thickness of line is big but less then 255.0 (e.g. 100.0), what is faster drawing a line with lineTo() or drawing two thin segments and two half-circles and fill interior?
And finally, maybe someone knows a good article/book where I can read what's inside all methods of flash.display.Graphics class (or even not flash specific article/book on graphics)?
Any thoughts are appreciated. Thank you in advance!
I agree with f-a that putting the line in a container would probably be better and more efficient than drawing a rectangle and extra circles.
I don't think that the math would be too difficult to work out. For efficiency you should probably only do this if the line style is going to be over 255.
To setup the display object to hold your line I would start by halving the width of your line (the length can stay the same). Then create a new sprite and draw the line in the sprite at half size (e.g. if you wanted 300, just draw it at 150). It would be most simple to just start at (0,0) and draw the segment straight so that all of your transformations can be applied to the new sprite.
From here you can just double the scaleY of the sprite to get the desired line weight. It should keep the same length and the ends should also be rounded correctly.
Hope this helped out!
A cool resource for working with the graphics class is Flash and Math. This site has several cool effects and working examples and source code.
http://www.flashandmath.com/
Currently, when using the HTML5 canvas element, stroked paths have slightly feathered edges.
Here is some example code I am using:
this.context.lineJoin = "round";
this.context.lineTo(x1, y1);
this.context.lineTo(x2, y2);
this.context.closePath();
this.context.stroke();
I was wondering if there was a way to create lines without slightly feathered edges.
When drawing lines, canvas automatically antialiases them, which is what you describe as feathered edges.
To avoid antialiasing, you will need to draw the lines manually using putImageData directly. (see MDN for canvas pixel manipulation)
A suitable algorithm for this is Bresenham's line algorithm which is quite easy to implement for JS/canvas.
Canvas uses subpixel accuracy.
Add 0.5 to your coorxinates. 0.0 is the border between pixels and thus line falls on two image data pixels.
This is my firs excursion on the HTML5 canvas, I have working knowledge of jQuery and Javascript.
I'm trying to create a "spinning globe" effect with it.
The idea is to have a circle and meridians "spinning" on it, to give the effect of a rotating globe.
I've drawn the circle and now I'm trying to create lines that start from the right (following the curve of the circle), move towards the centre straightnening up (in the middle they are straight) and follow the inverse curvature on the left, ending with the circle.
I'm trying to do this with the HTML5 canvas and jQuery but I'm not sure of where to start... should I create an arc and then try to animate it?
I'm even wondering if the canvas is the right tool or if I should use anything else.
Any suggestion is welcome!
Sebastian
You could use a quadratic bezier curve, which is basically just a curve with a start point, an end point, and a "control point" in the middle, which is what you would want to change as the globe spins. In this case, all of your lines would start and end at the north and south poles, respectively, of your "globe". For example, to make one of these lines:
// start drawing a line
canvas.beginPath();
// move the the top of your globe
canvas.moveTo(0,0);
/* draw a curve with the control point specified by the first two args,
* end point by the second two:
* (in your case, the control point would be in the middle of the globe) */
canvas.quadraticCurveTo(control_point_x, control_point_y, 0, 50);
// finish drawing, stroke and end
canvas.stroke();
canvas.closePath();
You would also have to take in to account how you will clear the lines after each frame, of course.
See: The Canvas element API, Complex Paths
This is what I got, didn't have the time to proceed any further: http://jsfiddle.net/Z6h3Z/
I use bezier curves where the two control points are in a sort of oval arc centered at the poles.
What I got stuck at is the distribution of points along the arc to look more realistic.
I'm trying to code a 3d wall like
http://www.flashloaded.com/flashcomponents/3dwall/
The shape I am looking to create is like a bath or arena where it is a curve cornered rectangle with sloping sides.
The image below shows what i'm trying to achieve if viewed from above. I hope that helps.
Can anyone give me some ideas on the maths to create this shape using primitive rectangle shapes.
Thanks,
Josh
http://en.wikipedia.org/wiki/Matrix_multiplication
http://en.wikipedia.org/wiki/Transformation_matrix
http://www.devmaster.net/wiki/Transformation_matrices
A rectangle has 4 3D points (vectors)
Define a vector this way
To move/rotate/scale just multiply each vector by the transformation matrix.
This matrix rotates around X-axis:
For perpective projection (camera) look at: http://en.wikipedia.org/wiki/3D_projection
For example: you can create rectangles and rotate them around an axis to create a cylinder like this:
(source: flashloaded.com)
your pit:
note: the angle is not correct, it should be pi-a (180ยบ-a)
create all rectangles centered at origin (0,0,0), then rotate them as needed and move to desired position. I recommend you to code the matrix routines first like rotate(), move(), scale() and a simple paint function (just line drawing, without perspective) the rest is just playing with the matrices.