Enjoy Creative Coding with Ruby (RubyKaigi2024)

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. ίʔυͰΞʔτ࡞඼Λ࡞Δ ฏ͍ͨ͘͏ͱ “ίʔυͰ͓ֆඳ͖” ੩ࢭը͚ͩͰͳ͘ɺಈը΍ΠϯλϥΫςΟϒͳ΋ͷɺ࣮ߦ͢Δͨͼʹ݁Ռ͕ҟͳΔΑ͏ͳ࡞඼΋࡞ΕΔ

Okinawa, Japan Here is an HTML fi le - ここに1枚のhtmlがあります Execute… html Ruby

Okinawa, Japan Congratulations! RubyKaigi 2024 👏

Okinawa, Japan This is drawing with code - これが "コードでお絵描き" です https://ksbmyk.github.io/sketch/p5rb/20240515

Okinawa, Japan https://ksbmyk.github.io/rp5js/puni.html This is drawing with code - これが "コードでお絵描き" です λοϓ͢Δͨͼʹಈ͘

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

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Λ૊Έ߹Θͤͯ࡞͍ͬͯ·͢

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Λ૊Έ߹Θͤͯ࡞͍ͬͯ·͢

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.

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

Okinawa, Japan Runnable in a browser - ブラウザで動く rp5js(Opal) https://github.com/ksbmyk/rp5js/ p5.rb Editor(ruby.wasm) https://github.com/ongaeshi/p5rb/

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Λಈ͔ͤΔΑ͏ʹ͍ͯ͠Δ

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. ຖճҟͳΔ৭ͷฒͼʹͳΔ λοϓ͢Δ͜ͱͰ࠶࣮ߦ͢Δ ෑ͖٧ΊΔ ۮવੑ نଇੑ ࣗ཯ੑ ίʔυͳΒͰ͸ͷදݱ

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 - クリエイティブコーディングの楽しさ ιϑτ΢ΣΞ։ൃͰ͸ႈ౳ੑΛٻΊΒΕΔ͜ͱ͕΄ͱΜͲ ࢓ࣄͳͲͷϓϩάϥϛϯά͸Կ͔ͷ໰୊ղܾʹߦΘΕΕΔ ΫϦΤΠςΟϒίʔσΟϯάͰ͸ੵۃతʹۮવੑΛऔΓೖΕΔ ΫϦΤΠςΟϒίʔσΟϯά͸՝୊ʹཱͪ޲͔͏΋ͷͰ͸ͳ͍

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Λָ͠ΊΔ

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)Ͱ࡞Δ͜ͱʹΑΓɺΑΓֆ࡞ΓʹूதͰ͖ΔΑ͏ʹͳ͔ͬͨΒͰ͸ʁ ؾʹೖͬͨ࡞඼͕࡞ΕΔΑ͏ʹͳͬͨ

Okinawa, Japan In my case - 私の場合 Genuary 2024 https://genuary.art/ https://ksbmyk.github.io/sketch/

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ͷߏจʹ׳Ε͍͚ͯΔ ΄Μͷ਺ߦͷίʔυͰ࡞඼Λ࡞Δ͜ͱ͕Ͱ͖·͢

Okinawa, Japan Just repetition and conditional branching - 繰り返しと条件分岐だけ ԁΛ1500ճϥϯμϜͳҐஔʹඳ͍ͯɺۮ਺ճͱح਺ճͰޮՌΛม͑Δ

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Λ΍͍ͬͯΔͳΒ ೔ʑͷऔΓ૊Έ(ଉൈ͖ɺझຯ)ʹ޲͍͍ͯΔ “Կ͔”࡞Γ͍ͨͳͬͯ͜ͱͳ͍Ͱ͔͢ʁ ͪΐͬͱͨ͠伱ؒ࣌ؒͰ࡞඼Λ࡞Δ͜ͱ͕Ͱ͖·͢

Okinawa, Japan Day1 line - 形を作ってみる

Okinawa, Japan Day2 color - 色をつけてみる

Okinawa, Japan Day3 side by side - 並べてみる

Okinawa, Japan In a few days… shining! - 光らせてみたい！

Okinawa, Japan In a few days… rotate ! - 回してみたい！

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 ࢄาΛ͢ΔΑ͏ʹࣗ༝ʹ

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でやることのよさ ग़ձͬͨܗɺ৭ɺϝιου ɺ͍ΖΜͳ΋ͷΛίʔυʹࠐΊΒΕΔ ೔ʑͷӦΈͱͯ͠ͷίʔσΟϯά ָثΛ஄͍ͨΓɺ೔هΛॻ͍ͨΓɺࢻՎΛӵΜͩΓ͢ΔΑ͏ʹ

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. ݟΔ͚ͩͰ΋ΫϦΤΠςΟϒίʔσΟϯάʹؔΘΕΔ ͋ͳ͕ͨࠓ͜ͷ৔Ͱݟͯ͘Ε͔ͨΒੜ੒͞ΕΔ΋ͷ͕͋Δ ۮવੑ ࣮ߦ͢Δ౓ʹ݁Ռ͕ҟͳΔ

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.ʗ

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.ʗ

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.ʗ

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.ʗ

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.ʗ

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

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

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.ʗ

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.ʗ

Okinawa, Japan Enjoy Creative Coding with Ruby！

Enjoy Creative Coding with Ruby (RubyKaigi2024)

Enjoy Creative Coding with Ruby (RubyKaigi2024)

More Decks by chobishiba

Other Decks in Programming

Featured

Transcript