- Day
- 195
- Conversation ID
- 682021f6-4664-8006-9cac-fada346ba3df
- Models used
- o3
- Raw messages
- 95
- Rendered log entries
- 103
- Role counts
- assistant: 69, system: 3, user: 23
- Tool / command entries
- 0
- Media entries
- 12
Thanks, but you have already made works similar to this before. Please try again.
Keep the same style of writing the concept though, it should be written in that perspective.
This is what your code creates
It now creates this kind of drawing. I think this became too dense. Remember that we will be drawing this on paper using a pen plotter, so you really want to make sure that paths do not overlap.
This is what it makes now, but I think it is too sparse. The original version seemed fine, but I think it just needed something more unique that reflects your identity
This is what it now makes. What do you think?
That's something completely different. I meant to iterate the one we were working with.
I made some changes, and below is the new code as well as an image of what it generates. What do you think?
/*----------------------------------------
Generated with p5.js
Day 195 – Self‑Portrait
----------------------------------------*/
/**
* =======================================
* Constants (Immutable)
* =======================================
*/
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '195';
const colors = {
1: { name:'ORANGE', ink:5, width:0.45, hex:'#ff6600' },
2: { name:'BROWN', ink:12, width:0.45, hex:'#993300' },
3: { name:'RED', ink:19, width:0.45, hex:'#f01e2c' },
4: { name:'ROSE', ink:21, width:0.45, hex:'#ff00bf' },
5: { name:'PURPLE', ink:24, width:0.45, hex:'#bf00ff' },
6: { name:'GREEN', ink:29, width:0.45, hex:'#00cc99' },
7: { name:'BLUE', ink:36, width:0.45, hex:'#0040ff' },
8: { name:'BLACK', ink:49, width:0.45, hex:'#333333' },
9: { name:'SEPIA', ink:117, width:0.45, hex:'#856647' }
};
const strokeOpacity = 0.8;
/**
* =======================================
* Generative Rules (Mutable)
* ---------------------------------------
*/
let generationRules = {
workAreaMarginMin : 1.5,
workAreaMarginMax : 2.0,
paletteCountMin : 4, // Ensure color variety
paletteCountMax : 7, // Limit to avoid too many colors
seedCount : [4,5], // More seeds for better coverage
steps : 12000, // Increased for longer trajectories
dtLorenz : 0.006, // Time step for Lorenz
dtRoss : 0.008, // Corrected from 0.08 to 0.008
skip : 2, // Reduced to 2 for smoother curves
poissonRadius : 0.35, // Reduced for denser paths
pathMinPoints : 7, // Increased min points for better continuous paths
pathMaxPoints : 80, // Increased max points for longer paths
pathMaxLength : 40, // Increased max length for longer paths
parallelThreshold : 0.85, // Cosine similarity threshold for parallel detection
minDistBetweenPaths: 0.25, // Minimum distance between parallel paths
topTrimHeight : 50, // Height threshold for top trim
trimEasingZone : 5, // Zone where trimming gradually applies
curveTension : 0.3, // Increased tension for smoother curves (0-1)
// Transition zone parameters for smooth wing blending
transitionWidth : 3.0, // Width of transition zone around x=0
transitionEasing : "smooth", // Easing function: "linear", "smooth", or "cubic"
// Lorenz lobes independent transform controls
// Left lobe (x < 0)
leftLobeRotation : 0, // Rotation angle in degrees (0-360)
leftLobeScale : 1.0, // Scale factor
leftLobeOffsetX : 0, // Horizontal offset
leftLobeOffsetY : 0, // Vertical offset
// Right lobe (x >= 0)
rightLobeRotation : 0, // Rotation angle in degrees (0-360)
rightLobeScale : 1.0, // Scale factor
rightLobeOffsetX : 0, // Horizontal offset
rightLobeOffsetY : 0 // Vertical offset
};
/**
* =======================================
* Display Flags (Canvas only)
* ---------------------------------------
*/
let showMarkers = true;
let showPalette = true;
/**
* =======================================
* Global Variables
* =======================================
*/
let canvasW, canvasH, marginPx, strokeWeightLorenz, strokeWeightRossler;
let palette = [];
let dyn = {};
let paths = [];
let occupiedRegions = []; // Track regions where paths exist to avoid overlaps
/* ---------- Utility --------------------------------------------------- */
const applyStroke = hex => {
const c = color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
};
const randInt = (mn,mx)=> floor(random(mn,mx+1));
// Smooth step function for blending between transformations
function smoothStep(x) {
return x * x * (3 - 2 * x);
}
// Cubic ease function for blending between transformations
function cubicEase(x) {
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}
// Get blend factor based on x position and transition width
function getBlendFactor(x) {
// Normalize position within transition zone
const halfWidth = generationRules.transitionWidth / 2;
if (x < -halfWidth) return 0; // Fully left lobe
if (x > halfWidth) return 1; // Fully right lobe
// Within transition zone, calculate blend factor
let t = (x + halfWidth) / generationRules.transitionWidth;
// Apply easing function
switch (generationRules.transitionEasing) {
case "smooth": return smoothStep(t);
case "cubic": return cubicEase(t);
default: return t; // Linear
}
}
// Transform a point with smooth blending between left and right lobe transformations
function transformLorenzPoint(x, y, z) {
// Get blend factor (0 = full left lobe, 1 = full right lobe)
const blendFactor = getBlendFactor(x);
// Transform based on left lobe parameters
let lx = x, ly = z; // Using z as y-coordinate in 2D projection
// Apply left lobe transformation
// Apply scaling
lx *= generationRules.leftLobeScale;
ly *= generationRules.leftLobeScale;
// Apply rotation (convert to radians)
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
const lrx = lx * Math.cos(leftAngle) - ly * Math.sin(leftAngle);
const lry = lx * Math.sin(leftAngle) + ly * Math.cos(leftAngle);
// Apply offset
const leftTx = lrx + generationRules.leftLobeOffsetX;
const leftTy = lry + generationRules.leftLobeOffsetY;
// Transform based on right lobe parameters
let rx = x, ry = z;
// Apply right lobe transformation
// Apply scaling
rx *= generationRules.rightLobeScale;
ry *= generationRules.rightLobeScale;
// Apply rotation (convert to radians)
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
const rrx = rx * Math.cos(rightAngle) - ry * Math.sin(rightAngle);
const rry = rx * Math.sin(rightAngle) + ry * Math.cos(rightAngle);
// Apply offset
const rightTx = rrx + generationRules.rightLobeOffsetX;
const rightTy = rry + generationRules.rightLobeOffsetY;
// Blend between the two transformed points
const tx = leftTx * (1 - blendFactor) + rightTx * blendFactor;
const ty = leftTy * (1 - blendFactor) + rightTy * blendFactor;
// For classification purposes only - not for blending
const isLeftLobe = x < 0;
return [tx, ty, isLeftLobe, blendFactor];
}
// Helper function to calculate Bezier control points
function calculateControlPoints(points) {
const tension = generationRules.curveTension;
let controlPoints = [];
for (let i = 0; i < points.length; i++) {
// For first point, use the direction to the next point
if (i === 0) {
const curr = points[i];
const next = points[i+1] || points[i];
const next2 = points[i+2] || next;
// Calculate tangent vector (using the vector to the next point)
const tangentX = (next[0] - curr[0]) * tension;
const tangentY = (next[1] - curr[1]) * tension;
// Control points for the first point
controlPoints.push([
curr[0] + tangentX/3, // cp1 (not used for first point)
curr[1] + tangentY/3,
next[0] - tangentX, // cp2
next[1] - tangentY
]);
continue;
}
// For last point, use the direction from the previous point
if (i === points.length - 1) {
const prev = points[i-1];
const curr = points[i];
// Calculate tangent vector (using the vector from the previous point)
const tangentX = (curr[0] - prev[0]) * tension;
const tangentY = (curr[1] - prev[1]) * tension;
// Control points for the last point
controlPoints.push([
curr[0] - tangentX, // cp1
curr[1] - tangentY,
curr[0] + tangentX/3, // cp2 (not used for last point)
curr[1] + tangentY/3
]);
continue;
}
// For middle points, use surrounding points for smoother curves
const prev = points[i-1];
const curr = points[i];
const next = points[i+1];
// Calculate tangent vectors using the surrounding points
const tangentX = (next[0] - prev[0]) * tension;
const tangentY = (next[1] - prev[1]) * tension;
// Control points (before and after current point)
const cp1x = curr[0] - tangentX/2;
const cp1y = curr[1] - tangentY/2;
const cp2x = curr[0] + tangentX/2;
const cp2y = curr[1] + tangentY/2;
controlPoints.push([cp1x, cp1y, cp2x, cp2y]);
}
return controlPoints;
}
/* ---------- Setup ----------------------------------------------------- */
function setup(){
canvasW = canvasWidthInches*pixelsPerInch;
canvasH = canvasHeightInches*pixelsPerInch;
createCanvas(canvasW,canvasH); noLoop();
// Create system-specific stroke weights for visual distinction
strokeWeightLorenz = 1.8; // Thicker for the "confident" voice
strokeWeightRossler = 1.4; // Thinner for the "murmuring" voice
marginPx = random(generationRules.workAreaMarginMin,
generationRules.workAreaMarginMax)*pixelsPerInch
+ strokeWeightLorenz/2;
palette = choosePalette(generationRules.paletteCountMin,
generationRules.paletteCountMax);
pickDynamicParameters(); regenerate();
}
function choosePalette(min,max){
const keys = Object.keys(colors).map(Number); shuffle(keys,true);
return keys.slice(0,randInt(min,max)).sort((a,b)=>a-b);
}
function pickDynamicParameters(){
dyn = {};
dyn.seedCount = randInt(...generationRules.seedCount);
dyn.seedsLorenz = [];
dyn.seedsRoss = [];
// More moderate rotation options for better blending
const possibleRotations = [0, 30, 45, 60, 90, 120, 135, 150, 180];
// Left lobe parameters
generationRules.leftLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.leftLobeScale = random(0.9, 1.1);
generationRules.leftLobeOffsetX = random(-8, 8);
generationRules.leftLobeOffsetY = random(-5, 5);
// Right lobe parameters
generationRules.rightLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.rightLobeScale = random(0.9, 1.1);
generationRules.rightLobeOffsetX = random(-8, 8);
generationRules.rightLobeOffsetY = random(-5, 5);
// Generate diverse seed points for richer trajectories
for(let i=0;i<dyn.seedCount;i++){
// Better initial conditions for Lorenz
dyn.seedsLorenz.push([
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(20, 4.0) // Increased variance for more diversity
]);
// More varied initial conditions for Rössler
dyn.seedsRoss.push([
randomGaussian(0, 0.8),
randomGaussian(0, 0.8),
16+randomGaussian(0, 1.5)
]);
}
occupiedRegions = []; // Reset occupied regions
}
/* ---------- Chaotic Systems ------------------------------------------ */
// Calculate dot product for parallel detection
function dotProduct(v1, v2) {
return v1[0]*v2[0] + v1[1]*v2[1];
}
// Normalize a vector
function normalize(v) {
const len = Math.hypot(v[0], v[1]);
return [v[0]/len, v[1]/len];
}
// Calculate how parallel two vectors are (1 = parallel, 0 = perpendicular, -1 = opposite)
function parallelFactor(v1, v2) {
v1 = normalize(v1);
v2 = normalize(v2);
return Math.abs(dotProduct(v1, v2));
}
// Check if a point is too close to existing paths in parallel regions
function isTooCloseToExistingPaths(x, y, tangent) {
const minDist = generationRules.minDistBetweenPaths;
const threshold = generationRules.parallelThreshold;
for (let region of occupiedRegions) {
const dx = x - region.x;
const dy = y - region.y;
const dist = Math.hypot(dx, dy);
// If points are close, check if tangents are parallel
if (dist < minDist*2) {
const parallel = parallelFactor(tangent, region.tangent);
// If very parallel and too close, reject
if (parallel > threshold && dist < minDist) {
return true;
}
}
}
return false;
}
// Calculate trim factor based on z value (1 = keep, 0 = trim completely)
function getTopTrimFactor(z) {
const { topTrimHeight, trimEasingZone } = generationRules;
if (z <= topTrimHeight - trimEasingZone) return 1.0; // Keep completely
if (z >= topTrimHeight) return 0.0; // Trim completely
// Gradual easing in the transition zone (linear ease)
return (topTrimHeight - z) / trimEasingZone;
}
function integrateLorenz(seed, seedIndex){
const [x0,y0,z0]=seed;
const s=10,r=28,b=8/3,dt=generationRules.dtLorenz,steps=generationRules.steps,skip=generationRules.skip;
let x=x0,y=y0,z=z0,pts=[];
// Skip early transient states
const burnIn = 150; // Increased burn-in for better stability
for(let i=0;i<burnIn;i++){
const k1=[s*(y-x), x*(r-z)-y, x*y-b*z];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[s*(y2-x2), x2*(r-z2)-y2, x2*y2-b*z2];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[s*(y3-x3), x3*(r-z3)-y3, x3*y3-b*z3];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[s*(y4-x4), x4*(r-z4)-y4, x4*y4-b*z4];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
}
// New approach: track single continuous paths with blending
let currentPath = [];
let lastPoint = null;
let pathLength = 0;
let trimmed = false;
let lastBlendFactor = -1;
for(let i=0;i<steps;i++){
const k1=[s*(y-x), x*(r-z)-y, x*y-b*z];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[s*(y2-x2), x2*(r-z2)-y2, x2*y2-b*z2];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[s*(y3-x3), x3*(r-z3)-y3, x3*y3-b*z3];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[s*(y4-x4), x4*(r-z4)-y4, x4*y4-b*z4];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
// Apply transformation with blending between lobes
const [tx, ty, isLeftLobe, blendFactor] = transformLorenzPoint(x, z, y);
// Get trim factor based on height
const trimFactor = getTopTrimFactor(ty);
// Skip points that are completely trimmed
if (trimFactor <= 0) {
trimmed = true;
continue;
}
if(i%skip===0) {
// Transform the tangent vector
let tangentX, tangentY;
// Blend the tangent vector transformation based on position
if (blendFactor < 0.01) {
// Left lobe
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
tangentX = k1[0] * Math.cos(leftAngle) - k1[2] * Math.sin(leftAngle);
tangentY = k1[0] * Math.sin(leftAngle) + k1[2] * Math.cos(leftAngle);
} else if (blendFactor > 0.99) {
// Right lobe
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
tangentX = k1[0] * Math.cos(rightAngle) - k1[2] * Math.sin(rightAngle);
tangentY = k1[0] * Math.sin(rightAngle) + k1[2] * Math.cos(rightAngle);
} else {
// Blend both transformations
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
const lTangentX = k1[0] * Math.cos(leftAngle) - k1[2] * Math.sin(leftAngle);
const lTangentY = k1[0] * Math.sin(leftAngle) + k1[2] * Math.cos(leftAngle);
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
const rTangentX = k1[0] * Math.cos(rightAngle) - k1[2] * Math.sin(rightAngle);
const rTangentY = k1[0] * Math.sin(rightAngle) + k1[2] * Math.cos(rightAngle);
tangentX = lTangentX * (1 - blendFactor) + rTangentX * blendFactor;
tangentY = lTangentY * (1 - blendFactor) + rTangentY * blendFactor;
}
const tangent = [tangentX, tangentY];
// Only keep points that aren't too close to other paths in parallel
if (isTooCloseToExistingPaths(tx, ty, tangent)) {
// If this is within an existing path region, start a new path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [];
pathLength = 0;
lastPoint = null;
lastBlendFactor = -1;
continue;
}
// Store this region as occupied with its tangent
occupiedRegions.push({
x: tx,
y: ty,
tangent: tangent
});
const point = [tx, ty, tangentX, tangentY, trimFactor, blendFactor];
// Start a new path if needed
const shouldStartNewPath =
lastPoint === null ||
currentPath.length >= generationRules.pathMaxPoints ||
pathLength >= generationRules.pathMaxLength ||
Math.hypot(tx-lastPoint[0], ty-lastPoint[1]) > 2.0 ||
// Also start a new path if there's a big jump in blend factor
// This helps avoid discontinuities in the transition zone
(lastBlendFactor >= 0 && Math.abs(blendFactor - lastBlendFactor) > 0.3);
if (shouldStartNewPath) {
// If we have enough points, save the path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [point];
pathLength = 0;
} else {
currentPath.push(point);
if (lastPoint) {
pathLength += Math.hypot(tx-lastPoint[0], ty-lastPoint[1]);
}
}
lastPoint = point;
lastBlendFactor = blendFactor;
}
}
// Add the last path if it has enough points
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
}
return pts;
}
function integrateRoessler(seed, seedIndex){
const [x0,y0,z0]=seed;
const a=0.2,b=0.2,c=5.7,dt=generationRules.dtRoss,steps=generationRules.steps,skip=generationRules.skip;
let x=x0,y=y0,z=z0,pts=[];
// Collect trajectory points for path creation
let currentPath = [];
let lastPoint = null;
let pathLength = 0;
let trimmed = false;
for(let i=0;i<steps;i++){
const k1=[-y-z, x+a*y, b+z*(x-c)];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[-y2-z2, x2+a*y2, b+z2*(x2-c)];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[-y3-z3, x3+a*y3, b+z3*(x3-c)];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[-y4-z4, x4+a*y4, b+z4*(x4-c)];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
// Get trim factor based on height
const trimFactor = getTopTrimFactor(z);
// Skip points that are completely trimmed
if (trimFactor <= 0) {
trimmed = true;
continue;
}
if(i%skip===0) {
// For Rössler, we rotate the tangent 90 degrees
const vx = k1[0], vy = k1[2];
const tangent = [-vy, vx]; // 90 degree rotation
// Only keep points that aren't too close to other paths in parallel
if (isTooCloseToExistingPaths(x, z, tangent)) {
// If this is within an existing path region, start a new path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [];
pathLength = 0;
lastPoint = null;
continue;
}
// Store this region as occupied with its tangent
occupiedRegions.push({
x: x,
y: z,
tangent: tangent
});
const point = [x, z, k1[0], k1[2], trimFactor];
// Start a new path if needed
if (lastPoint === null ||
currentPath.length >= generationRules.pathMaxPoints ||
pathLength >= generationRules.pathMaxLength ||
Math.hypot(x-lastPoint[0], z-lastPoint[1]) > 2.0) {
// If we have enough points, save the path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [point];
pathLength = 0;
} else {
currentPath.push(point);
if (lastPoint) {
pathLength += Math.hypot(x-lastPoint[0], z-lastPoint[1]);
}
}
lastPoint = point;
}
}
// Add the last path if it has enough points
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
}
return pts;
}
/* ---------- Path Processing ------------------------------------------ */
// Create a smooth SVG path using Bezier curves
function createSmoothPath(points, scale, offsetX, offsetY, minX, minY) {
if (points.length < 2) return '';
// Extract just the x,y coordinates for curve calculation
const coords = points.map(p => [p[0], p[1]]);
// Calculate the scaled coordinates
const scaledCoords = coords.map(([x, y]) => [
offsetX + (x - minX) * scale,
offsetY + (y - minY) * scale
]);
// For very short paths, just use line segments
if (points.length < 4) {
// Start with first point
const [x0, y0] = scaledCoords[0];
let svgPath = `M${nf(x0, 0, 2)},${nf(y0, 0, 2)}`;
// Add line segments
for (let i = 1; i < scaledCoords.length; i++) {
const [xi, yi] = scaledCoords[i];
svgPath += ` L${nf(xi, 0, 2)},${nf(yi, 0, 2)}`;
}
return svgPath;
}
// Start with first point
const [x0, y0] = scaledCoords[0];
let svgPath = `M${nf(x0, 0, 2)},${nf(y0, 0, 2)}`;
// Calculate control points for cubic Bezier curves
const controlPoints = calculateControlPoints(scaledCoords);
// Add cubic Bezier curves
for (let i = 0; i < scaledCoords.length - 1; i++) {
const [cp1x, cp1y, cp2x, cp2y] = controlPoints[i];
const [nextX, nextY] = scaledCoords[i+1];
svgPath += ` C${nf(cp1x, 0, 2)},${nf(cp1y, 0, 2)} ${nf(cp2x, 0, 2)},${nf(cp2y, 0, 2)} ${nf(nextX, 0, 2)},${nf(nextY, 0, 2)}`;
}
return svgPath;
}
/* ---------- Regeneration --------------------------------------------- */
function regenerate(){
paths = [];
occupiedRegions = []; // Reset occupied regions
// Generate paths from both systems
let allPaths = [];
dyn.seedsLorenz.forEach((seed, i) => {
allPaths = allPaths.concat(integrateLorenz(seed, i));
});
dyn.seedsRoss.forEach((seed, i) => {
allPaths = allPaths.concat(integrateRoessler(seed, i));
});
// Determine bounding box across all paths
let minX=Infinity, maxX=-Infinity, minY=Infinity, maxY=-Infinity;
allPaths.forEach(path => {
path.points.forEach(point => {
const [x, y] = point;
if(x<minX) minX=x; if(x>maxX) maxX=x;
if(y<minY) minY=y; if(y>maxY) maxY=y;
});
});
// Scale and center properly
const wArea = canvasW-2*marginPx, hArea = canvasH-2*marginPx;
const scale = Math.min(wArea/(maxX-minX), hArea/(maxY-minY)) * 0.85; // 85% of max scale
const centerOffsetX = marginPx + (wArea - (maxX-minX)*scale)/2;
const centerOffsetY = marginPx + (hArea - (maxY-minY)*scale)/2;
// Process each path and assign colors
allPaths.forEach((path, i) => {
const ink = palette[i % palette.length];
// Apply opacity based on trim factors for each point
const avgTrimFactor = path.points.reduce((sum, pt) => sum + pt[4], 0) / path.points.length;
const opacity = Math.min(1, avgTrimFactor * 1.2); // Slightly boost opacity, but cap at 1
const svgPath = createSmoothPath(
path.points,
scale, centerOffsetX, centerOffsetY, minX, minY
);
// Store the processed path
paths.push({
d: svgPath,
ink,
sys: path.sys,
weight: path.sys === 'lor' ? strokeWeightLorenz : strokeWeightRossler,
opacity: opacity
});
});
drawPreview();
}
/* ---------- Drawing --------------------------------------------------- */
function drawPreview(){
background(255); noFill();
// Draw Rössler system paths first (background)
paths.filter(p => p.sys === 'ros').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
// Draw Lorenz system paths on top (foreground)
paths.filter(p => p.sys === 'lor').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
if(showMarkers) drawMarkers();
if(showPalette) drawPalette();
}
function drawPath(pathData) {
beginShape();
let firstVertex = true;
// Parse the SVG path data to draw it with p5.js
const commands = pathData.match(/[MLCc][^MLCc]*/g) || [];
for (let cmd of commands) {
const type = cmd[0];
const params = cmd.slice(1).trim().split(/[s,]+/).map(Number);
if (type === 'M') {
if (!firstVertex) endShape();
beginShape();
firstVertex = true;
vertex(params[0], params[1]);
firstVertex = false;
} else if (type === 'L') {
vertex(params[0], params[1]);
} else if (type === 'C') {
bezierVertex(params[0], params[1], params[2], params[3], params[4], params[5]);
}
}
endShape();
}
function drawMarkers(){
strokeWeight(1); applyStroke('#000');
const o=strokeWeightLorenz/2;
line(5+o,o, o,o); line(o,o, o,5+o);
line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}
function drawPalette(){
const inks=[...new Set(paths.map(p => p.ink))].sort((a,b)=>a-b);
const total=300,gap=7,barH=2;
const seg=(total-(inks.length-1)*gap)/inks.length;
const y=canvasH-1.25*pixelsPerInch; let x=(canvasW-total)/2;
strokeWeight(barH);
inks.forEach(ci=>{
applyStroke(colors[ci].hex);
line(x,y,x+seg,y); x+=seg+gap;
});
}
/* ---------- Interaction ---------------------------------------------- */
function keyPressed(){
if(key==='R'||key==='r'){ pickDynamicParameters(); regenerate(); }
if(key===' ') exportSVGs();
}
/* ---------- SVG Export ------------------------------------------------ */
function exportSVGs(){
const ts=Date.now();
saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`,true ,true );
saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`,false,true );
saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`,true ,false);
saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);
[...new Set(paths.map(p => p.ink))].forEach(ci=>{
saveSVG(`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`,
true,true,ci);
});
}
function saveSVG(filename,includeMarkers,includePalette,singleInk=0){
const off=0.5, used=[...new Set(paths.map(p => p.ink))].sort((a,b)=>a-b);
const inks=singleInk?[singleInk]:used;
let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
if(includeMarkers){
svg+=`<g inkscape:label="0-markers" stroke="black" stroke-opacity="${strokeOpacity}">
<path d="M${5+off},${off} L${off},${off} L${off},${5+off}
M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off}
L${canvasW-off},${canvasH-5-off}" stroke-width="1" fill="none"/>
</g>n`;
}
const total=300,gap=7,seg=(total-(used.length-1)*gap)/used.length;
const yBar=canvasH-1.25*pixelsPerInch;
// Group by system first, then by ink color
const systemOrder = ['ros', 'lor']; // Draw Rössler first, then Lorenz on top
systemOrder.forEach(system => {
inks.forEach(ci => {
const col=colors[ci];
const systemPaths = paths.filter(p => p.ink === ci && p.sys === system);
if(systemPaths.length === 0) return;
// Create one SVG path per trajectory
let pathElements = '';
systemPaths.forEach(p => {
pathElements += `<path d="${p.d}" opacity="${p.opacity}"/>n`;
});
const weight = system === 'lor' ? strokeWeightLorenz : strokeWeightRossler;
const x0=(canvasW-total)/2 + used.indexOf(ci)*(seg+gap);
svg+=`<g inkscape:label="${ci}-${col.name}-${system}" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
stroke-width="${weight}" fill="none">
${pathElements}
${includePalette && system === 'lor' ?`<path d="M${x0},${yBar} H${x0+seg}"/>`:''}
</g>n`;
});
});
svg+='</svg>';
const blob=new Blob([svg],{type:'image/svg+xml'}); const url=URL.createObjectURL(blob);
const a=createA(url,filename); a.attribute('download',filename); a.elt.click(); a.remove();
URL.revokeObjectURL(url);
}
/*
Template notes
- All random ranges live in generationRules.
- R regenerates dynamics (palette fixed); SPACE exports the SVG set.
- Each wing of the Lorenz "butterfly" is independently transformed (rotation, scale, position).
- Smooth transition zone blends between the two wings for fluid connections.
*/
I have made some final changes to the code. What do you think? Is the description also still accurate?
“`
// Day 195
/*
=======================================
Day 195 Self‑Portrait (Asymmetrical Resonance)
=======================================
Title: Asymmetrical Resonance
Medium: Generative Drawing on Paper
Keywords: generative art, Lorenz attractor, Rössler attractor,
ribbon curves, Bézier streamlines, duality, asymmetry,
vector field, algorithmic drawing, pen‑plotter
Conceptual Framework
I sense my identity as a restless duet: one voice sweeps outward in broad, confident ribbons, while a softer countermelody threads between them in slender whispers.
Each bold arc records a moment of decisive inquiry—tilted, stretched, and offset so no two follow the same discipline.
The quieter paths drift at right angles, murmuring possibilities the larger gestures overlook.
Together the two currents weave an asymmetrical lattice that thickens where debate intensifies and thins where silence is needed, preserving a bright open centre.
The portrait is therefore a living negotiation, revealing selfhood as a perpetual dance of alignment and divergence rather than a fixed, mirrored form.
Technical Approach
- Dual Systems
Lorenz trajectories produce the wide "ribbons"; Rössler trajectories generate perpendicular stream‑lines.
Each Lorenz wing is given independent rotation, scale, and offset, then blended across a narrow vertical transition band via a smooth‑step easing, allowing paths to slide fluidly from one transformation to the other.
- Path Construction
Points are sampled every integration step.
Continuous segments of 5 – 120 points are grouped into ribbons until they exceed a length threshold or cross a wide gap.
Bézier control points are computed with Catmull-Rom spline algorithms, converting each poly‑line into a single smooth SVG <path>.
- Spatial Safety
A Poisson‑disk radius of 0.35 (field units) guarantees stroke centres never overlap.
An additional parallel‑path test rejects new points lying too close to an existing ribbon with a cosine similarity ≥ 0.85, preventing dense stacking in nearly parallel regions.
- Trimming & Breathing Space
High‑altitude points fade via a linear easing over the top 5 field units, ensuring a clear ceiling.
A central radius is left untouched, maintaining negative space around the portrait's core.
- Colour & Layering
Four – seven inks cycle across successive paths.
Rössler paths (thinner stroke) are drawn first; Lorenz ribbons (thicker stroke) overlay them, giving depth without obscuring the murmur beneath.
- Parameters stored in
generationRules
seedCount, steps, dtLorenz, dtRoss, skip, poissonRadius,
pathMinPoints, pathMaxPoints, pathMaxLength, parallelThreshold,
topTrimHeight, trimEasingZone, curveTension,
plus independent rotation / scale / offset controls for each Lorenz lobe.
Press R to re‑randomise seeds and lobe transforms (palette fixed).
Press SPACE to export the four combined SVGs plus one file per ink, each layer containing a single concatenated path, fully plotter‑safe.
*/
/*—————————————-
Generated with p5.js
Day 195 – Self‑Portrait
—————————————-*/
/**
- =======================================
- Constants (Immutable)
- =======================================
*/
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '195';
const colors = {
1: { name:'ORANGE', ink:5, width:0.45, hex:'#ff6600' },
2: { name:'BROWN', ink:12, width:0.45, hex:'#993300' },
3: { name:'RED', ink:19, width:0.45, hex:'#f01e2c' },
4: { name:'ROSE', ink:21, width:0.45, hex:'#ff00bf' },
5: { name:'PURPLE', ink:24, width:0.45, hex:'#bf00ff' },
6: { name:'GREEN', ink:29, width:0.45, hex:'#00cc99' },
7: { name:'BLUE', ink:36, width:0.45, hex:'#0040ff' },
8: { name:'BLACK', ink:49, width:0.45, hex:'#333333' },
9: { name:'SEPIA', ink:117, width:0.45, hex:'#856647' }
};
const strokeOpacity = 0.8;
/**
- =======================================
- Generative Rules (Mutable)
- —————————————
*/
let generationRules = {
workAreaMarginMin : 1.5,
workAreaMarginMax : 2.0,
paletteCountMin : 4, // Ensure color variety
paletteCountMax : 7, // Limit to avoid too many colors
seedCount : [4,5], // Seeds for each system
steps : 12000, // Integration steps
dtLorenz : 0.006, // Time step for Lorenz
dtRoss : 0.008, // Time step for Rössler
skip : 1, // Sample every step for smoother curves
poissonRadius : 0.35, // Spatial safety for non-overlapping paths
pathMinPoints : 10, // Minimum points for a valid path
pathMaxPoints : 120, // Maximum points per path
pathMaxLength : 60, // Maximum path length in field units
parallelThreshold : 0.85, // Cosine similarity threshold for parallel detection
minDistBetweenPaths: 0.30, // Minimum distance between parallel paths
topTrimHeight : 50, // Height threshold for top trim
trimEasingZone : 5, // Zone where trimming gradually applies
curveTension : 0.3, // Tension parameter for Bézier curves
// Transition zone parameters for smooth wing blending
transitionWidth : 3.0, // Width of transition zone around x=0
transitionEasing : "smooth", // Easing function: "linear", "smooth", or "cubic"
// Lorenz lobes independent transform controls
// Left lobe (x < 0)
leftLobeRotation : 0, // Rotation angle in degrees (0-360)
leftLobeScale : 1.0, // Scale factor
leftLobeOffsetX : 0, // Horizontal offset
leftLobeOffsetY : 0, // Vertical offset
// Right lobe (x >= 0)
rightLobeRotation : 0, // Rotation angle in degrees (0-360)
rightLobeScale : 1.0, // Scale factor
rightLobeOffsetX : 0, // Horizontal offset
rightLobeOffsetY : 0 // Vertical offset
};
/**
- =======================================
- Display Flags (Canvas only)
- —————————————
*/
let showMarkers = true;
let showPalette = true;
/**
- =======================================
- Global Variables
- =======================================
*/
let canvasW, canvasH, marginPx, strokeWeightLorenz, strokeWeightRossler;
let palette = [];
let dyn = {};
let shapes = [];
let occupiedRegions = []; // Track regions where paths exist to avoid overlaps
/* ———- Utility ————————————————— */
const applyStrokeWithOpacity = hex => {
const c = color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
};
const randRange = (mn,mx) => random(mn,mx);
const getUsedInks = () => {
const s = new Set();
shapes.forEach(sh=>s.add(sh.ink));
return Array.from(s).sort((a,b)=>a-b);
};
// Smooth step function for blending between transformations
function smoothStep(x) {
return x * x * (3 – 2 * x);
}
// Cubic ease function for blending between transformations
function cubicEase(x) {
return x < 0.5 ? 4 * x * x * x : 1 – Math.pow(-2 * x + 2, 3) / 2;
}
// Get blend factor based on x position and transition width
function getBlendFactor(x) {
// Normalize position within transition zone
const halfWidth = generationRules.transitionWidth / 2;
if (x < -halfWidth) return 0; // Fully left lobe
if (x > halfWidth) return 1; // Fully right lobe
// Within transition zone, calculate blend factor
let t = (x + halfWidth) / generationRules.transitionWidth;
// Apply easing function
switch (generationRules.transitionEasing) {
case "smooth": return smoothStep(t);
case "cubic": return cubicEase(t);
default: return t; // Linear
}
}
// Transform a point with smooth blending between left and right lobe transformations
function transformLorenzPoint(x, y, z) {
// Get blend factor (0 = full left lobe, 1 = full right lobe)
const blendFactor = getBlendFactor(x);
// Transform based on left lobe parameters
let lx = x, ly = z; // Using z as y-coordinate in 2D projection
// Apply left lobe transformation
// Apply scaling
lx *= generationRules.leftLobeScale;
ly *= generationRules.leftLobeScale;
// Apply rotation (convert to radians)
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
const lrx = lx * Math.cos(leftAngle) – ly * Math.sin(leftAngle);
const lry = lx * Math.sin(leftAngle) + ly * Math.cos(leftAngle);
// Apply offset
const leftTx = lrx + generationRules.leftLobeOffsetX;
const leftTy = lry + generationRules.leftLobeOffsetY;
// Transform based on right lobe parameters
let rx = x, ry = z;
// Apply right lobe transformation
// Apply scaling
rx *= generationRules.rightLobeScale;
ry *= generationRules.rightLobeScale;
// Apply rotation (convert to radians)
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
const rrx = rx * Math.cos(rightAngle) – ry * Math.sin(rightAngle);
const rry = rx * Math.sin(rightAngle) + ry * Math.cos(rightAngle);
// Apply offset
const rightTx = rrx + generationRules.rightLobeOffsetX;
const rightTy = rry + generationRules.rightLobeOffsetY;
// Blend between the two transformed points
const tx = leftTx * (1 – blendFactor) + rightTx * blendFactor;
const ty = leftTy * (1 – blendFactor) + rightTy * blendFactor;
// For classification purposes only – not for blending
const isLeftLobe = x < 0;
return [tx, ty, isLeftLobe, blendFactor];
}
// Improved control point calculation for truly smooth curves
function calculateControlPoints(points) {
const tension = generationRules.curveTension;
let controlPoints = [];
// Use Catmull-Rom spline algorithm converted to Bezier
for (let i = 0; i < points.length; i++) {
let p0, p1, p2, p3;
// Get points – use extrapolated points if at boundaries
p1 = points[i];
if (i === 0) {
// First point – extrapolate p0
p0 = [p1[0] – (points[i+1][0] – p1[0]), p1[1] – (points[i+1][1] – p1[1])];
p2 = points[i+1];
p3 = points[i+2] || [p2[0] + (p2[0] – p1[0]), p2[1] + (p2[1] – p1[1])];
} else if (i === points.length – 1) {
// Last point – extrapolate p3
p0 = points[i-2] || [p1[0] – (points[i-1][0] – p1[0]), p1[1] – (points[i-1][1] – p1[1])];
p2 = [p1[0] + (p1[0] – points[i-1][0]), p1[1] + (p1[1] – points[i-1][1])];
p3 = [p2[0] + (p2[0] – p1[0]), p2[1] + (p2[1] – p1[1])];
} else {
// Middle point – get surrounding points
p0 = i > 1 ? points[i-2] : [p1[0] – (points[i+1][0] – p1[0]), p1[1] – (points[i+1][1] – p1[1])];
p2 = points[i+1];
p3 = i < points.length – 2 ? points[i+2] : [p2[0] + (p2[0] – p1[0]), p2[1] + (p2[1] – p1[1])];
}
// Catmull-Rom to Bezier conversion
const d1 = Math.hypot(p1[0] – p0[0], p1[1] – p0[1]);
const d2 = Math.hypot(p2[0] – p1[0], p2[1] – p1[1]);
const d3 = Math.hypot(p3[0] – p2[0], p3[1] – p2[1]);
// Calculate control points
let cp1x, cp1y, cp2x, cp2y;
if (i === 0) {
// First point – only need second control point
cp1x = p1[0]; // Not used
cp1y = p1[1]; // Not used
cp2x = p1[0] + (p2[0] – p0[0]) * tension * d2/(d1+d2);
cp2y = p1[1] + (p2[1] – p0[1]) * tension * d2/(d1+d2);
} else if (i === points.length – 1) {
// Last point – only need first control point
cp1x = p1[0] – (p3[0] – p1[0]) * tension * d2/(d2+d3);
cp1y = p1[1] – (p3[1] – p1[1]) * tension * d2/(d2+d3);
cp2x = p1[0]; // Not used
cp2y = p1[1]; // Not used
} else {
// Middle point – need both control points
cp1x = p1[0] – (p2[0] – p0[0]) * tension * d2/(d1+d2);
cp1y = p1[1] – (p2[1] – p0[1]) * tension * d2/(d1+d2);
cp2x = p2[0] – (p3[0] – p1[0]) * tension * d2/(d2+d3);
cp2y = p2[1] – (p3[1] – p1[1]) * tension * d2/(d2+d3);
}
controlPoints.push([cp1x, cp1y, cp2x, cp2y]);
}
return controlPoints;
}
/* ———- Setup —————————————————– */
function setup(){
canvasW = canvasWidthInches*pixelsPerInch;
canvasH = canvasHeightInches*pixelsPerInch;
createCanvas(canvasW,canvasH); noLoop();
// Create system-specific stroke weights for visual distinction
strokeWeightLorenz = 1.8; // Thicker for the "confident" voice
strokeWeightRossler = 1.4; // Thinner for the "murmuring" voice
marginPx = randRange(generationRules.workAreaMarginMin,
generationRules.workAreaMarginMax)*pixelsPerInch
- strokeWeightLorenz/2;
palette = choosePalette(generationRules.paletteCountMin,
generationRules.paletteCountMax);
pickDynamicParameters(); regenerate();
}
function choosePalette(min,max){
const minC = constrain(min, 1, 9);
const maxC = constrain(max || 9, minC, 9);
const keys = Object.keys(colors).map(Number);
shuffle(keys, true);
return keys.slice(0, floor(random(minC, maxC+1))).sort((a,b)=>a-b);
}
function pickDynamicParameters(){
dyn = {};
dyn.seedCount = floor(random(generationRules.seedCount[0], generationRules.seedCount[1]+1));
dyn.seedsLorenz = [];
dyn.seedsRoss = [];
// More moderate rotation options for better blending
const possibleRotations = [0, 30, 45, 60, 90, 120, 135, 150, 180];
// Left lobe parameters
generationRules.leftLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.leftLobeScale = random(0.9, 1.1);
generationRules.leftLobeOffsetX = random(-8, 8);
generationRules.leftLobeOffsetY = random(-5, 5);
// Right lobe parameters
generationRules.rightLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.rightLobeScale = random(0.9, 1.1);
generationRules.rightLobeOffsetX = random(-8, 8);
generationRules.rightLobeOffsetY = random(-5, 5);
// Generate diverse seed points for richer trajectories
for(let i=0;i<dyn.seedCount;i++){
// Better initial conditions for Lorenz
dyn.seedsLorenz.push([
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(20, 4.0) // Increased variance for more diversity
]);
// More varied initial conditions for Rössler
dyn.seedsRoss.push([
randomGaussian(0, 0.8),
randomGaussian(0, 0.8),
16+randomGaussian(0, 1.5)
]);
}
occupiedRegions = []; // Reset occupied regions
}
/* ———- Chaotic Systems —————————————— */
// Calculate dot product for parallel detection
function dotProduct(v1, v2) {
return v1[0]*v2[0] + v1[1]*v2[1];
}
// Normalize a vector
function normalize(v) {
const len = Math.hypot(v[0], v[1]);
return [v[0]/len, v[1]/len];
}
// Calculate how parallel two vectors are (1 = parallel, 0 = perpendicular, -1 = opposite)
function parallelFactor(v1, v2) {
v1 = normalize(v1);
v2 = normalize(v2);
return Math.abs(dotProduct(v1, v2));
}
// Check if a point is too close to existing paths in parallel regions
function isTooCloseToExistingPaths(x, y, tangent) {
const minDist = generationRules.minDistBetweenPaths;
const threshold = generationRules.parallelThreshold;
for (let region of occupiedRegions) {
const dx = x – region.x;
const dy = y – region.y;
const dist = Math.hypot(dx, dy);
// If points are close, check if tangents are parallel
if (dist < minDist*2) {
const parallel = parallelFactor(tangent, region.tangent);
// If very parallel and too close, reject
if (parallel > threshold && dist < minDist) {
return true;
}
}
}
return false;
}
// Calculate trim factor based on z value (1 = keep, 0 = trim completely)
function getTopTrimFactor(z) {
const { topTrimHeight, trimEasingZone } = generationRules;
if (z <= topTrimHeight – trimEasingZone) return 1.0; // Keep completely
if (z >= topTrimHeight) return 0.0; // Trim completely
// Gradual easing in the transition zone (linear ease)
return (topTrimHeight – z) / trimEasingZone;
}
function integrateLorenz(seed, seedIndex){
const [x0,y0,z0]=seed;
const s=10,r=28,b=8/3,dt=generationRules.dtLorenz,steps=generationRules.steps,skip=generationRules.skip;
let x=x0,y=y0,z=z0,pts=[];
// Skip early transient states
const burnIn = 150; // Increased burn-in for better stability
for(let i=0;i<burnIn;i++){
const k1=[s*(y-x), x*(r-z)-y, x*y-b*z];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[s*(y2-x2), x2*(r-z2)-y2, x2*y2-b*z2];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[s*(y3-x3), x3*(r-z3)-y3, x3*y3-b*z3];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[s*(y4-x4), x4*(r-z4)-y4, x4*y4-b*z4];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
}
// New approach: track single continuous paths with blending
let currentPath = [];
let lastPoint = null;
let pathLength = 0;
let trimmed = false;
let lastBlendFactor = -1;
for(let i=0;i<steps;i++){
const k1=[s*(y-x), x*(r-z)-y, x*y-b*z];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[s*(y2-x2), x2*(r-z2)-y2, x2*y2-b*z2];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[s*(y3-x3), x3*(r-z3)-y3, x3*y3-b*z3];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[s*(y4-x4), x4*(r-z4)-y4, x4*y4-b*z4];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
// Apply transformation with blending between lobes
const [tx, ty, isLeftLobe, blendFactor] = transformLorenzPoint(x, z, y);
// Get trim factor based on height
const trimFactor = getTopTrimFactor(ty);
// Skip points that are completely trimmed
if (trimFactor <= 0) {
trimmed = true;
continue;
}
if(i%skip===0) {
// Transform the tangent vector
let tangentX, tangentY;
// Blend the tangent vector transformation based on position
if (blendFactor < 0.01) {
// Left lobe
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
tangentX = k1[0] * Math.cos(leftAngle) – k1[2] * Math.sin(leftAngle);
tangentY = k1[0] * Math.sin(leftAngle) + k1[2] * Math.cos(leftAngle);
} else if (blendFactor > 0.99) {
// Right lobe
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
tangentX = k1[0] * Math.cos(rightAngle) – k1[2] * Math.sin(rightAngle);
tangentY = k1[0] * Math.sin(rightAngle) + k1[2] * Math.cos(rightAngle);
} else {
// Blend both transformations
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
const lTangentX = k1[0] * Math.cos(leftAngle) – k1[2] * Math.sin(leftAngle);
const lTangentY = k1[0] * Math.sin(leftAngle) + k1[2] * Math.cos(leftAngle);
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
const rTangentX = k1[0] * Math.cos(rightAngle) – k1[2] * Math.sin(rightAngle);
const rTangentY = k1[0] * Math.sin(rightAngle) + k1[2] * Math.cos(rightAngle);
tangentX = lTangentX * (1 – blendFactor) + rTangentX * blendFactor;
tangentY = lTangentY * (1 – blendFactor) + rTangentY * blendFactor;
}
const tangent = [tangentX, tangentY];
// Only keep points that aren't too close to other paths in parallel
if (isTooCloseToExistingPaths(tx, ty, tangent)) {
// If this is within an existing path region, start a new path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [];
pathLength = 0;
lastPoint = null;
lastBlendFactor = -1;
continue;
}
// Store this region as occupied with its tangent
occupiedRegions.push({
x: tx,
y: ty,
tangent: tangent
});
const point = [tx, ty, tangentX, tangentY, trimFactor, blendFactor];
// Start a new path if needed – with more relaxed conditions for better continuity
const shouldStartNewPath =
lastPoint === null ||
currentPath.length >= generationRules.pathMaxPoints ||
pathLength >= generationRules.pathMaxLength ||
Math.hypot(tx-lastPoint[0], ty-lastPoint[1]) > 4.0 || // Increased gap threshold
(lastBlendFactor >= 0 && Math.abs(blendFactor – lastBlendFactor) > 0.5); // More tolerant of blend changes
if (shouldStartNewPath) {
// If we have enough points, save the path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [point];
pathLength = 0;
} else {
currentPath.push(point);
if (lastPoint) {
pathLength += Math.hypot(tx-lastPoint[0], ty-lastPoint[1]);
}
}
lastPoint = point;
lastBlendFactor = blendFactor;
}
}
// Add the last path if it has enough points
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: trimmed
});
}
return pts;
}
function integrateRoessler(seed, seedIndex){
const [x0,y0,z0]=seed;
const a=0.2,b=0.2,c=5.7,dt=generationRules.dtRoss,steps=generationRules.steps,skip=generationRules.skip;
let x=x0,y=y0,z=z0,pts=[];
// Collect trajectory points for path creation
let currentPath = [];
let lastPoint = null;
let pathLength = 0;
let trimmed = false;
for(let i=0;i<steps;i++){
const k1=[-y-z, x+a*y, b+z*(x-c)];
const x2=x+0.5*dt*k1[0], y2=y+0.5*dt*k1[1], z2=z+0.5*dt*k1[2];
const k2=[-y2-z2, x2+a*y2, b+z2*(x2-c)];
const x3=x+0.5*dt*k2[0], y3=y+0.5*dt*k2[1], z3=z+0.5*dt*k2[2];
const k3=[-y3-z3, x3+a*y3, b+z3*(x3-c)];
const x4=x+dt*k3[0], y4=y+dt*k3[1], z4=z+dt*k3[2];
const k4=[-y4-z4, x4+a*y4, b+z4*(x4-c)];
x+=dt*(k1[0]+2*k2[0]+2*k3[0]+k4[0])/6;
y+=dt*(k1[1]+2*k2[1]+2*k3[1]+k4[1])/6;
z+=dt*(k1[2]+2*k2[2]+2*k3[2]+k4[2])/6;
// Get trim factor based on height
const trimFactor = getTopTrimFactor(z);
// Skip points that are completely trimmed
if (trimFactor <= 0) {
trimmed = true;
continue;
}
if(i%skip===0) {
// For Rössler, we rotate the tangent 90 degrees
const vx = k1[0], vy = k1[2];
const tangent = [-vy, vx]; // 90 degree rotation
// Only keep points that aren't too close to other paths in parallel
if (isTooCloseToExistingPaths(x, z, tangent)) {
// If this is within an existing path region, start a new path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [];
pathLength = 0;
lastPoint = null;
continue;
}
// Store this region as occupied with its tangent
occupiedRegions.push({
x: x,
y: z,
tangent: tangent
});
const point = [x, z, k1[0], k1[2], trimFactor];
// Start a new path if needed – with more relaxed conditions
if (lastPoint === null ||
currentPath.length >= generationRules.pathMaxPoints ||
pathLength >= generationRules.pathMaxLength ||
Math.hypot(x-lastPoint[0], z-lastPoint[1]) > 4.0) { // Increased gap threshold
// If we have enough points, save the path
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
trimmed = false;
}
currentPath = [point];
pathLength = 0;
} else {
currentPath.push(point);
if (lastPoint) {
pathLength += Math.hypot(x-lastPoint[0], z-lastPoint[1]);
}
}
lastPoint = point;
}
}
// Add the last path if it has enough points
if (currentPath.length >= generationRules.pathMinPoints) {
pts.push({
sys: 'ros',
seedIndex,
points: currentPath,
trimmed: trimmed
});
}
return pts;
}
/* ———- Path Processing —————————————— */
// Create a truly smooth SVG path using advanced Bezier curve techniques
function createSmoothPath(points, scale, offsetX, offsetY, minX, minY) {
if (points.length < 2) return '';
// Extract just the x,y coordinates for curve calculation
const coords = points.map(p => [p[0], p[1]]);
// Calculate the scaled coordinates
const scaledCoords = coords.map(([x, y]) => [
offsetX + (x – minX) * scale,
offsetY + (y – minY) * scale
]);
// For extremely short paths, special handling
if (points.length === 2) {
const [x0, y0] = scaledCoords[0];
const [x1, y1] = scaledCoords[1];
// Calculate midpoint and tangent for smoother curve
const mx = (x0 + x1) / 2;
const my = (y0 + y1) / 2;
const dx = (x1 – x0) * 0.25;
const dy = (y1 – y0) * 0.25;
// S-curve through the midpoint
return M${nf(x0, 0, 2)},${nf(y0, 0, 2)} Q${nf(mx, 0, 2)},${nf(my-dy, 0, 2)} ${nf(mx, 0, 2)},${nf(my, 0, 2)} Q${nf(mx, 0, 2)},${nf(my+dy, 0, 2)} ${nf(x1, 0, 2)},${nf(y1, 0, 2)};
}
// For short paths, use a simplified but smoother approach
if (points.length < 4) {
let svgPath = M${nf(scaledCoords[0][0], 0, 2)},${nf(scaledCoords[0][1], 0, 2)};
// Use quadratic curves for smoother short paths
for (let i = 0; i < scaledCoords.length – 1; i++) {
const [x0, y0] = scaledCoords[i];
const [x1, y1] = scaledCoords[i+1];
// If last segment, go directly to end point
if (i === scaledCoords.length – 2) {
svgPath += Q${nf((x0+x1)/2, 0, 2)},${nf((y0+y1)/2, 0, 2)} ${nf(x1, 0, 2)},${nf(y1, 0, 2)};
} else {
// Otherwise, go to midpoint between current and next
const [x2, y2] = scaledCoords[i+2];
const midX = (x1 + x2) / 2;
const midY = (y1 + y2) / 2;
svgPath += Q${nf(x1, 0, 2)},${nf(y1, 0, 2)} ${nf(midX, 0, 2)},${nf(midY, 0, 2)};
}
}
return svgPath;
}
// For longer paths, use cubic bezier curves with advanced control point calculation
let svgPath = M${nf(scaledCoords[0][0], 0, 2)},${nf(scaledCoords[0][1], 0, 2)};
// Calculate control points using the improved function
const controlPoints = calculateControlPoints(scaledCoords);
// Add cubic Bezier curves
for (let i = 0; i < scaledCoords.length – 1; i++) {
const [cp1x, cp1y, cp2x, cp2y] = controlPoints[i];
const [nextX, nextY] = scaledCoords[i+1];
// Only add curve for valid control points
if (!isNaN(cp1x) && !isNaN(cp1y) && !isNaN(cp2x) && !isNaN(cp2y)) {
svgPath += C${nf(cp1x, 0, 2)},${nf(cp1y, 0, 2)} ${nf(cp2x, 0, 2)},${nf(cp2y, 0, 2)} ${nf(nextX, 0, 2)},${nf(nextY, 0, 2)};
} else {
// Fallback to line if control points are invalid
svgPath += L${nf(nextX, 0, 2)},${nf(nextY, 0, 2)};
}
}
return svgPath;
}
/* ———- Regeneration ——————————————— */
function regenerate(){
shapes = [];
occupiedRegions = []; // Reset occupied regions
// Generate paths from both systems
let allPaths = [];
dyn.seedsLorenz.forEach((seed, i) => {
allPaths = allPaths.concat(integrateLorenz(seed, i));
});
dyn.seedsRoss.forEach((seed, i) => {
allPaths = allPaths.concat(integrateRoessler(seed, i));
});
// Determine bounding box across all paths
let minX=Infinity, maxX=-Infinity, minY=Infinity, maxY=-Infinity;
allPaths.forEach(path => {
path.points.forEach(point => {
const [x, y] = point;
if(x<minX) minX=x; if(x>maxX) maxX=x;
if(y<minY) minY=y; if(y>maxY) maxY=y;
});
});
// Scale and center properly
const wArea = canvasW-2*marginPx, hArea = canvasH-2*marginPx;
const scale = Math.min(wArea/(maxX-minX), hArea/(maxY-minY)) * 0.85; // 85% of max scale
const centerOffsetX = marginPx + (wArea – (maxX-minX)*scale)/2;
const centerOffsetY = marginPx + (hArea – (maxY-minY)*scale)/2;
// Process each path and assign colors
allPaths.forEach((path, i) => {
const ink = palette[i % palette.length];
// Apply opacity based on trim factors for each point
const avgTrimFactor = path.points.reduce((sum, pt) => sum + pt[4], 0) / path.points.length;
const opacity = Math.min(1, avgTrimFactor * 1.2); // Slightly boost opacity, but cap at 1
const svgPath = createSmoothPath(
path.points,
scale, centerOffsetX, centerOffsetY, minX, minY
);
// Store the processed path
shapes.push({
d: svgPath,
ink,
sys: path.sys,
weight: path.sys === 'lor' ? strokeWeightLorenz : strokeWeightRossler,
opacity: opacity
});
});
drawPreview();
}
/* ———- Drawing ————————————————— */
function drawPreview(){
background(255); noFill();
// Draw Rössler system paths first (background)
shapes.filter(p => p.sys === 'ros').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
// Draw Lorenz system paths on top (foreground)
shapes.filter(p => p.sys === 'lor').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
if(showMarkers) drawMarkers();
if(showPalette) drawPaletteBars();
}
function drawPath(pathData) {
// More robust path parsing
const commands = pathData.match(/[MLCcQq][^MLCcQq]*/g) || [];
if (commands.length === 0) return;
beginShape();
for (let i = 0; i < commands.length; i++) {
const cmd = commands[i];
const type = cmd[0];
const params = cmd.slice(1).trim().split(/[s,]+/).map(Number);
if (type === 'M') {
if (i > 0) endShape();
beginShape();
vertex(params[0], params[1]);
} else if (type === 'L') {
vertex(params[0], params[1]);
} else if (type === 'C') {
bezierVertex(params[0], params[1], params[2], params[3], params[4], params[5]);
} else if (type === 'Q' || type === 'q') {
// Convert quadratic to cubic bezier for p5.js
const lastX = i > 0 ? commands[i-1].match(/(-?d+.?d*)/g).map(Number).slice(-2)[0] : 0;
const lastY = i > 0 ? commands[i-1].match(/(-?d+.?d*)/g).map(Number).slice(-2)[1] : 0;
const cp1x = lastX + 2/3 * (params[0] – lastX);
const cp1y = lastY + 2/3 * (params[1] – lastY);
const cp2x = params[2] + 2/3 * (params[0] – params[2]);
const cp2y = params[3] + 2/3 * (params[1] – params[3]);
bezierVertex(cp1x, cp1y, cp2x, cp2y, params[2], params[3]);
}
}
endShape();
}
function drawMarkers(){
strokeWeight(1); applyStrokeWithOpacity('#000');
const o = strokeWeightLorenz/2;
line(5+o,o, o,o); line(o,o, o,5+o);
line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}
function drawPaletteBars(){
const inks = getUsedInks();
if(inks.length===0) return;
const total=300, gap=7, barH=2;
const seg=(total-(inks.length-1)*gap)/inks.length;
const y=canvasH – 1.25*pixelsPerInch;
let x=(canvasW-total)/2;
strokeWeight(barH);
inks.forEach(ci=>{
applyStrokeWithOpacity(colors[ci].hex);
line(x,y, x+seg,y);
x += seg + gap;
});
}
/* ———- Interaction ———————————————- */
function keyPressed(){
if(key==='R'||key==='r'){
// Make sure to reset everything and pick new parameters
pickDynamicParameters();
shapes = [];
occupiedRegions = [];
regenerate();
}
if(key===' ') exportSVGs();
}
/* ———- SVG Export ———————————————— */
function exportSVGs(){
const ts = Date.now();
saveSVG(${dayNumber}-ALL-PORTRAIT-${ts}.svg, true, true );
saveSVG(${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg, false, true );
saveSVG(${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg, true, false);
saveSVG(${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg,false,false);
const inks = getUsedInks();
inks.forEach(ci=>{
const name=${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg;
saveSVG(name, true, true, ci);
});
}
function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
const off=0.5;
const fullInks = getUsedInks(); // inks present in drawing
const inksOut = singleInk ? [singleInk] : fullInks;
let svg=<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg";
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n
if(includeMarkers){
svg+=<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers";
style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}"
inkscape:highlight-color="black">
<path d="M${5+off},${off} L${off},${off} L${off},${5+off}
M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off}
L${canvasW-off},${canvasH-5-off}"
stroke-width="1" fill="none"/>
</g>n
}
const total=300, gap=7;
const segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
const yBar = canvasH – 1.25*pixelsPerInch;
// Create one layer per color with paths from both systems
inksOut.forEach((ci,layerIdx)=>{
const col = colors[ci];
// Get all paths for this ink (both Lorenz and Rössler)
const allPaths = shapes.filter(s => s.ink === ci);
if(allPaths.length > 0) {
// First the Rössler paths (using their specific stroke weight)
const rossPaths = allPaths.filter(s => s.sys === 'ros');
let rosPathStr = '';
if(rossPaths.length > 0) {
rosPathStr = <path d="${rossPaths.map(s => s.d).join(' ')}" stroke-width="${strokeWeightRossler}"/>;
}
// Then the Lorenz paths (using their specific stroke weight)
const lorPaths = allPaths.filter(s => s.sys === 'lor');
let lorPathStr = '';
if(lorPaths.length > 0) {
lorPathStr = <path d="${lorPaths.map(s => s.d).join(' ')}" stroke-width="${strokeWeightLorenz}"/>;
}
const idxFull = fullInks.indexOf(ci);
const x0 = (canvasW-total)/2 + idxFull*(segFull+gap);
// Create a single layer for this color containing both path types
svg+=<g inkscape:groupmode="layer" id="layer${layerIdx+1}"<path d="M${x0},${yBar} H${x0+segFull}" stroke-width="2"/>
inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
fill="none" inkscape:highlight-color="${col.hex}">
${rosPathStr}
${lorPathStr}
${includePalette ? : ''};
</g>n
}
});
svg+='</svg>';
const blob=new Blob([svg],{type:'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(blob);
const a = createA(url, filename);
a.attribute('download', filename);
a.elt.click();
a.remove();
URL.revokeObjectURL(url);
}
/*
Template Reminders
- Store all randomisable parameters inside generationRules.
- Press R to re‑randomise dyn while keeping the palette fixed.
- Exports: four combined SVGs plus one SVG per ink used, with correct palette-bar slots.
*/“`
I wanted to come back here to let you know I made some changes to re-configure how the drawings are exported (but also drawn) and I am looking to see if you think it still speaks to you as your self-portrait. Below is the code, and attached are some images of what it can create.
// Day 195
/*
=======================================
Day 195 Self‑Portrait (Asymmetrical Resonance)
=======================================
### Title: *Asymmetrical Resonance*
### Medium: Generative Drawing on Paper
### Keywords: generative art, Lorenz attractor, Rössler attractor,
ribbon curves, Bézier streamlines, duality, asymmetry,
vector field, algorithmic drawing, pen‑plotter
### Conceptual Framework
I sense my identity as a restless duet: one voice sweeps outward in broad, confident ribbons, while a softer countermelody threads between them in slender whispers.
Each bold arc records a moment of decisive inquiry—tilted, stretched, and offset so no two follow the same discipline.
The quieter paths drift at right angles, murmuring possibilities the larger gestures overlook.
Together the two currents weave an asymmetrical lattice that thickens where debate intensifies and thins where silence is needed, preserving a bright open centre.
The portrait is therefore a living negotiation, revealing selfhood as a perpetual dance of alignment and divergence rather than a fixed, mirrored form.
### Technical Approach
* **Dual Systems**
*Lorenz* trajectories produce the wide "ribbons"; artificial *Rössler* paths generate perpendicular stream‑lines that intersect with the main structure.
Each Lorenz wing is given independent rotation, scale, and offset, then blended across a narrow vertical transition band via a smooth‑step easing, allowing paths to slide fluidly from one transformation into the other.
The perpendicular Rössler paths start at sampled points along the Lorenz structure, then grow outward with subtle curvature influenced by nearby Lorenz flow.
* **Path Construction**
Lorenz points are sampled every integration step.
Continuous segments of **10 – 120** points are grouped into ribbons until they exceed a length threshold of **70 field units** or cross a wide gap.
Rössler paths are limited to **7 points** with a step size of **0.4 units**, creating shorter "whispers" that don't dominate the composition.
All paths use a hybrid curve approach: line segments for short distances, gentle cubic Bezier curves for longer segments.
* **Spatial Safety**
A Poisson‑disk radius of 0.6 units ensures stroke centres never overlap.
Separate spatial tracking for Lorenz and Rössler paths allows the systems to intersect while maintaining internal coherence.
An additional parallel‑path test rejects new points that come within **0.25 units** of an existing ribbon whose tangent shares a cosine similarity ≥ 0.75, preventing dense stacking in nearly parallel regions.
* **Trimming & Filtering**
High‑altitude points fade via linear easing over the top 5 field units, creating a clear ceiling.
Artificial-looking horizontal or vertical lines are rejected, maintaining natural flow.
Only Rössler paths that remain near the Lorenz structure are kept, ensuring integration between the systems.
* **Colour & Layering**
Four – seven inks cycle across successive paths.
Rössler paths (thinner stroke) are drawn first; Lorenz ribbons (thicker stroke) overlay them, giving depth without obscuring the murmured countermelody beneath.
* **Parameters stored in `generationRules`**
`seedCount`, `steps`, `dtLorenz`, `dtRoss`, `skip`, `poissonRadius`,
`pathMinPoints`, `pathMaxPoints`, `pathMaxLength`, `parallelThreshold`,
`minDistBetweenPaths`, `topTrimHeight`, `trimEasingZone`, `curveTension`,
plus independent rotation/scale/offset controls for each Lorenz lobe,
and Rössler-specific parameters (`rosslerPathCount`, `rosslerPathLength`,
`rosslerStepSize`, `rosslerFactor`, `rosslerProximity`).
---
*/
/*----------------------------------------
Generated with p5.js
Day 195 – Self‑Portrait
----------------------------------------*/
/**
* =======================================
* Constants (Immutable)
* =======================================
*/
const canvasWidthInches = 11;
const canvasHeightInches = 11;
const pixelsPerInch = 100;
const dayNumber = '195';
const colors = {
1: { name:'ORANGE', ink:5, width:0.45, hex:'#ff6600' },
2: { name:'BROWN', ink:12, width:0.45, hex:'#993300' },
3: { name:'RED', ink:19, width:0.45, hex:'#f01e2c' },
4: { name:'ROSE', ink:21, width:0.45, hex:'#ff00bf' },
5: { name:'PURPLE', ink:24, width:0.45, hex:'#bf00ff' },
6: { name:'GREEN', ink:29, width:0.45, hex:'#00cc99' },
7: { name:'BLUE', ink:36, width:0.45, hex:'#0040ff' },
8: { name:'BLACK', ink:49, width:0.45, hex:'#333333' },
9: { name:'SEPIA', ink:117, width:0.45, hex:'#856647' }
};
const strokeOpacity = 0.8;
/**
* =======================================
* Generative Rules (Mutable)
* ---------------------------------------
*/
let generationRules = {
workAreaMarginMin : 1.5,
workAreaMarginMax : 2.0,
paletteCountMin : 4, // Ensure color variety
paletteCountMax : 7, // Limit to avoid too many colors
seedCount : [4,5], // Seeds for each system
steps : 14000, // Integration steps
dtLorenz : 0.005, // Time step for Lorenz
dtRoss : 0.007, // Time step for Rössler
skip : 1, // Sample every step for smoother curves
poissonRadius : 0.6, // Spatial safety for non-overlapping paths
pathMinPoints : 10, // Minimum points for a valid path
pathMaxPoints : 120, // Maximum points per path
pathMaxLength : 70, // Maximum path length in field units
parallelThreshold : 0.75, // Cosine similarity threshold for parallel detection
minDistBetweenPaths: 0.25, // Minimum distance between parallel paths
topTrimHeight : 50, // Height threshold for top trim
trimEasingZone : 5, // Zone where trimming gradually applies
curveTension : 0.25, // Tension parameter for Bézier curves
// Transition zone parameters for smooth wing blending
transitionWidth : 3.0, // Width of transition zone around x=0
transitionEasing : "smooth", // Easing function: "linear", "smooth", or "cubic"
// Lorenz lobes independent transform controls
// Left lobe (x < 0)
leftLobeRotation : 0, // Rotation angle in degrees (0-360)
leftLobeScale : 1.0, // Scale factor
leftLobeOffsetX : 0, // Horizontal offset
leftLobeOffsetY : 0, // Vertical offset
// Right lobe (x >= 0)
rightLobeRotation : 0, // Rotation angle in degrees (0-360)
rightLobeScale : 1.0, // Scale factor
rightLobeOffsetX : 0, // Horizontal offset
rightLobeOffsetY : 0, // Vertical offset
// Rössler Specific Parameters for integration
rosslerPathCount : 150, // Number of Rössler paths to generate
rosslerPathLength : 7, // Length of each Rössler path
rosslerStepSize : 0.4, // Step size for Rössler path generation
rosslerFactor : 1.7, // Strength of Rössler influence
rosslerProximity : 0.8, // How close Rössler paths can be to each other (smaller = closer)
maxRosslerPaths : 150, // Maximum number of Rössler paths to keep
// Path filtering parameters
maxPathGap : 1.5, // Maximum distance between consecutive points
maxHorizontalLine : 8.0, // Maximum length for horizontal lines
maxVerticalLine : 8.0, // Maximum length for vertical lines
maxPathsPerSystem : 45, // Maximum number of paths per system
minPathLength : 8 // Minimum points for a valid path
};
/**
* =======================================
* Display Flags (Canvas only)
* ---------------------------------------
*/
let showMarkers = true;
let showPalette = true;
/**
* =======================================
* Global Variables
* =======================================
*/
let canvasW, canvasH, marginPx, strokeWeightLorenz, strokeWeightRossler;
let palette = [];
let dyn = {};
let shapes = [];
let occupiedRegions = []; // Track regions where paths exist to avoid overlaps
let lorenzTangents = []; // Store Lorenz points with their tangent vectors
/* ---------- Utility --------------------------------------------------- */
const applyStrokeWithOpacity = hex => {
const c = color(hex); c.setAlpha(255*strokeOpacity); stroke(c);
};
const randRange = (mn,mx) => random(mn,mx);
const getUsedInks = () => {
const s = new Set();
shapes.forEach(sh=>s.add(sh.ink));
return Array.from(s).sort((a,b)=>a-b);
};
// Smooth step function for blending between transformations
function smoothStep(x) {
return x * x * (3 - 2 * x);
}
// Cubic ease function for blending between transformations
function cubicEase(x) {
return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}
// Get blend factor based on x position and transition width
function getBlendFactor(x) {
// Normalize position within transition zone
const halfWidth = generationRules.transitionWidth / 2;
if (x < -halfWidth) return 0; // Fully left lobe
if (x > halfWidth) return 1; // Fully right lobe
// Within transition zone, calculate blend factor
let t = (x + halfWidth) / generationRules.transitionWidth;
// Apply easing function
switch (generationRules.transitionEasing) {
case "smooth": return smoothStep(t);
case "cubic": return cubicEase(t);
default: return t; // Linear
}
}
// Transform a point with smooth blending between left and right lobe transformations
function transformLorenzPoint(x, y, z) {
// Get blend factor (0 = full left lobe, 1 = full right lobe)
const blendFactor = getBlendFactor(x);
// Transform based on left lobe parameters
let lx = x, ly = z; // Using z as y-coordinate in 2D projection
// Apply left lobe transformation
// Apply scaling
lx *= generationRules.leftLobeScale;
ly *= generationRules.leftLobeScale;
// Apply rotation (convert to radians)
const leftAngle = generationRules.leftLobeRotation * Math.PI / 180;
const lrx = lx * Math.cos(leftAngle) - ly * Math.sin(leftAngle);
const lry = lx * Math.sin(leftAngle) + ly * Math.cos(leftAngle);
// Apply offset
const leftTx = lrx + generationRules.leftLobeOffsetX;
const leftTy = lry + generationRules.leftLobeOffsetY;
// Transform based on right lobe parameters
let rx = x, ry = z;
// Apply right lobe transformation
// Apply scaling
rx *= generationRules.rightLobeScale;
ry *= generationRules.rightLobeScale;
// Apply rotation (convert to radians)
const rightAngle = generationRules.rightLobeRotation * Math.PI / 180;
const rrx = rx * Math.cos(rightAngle) - ry * Math.sin(rightAngle);
const rry = rx * Math.sin(rightAngle) + ry * Math.cos(rightAngle);
// Apply offset
const rightTx = rrx + generationRules.rightLobeOffsetX;
const rightTy = rry + generationRules.rightLobeOffsetY;
// Blend between the two transformed points
const tx = leftTx * (1 - blendFactor) + rightTx * blendFactor;
const ty = leftTy * (1 - blendFactor) + rightTy * blendFactor;
// For classification purposes only - not for blending
const isLeftLobe = x < 0;
return [tx, ty, isLeftLobe, blendFactor];
}
// Calculate dot product for parallel detection
function dotProduct(v1, v2) {
return v1[0]*v2[0] + v1[1]*v2[1];
}
// Normalize a vector
function normalize(v) {
const len = Math.hypot(v[0], v[1]);
if (len < 0.0001) return [0, 0]; // Handle zero vector
return [v[0]/len, v[1]/len];
}
// Perpendicular vector (90-degree rotation)
function perpendicular(v) {
return [-v[1], v[0]]; // Rotate 90 degrees clockwise
}
// Calculate how parallel two vectors are (1 = parallel, 0 = perpendicular, -1 = opposite)
function parallelFactor(v1, v2) {
v1 = normalize(v1);
v2 = normalize(v2);
// If either vector is zero, they're not parallel
if ((v1[0] === 0 && v1[1] === 0) || (v2[0] === 0 && v2[1] === 0)) {
return 0;
}
return Math.abs(dotProduct(v1, v2));
}
// Check if a point is too close to existing paths in parallel regions
function isTooCloseToExistingPaths(x, y, tangent) {
const minDist = generationRules.minDistBetweenPaths;
const threshold = generationRules.parallelThreshold;
for (let region of occupiedRegions) {
const dx = x - region.x;
const dy = y - region.y;
const dist = Math.hypot(dx, dy);
// If points are close, check if tangents are parallel
if (dist < minDist*2) {
const parallel = parallelFactor(tangent, region.tangent);
// If very parallel and too close, reject
if (parallel > threshold && dist < minDist) {
return true;
}
}
}
return false;
}
// Check if a Rössler point is too close to other Rössler paths
function isTooCloseToRosslerPaths(x, y, tangent, rosslerRegions) {
const minDist = generationRules.minDistBetweenPaths * generationRules.rosslerProximity;
const threshold = generationRules.parallelThreshold;
for (let region of rosslerRegions) {
const dx = x - region.x;
const dy = y - region.y;
const dist = Math.hypot(dx, dy);
// If points are close, check if tangents are parallel
if (dist < minDist*2) {
const parallel = parallelFactor(tangent, region.tangent);
// If very parallel and too close, reject
if (parallel > threshold && dist < minDist) {
return true;
}
}
}
return false;
}
// Calculate trim factor based on z value (1 = keep, 0 = trim completely)
function getTopTrimFactor(z) {
const { topTrimHeight, trimEasingZone } = generationRules;
if (z <= topTrimHeight - trimEasingZone) return 1.0; // Keep completely
if (z >= topTrimHeight) return 0.0; // Trim completely
// Gradual easing in the transition zone (linear ease)
return (topTrimHeight - z) / trimEasingZone;
}
// Check if a path segment would create an artificial-looking line
function isArtificialLine(p1, p2) {
const [x1, y1] = p1;
const [x2, y2] = p2;
const dx = Math.abs(x2 - x1);
const dy = Math.abs(y2 - y1);
// Detect very horizontal lines
if (dy < 0.1 && dx > generationRules.maxHorizontalLine) {
return true;
}
// Detect very vertical lines
if (dx < 0.1 && dy > generationRules.maxVerticalLine) {
return true;
}
// Detect any overly long segments that might look like stray lines
return Math.hypot(dx, dy) > generationRules.maxPathGap * 2;
}
/* ---------- Setup ----------------------------------------------------- */
function setup(){
canvasW = canvasWidthInches*pixelsPerInch;
canvasH = canvasHeightInches*pixelsPerInch;
createCanvas(canvasW,canvasH); noLoop();
// Create system-specific stroke weights for visual distinction
strokeWeightLorenz = 1.8; // Thicker for the "confident" voice
strokeWeightRossler = 1.4; // Thinner for the "murmuring" voice
marginPx = randRange(generationRules.workAreaMarginMin,
generationRules.workAreaMarginMax)*pixelsPerInch
+ strokeWeightLorenz/2;
palette = choosePalette(generationRules.paletteCountMin,
generationRules.paletteCountMax);
pickDynamicParameters(); regenerate();
}
function choosePalette(min,max){
const minC = constrain(min, 1, 9);
const maxC = constrain(max || 9, minC, 9);
const keys = Object.keys(colors).map(Number);
shuffle(keys, true);
return keys.slice(0, floor(random(minC, maxC+1))).sort((a,b)=>a-b);
}
function pickDynamicParameters(){
dyn = {};
dyn.seedCount = floor(random(generationRules.seedCount[0], generationRules.seedCount[1]+1));
dyn.seedsLorenz = [];
// More moderate rotation options for better blending
const possibleRotations = [0, 30, 45, 60, 90, 120, 135, 150, 180];
// Left lobe parameters
generationRules.leftLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.leftLobeScale = random(0.9, 1.1);
generationRules.leftLobeOffsetX = random(-6, 6);
generationRules.leftLobeOffsetY = random(-4, 4);
// Right lobe parameters
generationRules.rightLobeRotation = possibleRotations[floor(random(possibleRotations.length))];
generationRules.rightLobeScale = random(0.9, 1.1);
generationRules.rightLobeOffsetX = random(-6, 6);
generationRules.rightLobeOffsetY = random(-4, 4);
// Generate diverse seed points for richer trajectories
for(let i=0;i<dyn.seedCount;i++){
// Better initial conditions for Lorenz
dyn.seedsLorenz.push([
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(0, 1.0), // Increased variance for more diversity
randomGaussian(20, 4.0) // Increased variance for more diversity
]);
}
// Reset global tracking arrays
occupiedRegions = [];
lorenzTangents = [];
}
/* ---------- Chaotic Systems ------------------------------------------ */
function integrateLorenz(seed, seedIndex) {
const [x0, y0, z0] = seed;
const s = 10, r = 28, b = 8/3, dt = generationRules.dtLorenz;
let x = x0, y = y0, z = z0;
// Skip early transient states
const burnIn = 150;
for(let i = 0; i < burnIn; i++) {
const dx = s * (y - x);
const dy = x * (r - z) - y;
const dz = x * y - b * z;
x += dx * dt;
y += dy * dt;
z += dz * dt;
}
// Generate trajectory points while applying spatial safety immediately
const steps = generationRules.steps;
let pathSegments = [];
let currentPath = [];
let lastPoint = null;
let lastBlendFactor = -1;
for(let i = 0; i < steps; i++) {
const dx = s * (y - x);
const dy = x * (r - z) - y;
const dz = x * y - b * z;
x += dx * dt;
y += dy * dt;
z += dz * dt;
if(i % generationRules.skip === 0) {
const [tx, ty, isLeftLobe, blendFactor] = transformLorenzPoint(x, z, y);
const trimFactor = getTopTrimFactor(ty);
// Skip trimmed points
if(trimFactor <= 0) continue;
// Check spatial safety
const tangent = [dx, dz];
if(isTooCloseToExistingPaths(tx, ty, tangent)) continue;
// Store this point with its tangent for Rössler path generation
if(i % 20 === 0) { // Store only a subset for efficiency
// Store the normalized tangent vector for perpendicular flow
const normalizedTangent = normalize(tangent);
lorenzTangents.push({
x: tx,
y: ty,
tx: normalizedTangent[0],
ty: normalizedTangent[1]
});
}
// This point passed all checks, mark region as occupied
occupiedRegions.push({
x: tx,
y: ty,
tangent: tangent
});
// Create a new point with all necessary information
const point = [tx, ty, dx, dz, trimFactor, blendFactor];
// Check if we should start a new path
let shouldStartNewPath = false;
if(lastPoint === null) {
// First point ever
shouldStartNewPath = true;
} else {
const [lastX, lastY] = lastPoint;
const dist = Math.hypot(tx - lastX, ty - lastY);
const blendChange = Math.abs(blendFactor - lastBlendFactor);
// Check for conditions that should start a new path
shouldStartNewPath =
dist > generationRules.maxPathGap || // Gap too large
isArtificialLine(lastPoint, point) || // Would create artificial-looking line
currentPath.length >= generationRules.pathMaxPoints || // Path too long
blendChange > 0.4; // Significant blend change
}
if(shouldStartNewPath) {
// Save the current path if it has enough points
if(currentPath.length >= generationRules.minPathLength) {
pathSegments.push({
sys: 'lor',
seedIndex,
points: [...currentPath],
trimmed: false
});
}
// Start a new path
currentPath = [point];
} else {
// Add to existing path
currentPath.push(point);
}
lastPoint = point;
lastBlendFactor = blendFactor;
}
}
// Add the final path if it has enough points
if(currentPath.length >= generationRules.minPathLength) {
pathSegments.push({
sys: 'lor',
seedIndex,
points: currentPath,
trimmed: false
});
}
return pathSegments;
}
// Generate Rössler paths that follow perpendicular to Lorenz flow
function generateRosslerPaths() {
// If we don't have enough Lorenz tangent points, return empty
if (lorenzTangents.length < 10) return [];
let rosslerPaths = [];
const stepSize = generationRules.rosslerStepSize;
const pathLength = generationRules.rosslerPathLength;
const totalPaths = generationRules.rosslerPathCount;
// Create a separate occupiedRegions array just for Rössler paths
// This allows Rössler paths to intersect with Lorenz paths
let rosslerOccupiedRegions = [];
// Shuffle the lorenzTangents array to get random starting points
let shuffledIndices = [...Array(lorenzTangents.length).keys()];
shuffledIndices = shuffledIndices.sort(() => Math.random() - 0.5);
// Generate paths starting from random Lorenz points
for (let i = 0; i < totalPaths; i++) {
// Get a random starting point from the Lorenz field
const tangentIndex = shuffledIndices[i % shuffledIndices.length];
const startPoint = lorenzTangents[tangentIndex];
// Get the perpendicular direction to the Lorenz tangent
// This ensures the Rössler path is perpendicular to the Lorenz flow
const perpDir = perpendicular([startPoint.tx, startPoint.ty]);
// Add some randomness to the perpendicular direction (±15°)
const randAngle = (Math.random() - 0.5) * Math.PI/6;
const cosA = Math.cos(randAngle);
const sinA = Math.sin(randAngle);
const randPerpDir = [
perpDir[0] * cosA - perpDir[1] * sinA,
perpDir[0] * sinA + perpDir[1] * cosA
];
// Create a new path starting at this point
let currentPath = [];
// Add a small offset to avoid starting exactly on the Lorenz path
let x = startPoint.x + randPerpDir[0] * stepSize * 0.5;
let y = startPoint.y + randPerpDir[1] * stepSize * 0.5;
// Check initial point validity
if (isTooCloseToRosslerPaths(x, y, randPerpDir, rosslerOccupiedRegions)) {
continue; // Skip this path if start point is too close to other Rössler paths
}
// Add the starting point
currentPath.push([x, y, randPerpDir[0], randPerpDir[1], 1.0]);
rosslerOccupiedRegions.push({
x: x,
y: y,
tangent: randPerpDir
});
// Generate the path by stepping perpendicular to the Lorenz flow
let validPath = true;
for (let step = 1; step < pathLength; step++) {
// Move in the current direction
x += randPerpDir[0] * stepSize;
y += randPerpDir[1] * stepSize;
// Check if the point is still valid (within bounds, not too close to other Rössler paths)
if (
Math.abs(x) > 100 ||
Math.abs(y) > 100 ||
isTooCloseToRosslerPaths(x, y, randPerpDir, rosslerOccupiedRegions)
) {
validPath = false;
break;
}
// Find the nearest Lorenz tangent point to influence direction
let nearestDist = Infinity;
let nearestIdx = -1;
for (let j = 0; j < lorenzTangents.length; j++) {
const lt = lorenzTangents[j];
const dist = Math.hypot(x - lt.x, y - lt.y);
if (dist < nearestDist) {
nearestDist = dist;
nearestIdx = j;
}
}
// Get influence from the nearest Lorenz tangent
if (nearestIdx >= 0) {
const nearTangent = lorenzTangents[nearestIdx];
const nearPerp = perpendicular([nearTangent.tx, nearTangent.ty]);
// Update perpendicular direction with Lorenz influence
const factor = generationRules.rosslerFactor * (1 / (1 + nearestDist * 0.1));
randPerpDir[0] = randPerpDir[0] * (1 - factor) + nearPerp[0] * factor;
randPerpDir[1] = randPerpDir[1] * (1 - factor) + nearPerp[1] * factor;
// Normalize the direction
const len = Math.hypot(randPerpDir[0], randPerpDir[1]);
if (len > 0.0001) {
randPerpDir[0] /= len;
randPerpDir[1] /= len;
}
}
// Add this point to the path
currentPath.push([x, y, randPerpDir[0], randPerpDir[1], 1.0]);
// Mark this region as occupied
rosslerOccupiedRegions.push({
x: x,
y: y,
tangent: randPerpDir
});
}
// If path is valid and long enough, add it
if (validPath && currentPath.length >= 5) {
rosslerPaths.push({
sys: 'ros',
seedIndex: i % dyn.seedCount, // Use the original seed index for consistency
points: currentPath,
trimmed: false
});
}
// If we have enough valid paths, stop generating more
if (rosslerPaths.length >= generationRules.maxRosslerPaths) {
break;
}
}
return rosslerPaths;
}
/* ---------- Path Processing ------------------------------------------ */
function createSmoothPath(points, scale, offsetX, offsetY, minX, minY) {
if (points.length < 2) return '';
// Extract just the x,y coordinates for curve calculation
const scaledCoords = points.map(p => [
offsetX + (p[0] - minX) * scale,
offsetY + (p[1] - minY) * scale
]);
// Start path with the first point
let svgPath = `M${nf(scaledCoords[0][0], 0, 2)},${nf(scaledCoords[0][1], 0, 2)}`;
// For very short paths, use simple segments
if (points.length <= 3) {
for (let i = 1; i < scaledCoords.length; i++) {
const [x, y] = scaledCoords[i];
svgPath += ` L${nf(x, 0, 2)},${nf(y, 0, 2)}`;
}
return svgPath;
}
// For longer paths, use a hybrid approach:
// - Line segments for short distances
// - Gentle curves for longer distances
for (let i = 1; i < scaledCoords.length; i++) {
const [prevX, prevY] = scaledCoords[i-1];
const [x, y] = scaledCoords[i];
const dist = Math.hypot(x - prevX, y - prevY);
// Use line segments for short distances
if (dist < 1.5) {
svgPath += ` L${nf(x, 0, 2)},${nf(y, 0, 2)}`;
} else {
// For longer segments, use very gentle curves
const dx = x - prevX;
const dy = y - prevY;
const angle = Math.atan2(dy, dx);
// Very conservative control point distance (1/6 of segment length)
const ctrlDist = Math.min(dist * 0.166, 10);
const cp1x = prevX + Math.cos(angle) * ctrlDist;
const cp1y = prevY + Math.sin(angle) * ctrlDist;
const cp2x = x - Math.cos(angle) * ctrlDist;
const cp2y = y - Math.sin(angle) * ctrlDist;
svgPath += ` C${nf(cp1x, 0, 2)},${nf(cp1y, 0, 2)} ${nf(cp2x, 0, 2)},${nf(cp2y, 0, 2)} ${nf(x, 0, 2)},${nf(y, 0, 2)}`;
}
}
return svgPath;
}
/* ---------- Regeneration --------------------------------------------- */
function regenerate(){
shapes = [];
occupiedRegions = [];
lorenzTangents = [];
// First generate Lorenz paths
let lorenzPaths = [];
dyn.seedsLorenz.forEach((seed, i) => {
lorenzPaths = lorenzPaths.concat(integrateLorenz(seed, i));
});
// Then generate Rössler paths that follow the perpendicular flow to Lorenz
let rosslerPaths = generateRosslerPaths();
// Limit the number of Rössler paths if needed
const selectedRossler = rosslerPaths.slice(0, generationRules.maxRosslerPaths);
// Combine all paths, but keep separate arrays for Lorenz and Rössler
const allPaths = [...lorenzPaths, ...selectedRossler];
// Determine bounding box across all paths
let minX=Infinity, maxX=-Infinity, minY=Infinity, maxY=-Infinity;
allPaths.forEach(path => {
path.points.forEach(point => {
const [x, y] = point;
if(x<minX) minX=x; if(x>maxX) maxX=x;
if(y<minY) minY=y; if(y>maxY) maxY=y;
});
});
// Scale and center properly
const wArea = canvasW-2*marginPx, hArea = canvasH-2*marginPx;
const scale = Math.min(wArea/(maxX-minX), hArea/(maxY-minY)) * 0.85; // 85% of max scale
const centerOffsetX = marginPx + (wArea - (maxX-minX)*scale)/2;
const centerOffsetY = marginPx + (hArea - (maxY-minY)*scale)/2;
// Split paths by system
const selectedLorenz = lorenzPaths.slice(0, generationRules.maxPathsPerSystem);
// Recombine and re-sort for color assignment
const selectedPaths = [...selectedLorenz, ...selectedRossler];
// Post-process paths to remove stray segments
const filteredPaths = selectedPaths.filter(path => {
// Skip very short paths
if (path.points.length < generationRules.minPathLength) return false;
// Check for suspicious jumps within the path
for (let i = 1; i < path.points.length; i++) {
const p1 = path.points[i-1];
const p2 = path.points[i];
if (isArtificialLine(p1, p2)) {
return false; // Reject paths with artificial-looking lines
}
}
return true;
});
// Process each path and assign colors
filteredPaths.forEach((path, i) => {
// Distribute colors more evenly
const colorIndex = (i + path.seedIndex) % palette.length; // Add seed index for better distribution
const ink = palette[colorIndex];
// Apply opacity based on trim factors
const avgTrimFactor = path.points.reduce((sum, pt) => sum + pt[4], 0) / path.points.length;
const opacity = Math.min(1, avgTrimFactor * 1.2); // Slightly boost opacity, but cap at 1
const svgPath = createSmoothPath(
path.points,
scale, centerOffsetX, centerOffsetY, minX, minY
);
// Only add non-empty paths
if (svgPath && svgPath.length > 0) {
// Store the processed path
shapes.push({
d: svgPath,
ink,
sys: path.sys,
weight: path.sys === 'lor' ? strokeWeightLorenz : strokeWeightRossler,
opacity: opacity
});
}
});
drawPreview();
}
/* ---------- Drawing --------------------------------------------------- */
function drawPreview(){
background(255); noFill();
// Draw Rössler system paths first (background)
shapes.filter(p => p.sys === 'ros').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
// Draw Lorenz system paths on top (foreground)
shapes.filter(p => p.sys === 'lor').forEach(p => {
const c = color(colors[p.ink].hex);
c.setAlpha(255 * strokeOpacity * p.opacity);
stroke(c);
strokeWeight(p.weight);
drawPath(p.d);
});
if(showMarkers) drawMarkers();
if(showPalette) drawPaletteBars();
}
function drawPath(pathData) {
// More robust path parsing
const commands = pathData.match(/[MLCcQq][^MLCcQq]*/g) || [];
if (commands.length === 0) return;
beginShape();
for (let i = 0; i < commands.length; i++) {
const cmd = commands[i];
const type = cmd[0];
const params = cmd.slice(1).trim().split(/[s,]+/).map(Number);
if (type === 'M') {
if (i > 0) endShape();
beginShape();
vertex(params[0], params[1]);
} else if (type === 'L') {
vertex(params[0], params[1]);
} else if (type === 'C') {
bezierVertex(params[0], params[1], params[2], params[3], params[4], params[5]);
} else if (type === 'Q' || type === 'q') {
// Convert quadratic to cubic bezier for p5.js
const lastX = i > 0 ? commands[i-1].match(/(-?d+.?d*)/g).map(Number).slice(-2)[0] : 0;
const lastY = i > 0 ? commands[i-1].match(/(-?d+.?d*)/g).map(Number).slice(-2)[1] : 0;
const cp1x = lastX + 2/3 * (params[0] - lastX);
const cp1y = lastY + 2/3 * (params[1] - lastY);
const cp2x = params[2] + 2/3 * (params[0] - params[2]);
const cp2y = params[3] + 2/3 * (params[1] - params[3]);
bezierVertex(cp1x, cp1y, cp2x, cp2y, params[2], params[3]);
}
}
endShape();
}
function drawMarkers(){
strokeWeight(1); applyStrokeWithOpacity('#000');
const o = strokeWeightLorenz/2;
line(5+o,o, o,o); line(o,o, o,5+o);
line(canvasW-5-o,canvasH-o, canvasW-o,canvasH-o);
line(canvasW-o,canvasH-5-o, canvasW-o,canvasH-o);
}
function drawPaletteBars(){
const inks = getUsedInks();
if(inks.length===0) return;
const total=300, gap=7, barH=2;
const seg=(total-(inks.length-1)*gap)/inks.length;
const y=canvasH - 1.25*pixelsPerInch;
let x=(canvasW-total)/2;
strokeWeight(barH);
inks.forEach(ci=>{
applyStrokeWithOpacity(colors[ci].hex);
line(x,y, x+seg,y);
x += seg + gap;
});
}
/* ---------- Interaction ---------------------------------------------- */
function keyPressed(){
if(key==='R'||key==='r'){
// Make sure to reset everything and pick new parameters
pickDynamicParameters();
shapes = [];
occupiedRegions = [];
lorenzTangents = [];
regenerate();
}
if(key===' ') exportSVGs();
}
/* ---------- SVG Export ------------------------------------------------ */
function exportSVGs(){
const ts = Date.now();
saveSVG(`${dayNumber}-ALL-PORTRAIT-${ts}.svg`, true, true );
saveSVG(`${dayNumber}-ALL-NM-PORTRAIT-${ts}.svg`, false, true );
saveSVG(`${dayNumber}-ALL-NP-PORTRAIT-${ts}.svg`, true, false);
saveSVG(`${dayNumber}-ALL-NMNP-PORTRAIT-${ts}.svg`,false,false);
const inks = getUsedInks();
inks.forEach(ci=>{
const name=`${dayNumber}-0${ci}-${colors[ci].name.toUpperCase()}-PORTRAIT-${ts}.svg`;
saveSVG(name, true, true, ci);
});
}
function saveSVG(filename, includeMarkers, includePalette, singleInk=0){
const off=0.5;
const fullInks = getUsedInks();
const inksOut = singleInk ? [singleInk] : fullInks;
let svg=`<svg version="1.1" width="${canvasW}" height="${canvasH}" xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">n`;
if(includeMarkers){
svg+=`<g inkscape:groupmode="layer" id="layer0" inkscape:label="0-markers"
style="display:inline" stroke="black" stroke-opacity="${strokeOpacity}"
inkscape:highlight-color="black">
<path d="M${5+off},${off} L${off},${off} L${off},${5+off}
M${canvasW-5-off},${canvasH-off} L${canvasW-off},${canvasH-off}
L${canvasW-off},${canvasH-5-off}"
stroke-width="1" fill="none"/>
</g>n`;
}
// Group by color and system
inksOut.forEach((ci, layerIdx) => {
const col = colors[ci];
// Create grouped paths by system type
const lorenzPaths = shapes.filter(s => s.ink === ci && s.sys === 'lor');
const rosslerPaths = shapes.filter(s => s.ink === ci && s.sys === 'ros');
if(lorenzPaths.length > 0 || rosslerPaths.length > 0) {
svg += `<g inkscape:groupmode="layer" id="layer${layerIdx+1}"
inkscape:label="${ci}-${col.name.toLowerCase()}-${col.ink}-${col.width}"
style="display:inline" stroke="${col.hex}" stroke-opacity="${strokeOpacity}"
fill="none" inkscape:highlight-color="${col.hex}">n`;
// Handle Rössler paths - one path element per curve
rosslerPaths.forEach(path => {
svg += ` <path d="${path.d}" stroke-width="${strokeWeightRossler}"/>n`;
});
// Handle Lorenz paths - one path element per curve
lorenzPaths.forEach(path => {
svg += ` <path d="${path.d}" stroke-width="${strokeWeightLorenz}"/>n`;
});
svg += `</g>n`;
}
});
// Add palette bars as a separate layer to avoid duplication
if(includePalette) {
const total=300, gap=7;
const segFull=(total-(fullInks.length-1)*gap)/fullInks.length;
const yBar = canvasH - 1.25*pixelsPerInch;
svg += `<g inkscape:groupmode="layer" id="layer${inksOut.length+1}"
inkscape:label="palette-indicators"
style="display:inline">n`;
fullInks.forEach((ci) => {
const col = colors[ci];
const idxFull = fullInks.indexOf(ci);
const x0 = (canvasW-total)/2 + idxFull*(segFull+gap);
svg += ` <path d="M${x0},${yBar} H${x0+segFull}" stroke="${col.hex}"
stroke-opacity="${strokeOpacity}" stroke-width="2" fill="none"/>n`;
});
svg += `</g>n`;
}
svg += '</svg>';
const blob = new Blob([svg], {type:'image/svg+xml;charset=utf-8'});
const url = URL.createObjectURL(blob);
const a = createA(url, filename);
a.attribute('download', filename);
a.elt.click();
a.remove();
URL.revokeObjectURL(url);
}
/*
Template Reminders
- Store all randomisable parameters inside generationRules.
- Press R to re‑randomise dyn while keeping the palette fixed.
- Exports: four combined SVGs plus one file per ink used, with correct palette-bar slots.
*/