だらっと学習帳

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



オンラインイベントProcessing Community Hangout Japan #02に参加しました。
30分間、作品制作の様子を配信する「30-min coding challenge」のコーナーで登壇(？)しました。
YouTubeでの配信をご覧くださった皆様、コメントで応援いただいた皆様、ありがとうございました。
また、主催・進行のPCD_Tokyoのひえださん、takawo先生、お世話になりました。色々本当に助かりました。



制作の様子を録画とはいえ配信するってめちゃくちゃ緊張しますね〜！！！
ポンコツなミスを連発してしまいましたが、最後には完成したので良かったです。

参考までに情報 :
エディタはVSCodeを使っています。
補完や自動リロードなどのExtensionを入れています。
この辺の話は以下の記事にまとめているのでご興味があればどうぞ！


星を描く時にコピペした数式他、色々な図形の描き方をまとめたQiita記事はこちらです。
Processing(Java版)のコードを掲載しています。


あと、トリビアとして語った「日本限定の七夕ディズニー」ってこれです。
来年は見に行けるといいよね🎋
東京ディズニーリゾートの七夕 - 東京ディズニーリゾートブログ
このエントリーをはてなブックマークに追加

p5.jsで10進数の数値を2進数や16進数に変換したり、2進数や16進数の数値を10進数の数値に変換する方法のまとめです。
p5.jsでと言いつつほぼほぼjsの話なんですが…いつも忘れちゃうので書いておきます！

10進数から2進数への変換するには以下のように書きます。
function setup() {

	let num = 7;

	let result = num.toString(2);



	console.log(result); // 111

}
任意の桁数でゼロ詰めしたい場合はnf()を利用します。
function setup() {

	let num = 7;

	let result = nf(num.toString(2), 8);



	console.log(result); // 00000111

}

2進数から10進数への変換は以下のとおりです。
function setup() {

	let num = '0111';

	let result = parseInt(num, 2);



	console.log(result); // 7

}

ちなみに2進数を利用するとこういうスケッチが描けます。
以下のコードはProcessingでbinary()という関数を使っていますが、p5.jsでも上記のやり方で同様のことができるはずです。

10進数から16進数への変換はこんな感じです。
変換のためにhex()という関数が用意されています。
function setup() {

	let num = 255;

	let result = hex(num);



	console.log(result); // 000000FF

}
hex()は桁数の指定もできます。
function setup() {

	let num = 255;

	let result = hex(num, 4);



	console.log(result); // 00FF

}

16進数から10進数への変換はこんな感じです。
unhex()という関数が便利です。
function setup() {

	let num = 'FF';

	let result = unhex(num);



	console.log(result); // 255

}
  • カテゴリ:
    p5.js
  • by
このエントリーをはてなブックマークに追加


というわけでコレ↑を描いていきましょう！！
ちなみに私は子どもの頃ビックリマンを買ってもらって2回目にしてアニメでもおなじみの「天助ポーチ」が出たのですごく嬉しくなってそこからドハマりしましたね。

作例として「全知全能妖精[ぜんちぜんのうフェアリー]」を作っていきましょう！
ダウンロード - 2020-05-17T235620.560

コーディングにあたって参考にした描き方解説ページ :
投稿イラスト講座v16『キラシールの描き方』トメヂさん

まずはホロ背景の下地を描いていきましょう。
createGraphics()で小さい四角の画像を生成します。


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



下地画像のちょうど真ん中から上に向かって黒い線を引きます。
この線が後々ホロっぽさを出すためのハイライトとシャドウになります。
線の長さは適当です。


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



黒い線を0度(描画開始の角度)から90+45度(描画終了の角度)の角度まで1度ずつ回転させながら描きます。


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



map()を使って線の色をいじります。
開始角度から終了角度までで黒〜白のグラデーションになるようにします。


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



上記の線のグラデーションを左側にも足します。
forループで線のグラデーションを2セット描きますが、ループカウンタの値に応じて開始角度と終了角度を変更します。
だいぶホロっぽくなってきましたね！


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



上記までで作成した背景の下地を敷き詰めます。
銀色のホロ感がありますね。


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



カラーモードをHSBに変更して、背景をレインボーに彩色します。
なお、この設定はcreateGraphicsで作成した背景の下地には作用しません。
というわけでビックリマン風背景の完成です！


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



emojiをキャライラストっぽく入れて、極太の黒枠線付きの赤文字でキャラ名を書き、
キャラ名の上にふりがなを振ったらこれはもうビックリマンですね…
テキストの起点の位置を中央にする設定と、線の結合部をまるくする設定を追加しています。
なお、emojiは文字化け防止のためString.fromCodePoint()で文字コードから生成しています。


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



ビックリマンのウエハースの味を思い出すようなスケッチができましたね！
ぜひやってみてください〜！！
  • カテゴリ:
    p5.js
  • by
このエントリーをはてなブックマークに追加

↑このページのトップヘ