Startseite Skripte für das Wintersemester 2017/18 Interaction Design P5, Teil 3 Bilder einfügen


Bilder einfügen

Bilder lassen sich ganz einfach in P5 importieren – optimiert diese aber vorab z.B. in Photoshop auf die gewünschte Größe – hier 960x400px, 72dpi;

Haltet mal in der Demo die Mousetaste gedrückt!

Demo

Schaut Euch die Demo an…

P5

var hgbild;
var cursorBild;

// Vorladen der Bilder
function preload(){
  hgbild = loadImage("Osterhase.jpg");
  cursorBild = loadImage("sternchen.svg");
}

function setup(){
  createCanvas(960,400);
  background(0);
  noCursor();
}

function draw(){
  if (mouseIsPressed){
    tint(mouseX, mouseY, 0);
  }

  image(hgbild, 0, 0);
  noTint();
  image(cursorBild, mouseX, mouseY);
}