Last active
April 16, 2021 12:43
-
-
Save marcedwards/de04f87355a86875bfcd0e857cb9598f to your computer and use it in GitHub Desktop.
A twisty 3D effect using a 2D image, created with Processing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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