WebサイトにWebGLで3D描写を！p5.jsでクリエイティブコーディング

WebGL

p5.js

オンラインエディターで触ってみよう

ためしに円を書いてみる

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  circle(200,200,100);
}

マウスの動きに付いてくる円にしてみる

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
  circle(mouseX,mouseY,100); //←ここ
}

setup()

draw()

基本動作は「順番、繰り返し、分岐」

順番に実行していく

function setup() {
//横400縦400のキャンバスを用意
  createCanvas(400, 400); 
}
function draw() {
//背景は灰色 RGB(220,220,220)
  background(220);
// 赤く塗って 
  fill(255,0,0);
//X座標100Y座標100一辺200の四角書く
  rect(100,100,200);
//緑に塗って
  fill(0,255,0); 
//X座標200Y座標200直径100の円を書く
  circle(200,200,100); 
}

for文で繰り返す

function setup() {
  createCanvas(400, 400); //横400縦400のキャンバスを用意
}
function draw() {
  background(220); //背景は灰色 RGB(220,220,220)
  fill(255,0,0);// 赤く塗って
  rect(100,100,200);//X座標100Y座標100一辺200の四角書く
  fill(0,255,0); //緑に塗って
  for (let i = 0;i<10;i++){
    //iという変数が10よりも小さい間はiに１を足し続ける
     circle(0 + i * 40,200,100);
    //X座標０から４０ずつ離して円を描写、Y座標は200、直径は100
  }
}

if文で条件をつける

function setup() {
  createCanvas(400, 400); //横400縦400のキャンバスを用意
}
function draw() {
  background(220); //背景は灰色 RGB(220,220,220)
  fill(255,0,0);// 赤く塗って
  rect(100,100,200);//X座標100Y座標100一辺200の四角書く
  fill(0,255,0); //緑に塗って
  for (let i = 0;i<10;i++){
    //iという変数が10よりも小さい間はiに１を足し続ける
     circle(0 + i * 40,200,100);
    //X座標０から４０ずつ離して円を描写、Y座標は200、直径は100
  if(i < 3){
      fill(0); // 最初の3つの円は黒で、それ以降の円は白で塗りつぶし
    } else {
      fill(255);
    }
  }
}

プログラムの基本「順番」「繰り返し」「分岐」これらを駆使して表現をつくるのが、p5.jsです！！！

肝心の3D

function setup() {
  createCanvas(400, 400, WEBGL); // 3Dキャンバスを作成
}

function draw() {
  background(220); // 背景を灰色に設定

  rotateX(frameCount * 0.01); // X軸を中心に回転
  rotateY(frameCount * 0.01); // Y軸を中心に回転

  box(100); // 100ピクセルの幅を持つ立方体を描画
}

他にも色々な表現を作って遊びました

おわりに