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.
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);
translate(width *0.5, height *0.5);
rotate(rotAngle);
image(ZHDK, 0, 0, ZHDK.width, ZHDK.height);
rotAngle+= 0.01;
let scaleFactor =dist(mouseX, mouseY, width/2, height/2);
scaleFactor = map(scaleFactor, 0, width, 1, 4);
translate(mouseX, mouseY);
scale(scaleFactor);
image(NASA, 0, 0, NASA.width, NASA.height);
}
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.
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(10,100);
for(var i=0; i < imageList.length; i++)
{
image(imageList[i],0,0,imageList[i].width/2,imageList[i].height/2);
translate(150,0);
}
}
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?