Using millimeters (mm), centimeters (cm), inches and zoom/pan with p5.js

p5.js
1

The first thing I wanted to do when I started using p5.js was to use dimensions in millimeters. I couldn’t find anything about this topic on the internet. So, I wrote a small extension myself (use p5.js with mm, cm, inches / panning and zooming / easy exporting to png). If some of you find it usefull, i will refine/extend it further.

p5.start2d.js

3 Likes
2

Any specific reason you prefer to use the metric system over pixels? Printing?

3

I only make sketches to print. It’s easier to create them in millimeters (or cm, inches) and let the computer calculate the pixel size. It’s easier to print the sketch in different resolutions. the only change I have to make is the PPI of the sketch.

2 Likes
4

Hi Kris,

THANK YOU for your work, this is perfect for what I am using p5.js for. Do you have any recommendations how I can export the sketch I’ve created as SVG? I’ve tried some libraries but it did not work well with your script. I am a rookie thogh.

But your script is wonderful in itself!!!

5

Hello, and thanks for your kind message,

Sadly, at the moment there is no possibility to export sketches with p5.js as svg.

(https://github.com/zenozeng/p5.js-svg does not work anymore with the current version of p5).

I was building a similar start2d library for SVG as well, but I dropped it. I only create sketches to make prints and although great for the web, if you want to print svg and use filters for example, you can get very unpredictable results. So, for now, I dropped svg in favor of bitmap graphics. With p5.js I can make a sketch of 1920mm x 960mm @ 300ppi, so that’s a very decent size for me.

P5.js is a wonderful tool, but for my personal use it’s rather heavy, so I am building a kind of slim version of p5.js. At the moment only bitmap, but I’m planning to build-in svg as well. So, with some patient you can find this library on github in 2021.

If you do want to work with svg, At the moment I recommend using snap.svg. It’s not really maintained anymore, but it is still the easiest and most comprehensive svg library to work with. Svg.js is faster, but has less possibilities and it’s more difficult to extend. Also, for static art, speed is less important.

Kind regards

Kris

2 Likes