Loading...
Logo
Processing Forum
Hello out there!

First of all thanks for a great community! I've used processing for two weeks at school and I've found sooo much help here:)

I am currently working on a project creating an interactive poster for my line of study!
The interactions have to be really simple so I hope you can help me :)

First of all, I have loaded the image of the poster into processing.
I need to make some rectangles with text in them when I move the mouse close to certain points on the screen. I know what I have to do, but I can't assemble it:

-Determine the specified area on the screen that should respond with interaction
-make a rect() that appears automatically when the mouse icon is moved into the area.
-apply text to the rect()

The second thing is that I've made a couple of mouse-click functions. Blue rectangles appear by left click. Green circles by right click. Erase by scroll click.

Now, I would like these shapes to slowly descend and exit the image, preferably with some sort of "feather falling towards the ground"-effect. This should happen as soon as you click the mouse and the shape appears. 

Sorry for the long post, I am terrible at writing these things :)
Feel free to try it, just put in another image !
Here is the code so far:

float rectGrow = 10;
float ellipseGrow = 10;

void setup(){
  size(500,707);
  image(loadImage("poster.jpg"),0,0);  
}

void mousePressed(){
  
  if (mouseButton == RIGHT) {
  strokeWeight(2);
  stroke(54,242,149);
  noFill();
  ellipse(mouseX,mouseY,ellipseGrow*random(0.5,2.5),ellipseGrow*random(0.5,2.5));
  ellipseGrow += random(0.05,0.2);
}
  else if (mouseButton == LEFT){
  strokeWeight(2);
  stroke(31,252,251);
  noFill();
  rect(mouseX,mouseY,rectGrow*random(0.5,2.5),rectGrow*random(0.5,2.5));
  rectGrow += random(0.05,0.2);
  }
  
  else if (mouseButton == CENTER){
  image(loadImage("poster.jpg"),0,0);
  }  
}

void keyPressed(){
  if (key == CODED){
    if (keyCode == UP)
    fill(color(random(255),random(255),random(255),80));
    rect(0,0,width,height);
  }
  {
  if (keyCode == DOWN)
  image(loadImage("poster.jpg"),0,0);
  }
}

Replies(3)

this................



float rectGrow = 10;
float ellipseGrow = 10;

InfoArea rightSign;
InfoArea leftSign;

PImage myImg;

//
ArrayList<Ball> balls;
final int ballWidth = 12;


void setup() {
  size(500, 707);
  myImg=loadImage("poster.jpg");

  rightSign = new InfoArea (300, 300, 100, 100, "Wow");
  leftSign = new InfoArea (100, 300, 100, 100, "Wwwwwww");
  // Create an empty ArrayList
  balls = new  ArrayList();
}

void draw() {
  background(0);
  image(myImg, 0, 0);
  rightSign.display();
  rightSign.check();
  leftSign.display();
  leftSign.check();
  //
  Ball ball;
  for (int i=0; i < balls.size(); i++) {
    ball = balls.get(i);
    ball.move();
    ball.display();
  }
  for (int i=0; i < balls.size(); i++) {
    ball = balls.get(i);
    if (ball.finished()) {
      balls.remove(i);
    }
  }
}
void mousePressed() {

  if (mouseButton == RIGHT) {
    strokeWeight(2);
    stroke(54, 242, 149);
    noFill();

    ellipseGrow += random(0.05, 0.2);

    // A new ball object is added to the ArrayList (by default to the end)
    balls.add(new Ball(0, mouseX, mouseY, ellipseGrow*random(0.5, 2.5), ellipseGrow*random(0.5, 2.5),
    color (random(0, 255), random(0, 255), random(0, 255))));
  }
  else if (mouseButton == LEFT) {
    strokeWeight(2);
    stroke(31, 252, 251);
    noFill();

    rectGrow += random(0.05, 0.2);
    // A new ball object is added to the ArrayList (by default to the end)
    balls.add(new Ball(1, mouseX, mouseY, rectGrow*random(0.5, 2.5), rectGrow*random(0.5, 2.5),
    color (random(0, 255), random(0, 255), random(0, 255))));
  }

  else if (mouseButton == CENTER) {
    balls.clear();
  }
}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP)
      fill(color(random(255), random(255), random(255), 80));
    rect(0, 0, width, height);
  }
  {
    if (keyCode == DOWN)
      image(loadImage("poster.jpg"), 0, 0);
  }
}

//========================
class InfoArea {
  float x, y;
  float w, h;
  String text;
  InfoArea(float x_, float y_, float w_, float h_, String t_) {
    x=x_;
    y=y_;
    w=w_;
    h=h_;
    text=t_;
  }
  void display() {
    noFill();
    stroke(255);
    rect(x, y, w, h);
  }
  void check() {
    if (mouseX>x&&mouseX<x+w&&
      mouseY>y&&mouseY<y+h)
      showMouseOver() ;
  } // func
  void showMouseOver() {
    // yellow mouse over text
    if (!text.equals("")) {
      // get pos
      float posX=x;
      float posY=y;
      // right screen border?
      if (posX+textWidth(text)+10 > width) {
        posX=width-textWidth(text)-12;
      }
      fill(255, 255, 44);
      rect(posX+14, posY+4, textWidth(text)+5, 20);
      fill(0);
      text ( text, posX+16, posY+4+16 );
    }
    //
    //
  } // func
  //
} // class

// =====================================================================
// Simple class

class Ball {
  final int typeEllipse = 0;
  final int typeRect    = 1;
  int type;
  float x;
  float y;
  color myColor;
  float speed;
  float gravity;
  float w;
  float h;
  float life = 255;

  Ball(int tempType, float tempX, float tempY, float tempW, float tempH, color tempmyColor1) {
    type = tempType;
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;

    myColor=tempmyColor1;

    speed = 0;
    gravity = 0.1;
  }

  void move() {
    // Add gravity to speed
    speed = speed + gravity;
    // Add speed to y location
    y = y + speed;
    // If ball reaches the bottom
    // Reverse speed
    if (y >= height-19) {
      life=0;
      // Dampening
      // speed = speed * -0.8;
      // y = height-19;
    }
  }

  boolean finished() {
    // Balls fade out
    life--;
    if (life < 0) {
      return true;
    }
    else {
      return false;
    }
  }

  void display() {
    switch (type) {
    case typeEllipse:
      // Display the ball
      //fill(0, life);
      fill(myColor);
      //stroke(0,life);
      ellipse(x, y, w, w);
      break;
    case typeRect:
      // Display the rect
      //fill(0, life);
      fill(myColor);
      //stroke(0,life);
      rect(x, y, w, w);
      break;
    } // switch
  }
} // class  

// =====================================================================


//




Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.
Awesome! Just perfect :D

Well, I'll look it through tomorrow (I have to read A LOT in references since I am all new to this)!
I'll let you know if there's something I really don't understand :)

Again, thanks so much!
Lol i was making a response to this topic and i went to preview mode and there was already a new response. Anyways, a tip is to not use loadimage every time, but to loadimage only once at the start of the program and make a PImage because ram is 100x faster than hard drive operations.