SVG data can also be used in processing, but note that some SVG files may not be supported by processing. Processing can only handle simple SVG graphics, so avoid using radial gradients or complex clipping masks. You can however extend the SVG capabilities of processing using the geomerative library http://www.ricardmarxer.com/geomerative/.
When exporting SVGs from illustrator, the following settings should produce working results. This does however depend on your version of illustrator.
PShape logo;
PShape NASA;
float rotAngle = 0.0;
void setup()
{
size(600, 600);
// load SVG files
logo = loadShape("iadlogo.svg");
NASA = loadShape("nasalogo.svg");
shapeMode(CENTER); // set the images to be drawn from the center point
smooth();
}
void draw()
{
background(255);
pushMatrix();
translate(width *.5, height *.5);
rotate(rotAngle);
shape(logo, 0, 0, logo.width, logo.height);
popMatrix();
rotAngle+=.01;
pushMatrix();
float scaleFactor =dist(mouseX, mouseY, width/2, height/2);
scaleFactor = map(scaleFactor, 0, width, 1, 4);
translate(mouseX, mouseY);
scale(scaleFactor);
shape(NASA, 0, 0, NASA.width, NASA.height);
popMatrix();
}
In this example, 2D images (bitmap) are displayed and arrays are used. Here we use a 1. Dimensional array. To access an element of this array, we use these '[index]' brackets.
PImage[] imageList = null; // create an empty array
void setup()
{
size(600,600); // def. window size
imageList = new PImage[3];
imageList[0] = loadImage("./images/1.jpg");
imageList[1] = loadImage("./images/2.jpg");
imageList[2] = loadImage("./images/3.jpg");
}
void draw()
{
background(255);
pushMatrix();
translate(10,100);
for(int i=0;i < imageList.length; i++)
{
image(imageList[i],0,0,140,140);
translate(150,0);
}
popMatrix();
}
Exercise 9
Draw a 4th planet (4.jpg) and let this planet follow the mouse. Change the program (and the image file) so that the planet is shown without the white box surrounding it. What file types are best suited for this?