Versions Compared

Version Old Version 1 New Version Current
Changes made by

Luke Franzke

paulina.zybinska

Saved on

Key

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

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. 

Image Removed

...

Canvas 2D Renderer

p5.js uses Canvas 2D Renderer to display images as bitmaps. It uses an image(img, x, y) function, where img is the source image and (x, y) is the position of the image. Two more parameters can optionally be added to specify the width and height of the image.

Code Block
languagejs
let img; // Declare variable 

function setup() {
  sizecreateCanvas(600720, 600400);
  img = loadImage('pathToYourImage/imageName'); // Load the image
}

// load SVG files
  logo = loadShape("iadlogo.svg");
  NASA  = loadShape("nasalogo.svg");

  shapeMode(CENTER);function draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);
  // setDisplays the imagesimage toat bepoint drawn from the center point(0, height/2) at half size
  smoothimage();
}

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, 4img, 0, height / 2, img.width / 2, img.height / 2);
}

In this example a one-dimensional array is used to display multiple images. To access an element of this array, we use these '[index]' brackets.

Code Block
languagejs
var imageList = [];

function preload() {
  imageList[0] = loadImage('1.png');
  imageList[1] = loadImage('2.png');
  imageList[2] = loadImage('3.png'); 
}

function setup()
{
  createCanvas(800,800);   
}

function draw()
{
  background(255);
  translate(mouseX10, mouseY100);
  scale(scaleFactor);
for(var i=0; i < imageList.length; i++)
    {
  shape(NASA, image(imageList[i],0, 0, NASAimageList[i].width, NASA/2,imageList[i].height/2); 
       popMatrixtranslate(150,0);
    } 

}

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.

...


SVG Renderer

Instead of using pixel-baed Canvas 2D Renderer, it is also possible to use SVG Renderer, which is is based on SVG Document Object Model. The performance of SVG Renderer might be lesser, but it allows to render SVG-format vector images in any size without loss of quality. In p5.js you will need to use external library to make use of this feature. Here you can find more references about how to use the available methods.

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

...


Code Block
languagejs
var ZHDK,NASA;
var rotAngle = 0.0;

function preload() {
    ZHDK = loadSVG('zhdk.svg');
    NASA = loadSVG('nasa.svg');
    frameRate(20);
    
}

function setup() {
  createCanvas(600, 200, SVG);
  imageMode(CENTER);
}

function draw() {
  background(255);
    
  pushMatrix(translate(width *0.5, height *0.5);
    translate(10,100rotate(rotAngle);
    for(int i=0;i < imageList.length; i++)image(ZHDK, 0, 0, ZHDK.width, ZHDK.height);  
  {
rotAngle+= 0.01;
  let scaleFactor   image(imageList[i],0,0,imageList[i].=dist(mouseX, mouseY, width/2,imageList[i]. height/2);
  scaleFactor = map(scaleFactor, 0, width, 1, 4);
  translate(150mouseX,0 mouseY);
  scale(scaleFactor);
  } 
  popMatrix();
}

Download source

...

image(NASA, 0, 0, NASA.width, NASA.height);

}

Exercise

  • 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

...