width = 500
height = 500
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.colorMode(s.HSL, 360, 100, 100);
s.rectMode(s.CENTER)
s.noStroke()
};
s.draw = function () {
s.clear()
s.translate(width/2, height/2)
s.rotate(s.PI / 360 * s.frameCount)
s.fill(s.frameCount % 360, 100, 50)
s.rect(0, 0, width/2, height/2)
};
s.mouseClicked = function () {
if (s.mouseX >= 0 && s.mouseX < width && s.mouseY >= 0 && s.mouseY < height) {
s.saveCanvas('image', 'png')
}
}
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.colorMode(s.HSL, 360, 100, 100);
s.rectMode(s.CENTER)
s.noStroke()
};
s.draw = function () {
s.clear()
s.translate(width/2, height/2)
s.rotate(s.PI / 360 * s.frameCount)
s.fill(s.frameCount % 360, 100, 50)
s.rect(0, 0, width/2, height/2)
};
s.mouseClicked = function () {
if (s.mouseX >= 0 && s.mouseX < width && s.mouseY >= 0 && s.mouseY < height) {
s.saveFrames('image', 'png', 5, 22)
}
}
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.colorMode(s.HSL, 360, 100, 100);
s.rectMode(s.CENTER)
s.noStroke()
};
s.draw = function () {
s.clear()
s.translate(width/2, height/2)
s.rotate(s.PI / 360 * s.frameCount)
s.fill(s.frameCount % 360, 100, 50)
s.rect(0, 0, width/2, height/2)
if (s.mouseIsPressed === true) {
s.frameRate(5) // slow down framerate
if (s.mouseX >= 0 && s.mouseX < width && s.mouseY >= 0 && s.mouseY < height) {
s.saveCanvas(`image-${s.frameCount}`, 'png')
}
} else {
s.frameRate(60) // reset framerate
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.colorMode(s.HSL, 360, 100, 100);
s.rectMode(s.CENTER)
s.noStroke()
s.noLoop()
s.frameRate(10)
};
s.draw = function () {
s.clear()
s.translate(width/2, height/2)
s.rotate(s.PI / 360 * s.frameCount)
s.fill(s.frameCount % 360, 100, 50)
s.rect(0, 0, width/2, height/2)
if (s.frameCount > 1) {
s.saveCanvas(`image-${s.frameCount - 1}`, 'png')
}
if (s.frameCount > 360) {
s.noLoop()
}
};
s.mouseClicked = function () {
if (s.mouseX >= 0 && s.mouseX < width && s.mouseY >= 0 && s.mouseY < height) {
s.loop()
}
}
})
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.
