Why?What?LoopsTemplateThe CursorShapesColoursVariables / Numbers / TimeConditions11/3 MoiréTransformArcs / Beziers / CurvesImage BasicsImage Pixels11/10 GlitchCameraAudioTypography17/11 TypographyRecap24/11 SketchingSave Images and Image Sequences12/08 PatternsNoiseLines and Curves01/12 Exporting High Res Images01/19 Exporting Video Frames
Image Slicing
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"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.