README.md

gem p5rb -- Ruby DSL for p5.js

It builds an HTML document with the JS boilerplate included.
It has some built-ins for charting.
It has some p5.js related sugar, such as:

• optional :fill arg to set color per operation

TODO:

• cuprite test Github Action
• validate args on Ruby level
• plotting library
  • move plotting from ruby to js level for using client window size
  • https://en.wikipedia.org/wiki/Chart
    • Scatter plot
    • Bar chart
      • Grouped bar chart
      • Stacked bar chart
    • Area chart
    • https://en.wikipedia.org/wiki/Line_chart
    • https://en.wikipedia.org/wiki/Heat_map
    • https://en.wikipedia.org/wiki/Recurrence_plot
  • https://en.wikipedia.org/wiki/List_of_graphical_methods
  • https://en.wikipedia.org/wiki/Vector_field
  • https://en.wikipedia.org/wiki/Radar_chart
  • https://en.wikipedia.org/wiki/Data_and_information_visualization
  • https://en.wikipedia.org/wiki/Streamgraph
  • ...

examples

scatter plot

# all = <integer>[n][2]
(x_min, x_max), (y_min, y_max) = all.transpose.map(&:minmax)
f = ->x,y{ [
  (x - x_min).fdiv(x_max - x_min) * 500,
  (y_max - y).fdiv(y_max - y_min) * 500,
] }

require "p5rb"
P5 500, 500 do
  setup do
    all.each{ |x,y| point *f[x,y] }
  end
end.tap &method(:puts)

or use the built-in P5.plot_scatter <integer>[n][2]:

$ curl https://storage.yandexcloud.net/gems.nakilon.pro/p5rb/all.tsv > all.tsv
$ ruby -rp5rb -e 'puts P5.plot_scatter $<.map{ |_| _.split.map &:to_f }, reverse_y: true' all.tsv > temp.htm 

chess board FEN format renderer

$ cd examples/fen
$ bundle install
$ bundle exec ruby main.rb "r3r2k/p1n2pb1/3p3p/1ppP1qN1/4N3/P3P3/1PQ2PP1/R4K1R w - - 0 1" > temp.htm
$ open temp.htm

# ...
require "p5rb"
puts( P5(500, 500) do
  setup do
    textSize 65
    textAlign :CENTER, :CENTER
    translate 50, 50
    rect 0, 0, 400, 400, fill: 240
    noStroke
    [*0..7].product([*0..7]) do |i, j|
      rect j*50, i*50, 50, 50, fill: 180 if (i+j).odd?
    end
    pieces.each do |x, y, piece|
      text piece, (x+0.5)*50, (y+0.5)*50, fill: 0
    end
  end
end )

dot strip plot

grouped bar chart

require "p5rb"
require "yaml"
puts P5.plot_bar_grouped YAML.load DATA.read

__END__

---
2022-11-12:
  user82827122: 17
  user31604664: 18
  user824572411: 2
2022-11-13:
  user31604664: 11
  user82827122: 23
2022-11-14:
...

stacked bar chart