Tut­o­r­i­a­l 15 - Mouse Int­e­r­a­c­t­i­o­n

by Travis Low
  • Show Code
/** @peep sketch */
 
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int spacing = 20;
int radius = 8;
 
void setup() {
  size(200, 200);
  noStroke();
}
 
void draw() {
  background(255-16);
  for (int x = 10; x < width; x += spacing) {
    for (int y = 10; y < width; y += spacing) {
      float distance = dist(mouseX, mouseY, x, y);
      if (distance < radius + 3) {
        fill(orange);
      } else {
         fill(lightBlue);
      }
      float factor = map(distance, 0, width, 1.3, 0.3);
      pushMatrix();
      translate(x, y);
      scale(factor);
      rotate(radians(mouseX));
      rectMode(CENTER);
      rect(0, 0, radius*2, radius*2);
      popMatrix();
    }
  }
}
  • Show Code
/** @peep sketch */
 
void setup() {
  size(200, 200);
  background(255-16);
}
 
void draw() {
  float r = (mouseX + mouseY)/2;
  float g = max(mouseX, mouseY);
  float b = 255 - max(mouseX, mouseY);
  float d = dist(pmouseX, pmouseY, mouseX, mouseY);
  if (d <= 40) {
    strokeWeight(constrain(5-d, 2, 8));
    noFill();
    stroke(r, g, b, 150);
    ellipse(pmouseX, pmouseY, random(0, 50), random(0, 50));
  }
}

Draw with Mouse1, Erase with Mouse2!

  • Show Code
/** @peep sketch */
 
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
void setup() {
  size(200, 200);
  background(255-16);
  strokeWeight(5);
}
 
void draw() {
  if (mousePressed) {
    if (mouseButton == LEFT) {
      stroke(darkBlue);
    } else if (mouseButton == RIGHT) {
      stroke(255-16);
    }
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}
  • Show Code
/** @peep sketch */
 
color lightBlue = color(66, 168, 237);
color darkBlue = color(0, 102, 153);
color orange = color(204, 102, 0);
 
int radius = 100;
color fillColor = lightBlue;
float x = 16;  
 
void setup() {
  size(200, 200);
}
 
void draw() {
  background(255-x);
  strokeWeight(4);
  float distance = dist(mouseX, mouseY, width/2, height/2);
  if (mousePressed && distance < radius/2) {
    fill(orange);
    x = 250;
  } else {
    fill(lightBlue);
    x = 16;
  }
  ellipse(width/2, height/2, radius, radius);
}

Comments

Nobody has said anything yet.