//p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 5; // cell width
let ch = 5; // cell height
s.setup = function () {
s.createCanvas(w, h);
};
s.draw = function () {
s.background(0)
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
s.stroke(255,0,0)
s.strokeWeight(cw/4)
s.line(cw, ch/2, cw, ch)
s.stroke(0,255,0)
s.line(cw*25/20, ch/2, cw*25/20, ch)
s.stroke(0,0,255)
s.line(cw*15/20, ch/2, cw*15/20, ch)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
//p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 5; // cell width
let ch = 5; // cell height
let guyX = 200; // Starting Point X
let guyY = 200; // Starting Point Y
s.setup = function () {
s.createCanvas(w, h);
};
s.draw = function () {
s.background(0)
for (let x = 0; x < w; x += cw) {
for (let y = 0; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
s.stroke(255,0,0)
s.strokeWeight(cw/4)
s.line(cw, ch/2, cw, ch)
if (x == guyX && y == guyY) {
s.stroke(0,255,0)
s.line(cw*25/20, ch/2, cw*25/20, ch)
s.stroke(0,0,255)
s.line(cw*15/20, ch/2, cw*15/20, ch)
}
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
s.keyPressed = function () {
switch (s.keyCode) {
case s.ENTER:
guyX = 80;
break;
case s.UP_ARROW:
guyY -= ch;
break;
case s.DOWN_ARROW:
guyY += ch;
break;
case s.LEFT_ARROW:
guyX -= cw;
console.log(guyX);
break;
case s.RIGHT_ARROW:
guyX += cw;
console.log(guyX);
}
};
})
p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 20; // cell width
let ch = 20; // cell height
s.setup = function () {
s.createCanvas(w, h);
s.frameRate(1);
};
s.draw = function () {
s.background(0)
for (let x = 0-cw; x < w; x += cw) {
for (let y = 0-ch; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
s.stroke(s.random(0,255),0,0)
s.strokeWeight(cw/4)
s.line(cw, ch/2, cw, ch)
s.stroke(0,s.random(0,255),0)
s.line(cw*25/20, ch/2, cw*25/20, ch)
s.stroke(0,0,s.random(0,255))
s.line(cw*15/20, ch/2, cw*15/20, ch)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
};
})
//p5((s) => {
let w = 600; // width
let h = 400; // height
let cw = 5; // cell width
let ch = 5; // cell height
let timeR = 0;
let timeG = 250;
let timeB = 0;
s.setup = function () {
s.createCanvas(w, h);
s.frameRate(60);
};
s.draw = function () {
s.background(0)
for (let x = 0-cw; x < w; x += cw) {
for (let y = 0-ch; y < h; y += ch) {
s.translate(x, y)
s.translate(cw / 2, ch / 2)
s.stroke(timeR,0,0)
s.strokeWeight(cw/4)
s.line(cw, ch/2, cw, ch)
s.stroke(0, timeG,0)
s.line(cw*25/20, ch/2, cw*25/20, ch)
s.stroke(0,0,timeB)
s.line(cw*15/20, ch/2, cw*15/20, ch)
s.resetMatrix() // reset translate/transform/scale for next interation
}
}
if (timeR < 250 && timeG >= 250 && timeB <= 10) timeR += 10
if (timeR >= 250 && timeB < 250 && timeG < 10) timeB += 10
if (timeB >= 250 && timeR >= 10) timeR -= 10
if (timeR < 10 && timeB >= 10 && timeG <= 250) timeG += 10
if (timeB >= 10 && timeG >= 250) timeB -= 10
if (timeR >= 250 && timeG >= 10) timeG -= 10
};
})
import {p5} from "@thometnanni/p5";
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.
