Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Perlin noise text displacement
//
// Perlin noise text displacement.
// Created using Processing 3.5.3.
//
// Code by @marcedwards from @bjango.
//
PGraphics textbuffer;
void setup() {
size(600, 300, P2D);
pixelDensity(1);
frameRate(30);
smooth(8);
String text = "The stars don’t look bigger, but they do look brighter.";
textbuffer = createGraphics(width, height, P2D);
textbuffer.beginDraw();
textbuffer.background(0);
textbuffer.textSize(20);
textbuffer.textAlign(CENTER);
textbuffer.fill(#666666);
textbuffer.text(text, width / 2, height / 2 + 1);
textbuffer.fill(#ffffff);
textbuffer.text(text, width / 2, height / 2);
textbuffer.endDraw();
}
void draw() {
background(0);
float distance = 250;
for (int i = 0; i < width; i++) {
float noise1 = timeNoise(120, 0.1, i * 0.14);
float noise2 = timeNoise(120, 0.1, i * 0.60);
float offset = noise1 * distance + noise2 * -distance;
float scale = Ease.hermite5(timeBounce(120, 120 - i * 0.05), 4);
copy(textbuffer, i, 0, 1, height, i, int(offset * scale), 1, height);
}
}
static class Ease {
static public float hermite5(float t) {
return t * t * t * (t * (t * 6 - 15) + 10);
}
static public float hermite5(float t, int repeat) {
for (int i = 0; i < repeat; i++) {
t = hermite5(t);
}
return t;
}
static public float tri(float t) {
return t < 0.5 ? t * 2 : 2 - (t * 2);
}
}
float timeLoop(float totalframes, float offset) {
return (frameCount + offset) % totalframes / totalframes;
}
float timeLoop(float totalframes) {
return timeLoop(totalframes, 0);
}
float timeBounce(float totalframes, float offset) {
return Ease.tri(timeLoop(totalframes, offset));
}
float timeNoise(float totalframes, float diameter, float zoffset) {
return noise(cos(timeLoop(totalframes) * TAU) * diameter + diameter,
sin(timeLoop(totalframes) * TAU) * diameter + diameter,
zoffset);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.