p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line == 120) {
s.stroke('lime');
} else if (line == 240) {
s.stroke('tomato');
} else {
s.stroke('cornflowerblue')
}
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line > 100) {
s.stroke('lime');
} else {
s.stroke('tomato');
}
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line > 200 && line < 400) {
s.stroke('lime');
} else {
s.stroke('tomato');
}
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line < 200 || line > 400) {
s.stroke('lime');
} else {
s.stroke('tomato');
}
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line % 60 == 0) {
s.stroke('lime');
} else {
s.stroke('tomato');
}
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(250);
s.strokeWeight(5)
for (let line = 0; line <= width; line += 30) {
if (line % 60 == 0) {
s.stroke('lime');
} else {
if (s.second() % 2 == 0) {
s.stroke('tomato');
} else {
s.stroke('cornflowerblue');
}
}
s.line(line, 0, line, height);
}
};
})
import {p5} from "@thometnanni/p5";
height = 400;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
