<p><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/55ec96c1ad7c405d9a71fe90bca37c30/icon_bg.png?w=128&amp;h=128" alt="reona396 icon"><br>@reona396 / レオナ<br>九州出身 東京・横浜で活動中<br><br>インタラクションやwebフロントエンドのエンジニアとして働きながら、<br>クリエイティブコーディングを通してデジタルアーティストとして活動しています。<br>Processingとp5.js、ロボットアニメと特撮とゲームが大好き！<br></p><h3 id="hd520c521dd">スキル</h3><ul><li>p5.js</li><li>Processing</li><li>Unity</li><li>html / CSS / JavaScript</li><li>React</li><li>Next.js</li></ul><h3 id="h40b0e8394b">興味のある分野</h3><ul><li>インタラクション</li><li>クリエイティブコーディング</li><li>プロジェクションマッピング</li><li>VR</li><li>NFT</li><li>プログラミング教育</li><li>フロントエンド</li><li>技術同人誌・記事執筆</li><li>洋服・グッズデザイン制作</li></ul><h2 id="h447bf3353c">連絡先</h2><ul><li><a href="https://twitter.com/reona396" target="_blank" rel="noopener noreferrer">Twitter</a></li><li>Mail : reona396 at gmail</li><li><a href="https://www.instagram.com/reona396_artworks/" target="_blank" rel="noopener noreferrer">Instagram</a></li><li><a href="https://misskey.io/@reona396" target="_blank" rel="noopener noreferrer">Misskey.io</a></li><li><a href="https://bsky.app/profile/reona396.bsky.social" target="_blank" rel="noopener noreferrer">Bluesky</a></li></ul><h2 id="he4ba96ecb5">リンク</h2><h3 id="h7d1029f5f4">技術記事</h3><ul><li><a href="http://blog.livedoor.jp/reona396/" target="_blank" rel="noopener noreferrer">ブログ「だらっと学習帳」</a></li><li><a href="https://qiita.com/reona396" target="_blank" rel="noopener noreferrer">Qiita</a></li></ul><h3 id="h399a1b9cc8">作品ギャラリー</h3><ul><li><a href="https://openprocessing.org/user/13276" target="_blank" rel="noopener noreferrer">OpenProcessing</a></li><li><a href="https://neort.io/EDAeR4N1gzNvQX1xAKDAHgFopeG3" target="_blank" rel="noopener noreferrer">NEORT</a></li><li><a href="https://www.instagram.com/reona396_artworks/" target="_blank" rel="noopener noreferrer">Instagram</a></li></ul><h3 id="h6c925ac8da">作品の更新情報</h3><ul><li><a href="https://note.com/reona396/" target="_blank" rel="noopener noreferrer">note</a></li></ul><h3 id="hfaf84e33c0">グッズ売り場</h3><ul><li><a href="https://suzuri.jp/reona396" target="_blank" rel="noopener noreferrer">SUZURI</a></li><li><a href="https://reona396.booth.pm/" target="_blank" rel="noopener noreferrer">BOOTH</a></li><li><a href="https://techbookfest.org/organization/5067616674643968" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a></li><li><a href="https://www.dlsite.com/maniax/circle/profile/=/maker_id/RG72854.html" target="_blank" rel="noopener noreferrer">DLsite</a></li></ul><h3 id="h9b0d8a1a9a">発表スライド資料</h3><ul><li><a href="https://www.slideshare.net/reona396/presentations" target="_blank" rel="noopener noreferrer">SlideShare</a></li></ul><h3 id="hf25d76ae66">NFT 参加コレクション</h3><ul><li><a href="https://opensea.io/collection/function-draw" target="_blank" rel="noopener noreferrer">function draw()</a></li><li><a href="https://vessel.neort.io/" target="_blank" rel="noopener noreferrer">NEORT Vessel</a></li><li><a href="https://openprocessing.org/crayon" target="_blank" rel="noopener noreferrer">Crayon Codes</a></li><li><a href="https://opensea.io/collection/kumaleon-nft" target="_blank" rel="noopener noreferrer">KUMALEON</a></li><li><a href="https://www.mediaart-gallery.com/" target="_blank" rel="noopener noreferrer">Media Art Gallery</a></li></ul><h3 id="haff2c13bdf">NFT 個人販売</h3><ul><li><a href="https://www.fxhash.xyz/u/reona396" target="_blank" rel="noopener noreferrer">fxhash</a></li></ul>

Profile

Activity

<h2 id="h71f58bfb59">インタラクション</h2><p><a href="https://www.youtube.com/watch?v=9HUdbkhF-6M" target="_blank" rel="noopener noreferrer">Camera gesture - YouTube</a></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F9HUdbkhF-6M%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D9HUdbkhF-6M&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F9HUdbkhF-6M%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br><span style="color:#0066cc">your hands with fairy dust - OpenProcessing</span></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FnaLJPpEOzsc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DnaLJPpEOzsc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FnaLJPpEOzsc%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br>  <br><a style="background-color:#ffffff" href="https://openprocessing.org/sketch/1179185" target="_blank" rel="noopener noreferrer">Interactive Noise - OpenProcessing</a><br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FkG6ug3Iz6OY%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DkG6ug3Iz6OY&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FkG6ug3Iz6OY%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h3f9781cf2d">アニメーション</h2><p><a style="background-color:#ffffff" href="https://openprocessing.org/sketch/1267935" target="_blank" rel="noopener noreferrer">Chaos and Order - OpenProcessing</a></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FeJiQ3_iwkxg%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeJiQ3_iwkxg&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FeJiQ3_iwkxg%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br><a style="background-color:#ffffff" href="https://openprocessing.org/sketch/1306026" target="_blank" rel="noopener noreferrer">planes - OpenProcessing</a><br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F-zUfKS-NXX8%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D-zUfKS-NXX8&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F-zUfKS-NXX8%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="ha1f8d0853b">グラフィック</h2><p><a style="background-color:#ffffff" href="https://openprocessing.org/sketch/1481879" target="_blank" rel="noopener noreferrer">noise circle - OpenProcessing</a><br><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/624a668299e044178de54eead42abf9f/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(3).png?w=560&amp;h=293" alt=""><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/c39b495e531541a18b9270328e429183/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(5).png?w=560&amp;h=293" alt=""><br><br><a style="background-color:#ffffff" href="https://openprocessing.org/sketch/1499344" target="_blank" rel="noopener noreferrer">curves - OpenProcessing</a><br><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/c7c4442135434ba2888f35b66cc2d2bd/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(7).png?w=560&amp;h=293" alt=""><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/e226063b696c4afcb7853d6bf102671c/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(1).png?w=560&amp;h=293" alt=""><br><br><a href="https://openprocessing.org/sketch/1569371" target="_blank" rel="noopener noreferrer">emoji glitch - OpenProcessing</a><br><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/9fd20366b46c4d829009b4e8088ac151/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99.png?w=560&amp;h=385" alt=""><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/8097a2cb4432477a8776ebf834c87ae0/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(3).png?w=560&amp;h=385" alt=""><br><br><a href="https://openprocessing.org/sketch/1577060" target="_blank" rel="noopener noreferrer">GAME BOY emoji - OpenProcessing</a><br><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/abe98bfbd07449b4b840bb9d430c4f68/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(18).png?w=560&amp;h=385" alt=""><br><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/4258e83958ef424e977a032e8465c02d/%E3%82%BF%E3%82%99%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%20(17).png?w=560&amp;h=385" alt=""><br></p>

Gallery

<p>書籍・技術同人誌・雑貨・NFTアートを販売しています。</p><h2 id="h48f039f5a7">書籍</h2><h3 id="h513dddc636">2時間でクリエイティブコーダーになる本</h3><p><a href="https://nextpublishing.jp/book/16620.html" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/b96d1a78f34b4a7c8888e5f8dbc1af96/FvFx8ncaEAAfIZs.jpeg?w=298&amp;h=420" alt=""></a><br>初の商業出版本です！<br>プログラミング初心者さんに向けてp5.jsを解説しています。<br>電子書籍版・印刷書籍版があります。<br>Amazonなどでお買い求めいただけます。<br><a href="https://nextpublishing.jp/book/16620.html" target="_blank" rel="noopener noreferrer">2時間でクリエイティブコーダーになる本 | NextPublishing</a></p><h3 id="h11154b2a1f">チャットAIよ、この世で一番美しいデジタルアートを創造せよ！</h3><p><a href="https://nextpublishing.jp/book/16896.html" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/1a0d4fcc514d41b6bfe8996f09f2026e/chatAI.jpeg?w=297&amp;h=420" alt=""></a><br>2冊目の商業出版本です！<br>チャットAIにクリエイティブコーディングのコードを書かせて結果にツッコミを入れる本です。<br>電子書籍版・印刷書籍版があります。<br>Amazonなどでお買い求めいただけます。<br><a href="https://nextpublishing.jp/book/16896.html" target="_blank" rel="noopener noreferrer">チャットAIよ、この世で一番美しいデジタルアートを創造せよ！ | NextPublishing</a></p><h2 id="h81f6292f61">技術同人誌</h2><p>いずれも電子版です。DLsiteのみ計算方法の違いで価格が異なります。</p><h3 id="h06189437cf">クリエイティブコーディングの参考書</h3><p><a href="https://reona396.booth.pm/items/5243979" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/59bdec4e417741ff9eb1fff98157d6bc/hyoushi.png?w=300&amp;h=425" alt=""></a><br>大学などで展開されているProcessingとp5.jsの授業や課題(宿題)を研究してまとめた本です。<br><a style="background-color:#ffffff" href="https://reona396.booth.pm/items/5243979" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a style="background-color:#ffffff" href="https://techbookfest.org/product/aJkniC5pLJWvANaG9mTsWE" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a style="background-color:#ffffff" href="https://suzuri.jp/reona396/digital_products/26758" target="_blank" rel="noopener noreferrer">SUZURI</a></p><h3 id="h11154b2a1f">チャットAIよ、この世で一番美しいデジタルアートを創造せよ！</h3><p><a href="https://reona396.booth.pm/items/4789694" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/fff0fdc24e024bfe886fa7bb1f3612ae/chatAI_top_tw.png?w=300&amp;h=420" alt=""></a><br>ChatGPTとBing AIにクリエイティブコーディングを書かせる実験をまとめた本です。<br><a style="background-color:#ffffff" href="https://reona396.booth.pm/items/4789694" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a style="background-color:#ffffff" href="https://techbookfest.org/product/4b4WT93E31UBjbvw9HJLHX" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a style="background-color:#ffffff" href="https://www.dlsite.com/home/work/=/product_id/RJ01061174.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a style="background-color:#ffffff" href="https://suzuri.jp/reona396/digital_products/13860" target="_blank" rel="noopener noreferrer">SUZURI</a></p><h3 id="h45dd1fae7e">2時間でクリエイティブコーダーになる本 p5.jsではじめるアートプログラミング[第2版]</h3><p><a href="https://reona396.booth.pm/items/4157073" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/24f1a4aa7bee4b9198b4ef3d926d4fe5/ryFww8TuiXMiVhuVpwiTff.png?w=300&amp;h=425" alt=""></a><br>プログラミング初心者さん向けにp5.jsを基礎から解説した本です。<br><a href="https://reona396.booth.pm/items/4157073" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a href="https://techbookfest.org/product/jGyjrJeF4pmMhVF3t0Jwmy" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a href="https://www.dlsite.com/home/work/=/product_id/RJ01018305.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a href="https://suzuri.jp/reona396/digital_products/5555" target="_blank" rel="noopener noreferrer">SUZURI</a></p><h3 id="h7605249a59">デジタルクリエイターが紙の手帳に立ち向かってみた</h3><p><a href="https://reona396.booth.pm/items/2359710" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/488cc3cdb873456eb2a066e74fb5ee5e/book.png?w=300&amp;h=425" alt=""></a><br>デジタルクリエイター生活を整理するために紙の手帳に挑戦する本です。<br><a href="https://reona396.booth.pm/items/3596399" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a href="https://techbookfest.org/product/5267506111447040" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a href="https://www.dlsite.com/home/work/=/product_id/RJ01019434.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a href="https://suzuri.jp/reona396/digital_products/5554" target="_blank" rel="noopener noreferrer">SUZURI</a><br></p><h3 id="hacf7169bb3">クリエイティブコーディング メイキングブック</h3><p><a href="https://reona396.booth.pm/items/3103536" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/c8cbbafc81d64027acff89240789e210/%E8%A1%A8%E7%B4%99.png?w=300&amp;h=424" alt=""></a><br>クリエイティブコーディング10作品のメイキング本です。<br><a href="https://reona396.booth.pm/items/3103536" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a href="https://techbookfest.org/product/5297511164018688" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a href="https://www.dlsite.com/home/work/=/product_id/RJ01019441.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a href="https://suzuri.jp/reona396/digital_products/5553" target="_blank" rel="noopener noreferrer">SUZURI</a><br></p><h3 id="h33b63ddb3f">p5.jsで楽しもう！ジェネラティブアート図鑑</h3><p><a href="https://reona396.booth.pm/items/2630602" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/d0472176aa5a44eb9a3650d983426fbf/%E8%A1%A8%E7%B4%99%E7%94%BB%E5%83%8F.png?w=300&amp;h=424" alt=""></a><br>ジェネラティブアートをジャンルごとに体験&amp;鑑賞できる本です。<br><a href="https://reona396.booth.pm/items/2630602" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a href="https://techbookfest.org/product/5422489595281408" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a href="https://www.dlsite.com/home/work/=/product_id/RJ01021878.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a href="https://suzuri.jp/reona396/digital_products/5542" target="_blank" rel="noopener noreferrer">SUZURI</a><br></p><h3 id="h950e0a1eb2">できるだけ毎日続けるためのデイリーコーディング戦略 [第2版]</h3><p><a href="https://reona396.booth.pm/items/2359710" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/4e084a1a39094e75b11014759d2e7dd9/200816%E8%A1%A8%E7%B4%99%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88%E3%81%AE%E3%82%B3%E3%83%92%E3%82%9A%E3%83%BC.png?w=300&amp;h=424" alt=""></a><br>クリエイティブコーディングを毎日無理なく続けるためのアドバイス本です。<br><a href="https://reona396.booth.pm/items/2359710" target="_blank" rel="noopener noreferrer">BOOTH</a> / <a href="https://techbookfest.org/product/6000948635762688" target="_blank" rel="noopener noreferrer">技術書典オンラインマーケット</a> / <a href="https://www.dlsite.com/home/work/=/product_id/RJ01021883.html" target="_blank" rel="noopener noreferrer">DLsite</a> / <a href="https://suzuri.jp/reona396/digital_products/5541" target="_blank" rel="noopener noreferrer">SUZURI</a><br></p><h2 id="h659d126676">アパレル&amp;雑貨</h2><p><a href="https://suzuri.jp/reona396/3310073/t-shirt/s/white" target="_blank" rel="noopener noreferrer"><img src="https://images.microcms-assets.io/assets/23a7f16ec4454790a6110b8fbc9e140e/9a784b222652400bbf090a1d425a71ab/1586958849-1350x1250.png.1.8661%2B0.0%2B0.0935.jpg?w=300&amp;h=300" alt=""></a><br><a href="https://suzuri.jp/reona396" target="_blank" rel="noopener noreferrer">SUZURI</a> でTシャツやステッカーなどを販売しています。<br></p><h2 id="he1de09a526">NFT</h2><p>各プロジェクトでNFTアートを販売しています。</p><h3 id="h16f92b052a">参加コレクション</h3><ul><li><a href="https://opensea.io/collection/function-draw" target="_blank" rel="noopener noreferrer">function draw()</a></li><li><a href="https://vessel.neort.io/" target="_blank" rel="noopener noreferrer">NEORT Vessel</a></li><li><a href="https://openprocessing.org/crayon" target="_blank" rel="noopener noreferrer">Crayon Codes</a></li><li><a href="https://opensea.io/collection/kumaleon-nft" target="_blank" rel="noopener noreferrer">KUMALEON</a></li><li><a href="https://www.mediaart-gallery.com/" target="_blank" rel="noopener noreferrer">Media Art Gallery</a></li></ul><h3 id="h855fa9773b">個人販売</h3><ul><li><a href="https://www.fxhash.xyz/u/reona396" target="_blank" rel="noopener noreferrer">fxhash — reona396 profile</a></li></ul>