今日のp5.rbでのコーディングあそび

グラフィックのための「動かない」クリエイティブコーディング

前回はつくったもの

3Dのboxを書いたらどうなるんだろう

まずリファクタリング

def setup
  #カンバスサイズの設定
  @canvas_w = 1000
  @canvas_h = 1000
  
  createCanvas(@canvas_w, @canvas_h)


  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #図形描画に関わる変数（x,y,大きさ）
  @rect_w = 8;
  @rect_h = 8;
  @rect_interval = 2
  @rect_x_step = (@rect_w + @rect_interval)
  @rect_y_step = (@rect_h + @rect_interval)
  
  #カラーモードの指定
  # HSBで色相、彩度、明度、はスクリーン幅に合わせる、透明度は百分率  
  colorMode(HSB, @canvas_w, @canvas_w, @canvas_w, 100)

  #背景色を指定
  background(20)
 
  iraka
end

def draw
end

private 
def iraka
  (@canvas_w / @rect_x_step).times do |x|
    (@canvas_h / @rect_y_step).times do |y|
      @rect_pos_x = @rect_interval + @rect_x_step * x
      @rect_pos_y = @rect_interval + @rect_y_step * y
      #a-四角形の描画
      rectMode(CORNER)
      noStroke()
      fill(random(0, @canvas_w) , @rect_pos_x , @rect_pos_y)
      rect(@rect_pos_x , @rect_pos_y, @rect_w, @rect_h) 
    end
  end
end

3Dの世界へ

計算速度稼ぐためにカンバスサイズは小さくしてます。

def setup
  #カンバスサイズの設定
  @canvas_w = 100
  @canvas_h = 100
  
  createCanvas(@canvas_w, @canvas_h, WEBGL)


  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #図形描画に関わる変数（x,y,大きさ）
  @rect_w = 8;
  @rect_h = 8;
  @rect_interval = 2
  @rect_x_step = (@rect_w + @rect_interval)
  @rect_y_step = (@rect_h + @rect_interval)
  
  #カラーモードの指定
  # HSBで色相、彩度、明度、はスクリーン幅に合わせる、透明度は百分率  
  colorMode(HSB, @canvas_w, @canvas_w, @canvas_w, 100)

  #背景色を指定
  background(20)
 
  iraka
end

def draw
#  r = rand(0.1..0.5)
#  rotateX(frameCount * r)
#  rotateY(frameCount * r)
end

private 
def iraka
  (@canvas_w / @rect_x_step).times do |x|
    (@canvas_h / @rect_y_step).times do |y|
      @rect_pos_x = @rect_interval + @rect_x_step * x
      @rect_pos_y = @rect_interval + @rect_y_step * y
      #a-四角形の描画
      rectMode(CORNER)
      noStroke()
      fill(random(0, @canvas_w) , @rect_pos_x , @rect_pos_y)
      rect(
        @rect_pos_x - @canvas_w / 2 ,
        @rect_pos_y - @canvas_h / 2, 
        @rect_w, @rect_h
      ) 
    end
  end
end

p5.js WebGL入門 2 3Dジオメトリ – HIM.CO ヒム・カンパニー

ここで注目すべきは、赤い矩形の描画位置です。rect()関数では(x,y)位置に(0,0)を指定していますが、矩形はキャンバスのセンターに描画されています。正確に言うと、矩形の左上隅(0,0)がキャンバスのセンター(150,200)と重なっています。

https://himco.jp/2020/07/11/p5-js-webgl%E5%85%A5%E9%96%80-2-3d%E3%82%B8%E3%82%AA%E3%83%A1%E3%83%88%E3%83%AA/

回す

def setup
  #カンバスサイズの設定
  @canvas_w = 500
  @canvas_h = 500
  
  createCanvas(@canvas_w, @canvas_h, WEBGL)


  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #図形描画に関わる変数（x,y,大きさ）
  @rect_w = 8;
  @rect_h = 8;
  @rect_interval = 2
  @rect_x_step = (@rect_w + @rect_interval)
  @rect_y_step = (@rect_h + @rect_interval)
  
  #カラーモードの指定
  # HSBで色相、彩度、明度、はスクリーン幅に合わせる、透明度は百分率  
  colorMode(HSB, @canvas_w, @canvas_w, @canvas_w, 100)
 
  iraka
end

def draw
  #背景色を指定
  background(20)

  rotateX(frameCount)
  rotateY(frameCount)
  iraka
end

private 
def iraka
  (@canvas_w / @rect_x_step).times do |x|
    (@canvas_h / @rect_y_step).times do |y|
      @rect_pos_x = @rect_interval + @rect_x_step * x
      @rect_pos_y = @rect_interval + @rect_y_step * y
      #a-四角形の描画
      rectMode(CORNER)
      noStroke()
      fill(random(0, @canvas_w) , @rect_pos_x , @rect_pos_y)
      rect(
        @rect_pos_x - @canvas_w / 2 ,
        @rect_pos_y - @canvas_h / 2, 
        @rect_w, @rect_h
      ) 
    end
  end
end

boxを置く

まって、boxの"位置"ってどう指定するの？

def setup
  #カンバスサイズの設定
  @canvas_w = 300
  @canvas_h = 300
  
  createCanvas(@canvas_w, @canvas_h, WEBGL)


  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #図形描画に関わる変数（x,y,大きさ）
  @rect_w = 8;
  @rect_h = 8;
  @rect_d = 8;

  @rect_interval = 2
  @rect_x_step = (@rect_w + @rect_interval)
  @rect_y_step = (@rect_h + @rect_interval)
  
  #カラーモードの指定
  # HSBで色相、彩度、明度、はスクリーン幅に合わせる、透明度は百分率  
  colorMode(HSB, @canvas_w, @canvas_w, @canvas_w, 100)
 
  debugMode  
end

def draw
  #背景色を指定
  background(20)
  normalMaterial
  orbitControl
  
#  rotateX(frameCount)
#  rotateY(frameCount)
  box(50)
  iraka
end

private 
def iraka
  (@canvas_w / @rect_x_step).times do |x|
    (@canvas_h / @rect_y_step).times do |y|
      @rect_pos_x = @rect_interval + @rect_x_step * x
      @rect_pos_y = @rect_interval + @rect_y_step * y
      #a-四角形の描画
      rectMode(CORNER)
      noStroke()
      fill(random(0, @canvas_w) , @rect_pos_x , @rect_pos_y)
      rect(
        @rect_pos_x - @canvas_w / 2 ,
        @rect_pos_y - @canvas_h / 2, 
        
        @rect_w, 
        @rect_h
      ) 
    end
  end
end

まずはデバッグ用のモノをおいて今日は終わりにします