U1 LA 2.1 Meebewegen met de muis

Heb je een robot die uit meerdere delen bestaat, dan kun je alle delen tegelijk laten meebewegen op de muis.

Deze Robot gaan we laten bewegen

function setup() {
  createCanvas(400, 400);
  strokeWeight(5);
}

function draw() {
  background(220);
  fill(200, 0, 0);
  rect(100, 100, 200);
  ellipse(100, 100, 50, 50); // linker oor
  ellipse(300, 100, 50, 50); // rechter oor
  fill(255, 255, 255);
  ellipse(145, 165, 20, 20); // linkeroog
  ellipse(255, 165, 20, 20); // rechteroog
  ellipse(200, 190, 10, 10); // neus
  ellipse(200, 250, 60, 30); // mond
}

De coördinaten zijn vast

Elke rect en ellipse staan op een vaste plek. rect(100, 100, 200); Altijd op positie (100,100). Daar gaan we wat in veranderen. Daarvoor kiezen we een nieuw ‘midden’. Dan laten we die meelopen met de muis via mouseX en mouseY. Dat zijn de coördinaten waar de muis nu is.

Kies het “vaste punt”

We nemen de X,Y van de rechthoek als ‘midden’: (100,100) Dat is ook de coördinaat van het linkeroor. Dus:

// canvas (400,400) // handig deelbaar door 2
// 100,100          // rechthoek

De twee oren kun je nu plaatsen ten opzichte van het punt (100,100). Als mouseX en mouseY elk 100 zijn, heb je verder geen aanpassing nodig.

ellipse(100,100,50,50) wordt ellipse(mouseX,       mouseY, 50, 50);  
ellipse(300,100,50,50) wordt ellipse(mouseX + 200, mouseY, 50, 50); // rechter oor was 300,100

Opdracht

Maak nu de robot af, door alle coördinaten van de ellipses en rects afhankelijk te maken van mouseX en mouseY. Je robot blijft intact, maar beweegt nu helemaal mee met de muis.

Width en Height

In dit voorbeeld hebben we de standaard-variabelen mouseX en mouseY gebruikt. De andere belangrijke standaard-variabelen zijn width en height, de breedte en hoogte van het canvas.

In de volgende LA gaan we aan de slag met eigen variabelen. Het eerste echte programmeren.