Versions Compared

Version Old Version 4 New Version Current
Changes made by

Luke Franzke

Luke Franzke

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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. 

When exporting SVGs from illustrator, the following settings should produce working results. This does, however, depend on your version of illustrator. 

Image Added


Code Block
PShape elShapelogo;
PShape warningShapeNASA;
float  rotAngle = 0.0;


void setup()
{
  size(600, 600);      // def. window
size
    // Loadload theSVG svgfiles
file   elShape       logo = loadShape("High_voltage_warningiadlogo.svg");
  warningShapeNASA  = loadShape("Achtungnasalogo.svg");

  shapeMode(CENTER);    // set the zeroimages pointto ofbe thedrawn SVGfrom objectthe iscenter inpoint
the middle   smooth();
}


void draw()
{
  background(255);

   pushMatrix();
 
  translate(width *.5, height *.5);
    rotate(rotAngle);
    shape(elShapelogo, 0, 0,200,200 logo.width, logo.height);  
  popMatrix();
  rotAngle+=.01;
    shape(warningShape,mouseX,mouseY,100,100pushMatrix();
  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();
}

Download source



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.

Code Block
PImage[] imageList = null; 

 // create an empty array
 
void setup()
{
  size(600800,600800);     
// 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,140imageList[i].width/2,imageList[i].height/2); 
       translate(150,0);
    } 
  popMatrix();
}

Download source

Exercise 9

  • Draw a

...

  • spaceship (

...

  • spaceShip.jpg) and let this

...

  • follow the mouse.
  • Make the planets orbit around the a sun in the middle of the screen. 
  • Change the program (and the image file) so that the planet is shown without the

...

  • black box surrounding it. What file types are best suited for this? 

Exercise 9 possible solution