だらっと学習帳

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

カテゴリ：Processing > p5.js

このたび、インプレス NextPublishing 技術の泉シリーズより「チャットAIよ、この世で一番美しいデジタルアートを創造せよ！」をリリースしました。
2冊目の商業出版です！やりました！



ChatGPTとBing AIといったチャットAIにプログラミングをお願いできるのなら、クリエイティブコーディングだってできるよね…？という内容になっています。
果たしてチャットAIはどのようなコードとアートを生成するのでしょうか？

書籍版、電子版をAmazonなどで販売しておりますのでぜひチェックしてください！

印刷書籍版▼


電子書籍版▼


プレスリリースはこちら:

このエントリーをはてなブックマークに追加

このたび、インプレス NextPublishing 技術の泉シリーズより「2時間でクリエイティブコーダーになる本」をリリースしました。
念願だった商業出版です。
このブログもずいぶん続けてきましたが、商業出版はひとつの目標だったので本当に嬉しいです。



プログラミング初心者さん・クリエイティブコーディング初心者さんにむけてp5.jsを解説した本です。
電子書籍版・印刷書籍版をAmazonなどで販売しておりますのでお手にとっていただけると嬉しいです！！！
よろしくお願いします！

印刷書籍版▼
2時間でクリエイティブコーダーになる本 (技術の泉シリーズ)
2時間でクリエイティブコーダーになる本 (技術の泉シリーズ)
迫田 千紘
インプレス NextPublishing
2023-05-05


Kindle版▼
2時間でクリエイティブコーダーになる本 技術の泉シリーズ
2時間でクリエイティブコーダーになる本 技術の泉シリーズ
迫田 千紘
インプレス NextPublishing
2023-05-05



プレスリリースはこちら:
プログラミングでアート作品を作る！ 『2時間でクリエイティブコーダーになる本』発行 技術の泉シリーズ、5月の新刊｜株式会社インプレスホールディングスのプレスリリース
ICT教育ニュースさんにも掲載していただきました:
インプレス、プログラミングでアート『2時間でクリエイティブコーダーになる本』発行 | ICT教育ニュース

このエントリーをはてなブックマークに追加



「p5.simpleAR」、めちゃくちゃお手軽にARが作れて面白いです！！



使い方は簡単！
いつもどおりp5.jsのスケッチを描く！
↑のページを参考にライブラリをhtml側で読み込む！
createCanvasをcreateARCanvasに書き換える！
実行するとカメラが起動するので↑のページにあるマーカー画像にかざす！
ARが表示されてたのしい！！！
以上！！かんたん！！

ポイントとして、背景の更新をbackground(なんとか)ではなくclear()にするといい感じです。
background(なんとか)だとキャンバスの領域いっぱいに背景色がつきますが、
clear()だと透過状態で画面を更新できます。

あと、せっかくのARだしスマホのカメラで見てみたい！という場合は下記のやり方で開くといいかもしれません。

Androidの場合



iOSの場合(safariで確認。ライブラリをローカルに設置する必要あり)



ついでに女の子の画像を表示したソースコードはこちら。
バーチャルな感じに出現させるエフェクトを作ってみました。



透過png+clear()で画面更新することでARでもきれいにキャラクターの形に浮き上がっているように見せることができました。

画像はこちらのジェネレータで作成しました。



【追記】
ARでつくってみたやつ:


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


Google Fonts大好き！





Noto Emojiをp5.jsで利用するにはhtml側で読み込んだ後、textFont()でフォント名を指定すればokです。
画像はmac使用時のものです。デフォルトのうさぎの描き方がリアル！




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



Noto Emojiはシンプルに一色で表現されているため、
fillやstrokeでの色の操作も可能です。
strokeWeightもいじれます。




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



コード中にemojiを入れるのが文字コード的に不安…という場合はCodepointsで指定する方法もあります。
Codepointsはemojipediaなどで調べられます。


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



emojiとかアイコンって面白いですよね〜。

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

p5.js(ver 1.5.0)において、ある色Aとある色Bが同じかどうかチェックしたいとします。
試しに下記のようなコードを書いてみると、想定とは異なる結果になっています。


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



colorAとcolorBはどちらも同じ色(color(0))なので等価のはずですが、
結果として「等価でない」扱いになってしまっています。

というわけで、色の等価チェックはこんな感じに書くといいみたいです。


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



toString()で文字列として比較しちゃえばいいんですね。

color型の中身をコンソールにそのまま出力するとこんな感じです。

.toString()をつけるとこんな感じにしてくれます。比較しやすくなって便利ですね。


get()と合わせてインタラクティブなサンプルを作ってみました。
カーソルが「@」の文字に当たっているかどうかを判定します。
イライラ棒的な遊び方ができそうです。


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



カーソルのある地点の色をget()で取得し、その色が文字色と同じかどうかをチェックしています。
2つの色が等価であればカーソルは文字に触れいているということになります。
実際に試してみた様子↓


参考 :
p5.js Web Editor | Comparing Pixel Color Information
  • カテゴリ:
    p5.js
  • by
このエントリーをはてなブックマークに追加

↑このページのトップヘ