Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ドエレー"COOOL"な絵を描くじゃん / Drawing with Ruby on Browser

ドエレー"COOOL"な絵を描くじゃん / Drawing with Ruby on Browser

Meguro.rb#16「ドエレー"COOOL"な絵を描くじゃん -Drawing with Ruby on Browser-」

リンク付きの資料はこちら
https://ohbarye.github.io/slides/2018/meguro.rb-16/

0ed400174f90a4bcee05f3455597932f?s=128

Masato Ohba

June 28, 2018
Tweet

More Decks by Masato Ohba

Other Decks in Technology

Transcript

  1. Drawing with Ruby on Browser Drawing with Ruby on Browser

    Quipper Limited at Meguro.rb#16 @ohbarye
  2. Content Content How to draw a picture on browser with

    Ruby
  3. DEMO DEMO

  4. How? How? 1. Opal 2. P5.js 3. Small magic

  5. Opal Opal Ruby to JavaScript source-to-source compiler https://opalrb.com/

  6. Ruby ✨

  7. To JavaScript

  8. P5.js P5.js JavaScript implementation of Processing https://p5js.org/

  9. JavaScript to a picture with canvas

  10. 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
  11. None
  12. None
  13. None
  14. What is the very first step? What is the very

    first step? Try it on https://codepen.io/ohbarye/pen/XYjGXp
  15. Code Reading Code Reading (Once time permits) https://github.com/ohbarye/ruby-processing-examples

  16. Who? Who? @ohbarye Web Developer / Engineering Manager Working for

    http://ohbarye.me/ Quipper
  17. 7/19 (Thu) 19:30-22:00 7/19 (Thu) 19:30-22:00 https://techplay.jp/event/680406