Last active
July 7, 2022 17:38
-
-
Save volfegan/352ccf43bcf6529dd0c6878ae632f376 to your computer and use it in GitHub Desktop.
Pseudo 3D green crystals made of 2 layers of moving hexagon tiling
This file contains hidden or 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
//references: https://www.bit-101.com/blog/2019/01/perlinized-hexagons/ | |
//https://www.redblobgames.com/grids/hexagons/ | |
//https://www.youtube.com/watch?v=XSj0SAuiymI | |
float t; | |
void setup() { | |
size(1280, 720); | |
//stroke(0, 255, 0); | |
noStroke(); | |
} | |
void draw() { | |
clear(); | |
t+=.005; | |
float radius = 40; | |
float y_step = sin(PI / 3) * radius; | |
boolean isEven = true; | |
for (float y=-3*y_step; y < height; y+=y_step) { | |
float x_offset = 0; | |
if (isEven) { | |
x_offset = radius * 1.5; | |
} | |
for (float x = -radius * 3; x < width; x += radius * 3) { | |
color c = getShading(x + x_offset, y, t); | |
fill(c); | |
//hexagon(x + offset, y, radius); | |
hexagonNoise(x + x_offset, y, radius, t); | |
//second layer | |
c = getShading(x + x_offset, y, t+128); | |
fill(c); | |
hexagonNoise(x + x_offset, y, radius, t+128); | |
} | |
isEven = !isEven; | |
} | |
//saveFrame("frame_######.png"); | |
} | |
/* | |
* Draws simple hexagon shape | |
* @param float x | |
* @param float y | |
* @param float r (radius) | |
*/ | |
void hexagon(float x, float y, float r) { | |
float angle = 0; | |
beginShape(); | |
for (int i = 0; i < 6; i ++) { | |
vertex(x + cos(angle) * r, y + sin(angle) * r); | |
angle += PI / 3; | |
} | |
endShape(); | |
} | |
/* | |
* Draws a distorted hexagon shape using perlin noise | |
* @param float x | |
* @param float y | |
* @param float r (radius) | |
* @param float t (noise offset seed) | |
*/ | |
void hexagonNoise(float x, float y, float r, float t) { | |
float angle = 0; | |
beginShape(); | |
for (int i = 0; i < 6; i ++) { | |
PVector p = perlinize(x + cos(angle) * r, y + sin(angle) * r, t); | |
vertex(p.x, p.y); | |
angle += PI / 3; | |
} | |
endShape(); | |
} | |
/* | |
* Generate a PVector displacement point from a 3D perlin noise of circular path | |
* @param float x | |
* @param float y | |
* @param float t (noise offset seed) | |
* @return PVector | |
*/ | |
PVector perlinize(float x, float y, float t) { | |
float scale = 0.01; | |
float extension = 30; | |
float angle = noise(x * scale + 1*cos(t), y * scale + 1*sin(t), cos(t)+sin(t)) * PI; | |
return new PVector(x + cos(angle) * extension, y + sin(angle) * extension); | |
} | |
/* | |
* Generate a green shade color from a 3D perlin noise of downward-y and circular path-z | |
* @param float x | |
* @param float y | |
* @param float t (noise offset seed) | |
* @return color | |
*/ | |
color getShading(float x, float y, float t) { | |
float scale = 0.01; | |
float value = noise(x * scale, y * scale - .5*t + sin(sin(sin(t))), (cos(t)+sin(t))*.5); | |
float shade = map(value, 0,1,255,0); | |
return color(0,shade-32,0,shade-8); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment