Skip to content

Instantly share code, notes, and snippets.

@Neo-Desktop

Neo-Desktop/index.html

Created May 4, 2021 07:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Neo-Desktop/3070748dd74053c8180923ad3db17a72 to your computer and use it in GitHub Desktop.
Save Neo-Desktop/3070748dd74053c8180923ad3db17a72 to your computer and use it in GitHub Desktop.
Download ZIP
beter VaporWaveTerrain
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
Raw
sketch.js
let l = 720;
let divisor = 30;
let rows = l/divisor, cols = l/divisor;
let xvol = 0, yvol = 0, theta = 0;
let mapp = [];
function setup() {
createCanvas(700, 700, WEBGL);
background(0);
stroke(255);
strokeWeight(2);
for (let ix = 0; ix < cols; ix++) {
mapp[ix] = [];
for (let iy = 0; iy < rows; iy++) {
mapp[ix][iy] = 0;
}
}
}
function draw() {
background(0, 0, 30);
stroke(255, 0, 255);
fill(255, 0, 255);
translate(0, 0, -300);
lights();
sphere(260);
translate(-350, -200, 300);
fill(0, 0, 100);
stroke(0, 0, 30);
translate(-550,0);
for(let i = 27; i < 550; i+=7) {
rect(650, i, 650, 1);
}
translate(550 ,0);
translate(15, 250);
stroke(0, 255, 255);
rotateX(PI/2.5);
translate(-15, 0);
theta -= 0.02;
yvol = theta;
for (let y = 0; y < rows; y++) {
xvol = 0;
for (let x = 0; x < cols; x++) {
if (x <=3 || x>=cols-3) {
mapp[x][y] = map(noise(xvol, yvol), 0, 1, -50, 150);
}
else if (x ==4||x==cols-4) {
mapp[x][y] = map(noise(xvol, yvol), 0, 1, -50, 150)-20;
}
else {
mapp[x][y] = map(noise(xvol, yvol), 0, 1, -100, 90);
}
xvol += 0.27;
}
yvol += 0.27;
}
for (let col = 0; col < cols-1; col++) {
beginShape(TRIANGLE_STRIP);
for (let row = 0; row < rows; row++) {
vertex(row*divisor, col*divisor, mapp[row][col]);
vertex(row*divisor, (col+1)*divisor, mapp[row][col+1]);
}
endShape();
}
}
Raw
style.css
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment