imageURL = FileAttachment("beer.jpg").url()
p5((s) => {
let img;
s.preload = function () {
img = s.loadImage(imageURL);
};
s.setup = function () {
s.createCanvas(width, height);
img.resize(width, height);
s.noFill();
};
s.draw = function () {
let source = [50, 50, 100, 100] // x, y, width, height
let target = [width / 2 + 50, 50, 100, 100]
img.copy(img, ...source, ...target); // the spread syntax (...) removes the brackets ([])
s.image(img, 0, 0);
s.stroke("red");
s.rect(...source);
s.stroke("green");
s.rect(...target);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
s.createCanvas(width, height);
image.resize(width, height);
s.noFill();
};
s.draw = function () {
let source = [380, 150, 100, 100] // x, y, width, height
let target = [s.mouseX, s.mouseY, 100, 100]
image.copy(image, ...source, ...target); // the spread syntax (...) removes the brackets ([])
s.image(image, 0, 0);
s.stroke("red");
s.rect(...source);
s.stroke("green");
s.rect(...target);
};
})
p5((s) => {
let sourceImage;
let targetImage;
s.preload = function () {
sourceImage = s.loadImage(imageURL);
};
s.setup = function () {
s.createCanvas(width, height);
sourceImage.resize(width, height);
// create an empty image
targetImage = s.createImage(width, height)
s.noFill();
};
s.draw = function () {
let source = [380, 150, 100, 100] // x, y, width, height
let target = [s.mouseX, s.mouseY, 100, 100]
// copy the full sourceImage to targetImage
targetImage.copy(sourceImage, 0, 0, width, height, 0, 0, width, height);
// copy part of the sourceImage to targetImage
targetImage.copy(sourceImage, ...source, ...target); // the spread syntax (...) removes the brackets ([])
s.image(targetImage, 0, 0);
s.stroke("red");
s.rect(...source);
s.stroke("green");
s.rect(...target);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
s.createCanvas(width, height);
image.resize(width, height);
};
s.draw = function () {
let x1 = s.random(image.width);
let y1 = s.random(image.height);
let x2 = x1 + s.random(-5, 5);
let y2 = y1 + s.random(-5, 5);
let fragmentWidth = 100
let fragmentHeight = 100
let source = [x1, y1, fragmentWidth, fragmentHeight]
let target = [x2, y2, fragmentWidth, fragmentHeight]
image.copy(image, ...source, ...target);
s.image(image, 0, 0);
};
})
p5((s) => {
let image;
s.preload = function () {
image = s.loadImage(imageURL);
};
s.setup = function () {
s.createCanvas(width, height);
image.resize(width, height);
s.frameRate(2);
s.noFill();
};
s.draw = function () {
let x1 = s.random(image.width);
let y1 = s.random(image.height);
let x2 = x1 + s.random(-5, 5);
let y2 = y1 + s.random(-5, 5);
let fragmentWidth = 100;
let fragmentHeight = 100;
let source = [x1, y1, fragmentWidth, fragmentHeight];
let target = [x2, y2, fragmentWidth, fragmentHeight];
image.copy(image, ...source, ...target);
s.image(image, 0, 0);
s.stroke("red");
s.rect(...source);
s.stroke("green");
s.rect(...target);
};
})
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.
