だらっと学習帳

Processingとか p5.jsとか 好きです

カテゴリ：Processing > Processing全般／Javaモード,Androidモード




というわけで愛とまごころでi18nに取り組みました。
OSS活動みたいにみんなでgit経由でわっしょいわっしょいするのはやったことなかったので、
お役に立ててよかったです。

OpenProcessingのEdit Profileから利用言語が変更できるみたいなのでぜひ試してみてください。
プロフィールページも色々変わってるので設定見直すと面白いかも
▼▼▼
OpenProcessing

openprocessing.org_user_13276__view=activity (1)
このエントリーをはてなブックマークに追加

#PCD2021 Japanおつかれさまでした〜！

webサイト :
Processing Community Day Japan 2021
チケットページ :
Processing Community Day Japan 2021 | Peatix
Twitterアカウント :
PCD Japan (@PCD_Tokyo) / Twitter

前々回、前回に引き続き今回もスタッフとしてお手伝いさせていただきました！
オンラインならではの盛り上がりを体感できるイベントでしたね！

アーカイブはこちらのYoutubeチャンネルからどうぞ！
Processing Community Japan - YouTube

今回は主にオンラインキャンプのメンター&スーベニアショップまわりを担当しました。

PCD Japan 2021オンラインキャンプとして、Processingルーキーの方々に1週間ほどでTシャツのデザインをお願いしました。
私はその間の技術サポートやデータの取りまとめ、ショップまわりの設定などをやりました。
今回の企画のアイデア元は↓のような感じでした。

スーベニアショップぜひぜひチェックしてください！
▼▼▼
PCD Japan スーベニアショップ ( PCD_Japan )のオリジナルアイテム通販 ∞ SUZURI（スズリ）

また、光栄なことにシークレットゲストであるシフマン先生に自分の作品を見て&遊んでいただきました。
憧れのコーダーなのでとても嬉しかったです！

デイリーコーディング週間にも参加していました。
無事に完走できてよかったです！
↓の記事にまとめているのでぜひこちらもチェックしてください！
PCD2021 デイリーコーディング週間 作品まとめ : だらっと学習帳
3Dギャラリーもめちゃかっこよかったですよね！

あらためて、PCDスタッフの皆様、登壇者の皆様、参加者の皆様、おつかれさまでした！
今後とも日本と世界のProcessingコミュニティを盛り上げていきましょう！！
このエントリーをはてなブックマークに追加



やっていきますわよ(デイリーコーディングお嬢様)
随時更新予定→完走しました！やったー！

過去のデイリーコーディング記録 :
Codevember完走しました2019！ : だらっと学習帳
dailycodingchallenge日記 : だらっと学習帳




草原っぽいカラーセットで線を重ねてみました。
草や風の流れ、あと草花で編んだかんむりのイメージです。
図形自体はnoiseで形作ったうずまき状の線で、10本描くごとに角度を変えています。
完成後にネギっぽい色合いに見えてしまって以来、ネギにしか見えなくて困っています。


最近勉強中のdrawingContext.clipで魚の形に抜いてみました。
ベースには海っぽいカラーセットの直線を重ねています。
さらに、魚それぞれにdrawingContextでシャドウもつけています。
drawingContext.clip、色々使えそうなんですがまだ全貌をつかめていません…


noiseを使って空っぽいドット絵を描きました。
ひとつ前のお題が「海」だったので、そこと違いをつけるのに苦労しました。
あまり複雑な模様にしすぎると雲っぽくならないので、ふわふわ感の出るパラメータを探し出しました。


桜の花の図形をnoiseであえて歪ませて、手描きっぽい質感を出しました。
塗りつぶしもグラデーションで色ムラっぽくしています。
また、背景も画用紙のイメージでザラつきを持たせました。


砂漠というワードから最初に思い浮かんだのは、スターウォーズに出てくる砂漠の惑星でした。
ということで、宇宙に浮かぶ砂漠の星を描きました。
「横長のキャンバスの真ん中にドーンとオブジェクトを描く」配置をよくやってしまいがちなので、
今回は複数のオブジェクトを奥行を持たせて配置してみました。


ゆめかわいいデザインではおなじみ、水色〜紫〜ピンクを織り交ぜた宇宙の模様を描いてみました。
ゆめかわといえばやっぱりこのキキララっぽいカラーリングですよね。
宇宙の描き方は下記のチュートリアルを参考にしました。
Tutorial - How to Draw a Galaxy by Sugary-Stardust on DeviantArt
それっぽい色合いのグニャグニャの線をたくさん引き、drawingContext.filter = 'blur(100px)'でぼかしました。
drawingContext.filter = 'blur(100px)'は初めて使ったんですがものすごい効能でびっくりしました！
いつか記事として書ければと思います。


昨日も使ったblurフィルタを再び使いました。これに頼りきりになりそうで恐ろしいです。
ブックカバーというお題にだいぶ苦戦しましたが、
子どもの頃漫画を買い揃えていった時に背表紙の絵がつながったりバリエーションがあったりしたのが好きだったことを思い出し、
分割された背表紙というテーマで描くことにしました。
emojiのうさぎ・鹿・鷹・象をeraseで抜いて、下にblurのマーブル模様を重ねました。
その後、バラバラに並べた本の背表紙のように見せるために分割して角度をつけて横に並べました。
以下のコードを再利用しています。
Flow of Water - OpenProcessing


というわけで完走しました！やったー！！！
今回のデイリーコーディングは短期だったので余裕を持って制作できました！
過去のデイリーコーディングよりは少し手間暇かけています。

ギャラリーもいいかんじに作っていただいているのでぜひチェックしてみてください！
このエントリーをはてなブックマークに追加





今年はオンライン開催！
webでも盛り上がっていきましょう！！
このエントリーをはてなブックマークに追加

Processingで作品をつくった！
みんなに見てほしい！触ってほしい！遊んでほしい！
というわけでwebで公開するためにp5.jsに書き換えてみましょう〜！

【2021/03/15 追記】
3Dの項目を追記

p5.jsとは


p5.jsはProcessingの特徴を受け継いだJavaScriptライブラリです。
home | p5.js
Processingの文法と一部は共通で、webでも柔軟にクリエイティブな表現ができるようになっています。

同じようなライブラリでProcessing.jsというライブラリもありましたが、
継続的なメンテナンスがされていないため、現在ではp5.jsの利用がオススメです。
Processing系作品投稿サービスのOpenProcessingでもProcessing.jsでの投稿はdeprecated(非推奨)とされています。
Processingjs Deprecation Notice | OpenProcessing FAQ

エディタの準備


p5.jsには公式でweb上で動かせるエディタもあります。
p5.js Web Editor
有志によって日本語でも利用できるようになりました。
右上の「English ▼」を押すと言語メニューが出てくるので、そこから「日本語」を選択すると切り替わります。
エディタではコーディングから実行、コードの保存などひととおりのことができます。
p5.jsに初めて触れる場合はここからスタートするのがオススメです！

お気に入りのエディタがある人はそれを利用してもokです！
CDNから利用できるのでそちらから読み込むとスムーズだと思います。
p5 CDN by jsDelivr - A CDN for npm and GitHub

html側はこんな感じで用意して、「sketch.js」側にp5.jsとしてのコードを書く構成です。


See the Pen
p5_html by reona396 (@reona396)
on CodePen.



Processingからp5.jsへの書き換え


まずはベーシックなスケッチから書き換えてみましょう。
Processingのコードがこんな感じの時…


p5.jsではこんな感じに書き換えます。


See the Pen
p5_basic by reona396 (@reona396)
on CodePen.



書き換えのポイントは次のとおりです。

* 関数の記述を書き換える。例: void setup → function setup
* size → createCanvas に書き換える
* 変数の定義時にconstやletを利用する

詳しく解説していきます！

関数の書き換え


Processingのコードが次のような時…


p5.jsなら次のように書きます。


See the Pen
p5_func by reona396 (@reona396)
on CodePen.



何でもfunctionですね。引数の型もとっぱらってます。
コンソールに出力しているのでブラウザのデベロッパーツールを開いて確認してみてください。

名称が異なる関数


Processingとp5.jsとで名称が異なる主な関数は次のようなものがあります。
コード書き換えの際には置き換えましょう。

Processing
p5.js
size()createCanvas()
pushMatrix()push()
popMatrix()pop()

また、(現状)p5.jsにだけ導入されている機能としてangleMode()が挙げられます。
angleMode()は角度の記述方法を切り替えられる関数です。
Processingで複数回radians()で変換していた場合、p5.jsではangleMode()を導入するのがオススメです。
例えばProcessingで次のように書いている時、


p5.jsならこうするとすっきりします。


See the Pen
p5_angle by reona396 (@reona396)
on CodePen.



変数の定義


Processingでは型ごとに異なりましたが、p5.jsではletとconstを利用します。
let - JavaScript | MDN
let 文はブロックスコープのローカル変数を宣言します。任意で値を代入して初期化できます。
const - JavaScript | MDN
定数 (const) は、let キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。
定数の値は、再代入による変更はできず、再宣言もできません。

クラスの書き換え


クラスを利用しているコードの書き換えに挑戦してみます。
(元ネタ : Array of Objects - examples | p5.js)

Processingならこんな感じですかね…


p5.jsならこんな感じ！


See the Pen
p5_class by reona396 (@reona396)
on CodePen.



画像を利用したスケッチ


画像を利用している場合は次のような書き換えになります。
ProcessingはPImageを利用しています。


p5.jsではpreload()を利用します。


See the Pen
p5_image by reona396 (@reona396)
on CodePen.



3Dのスケッチの書き換え


3Dで描画している作品の場合、細々と書き方が異なります。
Processingの場合はこんな感じ。


p5.jsではWEBGLモードで、座標位置(0, 0)がデフォルトでキャンバスの中央になります。


See the Pen
p5_3D by reona396 (@reona396)
on CodePen.



p5.jsの作品をwebで展示しよう


コードをProcessingからp5.jsへ書き換えたら、webで作品を展示してみましょう！
↓の記事にp5.jsを展示できるサービスをまとめたので、参考にしてみてください！
p5.js のスケッチを展示できるサービスを試してまとめてみた : だらっと学習帳

投稿したら「#p5js」のハッシュタグをつけてツイートするのがオススメです！！！
p5.jsのコミュニティを盛り上げていきましょう〜〜〜！！！

参考リンク


* get started | p5.js
* Processing transition · processing/p5.js Wiki
* Processingjs Deprecation Notice | OpenProcessing FAQ
* Processingからp5.jsへの移植は（難しいことしなければワリと）簡単 – infosmith.biz
* P5 mode
* こーひーをぶんなぐれ！ - P5.jsの基礎
* ArrayObjects \ Examples \ Processing.org
このエントリーをはてなブックマークに追加

↑このページのトップヘ