だらっと学習帳

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

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



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

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

印刷書籍版▼


電子書籍版▼


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

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

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



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

印刷書籍版▼


Kindle版▼



プレスリリースはこちら:
プログラミングでアート作品を作る! 『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でつくってみたやつ:


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

↑このページのトップヘ