artist
sketch = function( p ) {
/* consoleHook is needed to ensure that the console hook is executed before this cell.
This is only relevant if you have to control the execution order on a page reload.
When playing around and debugging a notebook this is generally not necessary */
consoleHook;
// adapted from Daniel Shiffman
// variables: A B
// axiom: A
// rules: (A → AB), (B → A)
let button;
let clickCount = 0;
const axiom = "F";
let len = 250;
let angle;
let sentence = axiom;
var rules = [{
a: "F",
b: "FF+[+F-F-F]-[-F+F+F]"
}];
p.setup = () => {
p.createCanvas(p.windowWidth, 800);
p.background(0);
angle = p.radians(25);
p.createP(axiom);
turtle();
button = p.createButton('generate');
button.position(20, p.height-50 - 20);
button.style('width', '100px');
button.style('height','50px');
button.mousePressed(generate);
}
const generate = () => {
clickCount++;
if(clickCount>5) return;
p.strokeWeight(1);
len *= 0.5;
let nextSentence = "";
for (let i = 0; i < sentence.length; i++) {
let current = sentence.charAt(i);
let found = false;
for (let j = 0; j < rules.length; j++) {
if (current == rules[j].a) {
found = true;
nextSentence += rules[j].b;
break;
}
}
if (!found) {
nextSentence += current;
}
}
sentence = nextSentence;
// p.createP(sentence);
console.log(sentence);
turtle();
}
const turtle = () => {
p.background(51);
p.resetMatrix();
p.translate(p.width / 3, p.height);
p.stroke(255);
for (let i = 0; i < sentence.length; i++) {
let c = p.map(i, sentence.length, 0, 255, 100);
p.strokeWeight(1);
p.stroke(c);
var current = sentence.charAt(i);
if (current == "F") {
p.line(0, 0, 0, -len);
p.translate(0, -len);
} else if (current == "+") {
p.rotate(angle);
} else if (current == "-") {
p.rotate(-angle)
} else if (current == "[") {
p.push();
} else if (current == "]") {
p.pop();
}
}
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.