Skip to content

Instantly share code, notes, and snippets.

@volfegan
Created May 17, 2021 20:49
Show Gist options
  • Select an option

  • Save volfegan/8b89ad5d0c972fc7f2321b84032d27c5 to your computer and use it in GitHub Desktop.

Select an option

Save volfegan/8b89ad5d0c972fc7f2321b84032d27c5 to your computer and use it in GitHub Desktop.
Very subtle pseudo3D tubular/cylindrical perspective effect on 2D images
//Reference:
//https://www.youtube.com/watch?v=E5hFPQrN_o4
//https://github.com/leonardo-ono/Java2DKriptokHorizontalBackgroundScrollTest/blob/master/src/View.java
float dx, dy; //direction of movement x, y
PImage img;
float[][] tubular;
void setup() {
size(1280, 720);
//img=loadImage("https://images.fineartamerica.com/images-medium-large-5/old-brick-wall-science-photo-library.jpg");
//img.resize(1280, 720);
//XOR pattern as background
PGraphics pg = createGraphics(width, height);
pg.beginDraw();
pg.clear();
pg.noStroke();
pg.colorMode(HSB);
for (int y=0; y< height; y+=5) {
for (int x=0; x< width; x+=5) {
pg.fill((x^y)%150+(x%(x*y+1))%69, 255-(x^y)%120, 340-((x^y)%170+180));
pg.rect(x, y, 5, 5);
}
}
pg.endDraw();
img = pg.get();
dx = 0;
dy = 0;
//pre-compute Tubular perspective array
tubular = new float[img.height][img.width];
float c = 4; //curvature
float d = 260; //deep correction
float modifier = 1f / (img.height / c + d); //variable to ajust better the effect on screen
for (int i = 0; i < img.width; i++) {
float u = i - img.width / 2f;
for (int j = 0; j < img.height; j++) {
if (u != 0) {
tubular[j][i] = (float) (-(u / Math.abs(u)) * Math.pow(Math.abs(u), Math.abs(j - img.height / 2) * modifier) - (-(u / Math.abs(u))));
// System.out.println("tubular[" + j + "][" + i + "] = " + tubular[j][i]);
}
}
}
clear();
image(img, 0, 0);
}
void draw() {
//Updade Tubular perspective array into image on screen
for (int i = 0; i < img.width; i++) {
for (int j = 0; j < img.height; j++) {
int x = (int) ((i + tubular[j][i] + dx) % img.width);
int y = (int) ((j + dy) % img.height);
if (x >= 0 && x < img.width) {
set(i, j, img.get(x, y));
}
}
}
//avoid negative numbers on dx,dy
dx += 2;//scroll left
//dy += 2;//scroll upward
dy = height/2+ sin(frameCount*.02) * height/5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment