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

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

基本の設定をp5.rbで書いていきます。

def setup
  #カンバスサイズの設定
  createCanvas(600, 600)
  #カラーモードの指定（HSB推奨）
  colorMode(HSB, 360, 100, 100, 100)
  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #背景色を指定
  background(0, 0, 90)
end

HSB
>Hue（色相）、Saturation（彩度）、 Brightness（明度）
これを推奨するのはなんでなんだろうな。そうか、計算しやすいか。

HSB(エッチエスビー)とは？ 意味や使い方 - コトバンク

弧度法、度数法

https://www.nhk.or.jp/kokokoza/r2_math2/assets/memo/memo_0000001382.pdf

数学ろくにやってない（そういう高校のカリキュラムだっった）のでちょびちょび知るしかない。

画面の中央に図形を配置する（円，四角形）もやってみよう。

>変数：名前をつけられる「箱」のようなもの．数値や文字，色などの値を格納できる，

そう。変数は箱だよ箱。そのメタファーでわたしも生きてきました。

def setup
  #カンバスサイズの設定
  createCanvas(600, 600)
  #カラーモードの指定（HSB推奨）
  colorMode(HSB, 360, 100, 100, 100)
  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #背景色を指定
  background(0, 0, 90)
 
  #図形描画に関わる変数（x,y,大きさ）
  cx = width / 2;
  cy = height / 2;
  d = 300;

  #a-四角形の描画
  rectMode(CENTER)
  noStroke()
  fill(0, 0, 20)
  rect(cx, cy, d, d)

  #//b-円の描画
  #noStroke();
  #fill(0, 0, 20);
  #ellipse(cx, cy, d, d);  
  
end

四角形

def setup
  #カンバスサイズの設定
  createCanvas(600, 600)
  #カラーモードの指定（HSB推奨）
  colorMode(HSB, 360, 100, 100, 100)
  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #背景色を指定
  background(0, 0, 90)
 
  #図形描画に関わる変数（x,y,大きさ）
  cx = width / 2;
  cy = height / 2;
  d = 300;

  #a-四角形の描画
  #rectMode(CENTER)
  #noStroke()
  #fill(0, 0, 20)
  #rect(cx, cy, d, d)

  #b-円の描画
  noStroke()
  fill(0, 0, 20)
  ellipse(cx, cy, d, d)
  
end

丸

粒状感のある背景もいってみましょう。

・背景，図形描画の間に粒として大量の点を打つ
　・何%の濃度で点を打つか
　・半透明の点
・関連：周辺光量落ちへのリンク

def setup
  w = 600
  h = 600
  
  #カンバスサイズの設定
  createCanvas(w, h)
  #カラーモードの指定（HSB推奨）
  colorMode(HSB, 360, 100, 100, 100)
  #角度を弧度法から度数法に指定
  angleMode(DEGREES)
  #背景色を指定
  background(0, 0, 90)
 
  #画面上にたくさんの点を打つことで粒状感を背景に加える
  #点の密度，個数はカンバスのサイズに対して何％打つかを考えてみる
  
  #loop_num = (width * height * 5 / 100) <= Fatal Errorが起きる！
  loop_num = (w * h * 5 / 100)
  loop_num.times do
    #半透明の点，白でも黒でもOK．透明度は適宜調整する
    strokeWeight(1)
    stroke(100, 0, 0, 50)
    px = random(w)
    py = random(h)
    point(px, py)
  end

  
  #図形描画に関わる変数（x,y,大きさ）
  cx = width / 2;
  cy = height / 2;
  d = 300;

  #a-四角形の描画
  #rectMode(CENTER)
  #noStroke()
  #fill(0, 0, 20)
  #rect(cx, cy, d, d)

  #b-円の描画
  noStroke()
  fill(0, 0, 20)
  ellipse(cx, cy, d, d)
  
end

なるほど、座標をランダムにとってびゃーーー！！っとうっていくわけか。その密度は幅と高さをかけて、そこにさらに係数をかけて、それを100で割って%にするのか。

>loop_num = (width * height * 5 / 100) <= Fatal Errorが起きる！

Uncaught Error: Ruby Fatal Error: Ruby APIs that may rewind the VM stack are prohibited under nested VM operation (rb_wasm_handle_jmp_unwind)
Nested VM operation means that the call stack has sandwitched JS frames like JS -> Ruby -> JS -> Ruby caused by something like `window.rubyVM.eval("JS.global[:rubyVM].eval('Fiber.yield')")`

Please check your call stack and make sure that you are **not** doing any of the following inside the nested Ruby frame:
  1. Switching fibers (e.g. Fiber#resume, Fiber.yield, and Fiber#transfer)
     Note that `evalAsync` JS API switches fibers internally
  2. Raising uncaught exceptions
     Please catch all exceptions inside the nested operation
  3. Calling Continuation APIs

    at rb_wasm_throw_prohibit_rewind_exception (browser.umd.js:2712:25)
    at 0386a736:0xea40
    at 0386a736:0xf224
    at RbAbiGuest.rbFuncallvProtect (browser.umd.js:2214:169)
    at exports.<computed> [as rbFuncallvProtect] (browser.umd.js:2643:54)
    at browser.umd.js:3148:44
    at wrapRbOperation (browser.umd.js:3126:18)
    at callRbMethod (browser.umd.js:3147:14)
    at RbValue.call (browser.umd.js:3004:30)
    at p5.setup (browser.umd.js:2778:31)

まだメカニズムわからず。