Versions Compared

Version Old Version 2 New Version 3
Changes made by

paulina.zybinska

paulina.zybinska

Saved on

Key

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

...

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 illustratorIllustrator, the following settings should produce working results. This does, however, depend on your version of illustratorIllustrator. 


PShape logo; PShape
Code Block
languagejs
linenumberstrue
var ZHDK,NASA;
floatvar  rotAngle = 0.0;

voidfunction setuppreload() {

 size(600, 600);     

  // load SVG files
  logo = loadShape("iadlogo.svg");ZHDK = loadSVG('zhdk.svg');
    NASA  = loadShapeloadSVG("nasalogo'nasa.svg"');
   shapeMode frameRate(CENTER20);
    //
set}
the
imagesfunction tosetup() be{
drawn from the center pointcreateCanvas(600, 200, SVG);
  smoothimageMode(CENTER);
}

voidfunction draw() {
  background(255);
   pushMatrix(); 
  translate(width *0.5, height *0.5);
  rotate(rotAngle);
  shapeimage(logoZHDK, 0, 0, logoZHDK.width, logoZHDK.height);  
  popMatrix();
  rotAngle+= 0.01;
  pushMatrix();
  float let scaleFactor =dist(mouseX, mouseY, width/2, height/2);
  scaleFactor = map(scaleFactor, 0, width, 1, 4);
  translate(mouseX, mouseY);
  scale(scaleFactor);
   shapeimage(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
Code Block
languagejs
linenumberstrue
var imageList = [] imageList;

voidfunction setuppreload() {
 
size(800,800);   
  imageList = new PImage[3];
  imageList[0] = loadImage("./images/'1.jpg"png');
  imageList[1] = loadImage("./images/'2.jpg"png');
  imageList[2] = loadImage("./images/'3.jpg"png'); 
}

voidfunction drawsetup()
{
  backgroundcreateCanvas(255800,800);   
}

function pushMatrixdraw();
{
  background(255);
  translate(10,100);
 
  for(intvar i=0; i < imageList.length; i++)
    {
    
  image(imageList[i],0,0,imageList[i].width/2,imageList[i].height/2); 
       translate(150,0);
    }  
 popMatrix();
}

...

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? 
...