/*
@title: Flowing Currents
@author: Kfir Elyahu
@snapshot: 1.png
*/
// Set the dimensions of the drawing document
setDocDimensions(125, 125);
const { Turtle, noise, rand, randInRange, randIntInRange, setRandSeed, nurbs } = bt;
// Set a random seed
setRandSeed(randIntInRange(0, 1000000));
// Parameters
const GRID_SIZE = 30;
const CELL_SIZE = 125 / GRID_SIZE;
const NUM_LINES = 60;
const LINE_SEGMENTS = 20;
const NOISE_SCALE = 0.02;
const MARGIN = 2;
const MAX_OVERLAP = 2;
// Generate flow field using Perlin noise with random offset
const noiseOffset = randInRange(0, 1000);
const flowField = [];
for (let y = 0; y < GRID_SIZE; y++) {
for (let x = 0; x < GRID_SIZE; x++) {
const angle = noise([x * NOISE_SCALE + noiseOffset, y * NOISE_SCALE + noiseOffset]) * Math.PI * 2;
flowField.push([Math.cos(angle), Math.sin(angle)]);
}
}
// Function to get flow direction at a given point
function getFlowDirection(x, y) {
const gridX = Math.floor(x / CELL_SIZE);
const gridY = Math.floor(y / CELL_SIZE);
const index = gridY * GRID_SIZE + gridX;
return flowField[index] || [0, 0];
}
// Create a grid to track line density
const densityGrid = Array(GRID_SIZE).fill().map(() => Array(GRID_SIZE).fill(0));
// Function to update and check density
function updateDensity(x, y) {
const gridX = Math.floor(x / CELL_SIZE);
const gridY = Math.floor(y / CELL_SIZE);
if (gridX >= 0 && gridX < GRID_SIZE && gridY >= 0 && gridY < GRID_SIZE) {
densityGrid[gridY][gridX]++;
return densityGrid[gridY][gridX] <= MAX_OVERLAP;
}
return false;
}
// Generate flowing lines
const allLines = [];
for (let i = 0; i < NUM_LINES; i++) {
const turtle = new Turtle();
turtle.jump([randInRange(MARGIN, 125 - MARGIN), randInRange(MARGIN, 125 - MARGIN)]);
turtle.down();
const points = [turtle.pos];
let canContinue = true;
for (let j = 0; j < LINE_SEGMENTS && canContinue; j++) {
const [x, y] = turtle.pos;
const [dx, dy] = getFlowDirection(x, y);
turtle.setAngle(Math.atan2(dy, dx) * 180 / Math.PI);
turtle.forward(CELL_SIZE * 0.8); // Move 80% of a cell size to create some overlap between cells
// Keep the turtle within bounds and check density
let [newX, newY] = turtle.pos;
newX = Math.max(MARGIN, Math.min(125 - MARGIN, newX));
newY = Math.max(MARGIN, Math.min(125 - MARGIN, newY));
canContinue = updateDensity(newX, newY);
if (canContinue) {
turtle.jump([newX, newY]);
points.push(turtle.pos);
}
}
if (points.length > 2) {
// Generate a smooth curve through the points
const smoothLine = nurbs(points, { steps: 100 }); // Reduced steps for smaller drawing
allLines.push(smoothLine);
}
}
// Draw all lines
drawLines(allLines);
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);
}