WEBGL with p5.jsで地形メッシュを作る

2020.03.11

はじめに

表現系でよくある、プリミティブな地形を作ってみました。アルゴリズム自体は、シンプルで頂点ごとに、Sin関数で変化させ、メッシュでつないでいきます。今回は、WEBGL系の機能を含めバージョンアップした「P5js」 +「 WEBGLでビジュアル」を作ってみました。

P5.jsの実装

以下p5.jsの実装です。

p5jsのWEBGLの安定性・高速化されたということで、
比較的よくある表現ですがうねりのあるプレーンを作ってみました。

メッシュの色と動きが海の波っぽい感じになりました。

バーテックスでプレーンを作って頂点を
sin関数とマウス座標で変化をつけています。

P5.jsのWeb エディターがありますので、
そちらで色々アレンジして遊んでみるのもいかがでしょうか？
基本形はこのままにテクスチャで色々遊ぶのがおすすめです。

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();
  }
}

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();

}

WEBGL with p5.jsで地形メッシュを作る

はじめに

P5.jsの実装

Web Workerを利用した並列処理

UE4でPixel Streamingを試す。