🤖 AI
Here’s a complete implementation of the time-driven fractal tree with gentle, living motion.
---
### sketch.js
```js
// Time‑Driven Fractal Tree
// Uses hour() for main branch count, minute() for angle spread,
// and second() for subtle swaying and noise-based tip motion.
// --- Global configuration ---
const MAX_DEPTH = 9; // recursion levels (8–10 as requested)
const LENGTH_FACTOR = 0.67; // branch length multiplier
const MAX_STROKE = 14; // trunk thickness
const MIN_STROKE = 1.2; // thinnest tips
// Animation state computed each frame
let globalSway = 0; // base sway angle (radians)
let timeSeconds = 0; // floating time in seconds for smooth animation
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100);
noFill();
strokeCap(ROUND);
}
function draw() {
// Soft cream / paper background
// HSB: warm hue, low saturation, high brightness
background(45, 12, 96);
// --- Time-based parameters ---
// Hour → number of main branches (1–12)
let h = hour() % 12;
if (h === 0) h = 12;
const mainBranches = h;
// Minute → angle spread (15°–45°)
const m = minute();
const spreadDeg = map(m, 0, 59, 15, 45);
const spreadRad = radians(spreadDeg);
// Second → subtle global sway (smooth using millis())
timeSeconds = second() + millis() / 1000.0;
globalSway = radians(2) * sin(timeSeconds * 0.6); // ±2° in radians
// Base trunk length relative to canvas
const baseLength = min(height * 0.35, 280);
// --- Draw the tree from bottom center ---
push();
translate(width / 2, height); // bottom center origin
noFill();
// Draw trunk (depth 0)
const trunkAngle = -HALF_PI + globalSway * 0.4; // trunk gently sways as one piece
const trunkEndX = baseLength * cos(trunkAngle);
const trunkEndY = baseLength * sin(trunkAngle);
// Trunk color: dark brown
strokeWeight(MAX_STROKE);
const trunkHue = 30; // brownish
const trunkSat = 80;
const trunkBri = 40;
stroke(trunkHue, trunkSat, trunkBri);
line(0, 0, trunkEndX, trunkEndY);
// Move to top of trunk where main branches start
translate(trunkEndX, trunkEndY);
// --- Spawn main branches based on hour() ---
const firstBranchLength = baseLength * LENGTH_FACTOR;
if (mainBranches === 1) {
// Single main branch straight up
drawBranch(firstBranchLength, 1, spreadRad * 0.8, 0, 1);
} else {
// Fan of branches within [-spread, +spread]
const totalSpread = spreadRad * 2;
const step = totalSpread / (mainBranches - 1);
const startAngle = -spreadRad;
for (let i = 0; i < mainBranches; i++) {
const angleOffset = startAngle + step * i;
drawBranch(firstBranchLength, 1, spreadRad * 0.8, angleOffset, i + 1);
}
}
pop();
}
/**
* Recursively draws a fractal branch.
*
* @param {number} len Length of this branch segment
* @param {number} depth Current recursion depth (0 = trunk)
* @param {number} spread Base spread angle for child branches (radians)
* @param {number} angle Rotation relative to parent (radians)
* @param {number} branchId ID used to give each branch a unique noise pattern
*/
function drawBranch(len, depth, spread, angle, branchId) {
if (depth > MAX_DEPTH || len < 2) return;
push();
// Normalized depth 0..1
const t = depth / MAX_DEPTH;
// Local sway increases toward the tips
const localSway = globalSway * (0.4 + 0.6 * t);
// Noise-based tip motion (stronger toward tips)
const noiseInput = branchId * 0.35 + depth * 0.7;
const n = noise(noiseInput, timeSeconds * 0.2); // [0,1]
const noiseAmp = radians(1 + 5 * t); // up to ~6° at tips
const noiseAngle = map(n, 0, 1, -noiseAmp, noiseAmp);
// Apply rotation for this branch
rotate(angle + localSway + noiseAngle);
// Depth-based color from dark brown → spring green
// Brownish: H≈30, S≈80, B≈40
// Spring green: H≈110, S≈60, B≈90
const hCol = lerp(30, 110, t);
const sCol = lerp(80, 60, t);
const bCol = lerp(40, 90, t);
stroke(hCol, sCol, bCol);
// Stroke weight decreases with depth
const sw = map(depth, 0, MAX_DEPTH, MAX_STROKE, MIN_STROKE);
strokeWeight(sw);
// Draw the branch segment
line(0, 0, 0, -len);
translate(0, -len);
// Compute next branch length
const nextLen = len * LENGTH_FACTOR;
// Recurse: each branch splits into two children
if (depth < MAX_DEPTH) {
const childSpread = spread;
// Left child
drawBranch(nextLen, depth + 1, spread * 0.9, -childSpread, branchId * 2 + 1);
// Right child
drawBranch(nextLen, depth + 1, spread * 0.9, childSpread, branchId * 2 + 2);
}
pop();
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
```
**Key p5.js APIs used (for reference):**
- Time functions: [`hour()`](https://p5js.org/reference/#/p5/hour), [`minute()`](https://p5js.org/reference/#/p5/minute), [`second()`](https://p5js.org/reference/#/p5/second)
- Mapping & noise: [`map()`](https://p5js.org/reference/#/p5/map), [`noise()`](https://p5js.org/reference/#/p5/noise)
- Drawing & transforms: [`line()`](https://p5js.org/reference/#/p5/line), [`strokeWeight()`](https://p5js.org/reference/#/p5/strokeWeight), [`stroke()`](https://p5js.org/reference/#/p5/stroke), [`translate()`](https://p5js.org/reference/#/p5/translate), [`rotate()`](https://p5js.org/reference/#/p5/rotate), [`push()` / `pop()`](https://p5js.org/reference/#/p5/push)
---
### index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time-Driven Fractal Tree</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- p5.js library -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Your sketch -->
<script src="sketch.js"></script>
</body>
</html>
```
---
### style.css
```css
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #f6f0e4; /* backup soft paper color behind the canvas */
}
canvas {
display: block;
}
```
Apply these files and you’ll get a living fractal tree:
- Main branch count changes with the current hour (1–12).
- Branch fan angle breathes with the current minute (15°–45°).
- The whole tree and its tips sway gently with time via `second()` and Perlin noise.
- Color and stroke weight fade from a thick, dark-brown trunk to thin, spring-green tips.
