File*
Docs
Download
What do I make?/*
@title: Fractal Collection
@author: Guy Sandler
@snapshot: snapshot_1.png
*/
const FractalChoise = 0 // 0 Koch Snowflake | 1 Sierpinski Pentagon | 2 Sierpinski Triangle | 3 Tree
const detail = 7 // how much detail/loops in the function
const size = 85 // size of fractal
const width = 125;
const height = 125;
setDocDimensions(width, height);
const fractal = [];
const t = new bt.Turtle();
function snowflake(turtle, sample, length) { // recursive function because fractals repeat themself
if (sample == 0) {
turtle.forward(length) // ends recursive function
} else {
for (let angle of [60, -120, 60, 0]) {
snowflake(turtle, sample - 1, length / 3)
turtle.left(angle)
}
}
}
// pentagon
function draw_pentagon(turtle, length) {
for (let i = 0; i < 5; i++) {
t.forward(length)
t.left(72)
}
}
function draw_sierpinski_pentagon(turtle, sample, length) {
if (sample == 0) {
draw_pentagon(t, length)
} else {
for (let i = 0; i < 5; i++) {
draw_sierpinski_pentagon(turtle, sample - 1, length / 2.6)
t.up()
turtle.forward(length)
turtle.left(72)
t.down()
}
}
}
// triangle
function draw_triangle(turtle, length) {
for (let i = 0; i < 3; i++) {
t.forward(length)
t.left(120)
}
}
function draw_sierpinski_triangle(turtle, sample, length) {
if (sample == 0) {
draw_triangle(t, length)
} else {
for (let i = 0; i < 3; i++) {
draw_sierpinski_triangle(turtle, sample - 1, length / 2)
t.up()
turtle.forward(length)
turtle.left(120)
t.down()
}
}
}
// tree
function tree(turtle, sample, length) {
if (sample > 0) {
turtle.forward(length)
turtle.right(20)
tree(turtle, sample - 1, length / 1.5)
turtle.left(40)
tree(turtle, sample - 1, length / 1.5)
turtle.right(20)
turtle.forward(-length)
}
}
if (FractalChoise == 0) {
for (let i = 0; i < 3; i++) {
snowflake(t, detail, size)
t.right(120)
}
}
if (FractalChoise == 1) {
draw_sierpinski_pentagon(t, detail, size)
}
if (FractalChoise == 2) {
draw_sierpinski_triangle(t, detail, size)
}
if (FractalChoise == 3) {
// t.right(180)
t.left(90)
tree(t, detail, size)
}
// add turtle to final lines
bt.join(fractal, t.lines());
// center piece
const cc = bt.bounds(fractal).cc;
bt.translate(fractal, [width / 2, height / 2], cc);
// draw it
drawLines(fractal, { fill: "none", stroke: "black", width: 1 });
The Toolkit
This is a quick reference sheet. For full documentation refer to this.
For an introduction to Blot check out this guide.
Check out our 38 second trailer for a brief overview of the whole Blot project.
There are three names that provide functionality available in the Blot editor:
setDocDimensions, drawLines, and blotToolkit (which can also be referenced as bt).
The first two affect the drawing environment itself, and the blotToolkit is used for creating line drawings.
Environment Affecting
setDocDimensions(width: number, height: number)
drawLines(polylines: [number, number][][])Modify Polylines
Take and modify polylines in place returns first passed polylines.
These functions are available in the blotToolkit or bt object.
bt.iteratePoints(polylines, (pt, t) => { ... }) // return pt to modify, "BREAK" to split, "REMOVE" to filter out point
bt.scale(polylines, scale : scaleXY | [scaleX, scaleY], ?origin: [ x, y ])
bt.rotate(polylines, degrees, ?origin: [ x, y ])
bt.translate(polylines, [dx, dy], ?origin: [ x, y ])
bt.originate(polylines) // moves center to [0, 0]
bt.resample(polylines, sampleRate)
bt.simplify(polylines, tolerance)
bt.trim(polylines, tStart, tEnd)
bt.merge(polylines)
bt.join(polylines0, ...morePolylines)
bt.copy(polylines)
bt.cut(polylines0, polylines1)
bt.cover(polylines0, polylines1)
bt.union(polylines0, polylines1)
bt.difference(polylines0, polylines1)
bt.intersection(polylines0, polylines1)
bt.xor(polylines0, polylines1)
bt.offset(polylines, delta, ?ops = { endType, joinType, miterLimit, arcTolerance })Get Data From Polylines
These functions are available in the blotToolkit or bt object.
// take polylines return other
bt.getAngle(polylines, t: [0 to 1]) // returns angle in degrees
bt.getPoint(polylines, t: [0 to 1]) // returns point as [x, y]
bt.getNormal(polylines, t: [0 to 1]) // returns normal vector as [x, y]
bt.pointInside(polylines, pt)
bt.bounds(polylines)
/*
returns {
xMin, xMax,
yMin, yMax,
lt, ct, rt,
lc, cc, rc,
lb, cb, rb,
width, height
}
l is left
c is center
r is right
t is top
b is bottom
they are arranged in this configuration around the bounding box of the polylines
lt--ct--rt
| | |
lc--cc--rc
| | |
lb--cb--rb
*/Generate Polylines
These functions are available in the blotToolkit or bt object.
const myTurtle = new bt.Turtle()
.forward(distance: number)
.arc(angle: number, radius: number)
.goTo( [ x: number, y: number ] ) // move with up/down state
.jump( [ x: number, y: number ] ) // move but don't draw
.step( [ dx: number, dy: number ] ) // add delta to turtles current position
.right(angle: number)
.left(angle: number)
.setAngle(angle: number)
.up() // sets drawing to false
.down() // sets drawing to true
.copy()
.applyToPath(fn) // takes (turtlePath) => { }
.lines() // get copy of the Turtle's path
// data
const position = myTurtle.pos // [x: number, y: number]
const angle = myTurtle.angle // number
const path = myTurtle.path // is array of polylines [number, number][][]
const drawing = myTurtle.drawing // booleanbt.catmullRom(points, ?steps = 1000) // returns polyline [number, number][]
bt.nurbs(points, ?ops = { steps: 100, degree: 2}) // returns polyline [number, number][]Randomness
These functions are available in the blotToolkit or bt object.
bt.rand();
bt.randInRange(min: number, max: number);
bt.randIntInRange(min: number, max: number);
bt.setRandSeed(seed: number);
bt.noise(
number | [ x:number , ?y: number , ?z: number ],
{
octaves: number [0 to 8],
falloff: number [0 to 100]
}
);Idioms
These are small useful code snippets.
function centerPolylines(polylines, documentWidth, documentHeight) {
const cc = bt.bounds(polylines).cc;
bt.translate(polylines, [documentWidth / 2, documentHeight / 2], cc);
}