imageURL = FileAttachment("hut@2.jpg").url()
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio)
};
s.draw = function () {
let green = s.color(0,255,0);
let pink = s.color(255,127,127);
image.loadPixels();
// https://p5js.org/reference/#/p5/set
image.set(s.mouseX, s.mouseY, pink);
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.frameRate(1);
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) {
// each pixel has four values: red, green, blue, alpha
let r = image.pixels[index + 0]
let g = image.pixels[index + 1]
let b = image.pixels[index + 2]
let a = image.pixels[index + 3]
image.pixels[index + 0] = g
image.pixels[index + 1] = b
image.pixels[index + 2] = r
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
let r = image.pixels[index + 0]
let g = image.pixels[index + 1]
let b = image.pixels[index + 2]
let a = image.pixels[index + 3]
image.pixels[index + 0] = r * 2
image.pixels[index + 1] = g * 0.5
image.pixels[index + 2] = b * 0.25
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
image.pixels[index + 0] *= s.random(0.5, 1.5)
image.pixels[index + 1] *= s.random(0.5, 1.5)
image.pixels[index + 2] *= s.random(0.5, 1.5)
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
let noise = s.random(0.5, 1.5)
image.pixels[index + 0] *= noise
image.pixels[index + 1] *= noise
image.pixels[index + 2] *= noise
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
let r = image.pixels[index + 0]
let g = image.pixels[index + 1]
let b = image.pixels[index + 2]
let a = image.pixels[index + 3]
if (r > 180) {
image.pixels[index + 0] = 255
image.pixels[index + 1] = 0
image.pixels[index + 2] = 0
}
if (b < 50) {
image.pixels[index + 0] = 0
image.pixels[index + 1] = 0
image.pixels[index + 2] = 255
}
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
image.pixels[index + 3] = (index / 8) % 100
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < image.pixels.length; index += 4) { // each pixel has four values: red, green, blue, alpha
if (index > 74780 && index < 213310) {
image.pixels[index + 0] = 255
}
if (index > 183310 && index < 393310) {
image.pixels[index + 1] = 255
}
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
s.noLoop();
};
s.draw = function () {
image.loadPixels();
for (let x = 100; x < 200; x = x+1) {
for (let y = 100; y < image.height - 100; y++) {
image.set(x, y, s.color(0,255,0));
}
}
for (let x = 300; x < 400; x++) {
for (let y = 100; y < image.height - 100; y++) {
let color = image.get(x, y);
let newColor = s.color(s.red(color), s.green(color), 255)
image.set(x, y, newColor);
}
}
for (let x = 500; x < 600; x++) {
for (let y = 100; y < image.height - 100; y++) {
let color = image.get(x, y);
let newColor = s.color(s.blue(color), s.red(color), s.green(color))
image.set(x, y, newColor);
}
}
s.colorMode(s.HSL)
for (let x = 700; x < 800; x++) {
for (let y = 100; y < image.height - 100; y++) {
let color = image.get(x, y);
let newColor = s.color(s.hue(color), s.saturation(color), 50)
image.set(x, y, newColor);
}
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width;
s.createCanvas(width, image.height * ratio);
image.resize(width, image.height * ratio);
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < 500; index++) {
let x1 = s.random(0, image.width)
let y1 = s.random(0, image.height)
let color = image.get(x1, y1)
let x2 = s.random(0, image.width)
let y2 = s.random(0, image.height)
image.set(x2, y2, color)
}
image.updatePixels();
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
let height;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
let ratio = width / image.width
height = image.height * ratio;
s.createCanvas(width, height);
image.resize(width, height)
// image.resize(width, image.height * ratio);
s.noSmooth();
};
s.draw = function () {
image.loadPixels();
for (let index = 0; index < 10000; index++) {
let x = s.random(0, image.width)
let y = s.random(0, image.height - 1)
let color1 = image.get(x, y)
let color2 = image.get(x, y + 1)
let brightness1 = s.brightness(color1)
let brightness2 = s.brightness(color2)
if (brightness1 > brightness2) {
image.set(x, y, color2)
image.set(x, y + 1, color1)
}
}
image.updatePixels();
s.image(image, 0, 0, width, height);
};
})
p5((s) => {
let image
s.setup = function () {
s.createCanvas(width, height)
image = s.createImage(width, height);
s.noLoop();
}
s.draw = function () {
image.loadPixels();
for (let x = 0; x < image.width; x += 1) {
for (let y = 0; y < image.height; y += 1) {
let color = s.color(s.random(0,255), s.random(0,255), s.random(0,255));
image.set(x, y, color);
}
}
image.updatePixels();
s.image(image, 17, 17);
}
})
p5((s) => {
let image
s.setup = function () {
s.createCanvas(width, height)
image = s.createImage(width, height);
s.noLoop();
}
s.draw = function () {
s.colorMode(s.HSL);
image.loadPixels();
for (let x = 0; x < image.width; x += 1) {
let hue = s.map(x, 0, image.width, 0, 360);
for (let y = 0; y < image.height; y += 1) {
let lightness = s.map(y, 0, image.height, 0, 100);
let color = s.color(hue, 100, lightness);
image.set(x, y, color);
}
}
image.updatePixels();
s.image(image, 17, 17);
}
})
height = 300
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.
