https://github.com/mcthomas/opal-p5rb

Ruby bindings to P5.js via Opal
https://github.com/mcthomas/opal-p5rb

2d 3d art bindings browser coding creative drawing javascript js lib library oop opal p5 p5js rb ruby sketch wrapper

Last synced: about 1 month ago
JSON representation

Ruby bindings to P5.js via Opal

• Host: GitHub
• URL: https://github.com/mcthomas/opal-p5rb
• Owner: mcthomas
• License: mit
• Created: 2024-09-08T18:41:46.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-05T05:36:22.000Z (about 2 months ago)
• Last Synced: 2024-11-05T06:18:29.339Z (about 2 months ago)
• Topics: 2d, 3d, art, bindings, browser, coding, creative, drawing, javascript, js, lib, library, oop, opal, p5, p5js, rb, ruby, sketch, wrapper
• Language: Ruby
• Homepage:
• Size: 2.08 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# opal-p5rb

Ruby bindings to P5.js via Opal

## Purpose

There are several projects aiming to create bindings between the P5.js lib and Ruby via Opal, with varying degrees of success.  I wanted to avoid having to explicitly embed js within the rb context in my sketches.  While it has been proven to be easy enough to map static P5 functions and top-level variables to rb using Opal, I wanted to take this further and have the ability to instantiate P5 classes (e.g. p5.Vector) and use those objects in the rb context.  The currently incomplete step in this process, is finding a way to access instance members and methods on instances of P5 objects in the rb context (see `call_p5_method()`).  As of now, I can only instantiate them and pass around the references.  For many sketches, this may not be an issue, since they most often lean on static drawing functions at each frame.  In some cases where P5 instance members or methods are needed, the best workaround at present is to use the instance within a new class that stands in for any missing functionality (as exemplified below).

### Progress

- [x] P5 global constants

- [x] P5 mutable globals

- [x] P5 static functions

- [x] P5 class instantiation

- [ ] P5 instance members

- [ ] P5 instance methods

### Usage

Create your sketch in `sketch.rb` or in a new file which you include.  Then launch a local server from the working directory (e.g. `python -m http.server`).

_passive js console errors will appear for any event functions that you don't define in your sketch, e.g. mouseMoved()_

### Example Sketch _(in src at ./sketch.rb)_

![cubes](./sketch.gif)

```ruby

class Box

  def initialize(position, rotation_speed)

    @position = position

    @rotation = P5::Vector.new

    @rotation_speed = rotation_speed

  end

  def update

    @rotation.x += @rotation_speed.x

    @rotation.y += @rotation_speed.y

  end

  def display

    P5.push()

    P5.translate(@position.x, @position.y, @position.z)

    P5.rotateX(@rotation.x)

    P5.rotateY(@rotation.y)

    P5.stroke(255)

    P5.fill(0)

    P5.box(80)

    P5.pop()

  end

end

def setup

  P5.createCanvas(800, 600, P5.WEBGL)

  @boxes = []

  box_spacing = 200

  initial_x = -box_spacing

  3.times do

    pos = P5::Vector.new(initial_x, 0, 0)

    rotation_speed = P5::Vector.new(P5.random(0.005, 0.02), P5.random(0.005, 0.02), 0)

    @boxes << Box.new(pos, rotation_speed)

    initial_x += box_spacing

  end

end

def draw

  P5.background(0)

  @boxes.each do |box|

    box.update

    box.display

  end

end

```