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-」



Masato Ohba

June 28, 2018

More Decks by Masato Ohba

Other Decks in Technology


  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


  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