I am using Three.js to render the graphical representation of a gerber file.
The specification allows you to render lines with either a circular or rectangular "aperture".
The result with a circular aperture should have round endings. The result with a rectangle is dependent on the orientation of the aperture as described in the specification.
The specification gives the following example images to illustrate.
What would be the best way to achieve this in Three.js?
The gerber specification further limits arcs to only being drawn with circular apertures, but assuming someone wanted to draw line segments in any arbitrary 2D shape what would be the best approach?
I know in 3D to perform a union it would probably be best to use Constructive Solid Geometry. I assume I could do the same in 2D by simply using an extruded form of the shape, but I would prefer to remain in 2D if possible.
The gerber format is basically just a binary rendering with Dark and Clear draw operations which either draw (Dark) or erase (Clear) what is being stroked. I figure the easiest way to achieve this would be to pick two colors (BG color and Shape color) and just draw primitives one after another with the most recent drawn on top. I figured this would be easier to manage restricting to 2D only. If someone has a better suggestion I would be interested to hear that as well.
Related
I want to make a shape (an XP bar) to always be ordered at the top of all shapes drawn.
How would this be possible, (I also use p5.js too, if that helps.) other than drawing it last (which I cannot do in my situation).
You've got two main options:
Option one: Draw it last. This is the easiest way to do it. If you "cannot" do it this way for some reason, that sounds like you need to refactor your code then.
Option two: Use 3D coordinates to draw it with a Z coordinate that's closer to the user. Most drawing functions can take 3D coordinates instead of 2D coordinates. This should work, but it's more complicated than just drawing it last.
I am wondering if anyone has heard of some javascript which can take a simple SVG path that took maybe 30 seconds to create in illustrator or something and convert it into something that looks 3d. There is an extrude function in illustrator which does this. It is also called polling in sketchUp.
I am using Raphael.js now, but am open to other suggestions. A simple solution would be to make a copy of the path and move it a couple pixels down and to the right and give it a darker color behind the original path, but I am looking for something that might have a little more shading.
Thanks!
There is always a possibility to use three.js for extruding the path for use in webGL in browser:
http://alteredqualia.com/three/examples/webgl_text.html#D81F0A21010#23a
(More samples here:http://stemkoski.github.io/Three.js/)
It uses js-fonts and parses the path commands on them, extrudes the paths and renders the scene. In the same way it should be possible to take an SVG path and extrude it. Raphael has Raphael.parsePathString() which gives you the path segments as an array of individual segments. If you first convert the path commands to cubic curves using Raphael.path2curve() and Raphael._pathToabsolute(), you have only only one segment type so you can use three.js:s BEZIER_CURVE_TO command. If you have transformations applied on the path (which is usually the case in Illustrator export) you can flatten them using function from here: https://stackoverflow.com/a/13102801/1691517.
One possible starting point is here (click the fiddle of the answer):
Extruding multiple polygons with multiple holes and texturing the combined shape
Three.js supports few path commands, but have not tested all of them (
http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html, see below).
THREE.PathActions = {
MOVE_TO: 'moveTo',
LINE_TO: 'lineTo',
QUADRATIC_CURVE_TO: 'quadraticCurveTo', // Bezier quadratic curve
BEZIER_CURVE_TO: 'bezierCurveTo', // Bezier cubic curve
CSPLINE_THRU: 'splineThru', // Catmull-rom spline
ARC: 'arc' // Circle
};
I have used a custom rather complex function to polygonize SVG path, so was no need to rely to other commands than moveto and lineto.
The downside is of course rather low support level for webGL, 31-53%: http://caniuse.com/webgl
Other more cross-browser solution is this SVG3d library if lesser quality and slowness is not an issue:
http://debeissat.nicolas.free.fr/svg3d.php
https://code.google.com/p/svg3d/
I think this resource could be helpful to you, he uses d3 to generate 2D visualization and then uses d3-threeD to extrude.
Sounds like you want to use svg filters. Webplatform.org has a pretty good tutorial about that. Scroll down a bit and you'll find some lighting filters that looks like 3d.
Raphaël doesn't support filters though, so either you'll need to extend it, or just use svg directly.
First off I'm not used to dealing with images, so if my wording is off please excuse me.
I am looking to take an image that is dropped onto a HTML5 canvas, sample it, do a reduction of the sampling, then create a polygonal representation of the image using mostly triangles with a few other polygons and draw that image to the canvas.
But I do not know where to start with an algorithm to do so. What sort of pseudocode do I need for this kind of algorithm?
This image may offer a better understanding of the end result:
I would do the following:
Create a field of randomly-placed dots.
Create a Voronoi diagram from the dots.
Here's a good JavaScript library that I've used in the past for this: https://github.com/gorhill/Javascript-Voronoi
Color each cell based on sampling the colors.
Do you just pick the color at the dot? Sample all the colors within the cell and average them? Weight the average by the center of the cell? Each would produce different but possibly interesting results.
If the result needs to be triangles and not polygons, then instead of a Voronoi diagram create a Delaunay triangulation. GitHub has 15 JavaScript libraries for this, but I've not tried any to be able to specifically recommend one.
Ok, it's a bit indirect, but here goes.....!
This is a plugin for SVG that turns images into pointilized art: https://github.com/gsmith85/SeuratJS/blob/master/seurat.js
Here's the interesting part. Under the hood, it uses canvas to do the processing!
The examples show images composed of "dots" and "squares".
Perhaps you can modify the code to produce your triangles -- even just cut the squares diagonally to create triangles.
I am attempting to use an html canvas element to draw each character available in a font file to a canvas. To make this question as simple as possible, pretend only one character is drawn to a canvas. From there, I want to use Javascript to analyze the canvas and create triangle regions of the canvas that make up the entire character. The reason I need it in triangles is so that the data can later be sent to WebGL so text can be rendered and data will not be lost be scaling the text size up or down.
I am looking for some sort of algorithm to accomplish this or at least some knowledge to get me going in the right direction. If you believe I should use a different approach please tell me why, but I figured this would be the best to provide a way to modify text in many ways as well as make it possible to create 3d block text.
Here's an article on how to draw resolution independent curves with shaders
http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf
My understanding is instead of breaking the shapes into triangles you break them into quads with enough info sorted in the vertices to draw a portion of the curve inside each quad. In other words, as the shader draws each quad there's a formula that for each pixel can compute if that pixel is inside the curve or outside the curve.
I suggest you to start with the keyword Polygon Triangulation.
Using this methods, you can split n-Polygons into triangles like this:
These methods may only apply to figures with real (and not rounded) edges.
So, you are trying to convert a raster image into vector data?
When zoomed in, that will result in very jagged looking geometry.
Since each pixel is being treated as a square edged part of the geometry.
Couldn't you get your hands on the original vector (bezier curve) geometry for each glyph you are drawing?
Transforming that into triangle strips and fans would look smoother.
Does anybody know how I might change the circles in this graph http://bost.ocks.org/mike/nations/ to be triangles and still dynamically grow and shrink?
There are a variety of ways to create triangles; one way to do this without doing any geometry yourself is to use d3.svg.symbol with the type "triangle-up". Like so:
http://bl.ocks.org/3244058
I think that the code is almost the same, but instead of drawing circles, you need to compute the vertices of a polygon with three edges. Is important that the area of your triangle to be proportional to the value that it represents. Take a look to the polygon documentation https://github.com/mbostock/d3/wiki/SVG-Shapes