<
>
Shapes
A shape tree is a prototype tree whose nodes are shapes. Shapes inherit from the prototype svg.Element, and each shape corresponds to a particular element in the SVG library, a standardized API that is available in any web browser. At any given time the content that is displayed by PrototypeJungle is the shape tree root. When an image generator is loaded via, e.g.
http://localhost:8081/draw.html?source=/generators/lines_chaos_within_order.mjs
the object which it exports (conventionally named "rs") is bound to root, and its content is made visible.
A shape tree's internal nodes are created by the operations:
containerShape.mk();
and
arrayShape.mk();
while its leaf nodes are elementary shapes like circles and lines. The prototypes for these elementary shapes are found in /shape/<shapeName>
The following operation applies to nodes created by containerShape.mk():
nd.set(name:string,shp:shape)
This adds shp as a child of nd under the given name. After this operation, nd.<name> will evaluate to the newly added shape.
For nodes created by arrayShape.mk(), the operations
nd.push(shp.shape)
and
nd[n:number]
apply with their usual meantings.
Operations that apply to any node nd in a shape tree are
nd.moveto(pnt:Point) nd.hide(); nd.show();
See the documentatation of image generators, or the source files for any of the dozens of images that come with PrototypeJungle, for examples of how shapes are created and used.
Here are the elementary shapes supported by PrototypeJungle, and their properties;
line
Acessed via:
import {rs as linePP} from '/shape/line.mjs';
Properties of line ln,
| Property | Type |
| ---------------------------------------- | |
| ln.stroke | color string such as 'blue', 'rgb(10,20,30)', or 'rgba(200,100,50,.5)' |
| ln.fill | color string |
| ln['stroke-width'] | number |
| ln.end0 | Point |
| ln.end1 | Point |
Operations:
ln.setEnds(end0:Point,end1:Point) => null
This corresponds to the SVG line element.
rectangle
Acessed via:
import {rs as rectPP} from '/shape/rectangle.mjs';
Properties of rectangle r,
| Property | Type |
| ---------------------------------------- | |
| r.stroke | color string such as 'blue', 'rgb(10,20,30)', or 'rgba(200,100,50,.5)' |
| r.fill | color string |
| r['stroke-width'] | number |
| r.width | number |
| r.height | number |
This corresponds to the SVG rect element.
circle
Acessed via:
import {rs as circlePP} from '/shape/circle.mjs';
Properties of circle c,
| Property | Type |
| ---------------------------------------- | |
| c.stroke | color string |
| c.fill | color string |
| c['stroke-width'] | number |
| c.radius | number |
This corresponds to the SVG circle element.
polyline
Acessed via:
import {rs as polylinePP} from '/shape/polyline.mjs';
Properties of polyline ln,
| Property | Type |
| ---------------------------------------- | |
| ln.wayPoints | array of Points |
| ln.stroke | color string |
| ln['stroke-width'] | number |
This corresponds to the SVG polyline element.
polygon
Acessed via:
import {rs as polygonPP} from '/shape/polygon.mjs';
Properties of polygon pg,
| Property | Type |
| ---------------------------------------- | |
| pg.corners | array of Points |
| pg.fill | color string |
| pg.stroke | color string |
| pg['stroke-width'] | number |
This corresponds to the SVG polygon element.