Created
November 8, 2015 05:48
-
-
Save masakick/1634f13ce0e755ef100f to your computer and use it in GitHub Desktop.
perlin walk
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
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>p5.js practice</title> | |
| </head> | |
| <body> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.js"></script> | |
| <script> | |
| ar yoff = 0.0; // 2nd dimension of perlin noise | |
| function setup() { | |
| createCanvas(710, 400); | |
| } | |
| function draw() { | |
| background(51); | |
| fill(255); | |
| // We are going to draw a polygon out of the wave points | |
| beginShape(); | |
| var xoff = 0; // Option #1: 2D Noise | |
| // float xoff = yoff; // Option #2: 1D Noise | |
| // Iterate over horizontal pixels | |
| for (var x = 0; x <= width; x += 10) { | |
| // Calculate a y value according to noise, map to | |
| // Option #1: 2D Noise | |
| var y = map(noise(xoff, yoff), 0, 1, 200,300); | |
| // Option #2: 1D Noise | |
| // float y = map(noise(xoff), 0, 1, 200,300); | |
| // Set the vertex | |
| vertex(x, y); | |
| // Increment x dimension for noise | |
| xoff += 0.05; | |
| } | |
| // increment y dimension for noise | |
| yoff += 0.01; | |
| vertex(width, height); | |
| vertex(0, height); | |
| endShape(CLOSE); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment