Skala

Skala

I det här programmet ska vi rita en kvadrat som ändrar storlek beroende av var på canvasen mouseX och mouseY är.

Först skapas en canvas som är 400 * 400 pixlar.

I funktionen draw(), vilken är en loop, är bakgrund satt till en grå färg. Därefter sätts origo till det värde där musen/fingret är, med translate(mouseX, mouseY);

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(200);
  translate(mouseX, mouseY);
}

En variabel skapas med namnet skala och värdet mouseX/60. det innebär att om mouseX är på 240 så är har variabeln skala värdet 4.  Den figur som ritas ut kommer att vara fyra gånger så stor när mouseX är vid 240 mot när mouseX är vid 60. När mouseX är vid 120 kommer figuren att vara dubbelt så stor som den är när mouseX är vid 60.  Nästa funktion scale() är det som förminskar eller ökar storleken på figuren. Här sätts värdet på scale() till skala.

 let skala = mouseX / 60.0;
 scale(skala);

strokeWeight(1.0/skala);  påverkar tjocklek på yttre linjer på figuren.

Kommentera bort (genom att sätta två // framför) den funktionen för att se dess inverkan.

Sist ritas en kvadrat ut. Den är 30 * 30 pixlar när skala = 1.

 Titta på koden för skala och räkna ut var mouseX är när kvadraten är 30*30 pixlar (När är skalan 1?)

 Rita ut en kvadrat  vid x = 240 och y =240 som har den storlek som den skalbara kvadraten har när mouseX = 240.    rect(240, 240, ?, ?);

För att rektangel du ritar ut inte ska påverkas av translate() så kan du lägga den i koden efter background.