Interaction Design Wiki ･ Creative Coding

SVG + Images (en)

deutsche Version

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. 


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();
}

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.

PImage[] imageList;

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

Download source

Exercise 9

Exercise 9 possible solution


© Interaction Design ･ ZHdK Refresh