Description
Created by: matiasw
Description
In my code, I have set strokeCap(PROJECT); and strokeJoin(MITER); and then drawn a shape, which is a looping path. It renders correctly in Processing 4.3, but when saved as SVG with processing.svg and opened in Inkscape, it is shown incorrectly. Have a look at the images to see what I mean.
Expected Behavior
Processing - this is correct.
Inkscape - this is wrong.
I am not sure if this is a Processing issue or an Inkscape one, so I am reporting it here, first.
Steps to Reproduce
- Draw the infinity knot. Here is my code:
import processing.svg.*;
boolean record;
class Point {
public float x, y;
Point(float x, float y)
{
this.x = x;
this.y = y;
}
}
class LineSegment {
PVector[] points;
}
class Knot {
float d = 80;
public final int points = 14;
Point[] p = new Point[points];
Knot()
{
p[0] = new Point(-4, 0);
p[1] = new Point(-3, -1);
p[2] = new Point(1, 3);
p[3] = new Point(2, 2);
p[4] = new Point(-2, -2);
p[5] = new Point(-1, -3);
p[6] = new Point(3, 1);
p[7] = new Point(4, 0);
p[8] = new Point(3, -1);
p[9] = new Point(-1, 3);
p[10] = new Point(-2, 2);
p[11] = new Point(2, -2);
p[12] = new Point(1, -3);
p[13] = new Point(-3, 1);
}
Point getPoint(int i)
{
return new Point(p[i].x * d, p[i].y * d);
}
}
PImage bg;
PVector intersection (float x1, float x2, float x3, float x4, float y1, float y2, float y3, float y4)
{
float uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
float uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));
return new PVector(uA, uB);
}
void setup()
{
fullScreen();
strokeCap(PROJECT);
}
void draw()
{
if (record) {
// Note that #### will be replaced with the frame number. Fancy!
beginRecord(SVG, "frame-####.svg");
}
Knot k = new Knot();
translate(width/2, height/2);
noFill();
strokeWeight(45);
stroke(0);
strokeJoin(MITER);
beginShape();
for (int i = 0; i < k.points; i++) {
vertex(k.getPoint(i).x, k.getPoint(i).y);
}
vertex(k.getPoint(0).x, k.getPoint(0).y);
endShape();
if (record) {
endRecord();
record = false;
}
}
// Use a keypress so thousands of files aren't created
void mousePressed() {
record = true;
}
- Click the mouse to save as SVG.
- Open the SVG in Inkscape 1.3.
Your Environment
- Processing version: 4.3
- Operating System and OS version: Windows 11 22H2
Possible Causes / Solutions
Maybe the problem is in the Batik library, which I understand Processing uses, but I thought I'd start downstream before escalating. It could also be with Inkscape, in the way that they open the resulting file. If it is, however, then it is also in whatever Vivaldi uses for SVG handling, as it's rendered with the rounded (incorrect) cap join in my browser as well. Here is the file as saved from Processing:
