DEV Community

Koji Toyota
Koji Toyota

Posted on

3 2

How to use SVG on Processing(p5)

First of all, my sample program is here.

Prerequisites

You've installed Processing on your PC/Mac.
Also please get a SVG file to show.

How to

At first, you have to prepare PShape object.
After that, call the loadShape method.

PShape some_kind_of_shape;
some_kind_of_shape = loadShape("Some_Kind_of_Shape.svg");

Enter fullscreen mode Exit fullscreen mode

Actually, I defined PShape variable as static in my sample code for simplicity.

After you've prepared the object properly, just calling shape method in draw method and you can see your svg.

void draw() {
  background(255);
  shape(some_kind_of_shape, position_x, position_y, shape_width, shape_height);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
earthbound profile image
Alex Hall

This applies to Processing (Desktop) but not p5 (javascript variant of processing)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay