はじめに
表現系でよくある、プリミティブな地形を作ってみました。 アルゴリズム自体は、シンプルで頂点ごとに、Sin関数で変化させ、 メッシュでつないでいきます。 今回は、WEBGL系の機能を含めバージョンアップした「P5js」 +「 WEBGLでビジュアル」を作ってみました。
P5.jsの実装
以下p5.jsの実装です。
p5jsのWEBGLの安定性・高速化されたということで、
比較的よくある表現ですがうねりのあるプレーンを作ってみました。
メッシュの色と動きが海の波っぽい感じになりました。
バーテックスでプレーンを作って頂点を
sin関数とマウス座標で変化をつけています。
P5.jsのWeb エディターがありますので、
そちらで色々アレンジして遊んでみるのもいかがでしょうか?
基本形はこのままにテクスチャで色々遊ぶのがおすすめです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
var cols, rows; var scl = 30; var w = 3000; var h = 2000; var mouseSpeed; var flying = 0; var terrain = []; var img; function setup() { createCanvas(windowWidth, windowHeight, WEBGL); cols = w / scl; rows = h/ scl; img = loadImage("https://image.freepik.com/free-photo/cement-wall-texture-background_76539-221.jpg"); for (var x = 0; x < cols; x++) { terrain[x] = []; for (var y = 0; y < rows; y++) { terrain[x][y] = 0; //specify a default value for now } } } function windowResized() { resizeCanvas(windowWidth, windowHeight); } function draw() { background(0,120); flying -= 0.005; print(map(mouseY,height,0,0.01,0.6)); var yoff = flying; for (var y = 0; y < rows; y++) { var xoff = 0; for (var x = 0; x < cols; x++) { //tie -50 , 50 to progress terrain[x][y] = map(noise(xoff, yoff), 0, 1, -200, 200); xoff += 0.1; } yoff += 0.1; } orbitControl(); translate(0, 0); rotateX(PI/3); let locX = mouseX - height / 2; let locY = mouseY - width / 2; fill(200,200,200,200); ambientLight(200,200,200); // texture(img); specularMaterial(0,127,255,80); translate(-w/2, -h/2); for (var y = 0; y < rows-1; y++) { beginShape(TRIANGLE_STRIP); for (var x = 0; x < cols; x++) { vertex(x*scl+sin(frameCount), y*scl, terrain[x][y]); vertex(x*scl, (y+1)*scl, terrain[x][y+1]); } endShape(); } } |