Hi, so I’m working on a generator that creates generated art output to be printed with a DIY pen plotter.
I successfully export my generated artwork through SVG output but somehow the SVG looks all garbled up while in my sketch window it looks all neat and clean.
Here is an example of how it looks in comparison next to each other:
// remake of the mandala v1 drawing to generate circles in a circular fashion for PEN PLOTTER artwork
import processing.svg.*;
boolean record;
void setup() {
size(1131, 800);
pixelDensity(displayDensity()); // high-res output on retina screen
}
void draw() {
if (record) {
//save to file with same name as the sketch + timestamp
beginRecord(SVG, getClass().getName()+day()+month()+year()+hour()+minute()+second()+".svg");
}
background(255);
translate(width/2, height/2); // move sketch to center
//float radius = floor(mouseY/(height/125)); // between 1 and 125
float radius = 125; // fixed radius
int numPoints = floor(mouseX/(width/90)); // between 1 and 90
float angle = TWO_PI/(float)numPoints;
// draw the circles in a circular fashion around the points
for (int i=0; i<numPoints; i++)
{
noFill();
stroke(0);
strokeWeight(1);
arc(radius*-sin(angle*i), radius*cos(angle*i), radius*4, radius*4, radians(90)+(radians(360)/numPoints)*i, radians(450)+(radians(360)/numPoints)*i);
}
//draw the outside circle
ellipse(0, 0, radius*6, radius*6);
//draw the inside circle
ellipse(0, 0, radius*2, radius*2);
//display values of the circle amount and radius
push();
translate(-width/2, -height/2);
fill(0, 102, 153);
text(radius, 10, 60);
fill(0, 102, 153, 51);
text(numPoints, 10, 90);
pop();
//enable filesave for svg
if (record == true) {
endRecord();
record = false;
}
}
//press the 'r' key to save a frame
void keyPressed() {
if (key == 'r') {
record = true;
}
}
At first I ran the sketch by generating ellipses but that would cause issues where the beginpoint of the ellipse would always be on the right side, causing unwanted artifacts in the eventual pen plotted artwork. I wanted to move the startingpoints of the ellipses to the outside to hide these imperfections. I managed to move these to the inside instead with using rotate and translate but it was such sloppy code that I decided to draw arcs instead and have the begin and endpoints on the outside of the big circle which works really well. Except for the SVG output now being completely useless.
I am really trying to write clear and useful code and I thought I am magagning pretty well for a beginner. But clearly there is something wrong here.
ps how do I highlight arcs(), ellipse() etc in my explanation as them being processing functions?
Are there known issues with SVG output, or am I maybe executing the SVG output in the wrong part of the sketch!?
For comparison, here is the sketch working with ellipses, where you can see the SVG export actually does show the same as what the sketch shows (more messy code, because it is redundant):
// remake of the mandala v1 drawing to generate circles in a circular fashion for PEN PLOTTER artwork
import processing.svg.*;
boolean record;
void setup() {
size(1131, 800);
pixelDensity(displayDensity()); // high-res output on retina screen
}
void draw() {
if (record) {
//save to file with same name as the sketch + timestamp
beginRecord(SVG, getClass().getName()+day()+month()+year()+hour()+minute()+second()+".svg");
}
background(255);
translate(width/2, height/2); // move sketch to center
//float radius = floor(mouseY/(height/125)); // between 1 and 125
float radius = 125; // fixed radius
int numPoints = floor(mouseX/(width/90)); // between 1 and 90
float angle = TWO_PI/(float)numPoints;
// draw the circles in a circular fashion around the points
for (int i=0; i<numPoints; i++)
{
noFill();
stroke(0);
strokeWeight(1);
push();
translate(0, -radius); //move the generated work up to the center
rotate((radians(360)/numPoints)*i); //divide rotation into amount of circles generated
translate(-radius*sin(angle), -radius*cos(angle)); //move the circles to their respective spot
ellipse(radius*sin(angle*i), radius*cos(angle*i), radius*4, radius*4);
pop();
}
//display values of the circle amount and radius
push();
translate(-width/2, -height/2);
fill(0, 102, 153);
text(radius, 10, 60);
fill(0, 102, 153, 51);
text(numPoints, 10, 90);
pop();
//draw the outside circle
ellipse(0, 0, radius*6, radius*6);
//draw the inside circle
ellipse(0, 0, radius*2, radius*2);
//enable filesave for svg
if (record == true) {
endRecord();
record = false;
}
}
//press the 'r' key to save a frame
void keyPressed() {
if (key == 'r') {
record = true;
}
}
