p5.rbでのコーディングあそびをはじめました

日々「エンジニアリング」分野をおしごとにしております。

「Engineering Office」立ち上げとその背景 - pixiv inside

「ピクシブワークスタイル」ってどんな制度？新制度導入の背景を聞いてみた - pixiv inside

これは大変エキサイティングかつ創造性を要する仕事でいいものなのですが、この先の心身のすこやかさとしてプログラミングの身体性も改めて実感したいなあと思いまして家族に相談したところ、クリエイティブコーディングはいいぞということで動かし始めました。

p5.rb Editor

p5.rbでわかったこと

• setupは1回呼ばれる

• drawはフレームごとに呼ばれる

• https://p5js.org/reference/  のAPIやp5.jsのシステム変数をRubyからコールさせてくれる

  • 仕組みはべつのものですが、Win32OLEを経由してRubyからCOM経由でExcelを操作してたあの頃を思い出しました

• DevToolsでエラーのスタックトレースがでる

今日やったこと

https://p5rb.ongaeshi.me/ のデフォルトのコードを書き換えて動かしてみました。

def setup
  createCanvas(710, 400)
end

def draw
  background(100, 153, 0)
  100.times do |i|
    line(i, rand(0..100), 200, 200)
  end
end

おおー！線はびゃーーっと動いています

https://p5js.org/reference/#/p5/box に3Dのboxがぐるぐる動くのをRubyで書き直してみるのもしてみました。いや、書き直すもなにもセミコロンをとった程度ですが。

def setup
  createCanvas(710, 400, WEBGL)
  background(200)
end

def draw
  background(50)
  rotateX(frameCount * 0.01)
  rotateY(frameCount * 0.01)
  box(50)
end

ぐるぐるとボックスが回っている

この先

いきなり作品を作ろう！というのは、こういう何か描画する系のプログラムは全然やってこなかったため、そもそも何をどう描くかとかわからないにも程があるので、まずは「動かない」クリエイティブコーディングから一歩一歩やってみようしてます。

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

ジェネラティブアートとクリエイティブコーディング

p5.jsではじめるデイリーコーディング@Kyoto.js 17