G2d-mec NPM | npm.io

g2.mec.js

g2 extension for mechanical applications

Mechanical Symbols

g2.mec.js provides some useful mechanical symbols for the g2.js graphics library.

img.symbols.mec

Using these symbols is easily done with the help of the use command. While they are available through the g2.symbol namespace, the bare symbol name is sufficient as the first parameter. We can translate, rotate and scale the symbols as expected. Please note, that their line width is mostly immune against scaling.

    g = g2().use(g2.symbol.origin,{x:100,y:50});
    // or alternatively ...
    g = g2().use("origin",{x:100,y:50});

Mechanical Elements

g2.mec.js also provides some mechanical elements.

img.elements.mec

Element functions have individual arguments.

Element	Image	Meaning
`vec(p,r,style)`		Linear vector element by start point `p` and end point or direction `r`.
`avec(p,r,w,dw,style)`		Arc vector element by center point `p`, radius `r`, start angle `w` and angular range `dw`.
`dim(p,r,args)`		Linear dimension element by start point `p` and end point or direction `r`.
`adim(p,r,w,dw,args)`		Arc dimension element by center point `p`, radius `r`, start angle `w` and angular range `dw`.
`slider(p,w,args)`		Slider element by center point `p` and rotation angle `w`.
`spring(p,r,args)`		Symbolical Spring element by start point `p` and end point or direction `r`.
`damper(p,r,args)`		Symbolical Damper element by start point `p` and end point or direction `r`.
`ground(pts,closed,args)`		Polygonial ground element by points array `pts` and closed flag `closed`.
`bar(p,r)`		Bar element by start point `p` and end point or direction `r`.
`bar2(p,r)`		Alternate Bar2 element by start point `p` and end point or direction `r`.
`link(pts,closed)`		Link element by points array `pts` and closed flag `true,false`.
`link2(pts,closed)`		Alternate Link2 element by points array `pts` and closed flag `true,false`.
`beam(pts)`		Beam element by points array `pts`.
`beam2(pts)`		Alternate Beam2 element by points array `pts`.
`load(pts,spacing,style)`		Load element by points array `pts` and spacing `spacing` between arrows.
`pulley(p,r)`		Pulley element by center point `p` and radius `r`.
`pulley2(p,r)`		Pulley2 element by position `pos={x,y,w}` including rotation angle `w` and radius `r`.
`rope(p1,r1,p2,r2)`		Rope element tangential to two circles with given center points `p1` and `p2` and radii `r1` and `r2`. You can switch between the four possible tangents by the sign of the radii.

Mechanical Styles

There are some predefined colors, line styles and other constants. You can overwrite them, if you are not comfortable with it.

Name	Type	Default	Description
State	object		`g2` state namespace.
State.nodcolor	string	"#333"	node color.
State.nodfill	string	"#dedede"	node fill color.
State.nodfill2	string	"#aeaeae"	alternate node fill color, somewhat darker.
State.linkcolor	string	"#666"	link color.
State.linkfill	string	"rgba(200,200,200,0.5)"	link fill color, semi-transparent.
State.solid	array	[]	solid line style.
State.dash	array	15,10	dashed line style.
State.dot	array	4,4	dotted line style.
State.dashdot	array	25,6.5,2,6.5	dashdotted line style.
State.labelOffset	number	5	default label offset distance.
State.labelSignificantDigits	number	3	default label's significant digits after floating point.

Truss Example

You can see a simple truss below, composed from mechanical symbols and elements.

img.truss.mec

// g2.mec truss example ...
    var A = {x:50,y:50},  B = {x:250,y:50},
        C = {x:50,y:150}, D = {x:150,y:150},
        E = {x:50,y:250},
        g = g2()
             .cartesian()
             .link2([A,B,E,A,D,C])
             .vec(B,{dx:0,dy:-50},{lw:2,ls:"darkred"})
             .vec(D,{dx:80,dy:0},{lw:2,ls:"darkred"})
             .use("nodfix",A)
             .use("nod",B)
             .use("nod",C)
             .use("nod",D)
             .use("nodflt",{x:E.x,y:E.y,w:-Math.PI/2})
             .exe(document.getElementById("c").getContext("2d"));

Labels

If you want to add text to a geometric element, you can always use the basic txt element. However some element types support the smarter label element, which comes with a more intuitive relative positioning with respect to its nearest previous element. Reliable positioning requires always cartesian coordinates.

Element	Meaning
`label(str,loc,off)`	Label element placing string `str` at location `loc` using offset `off`.

Point like and rectangular elements provide locations according cardinal directions. Linear elements provide parameterized numerical or named locations.

Type	Elements	default	locations	offset
Point elements	`cir, use`	`c`	`ce,ne,n,nw,w,sw,s,se`angle in radians	number
Rectangular elements	`rec, slider`	`c`	`ce,ne,n,nw,w,sw,s,se`	number
Linear elements	`lin, vec, dimarc, avec, adimspring, damper` `bar, bar2`	`0.5`	`beg, mid, end` normalized numerical parameter	`left, right`number
Polygonial elements	`ply, groundlink, link2`	`0.5`	`beg, end` `#index` normalized numerical parameter	`left, right`number
Spline element	`spline`	`beg`	`beg, end` `#index`	`left, right`number

A numerical offset always means outside of closed shapes with regard to the specified point. With linear, polygonial and spline elements a positive value means right of and a negativ value means left of the line at the specified point. If there is no offset distance specified, the global g2.State.labelOffset's value is taken. Please note, that cardinal locations are not sensitive to transformations.

Truss Example with Labels

The truss example above can now be improved by adding labels.

truss with labels

  // g2.mec truss example with labels ...
     var A = {x:50,y:50},  B = {x:250,y:50},
         C = {x:50,y:150}, D = {x:150,y:150},
         E = {x:50,y:250},
         g = g2()
              .cartesian()
              .style({foz:12,fof:"cursive",foc:"green"})
              .bar2(A,B).label("1")
              .bar2(A,C).label("2")
              .bar2(A,D).label("3")
              .bar2(B,D).label("4")
              .bar2(C,D).label("5")
              .bar2(C,E).label("6")
              .bar2(D,E).label("7")
              .style({foc:"@nodcolor"})
              .vec(B,{dx:0,dy:-50},{lw:2,ls:"brown"}).label("F","end","left")
              .vec(D,{dx:80,dy:0},{lw:2,ls:"brown"}).label("2F","end")
              .use("nodfix",A).label("A","w")
              .use("nod",B).label("B","se")
              .use("nod",C).label("C","w")
              .use("nod",D).label("D","ne")
              .use("nodflt",{x:E.x,y:E.y,w:-Math.PI/2}).label("E","e")
              .style({ls:"@dimcolor",foc:"@ls"})
              .dim({x:A.x,y:275},{dx:100,dy:0}).label("b")
              .dim({x:D.x,y:275},{dx:100,dy:0}).label("b")
              .dim({x:275,y:E.y},{dx:0,dy:-100}).label("b")
              .dim({x:275,y:D.y},{dx:0,dy:-100}).label("b")
              .exe(document.getElementById("c").getContext("2d"));

Markers

Markers can be placed onto the outline of the nearest previous element.

Element	Meaning
`mark(type,loc,dir)`	Marker element placing marker symbol `type` at locations `loc` regarding to direction `dir`.

Elements with a unique center and rectangular elements provide locations according cardinal directions. Linear elements provide parameterized numerical or named locations. The spline element only support indexed locations. It does not support parameterized locations.

Type	Elements	default	locations	dir
Centered elements	`cir`	`c`	`ce,ne,n,nw,w,sw,s,se`normalized parameter	`-1,0,1`
Rectangular elements	`rec, slider`	`c`	`ce,ne,n,nw,w,sw,s,se`	`-1,0,1`
Linear elements	`lin, vec, dimarc, avec, adimspring, damper` `bar, bar2`	`0.5`	`beg, mid, end` normalized numerical parameter	`-1,0,1`
Polygonial elements	`ply, groundlink, link2`	`0.5`	`beg, end, mid, all` `#index` normalized numerical parameter	`-1,0,1`
Spline element	`spline`	`beg`	`beg, end, mid, all` `#index`	`-1,0,1`

API Reference

See the API Reference for details.

Tests

See this growing table of test cases with canvas and svg output side by side.

GitCDN

Use the link https://gitcdn.xyz/repo/goessner/g2-mec/master/g2.mec.min.js for getting the latest commit as a raw file.

In HTML use ...

<script src="https://gitcdn.xyz/repo/goessner/g2-mec/master/g2.mec.min.js"></script>

License

g2.mec is licensed under the terms of the MIT License.

#Change Log

0.4.7 - 2016-09-09

Modified

label offset bug removed.

0.4.5 - 2016-08-01

Modified

Use of mark and label element requires cartesian flag set from now on.
use command execution simplified.
styling bug with g2.prototype.use removed.

0.4.4 - 2016-06-21

Added

g2.spline performing 'centripetal Catmull-Rom' interpolation.

Modified

modified g2.prototype.ply.iterator integrated.

0.4.0 - 2016-05-24

Added

link, bar, pulley, rope elements added.

0.3.0 - 2016-05-13

Changed

Fundamental changes also affecting the api.
See documentation and API for details. @goessner.

0.2.3 - 2016-05-03

Changed

Transformation bug removed @goessner.

0.2.0 - 2016-01-10

Added

CHANGELOG.md @goessner.

vector graphics 2d command queue canvas svg javascript mechanical mechanism

@everything-registry/sub-chunk-1716 @zalastax/nolb-g2 @infinitebrahmanuniverse/nolb-g2

0.4.7

8 years ago

0.4.6

8 years ago

0.4.5

8 years ago