Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Processing Sketch for Creating Distorted Image Tile Animations
/*
Distortion Tiler
by Jacob Joaquin
To use:
Needs a 500x500 image. Search for "Set image name here" to change filename in code.
Find me:
https://github.com/jacobjoaquin/
https://twitter.com/JacobJoaquin
https://www.instagram.com/jacobjoaquin/
http://jacobjoaquin.tumblr.com/
https://hackaday.io/jacobjoaquin
https://www.openprocessing.org/user/23998
*/
boolean doCapture = false;
boolean doDrawAgent = false;
int nFrames = 64;
int nTiles = 36;
float phase = 0.0;
float phaseInc = 1.0 / (float) nFrames;
PImage img;
void settings() {
size(500, 500, P2D);
}
void setup() {
// Set image name here:
img = loadImage("./data/warholMarilyn500.jpg");
}
void draw() {
PVector p1 = PVector.fromAngle(phase * TAU)
.mult(125)
.add(width / 2.0 - 50, height / 2.0 + 50);
for (int y = 0; y < nTiles; y++) {
int yOffset = height / nTiles * y; // y position of tile
for (int x = 0; x < nTiles; x++) {
int xOffset = height / nTiles * x; // x position of tile
// Calculate image offset
// Based on distance of rotating agent from tile
float d = dist(p1.x, p1.y, xOffset, yOffset);
float a = atan2(p1.y - yOffset, p1.x - xOffset);
PVector p = PVector.fromAngle(a).mult((d * d) * 0.00125);
int x1 = (int) p.x;
int y1 = (int) p.y;
// Copy part of image to grid
copy(img, xOffset + x1, yOffset + y1, width, height, xOffset, yOffset, width, height);
}
// Draw agent
if (doDrawAgent) {
pushStyle();
stroke(0, 192);
fill(255, 192);
ellipse(p1.x, p1.y, 10, 10);
popStyle();
}
}
// Update phasor
phase += phaseInc;
if (phase >= 1.0) {
phase -= 1.0;
}
// Capture frames
if (doCapture) {
saveFrame("./frames/f######.tiff");
if (frameCount == nFrames) {
exit();
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment