Skip to content

Instantly share code, notes, and snippets.

@marcedwards
Last active April 16, 2021 12:43
Show Gist options
  • Save marcedwards/de04f87355a86875bfcd0e857cb9598f to your computer and use it in GitHub Desktop.
Save marcedwards/de04f87355a86875bfcd0e857cb9598f to your computer and use it in GitHub Desktop.
A twisty 3D effect using a 2D image, created with Processing
// A sin-y, wobbly, twisty, 3D-looking thing that slices up an image to create its effect.
// For more information and to download the image required, visit:
// https://dribbble.com/shots/5843126-Twisty-3D-effect-using-a-2D-image
//
// Place the image inside a folder called “data” alongside the Processing sketch for it to work.
// Created using Processing 3.4.
//
// Code by @marcedwards from @bjango.
PImage twist;
void setup() {
size(800, 600, P2D);
frameRate(30);
smooth(8);
twist = loadImage("twist.png");
}
void draw() {
float offset = 0;
float offsetanimate = 0.25 + (easeInOutSin(easeTriangle(timeCycle(120))) * 2.5);
float xwobble = 0;
background(#191030);
for (int i = 0; i < 30; i++) {
offset = easeInOutSin(timeCycle(60, i * offsetanimate)) * 0.4;
offset = offset + (timeCycle(60, i * offsetanimate) * 0.6);
offset = offset * 570;
xwobble = sin(timeCycle(120, i * 4) * TAU) * (easeInOutN(easeTriangle(timeCycle(120)), 4) * 100);
copyRow(int(offset), int(xwobble), i * 20, 19);
}
}
void copyRow(int ysource, int xdest, int ydest, int rowheight) {
copy(twist, 0, ysource, width, rowheight, xdest, ydest, width, rowheight);
}
//
// Standard Bjango helper functions.
//
float timeCycle(int totalframes, int offset) {
return float((frameCount + offset) % totalframes) / float(totalframes);
}
float timeCycle(int totalframes) {
return timeCycle(totalframes, 0);
}
float timeCycle(float totalframes, float offset) {
return (frameCount + offset) % totalframes / totalframes;
}
float timeCycle(float totalframes) {
return timeCycle(totalframes, 0);
}
float easeInOutSin(float t) {
return 0.5+sin(PI*t-PI/2)/2;
}
float easeInOutN(float t, float power) {
return t<0.5 ? 0.5*pow(2*t, power) : 1-0.5*pow(2*(1-t), power);
}
float easeTriangle(float t) {
return t<0.5 ? t*2 : 2-(t*2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment