Slide 1
Slide 1 text
Drawing with Ruby on Browser
Drawing with Ruby on Browser
Quipper Limited
at Meguro.rb#16
@ohbarye
Slide 2
Slide 2 text
Content
Content
How to draw a picture on browser
with Ruby
Slide 3
Slide 3 text
DEMO
DEMO
Slide 4
Slide 4 text
How?
How?
1. Opal
2. P5.js
3. Small magic
Slide 5
Slide 5 text
Opal
Opal
Ruby to JavaScript source-to-source compiler
https://opalrb.com/
Slide 6
Slide 6 text
Ruby ✨
Slide 7
Slide 7 text
To JavaScript
Slide 8
Slide 8 text
P5.js
P5.js
JavaScript implementation of Processing
https://p5js.org/
Slide 9
Slide 9 text
JavaScript to a picture with canvas
Slide 10
Slide 10 text
Small Magic
Small Magic
P5.js de nes its properties and functions in window
Use %x{} to call window.someMethod from Ruby
Use method_missing to handle all method calls
http://tkitao.hatenablog.com/entry/2015/12/19/192523
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
What is the very first step?
What is the very first step?
Try it on https://codepen.io/ohbarye/pen/XYjGXp
Slide 15
Slide 15 text
Code Reading
Code Reading
(Once time permits)
https://github.com/ohbarye/ruby-processing-examples
Slide 16
Slide 16 text
Who?
Who?
@ohbarye
Web Developer / Engineering Manager
Working for
http://ohbarye.me/
Quipper
Slide 17
Slide 17 text
7/19 (Thu) 19:30-22:00
7/19 (Thu) 19:30-22:00
https://techplay.jp/event/680406