Experimental py5 backend conversations

[villares]

I use py5 daily, right now I'm trying to finish my PhD and I don't have the time & energy, but, let's say in the future I wished to contribute to pero by adding py5 as a backend. It has all the graphic infrastructure of Processing, so I think it could draw everything shown in the examples.

• Would it be feasible?
• Would it be of interest?
• What would be the first steps?

[xxao]

I tried to look into it and did some initial work. Please try the latest code (not the official release).

Somehow I still did not get the philosophy of py5 and how to correctly use it, so I am not sure if current design is correct.

So far only some very basic drawing can be done. Text is not supported yet. You can try something like this:

import py5
from pero.backends.py5 import Py5Canvas

def setup():
    
    py5.size(400, 400)
    pg = py5.create_graphics(400, 400)
    canvas = Py5Canvas(pg)
    
    pg.begin_draw()
    
    canvas.fill('w')
    canvas.line_width = 3
    canvas.line_color = 'b'
    canvas.fill_color = 'g'
    canvas.draw_circle(200, 200, 150)
    
    pg.end_draw()
    py5.image(pg, 0, 0)

py5.run_sketch()

[villares]

Yay! This works!

Now, what is the best approach to encapsulate py5 under pero, I really don't know. There are ways of running py5 without using the py5 window... py5coding/py5generator#351 and it is possible to use it to export both raster/PNG and vector PDF/SVG...

[xxao]

So, most of the functionality is now implemented.

I have no experience with linux and their font management, but some fonts variants will be missing. For example, if bold and italic variants are within the same font file, they will be ignored. Only if they are separated into individual files.

I still don't understand the py5 concept, therefore I have no idea how to implement the export() and show() utilities the same way other backends have. I tried the 'Class Mode' but no success. Please let me know if you have any idea.

[villares]

Thank you so much!

I'm pressed for time right now, but I'd love to give you a tour of py5 one day.

It is a wonderful interactive 2D & 3D graphics and creative coding framework, also great for teaching Python for beginners. You can see some of my short daily explorations using it at https://abav.lugaralgum.com/sketch-a-day

When things calm down I'll chat with py5's maintainer to see if he has any insights on how to advance pero integration.

If you want to dive into another rabbit hole, it would be to study some shapely to pero conversions, that way you could draw geopandas, geodataframes, maps, on perrot 😉

[xxao]

Here is a bit more advanced test:

import py5
import pero
from pero.backends.py5 import Py5Canvas


def setup():
    
    py5.size(400, 400)
    pg = py5.create_graphics(400, 400)
    canvas = Py5Canvas(pg)
    
    pg.begin_draw()
    
    canvas.fill('w')
    
    # draw circle
    canvas.line_width = 3
    canvas.line_color = 'b'
    canvas.fill_color = 'g'
    canvas.draw_circle(200, 200, 150)
    
    # draw cross
    path = pero.Path()
    path.rect(100, 100, 200, 200)
    with canvas.clip(path):
        canvas.line_width = 1
        canvas.line_color = 'a'
        canvas.draw_line(200, 50, 200, 350)
        canvas.draw_line(50, 200, 350, 200)
    
    # draw text
    canvas.text_color = 'r'
    canvas.text_bgr_color = 'k'
    canvas.font_size = 40
    canvas.text_align = pero.CENTER
    canvas.text_base = pero.MIDDLE
    canvas.font_family = pero.MONO
    canvas.draw_text('hello py5', 200, 200, pero.rads(45))
    canvas.font_family = pero.SERIF
    canvas.font_weight = pero.NORMAL
    canvas.font_style = pero.ITALIC
    canvas.draw_text('hi', 200, 300)
    
    pg.end_draw()
    py5.image(pg, 0, 0)

py5.run_sketch()

[villares]

I'll test more later! I was unable to get text yet here.

[villares]

I still have a bit of a problem with the unavailable defaults (not having Courier New and Times* makes it crash on my machine) but I have used the most recent code and I can see the text!

[villares]

Could you perhaps treat this exception to just emit a warning?

ValueError: Cannot initialize the font! -> Courier New, courier, Courier, Courier New, Ubuntu Mono, Andale Mono

Haven't you added Liberation Mono & Liberation Serif as fall back options at some point, or I'm misremembering it?

[xxao]

I only added the sans version. Added the others now.

[xxao]

Do you have any idea why py5 adds "<g transform="scale(2,2)"" to every item in SVG. I guess it is because of monitor scale, but it is not consistent with the overall image size., which is not scaled. Any way to get rid of it?

[villares]

It could be related to the display density features, I'm not on a "retina" display so I never use it and haven't tested these much (I don't understand much about them, to be frank). https://py5coding.org/reference/sketch_display_density.html

The PDF & SVG export machinery is maintained upstream by Processing.org, I find them a bit quirky. For instance, I believe they have no canvas "Blend Modes" :(
Also SVG import (via load_shape()) has some limitations. And jumping to another subject, I wish I had a good tool for getting SVG as shapely objects... everything I tried is wonky.

[xxao]

Thanks, that fixed the problem.

[xxao]

Also, why is the PDF export rasterized? Any technique to keep it vector? It somehow defeats the main purpose of PDF.

[villares]

In my experience PDFs have always exported as vector, and are my preferred output.
Try this:

import py5
import shapely

def setup():
    py5.size(800, 800)
    py5.begin_record(py5.PDF, 'vector_out.pdf') 
    py5.background(240, 200, 200)
    for _ in range(300):
        x, y = py5.random(py5.width), py5.random(py5.height)
        ca = shapely.Point(x, y).buffer(50)
        cb = shapely.Point(x + 25, y).buffer(40)
        cc = ca - cb
        py5.fill(py5.random(128, 255))
        py5.shape(cc)
    py5.fill(0)
    py5.text_font(py5.create_font('Tomorrow Bold', 100))
    py5.text('Something', 100, 100)
    py5.end_record()
    
py5.run_sketch()

vector_out.pdf

[villares]

Another strategy... with multiple pages :)

import py5
import shapely

PAGES = 10

def setup():
    global out
    py5.size(800, 800)
    out = py5.create_graphics(
        py5.width,
        py5.height,
        py5.PDF, 'multipage_out.pdf')
    py5.begin_record(out)
    py5.color_mode(py5.HSB)
    py5.text_font(py5.create_font('Tomorrow Bold', 100))
    for page_number in range(1, PAGES + 1):
        out.background(page_number * 20, 200, 200) # not seen on the window
        for _ in range(300):
            x, y = py5.random(py5.width), py5.random(py5.height)
            ca = shapely.Point(x, y).buffer(50)
            cb = shapely.Point(x + 25, y).buffer(40)
            cc = ca - cb
            py5.fill(255 - page_number * 20, 200, py5.random(128, 255))
            py5.shape(cc)
        py5.fill(0)
        py5.text(page_number, 20, 100)
        if page_number != PAGES:
            out.next_page()
    py5.end_record()
    
py5.run_sketch()

multipage_out.pdf

[xxao]

Ok, whole point is .begin_record vs. .begin_draw. The only issue is, that now even the PDF is scaled. As a result, only 1/4 of the drawing is displayed.

[xxao]

The density fixed it.

[villares]

If it hadn't fixed it, I'd tell you to try applying a scale to the output with out.scale()...

[xxao]

I think most of the stuff is now implemented. In addition I would like to try interactive view implementation.

There is still a problem with drawing paths. I did not found a good way to draw complex paths. For example, two circles should draw a donut shape, not two circles.

[villares]

Complex paths are done with begin_shape()/end_shape(CLOSE) or with begin_closed_shape(): & etc. For shapes with holes you need to use this: https://py5coding.org/reference/sketch_begin_contour.html

Arcs in complex paths are a bit of a hassle... because there is no "arc vertex" in the Processing poly-shape/polyline implementation. Here are my studies to make Bezier approximations of arcs: https://github.com/villares/arc_tangents_and_bezier_studies.

And then, more recently, shapely has been a way to simplify the drawing of complex shapes...

[xxao]

This is very unfortunate implementation. It requires special order of points drawing which I cannot guarantee. I even tried to create SVG and import it back and it does not work either. The "evenodd" fill-rule seems unsupported by py5. I do not see any way to fix this for now.

[villares]

Yeah, I see. As you mentioned you tried an SVG workaround. Building stuff with holes on shapely geometry and then converting/importing it to py5 could perhaps be a more straightforward option.