Enjoy Creative Coding with Ruby Miyuki Koshiba

About me Miyuki Koshiba / chobishiba chobishiba ksbmyk Software engineer at SmartBank, Inc. Developing “B/43”

We are SmartBankers!!

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Creative Coding

What is Creative Coding? Create art with programming To put it very simply, drawing with code You can create not only still images but also videos, interactive pieces, and works where the outcome varies each time they're executed. ίʔυͰΞʔτ࡞඼Λ࡞Δ ฏ͍ͨ͘͏ͱ “ίʔυͰ͓ֆඳ͖” ੩ࢭը͚ͩͰͳ͘ɺಈը΍ΠϯλϥΫςΟϒͳ΋ͷɺ࣮ߦ͢Δͨͼʹ݁Ռ͕ҟͳΔΑ͏ͳ࡞඼΋࡞ΕΔ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Here is an HTML fi le - ここに1枚のhtmlがあります Execute… html Ruby

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Congratulations! RubyKaigi 2024 👏

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan This is drawing with code - これが "コードでお絵描き" です https://ksbmyk.github.io/sketch/p5rb/20240515

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan https://ksbmyk.github.io/rp5js/puni.html This is drawing with code - これが "コードでお絵描き" です λοϓ͢Δͨͼʹಈ͘

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan RubyKaigi 2024 Keynote “Writing Weird Code” tomoya ishida RubyKaigi 2024 Day1 Keynote You all already know how to create art with code Έͳ͞Μ΋͏”ίʔυͰΞʔτ࡞඼Λ࡞Δ”Λ͝ଘ஌

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I create works by combining Ruby and Processing. There are several languages specialized for visual art. Processing is one of them. The API for drawing graphics is well-developed. p5.js = the JavaScript library based on Processing How to do Creative Coding - クリエイティブコーディングのやり方 Processing͸ͦͷͻͱͭͰ͢ άϥϑΟοΫΛඳը͢ΔAPI͕ॆ࣮͍ͯ͠Δ ProcessingΛJavaScriptϥΠϒϥϦʹͨ͠p5.js ϏδϡΞϧදݱʹಛԽͨ͠ݴޠ͸͍͔ͭ͋͘Γ·͢ ࢲ͸RubyͱProcessingΛ૊Έ߹Θͤͯ࡞͍ͬͯ·͢

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Processing has its merits, but I want to use Ruby. That's why I create works by combining Ruby and Processing. Ruby and Creative Coding - Rubyとクリエイティブコーディング Processingͷ͍͍ͱ͜Ζ͸࢖͍͍͕ͨɺRubyͰͭ͘Γ͍ͨ ͔ͩΒࢲ͸RubyͱProcessingΛ૊Έ߹Θͤͯ࡞͍ͬͯ·͢

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan 2014 ruby-processing https://github.com/jashkenas/ruby-processing 2015 processing.rb https://github.com/kitao/processing.rb 2019 rp5js https://github.com/ksbmyk/rp5js/ ←Me 2020 RubySketch https://apps.apple.com/jp/app/id1491477639 2022 rbCanvas/p5 https://rbcanvas.net/p5/ 2023 p5.rb Editor https://p5rb.ongaeshi.me/editor A tool enabling Processing to run on Ruby - RubyでProcessingのあゆみ There might be more to it.

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan 2014 ruby-processing https://github.com/jashkenas/ruby-processing 2015 processing.rb https://github.com/kitao/processing.rb 2019 rp5js https://github.com/ksbmyk/rp5js/ ←Me 2020 RubySketch https://apps.apple.com/jp/app/id1491477639 2022 rbCanvas/p5 https://rbcanvas.net/p5 2023 p5.rb Editor https://p5rb.ongaeshi.me/editor A tool enabling Processing to run on Ruby - Rubyでprocessingのあゆみ Runnable in a browser

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Runnable in a browser - ブラウザで動く rp5js(Opal) https://github.com/ksbmyk/rp5js/ p5.rb Editor(ruby.wasm) https://github.com/ongaeshi/p5rb/

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Runnable in a browser - ブラウザで動く rp5js(Opal) https://github.com/ksbmyk/rp5js/ p5.rb Editor(ruby.wasm) https://github.com/ongaeshi/p5rb/ Opal, ruby.wasm p5.js connect Ruby Opal΍ruby.wasmΛ࢖ͬͯ p5.jsͱRubyܨ͙࢓૊ΈΛ࡞ͬͯp5.jsͷAPIΛݺΜͩΓ ϒϥ΢βͰRubyΛಈ͔ͤΔΑ͏ʹ͍ͯ͠Δ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Web Editors have also emerged.(p5.rb Editor, rbCanvas/p5) The hurdle of environment setup is lowered. It's become very easy to start. I'd like to introduce it because its enjoyment isn't widely known yet. Web Editors - Webエディタ ؀ڥߏஙͷϋʔυϧ͕Լ͕ͬͨ WebΤσΟλ΋ग़͖ͯͨ Ͱ΋·ͩͦͷָ͠͞Λ͋·Γ஌ΒΕ͍ͯͳ͍ͷͰ঺հ͍ͨ͠ I enjoy and frequently use the p5.rb Editor. I am truly grateful, @ongaeshi ͱͯ΋͸͡Ί΍͘͢ͳͬͨ

The fun of creative coding Unique expressions possible only through code. Randomness - Different color each time. Algorthm - Lay out. Autonomy - Re-executed by tapping. ຖճҟͳΔ৭ͷฒͼʹͳΔ λοϓ͢Δ͜ͱͰ࠶࣮ߦ͢Δ ෑ͖٧ΊΔ ۮવੑ نଇੑ ࣗ཯ੑ ίʔυͳΒͰ͸ͷදݱ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan In software development, idempotence is often required. In Creative coding, we actively incorporate randomness. Programming is often done for problem-solving. Creative coding is not about tackling challenges. The fun of creative coding - クリエイティブコーディングの楽しさ ιϑτ΢ΣΞ։ൃͰ͸ႈ౳ੑΛٻΊΒΕΔ͜ͱ͕΄ͱΜͲ ࢓ࣄͳͲͷϓϩάϥϛϯά͸Կ͔ͷ໰୊ղܾʹߦΘΕΕΔ ΫϦΤΠςΟϒίʔσΟϯάͰ͸ੵۃతʹۮવੑΛऔΓೖΕΔ ΫϦΤΠςΟϒίʔσΟϯά͸՝୊ʹཱͪ޲͔͏΋ͷͰ͸ͳ͍

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Programming for one's own enjoyment. That's creative coding. The fun of creative coding - クリエイティブコーディングの楽しさ ࣗ෼ָ͕͠ΉͨΊͷϓϩάϥϛϯά ͦΕ͕ΫϦΤΠςΟϒίʔσΟϯά

The bene fi ts of doing creative coding with Ruby I'm not saying that creative coding is best done with Ruby. For Rubyists, Using Ruby for creative coding enhances enjoyment. Fun for all ages and experience levels! ΫϦΤΠςΟϒίʔσΟϯά͸RubyͰ΍Δͷ͕͍͍ͱݴ͍͍ͨΘ͚Ͱ͸ͳ͍ Ͱ΋RubyistͳΒ େਓ͔Βࢠڙ·Ͱɺܦݧ೥਺໰Θͣ෯޿ָ͘͠ΊΔ RubyͰ΍Δͱ͞ΒʹRubyΛָ͠ΊΔ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan The result of combining Processing with Ruby... The number of artworks increased tenfold. I became able to create artworks that I liked. I believe it's because I've become able to focus more on creating art by using a familiar tool (Ruby). In my case - 私の場合 ProcessingͱRubyΛ૊Έ߹ΘͤͨΒ ࡞඼਺͕10ഒʹ૿͑ͨ खʹೃછΜͩಓ۩(Ruby)Ͱ࡞Δ͜ͱʹΑΓɺΑΓֆ࡞ΓʹूதͰ͖ΔΑ͏ʹͳ͔ͬͨΒͰ͸ʁ ؾʹೖͬͨ࡞඼͕࡞ΕΔΑ͏ʹͳͬͨ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan In my case - 私の場合 Genuary 2024 https://genuary.art/ https://ksbmyk.github.io/sketch/

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan For beginners in Ruby You can create artworks with just a few lines of code By creating works, you can become accustomed to Ruby syntax. The bene fi ts of doing creative coding with Ruby - Rubyでやることのよさ Rubyॳ৺ऀͷ৔߹ ࡞඼Λ࡞Δ͜ͱͰRubyͷߏจʹ׳Ε͍͚ͯΔ ΄Μͷ਺ߦͷίʔυͰ࡞඼Λ࡞Δ͜ͱ͕Ͱ͖·͢

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Just repetition and conditional branching - 繰り返しと条件分岐だけ ԁΛ1500ճϥϯμϜͳҐஔʹඳ͍ͯɺۮ਺ճͱح਺ճͰޮՌΛม͑Δ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan For experienced Ruby users. It's suitable for daily pursuits (relaxation, hobbies). Don't you feel like making something? You can create artwork in short bursts of spare time. The bene fi ts of doing creative coding with Ruby - Rubyでやることのよさ ௕೥RubyΛ΍͍ͬͯΔͳΒ ೔ʑͷऔΓ૊Έ(ଉൈ͖ɺझຯ)ʹ޲͍͍ͯΔ “Կ͔”࡞Γ͍ͨͳͬͯ͜ͱͳ͍Ͱ͔͢ʁ ͪΐͬͱͨ͠伱ؒ࣌ؒͰ࡞඼Λ࡞Δ͜ͱ͕Ͱ͖·͢

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Day1 line - 形を作ってみる

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Day2 color - 色をつけてみる

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Day3 side by side - 並べてみる

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan In a few days… shining! - 光らせてみたい！

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan In a few days… rotate ! - 回してみたい！

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Creating often sparks new ideas. Okay with trial and error.Freely, like taking a walk. The bene fi ts of doing creative coding with Ruby - Rubyでやることのよさ ࡞͍ͬͯΔͱ࣍ͷΞΠσΞ͕ු͔Ϳ ͍͖͋ͨΓ͹ͬͨΓOK ࢄาΛ͢ΔΑ͏ʹࣗ༝ʹ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Coding as part of daily life. like playing a musical instrument, writing a diary, or composing poetry. The shapes, colors, methods, and various elements encountered can all be embedded in code. The bene fi ts of doing creative coding with Ruby. - Rubyでやることのよさ ग़ձͬͨܗɺ৭ɺϝιου ɺ͍ΖΜͳ΋ͷΛίʔυʹࠐΊΒΕΔ ೔ʑͷӦΈͱͯ͠ͷίʔσΟϯά ָثΛ஄͍ͨΓɺ೔هΛॻ͍ͨΓɺࢻՎΛӵΜͩΓ͢ΔΑ͏ʹ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Why don't you try expressing this memory of RubyKaigi 2024 in Okinawa with code? The bene fi ts of doing creative coding with Ruby - Rubyでやることのよさ RubyKaigi 2024 ԭೄͷࢥ͍ग़ΛίʔυͰදݱͯ͠Έ·ͤΜ͔ʁ

The joy of appreciation Even just watching lets you engage with creative coding. Randomness - Results vary each time you run it. There's something being generated right now, just by you watching here. ݟΔ͚ͩͰ΋ΫϦΤΠςΟϒίʔσΟϯάʹؔΘΕΔ ͋ͳ͕ͨࠓ͜ͷ৔Ͱݟͯ͘Ε͔ͨΒੜ੒͞ΕΔ΋ͷ͕͋Δ ۮવੑ ࣮ߦ͢Δ౓ʹ݁Ռ͕ҟͳΔ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan For RubyKaigi 2024 - 今日のためにつくりました ʘPlease read the QR code.ʗ

RubyKaigi Effect It may take some time to load. I'd appreciate it if you could listen to me while waiting. In fact, all of these activities are thanks to the RubyKaigi effect. ಡΈࠐΈʹ͕͔͔࣌ؒͬͯ͠·͍·͢ ࢲͷ࿩Λฉ͖ͳ͕Βͪΐͬͱ଴ͬͯ΋Β͍͍ͨ ࣮͸͜ΕΒͷ׆ಈ͸શͯRubyKaigi effect ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I heard about Opal at RubyKaigi 2019 and immediately started working on combining Ruby with p5.js. at the hack space and the lounge at Fukuoka Airport. RubyKaigi Effect 2019೥ͷRubyKaigiͰOpalͷൃදΛ͖͍ͯRubyͱp5.jsΛ૊Έ߹ΘͤΒΕΔͱଈ೔࡞Γ࢝Ίͨ ϋοΫεϖʔεͱ෱Ԭۭߓͷϥ΢ϯδͰ࡞ͬͯͨ ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I wanted to recreate the logo of the 2023 RubyKaigi. Thanks to RubyKaigi and the logo, many people were able to see it. RubyKaigi Effect 2023೥ͷRubyKaigiϩΰΛݟͯ࠶ݱ͍ͨ͠ͱࢥͬͨ RubyKaigiͱϩΰͷྗͷ͓͔͛Ͱଟ͘ͷਓʹಧ͍ͨ ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I received direct feedback at the 2023 RubyKaigi. They found it interesting. He asked if I was going to present, saying they wanted to hear it! RubyKaigi Effect 2023೥ͷRubyKaigiͰ௚઀ײ૝Λ΋Β͑ͨ ͓΋͠Ζ͕ͬͯ΋Β͑ͨ ൃද͠ͳ͍ͷʁฉ͖͍ͨʂͱ͍ͬͯ΋Βͬͨ ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I've spoken at various venues - いろんなところで話した blog େࡕRubyձٞ03 Shinjuku.rb #91 Rails Girls Tokyo 16th Speaker Deck https://speakerdeck.com/chobishiba Note https://note.com/chobishiba ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Drawing the logo with code - いろんなところでコードでロゴの再現余興をやった RubyKaigi 2024 Rails Girls Tokyo 16th Kaigi on Rails 2023 Speaker Deck https://speakerdeck.com/chobishiba Shinjuku.rb

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan More people are giving it a try - やってみるRubyistが出てきた https://note.com/chan_aki/n/n96c1d6f78575 https://hibinokoto.hatenadiary.jp/entry/2023/12/15/233602 https://note.com/bashmusclemixin/n/na29687e2317a https://x.com/moegi_web/status/ 1765018711302578176 https://x.com/suuuuengch/status/ 1781578030391099708 https://x.com/kota_syan/status/ 1781677171238650220 and more

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan I had thought I was playing alonebut I ended up connecting with many people. I never imagined I'd be able to stand on this stage. I'm feeling very happy and fulfilled right now. RubyKaigi Effect ҰਓͰ༡ΜͰ͍ͨͭ΋Γ͕ଟ͘ͷਓͱͭͳ͕Δ͜ͱ͕Ͱ͖ͨ ·͔͜͞ͷ৔ʹཱͯΔͱ͸ࢥͬͯ΋͍ͳ͔ͬͨ ࠓͱͯ΋ָ͘͠޾ͤͰ͢ ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Has it appeared yet? Please show it to someone nearby. Please use this as a conversation starter. or on social media platforms. RubyKaigi Effect ͦΖͦΖදࣔ͞Ε·͔ͨ͠ʁ ۙ͘ͷਓͱݟͤ߹ͬͯΈ͍ͯͩ͘͞ ࿩͖͔͚ͬ͢ʹͯ͠Έ͍ͯͩ͘͞ SNSͳͲͰ΋Ͱ΋ ʘPlease read the QR code.ʗ

May 15th - 17th, 2024 NAHA CULTURAL ARTS THEATER NAHArt, Okinawa, Japan Enjoy Creative Coding with Ruby！