Get correct geometry and scale using photo or vision... Is this possible with Processing?


This would be my long topic title:
Take a photo with reference points for scale or use camera vision save contour as DXF or SVG in the correct dimensions/scale. Is this possible in Processing?

I have a couple of pattern designs made out of cardboard that I want do make digital…
I have been looking around for Mobile apps och PC software for taking a picture including reference points that could set the scale correct but cant find any that are free of charge…
So… I started looking for vision based software that can detect edges but cant find any complete program that fits my needs…

Maybe someone did something like this in Processing and I just haven’t found it? I have seen on Youtube that you can do a lot of stuff with images…?
Hera are some pictures of what I’m talking about… ish…

Skärmbild 2020-11-29 114932


I am not if I understood well what you’re looking for.
If your purpose is to digitalze some designs you made on cardboards in SVG format or DXF, I would say that it is possible.
If you made yours cardboards in only one color, I imagine that using the pixels array and would be sufficient :

  • first you upload your picture in your sketch
  • you get all the pixels of your picture which are more or less around your target color ( I suppose yours colors in your pic won’t be perfect, so you’ll find some variations)
  • draw all those pixels on a new Buffer (PGraphics) with the svg argument (, and then export it

Otherwise, extra idead :
I already saw some models in runwayML that segment images into parts, so if you know how to use runway, you can send data from those models to your processing sketch, and redraw every pixel of the extracted object in a svg canvas.
For this, check out BCDN or DeepLab which should be able to do the job.

1 Like


I have been googeling for examples since i havent worked with neither images or pixels in processing before but I cant seem to find anything good to start from.

I found this:
but i guess its not the correct way to start? :grinning:

I think it’s too complicated for what you want. I was thinking about a dumb reporting of every black pixel from your image on a buffer which has the SVG argument, this way you can save it as svg :

PGraphics pg;

void setup(){
  fill(0, 0, 0);
  rect(10,10, 50,50);

void draw(){

void mousePressed(){
  println("draw shape on a svg canvas");
  pg = createGraphics(100, 100, SVG);
  color black = color(0,0,0);
for(int y = 0; y < height ; y ++ ){
  for (int x = 0; x < width ; x ++ ){
    if (pixels[y*width+x] == black){
      pg.pixels[y*width+x] = black;

image(pg, 0, 0);

You should take a look to Pgraphics, and pixels[] doc

Finally I got to checking this out!!..
Thank you for the code… I’m still stuck though. :crazy_face:

I need to load a image… When i look around people use “PImage” to load images. but in your example there is nothing like that?.

Also, Right now im getting NullPointExeption on this line:
pg.pixels[y*width+x] = black;