Random Squares With Mouse Interaction

processing sketch random squares with mouse interaction (daphne)

void setup() {
  frameRate(50);
  size(400,400);
}

void draw() {
  //noStroke();

  int q = 10;
  for (int y=mouseY-q; y<=mouseY+q; y+=random(1,100)) {
    for (int x=mouseX-q; x<=mouseX+q; x+=random(1,100)) {
      fill(random(0,255),random(0,255),random(0,255));
      rect(x-q,y-q,20,20);
    }
  }
}

Daphne, wat een leuke sketch! Alleen heb je die twee for-loops hier niet echt nodig. Je kunt je code ook zo schrijven:

void setup() {
  frameRate(50);
  size(400,400);
}

void draw() {
  //noStroke();

  int q = 10;

  fill(random(0,255),random(0,255),random(0,255));
  rect((mouseX-q)+random(0,20),(mouseY-q)+random(0,20),20,20);
}

Dat doet hetzelfde maar is veel korter. Je kunt het zelfs nog abstracter schrijven, want q is eigenlijk de helft van de grootte van je vierkantje. Of waar gebruik je 'q' voor? Het lijkt erop dat je 'q' gebruikt zodat de muis in het midden van het vierkantje is.

x+=random(0,100) heeft niet zoveel zin, want x kan nooit groter zijn dan x+20.

Zo is het nog overzichtelijker:

void setup() {
  frameRate(50);
  size(400,400);
}

void draw() {

  int squareSize = 20;

  float xPos = mouseX - (squareSize/2) + random(0,squareSize);
  float yPos = mouseY - (squareSize/2) + random(0,squareSize);  

  fill(random(0,255),random(0,255),random(0,255));
  rect(xPos, yPos, squareSize, squareSize);
}

Zo hoef je alleen maar de grootte van het vierkantje (squareSize) te veranderen en alle getallen in je programmaatje worden meteen aangepast. Probeer maar eens als je er 'int squareSize = 50' van maakt.

En je kunt het zelfs nog eenvoudiger maken. Als je 'rectMode' gebruikt (http://processing.org/reference/rectMode_.html).
Dan ziet je code er bijvoorbeeld zo uit:

void setup() {
  frameRate(50);
  size(400,400);
}

void draw() {

  rectMode(CENTER);

  int squareSize = 20;

  float xPos = mouseX + random(-squareSize,squareSize);
  float yPos = mouseY + random(-squareSize,squareSize);  

  fill(random(0,255),random(0,255),random(0,255));
  rect(xPos, yPos, squareSize, squareSize);
}

Dit laatste voorbeeld is niet precies hetzelfde als de andere sketches. Eigenlijk zou het zo moeten zijn:

  int squareSize = 20;

  float xPos = mouseX + random(-(squareSize/2),squareSize/2);
  float yPos = mouseY + random(-(squareSize/2),squareSize/2);  

  fill(random(0,255),random(0,255),random(0,255));
  rect(xPos, yPos, squareSize, squareSize);

of zo, dat is precies hetzelfde:

  int squareSize = 10;

  float xPos = mouseX + random(-squareSize,squareSize);
  float yPos = mouseY + random(-squareSize,squareSize);  

  fill(random(0,255),random(0,255),random(0,255));
  rect(xPos, yPos, squareSize*2, squareSize*2);

Success ;-)
(Simone)

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License