Thanks for that.
Still puzzles me that we crop big images.
In the format of the OP the images must be very wide and not very high…
fullscreen comic page as a screensaver
(not a screensaver as such, you need to start the Sketch)
// fullscreen comic page as a screen saver
int seed = int(random(1000));
int rows = 4;
int gap = 15;
int shearAngle = 20;
int maxImagesPerRow = 4;
// -------------------------------------------------------------------------------
// Two core functions
void setup() {
// size(560, 800);
fullScreen();
// generateRandomComic();
background(255);
}
void draw() {
generateRandomComic();
}
// -------------------------------------------------------------------------------
// Input functions
void mousePressed() {
generateRandomComic();
}
// -------------------------------------------------------------------------------
// 3 functions
void generateRandomComic() {
// generate one page
background(255);
float rowHeight = (height - ((rows + 1) * gap)) / rows;
float rowWidth = width - 2 * gap;
strokeWeight(2);
noFill();
translate(gap, gap);
for (int row = 0; row < rows; row++) {
float rowY = row * (rowHeight + gap);
int divisions = int(random(1, maxImagesPerRow + 1));
int orientation = int(random(3)) - 1;
pushMatrix();
translate(0, rowY);
float pieceWidth = (rowWidth - (divisions - 1) * gap) / divisions;
boolean shearFlip = orientation == 1;
float angle = orientation == 0 ? 0 : shearAngle;
float shearDist = rowHeight * tan(radians(angle));
float pieceOffset = 0;
for (int i = 0; i < divisions; i++) {
boolean isFirst = i == 0;
boolean isLast = i == divisions - 1;
float pieceRealWidth = isFirst ? pieceWidth - shearDist : pieceWidth;
PImage img = getRandomImageWithShear(pieceRealWidth, rowHeight, angle, shearFlip, !isFirst, !isLast);
image(img, pieceOffset, 0);
pieceOffset += pieceRealWidth + gap; // x value
}
popMatrix();
}
}
//
PImage getRandomImageWithShear(float w, float h,
float shearAngle,
boolean flip,
boolean shearLeft, boolean shearRight) {
//
float shearDist = h * tan(radians(shearAngle));
float imgFullWidth = w + shearDist;
PImage img = getRandomImage(imgFullWidth, h);
PGraphics quadMask = createGraphics(img.width, img.height);
quadMask.beginDraw();
if (flip) {
quadMask.quad(
0, 0,
shearLeft ? shearDist : 0, img.height,
img.width, img.height,
img.width - (shearRight ? shearDist : 0), 0
);
} else {
quadMask.quad(
shearLeft ? shearDist : 0, 0,
0, img.height,
img.width - (shearRight ? shearDist : 0), img.height,
img.width, 0
);
}
quadMask.endDraw();
img.mask(quadMask);
return img;
}
//
PImage getRandomImage(float w, float h) {
String url = "https://picsum.photos/seed/" + seed + "/" + int(w) + "/" + int(h) + ".jpg";
// println(url);
seed += 1;
return loadImage(url);
}
//
stripped it down to display just one image full screen for 4 seconds
unsing the picsum.photos/seed/... idea.
// fullscreen image as a screen saver
// from https://discourse.processing.org/t/crop-multiple-images-to-any-quad-shape-and-place-them-side-by-side-filling-the-canvas/41326
int seed = int(random(1000));
PImage img;
int timer;
// -------------------------------------------------------------------------------
// Two core functions
void setup() {
// size(560, 800);
fullScreen();
background(0);
getRandomImage(width, height);
timer=millis();
}
void draw() {
background(0);
if (millis()-timer>3999) {
getRandomImage(width, height);
timer=millis();
}
image(img, 0, 0);
}
// -------------------------------------------------------------------------------
// Input functions
void mousePressed() {
getRandomImage(width, height);
}
// -------------------------------------------------------------------------------
// functions
void getRandomImage(float w, float h) {
String url = "https://picsum.photos/seed/"
+ seed
+ "/"
+ int(w)
+ "/"
+ int(h)
+ ".jpg";
// println(url);
seed += 1;
img = loadImage(url);
}
//
(click to generate a new comic):
