Changing Images on Click?

Processing Coding Questions
1

Hey gang,

My names Emmy and i’ve been tasked to do a data visualisation on processing as one of my uni classes, and am portraying the different items accessible from the Mario 64 prize boxes. I am envisioning to click on the background and a random one of the prizes pops up in the corner. I am however struggling, mad props to ya’ll for knowing this stuff!

So if anyone knows a code that’d help me achieve this is and what i should be doing, i’d greatly appreciate your insight (its probably really simple, but i’m just a degenerate)

thanks ever so much xx
ps. also just assume you’re talking to a 5 year old because that is truely the level in which i comprehend this program <3

2

Cool idea! Let’s work through developing what I imagine you have in mind and maybe that will help.

First, let’s start with a blank sketch. This is always the first step.

void setup(){
  size(600,400);
}

void draw(){
  background(0);
}

This sketch is simple. When it starts, the window has a size of 600 pixels wide by 400 pixels tall. And then we draw things in that window constantly. What we draw is a black background.

This sketch works 100% and we completely understand it. Both of these are useful properties to maintain. If we add things step by step, we can check that they do what we think they do and if they don’t then we will know what lines of code are the problem.

The blank sketch is, of course, quite boring. We should add a yellow prize box!

void setup(){
  size(600,400);
}

void draw(){
  background(64); // Lighter than black background.
  fill(255,255,0); // Draw in yellow.
  strokeWeight(3); // Thicker line.
  stroke(0); // Black lines.
  rectMode(CENTER); // Draw boxes from their center.
  pushMatrix(); // Save initial system.
  translate(width/2, height/2); // Move (0,0) to center of screen.
  rect(0,0,200,200,20); // Draw yellow box with rounded edges.
  textSize(196); // Big text letters.
  textAlign(CENTER); // Center text.
  translate(0,70); // Text position adjustment.
  fill(0); // Draw in black
  text("?",-2,0); // Several black ? marks.
  text("?",2,0); // Several black ? marks.
  text("?",0,-2); // Several black ? marks.
  text("?",0,2); // Several black ? marks.
  fill(255); // Draw in white.
  text("?",0,0); // Big white ? mark.
  popMatrix(); // Restore initial system.
}

Okay. This looks like a lot. And it is. But go line by line. Each drawing step is described briefly, and nothing is terribly unclear here. The trickiest thing is the use of push/popMatrix() and translate(). For a tutorial on them, see here: https://processing.org/tutorials/transform2d/

1 Like
3

The point is this: We have a way to draw a yellow ? box. In fact, we can wrap drawing it up into its own function:

void setup() {
  size(600, 400);
}

void draw() {
  background(64);
  question_box_draw(width/2, height/2);
}

void question_box_draw(float x, float y) {
  pushStyle();
  pushMatrix();
  translate(x, y);
  fill(255, 255, 0);
  strokeWeight(3);
  stroke(0);
  rectMode(CENTER);
  rect(0, 0, 200, 200, 20);
  textSize(196);
  textAlign(CENTER);
  translate(0, 70);
  fill(0);
  text("?", -2, 0);
  text("?", 2, 0);
  text("?", 0, -2);
  text("?", 0, 2);
  fill(255);
  text("?", 0, 0);
  popMatrix();
  popStyle();
}

Aside: Maybe you have an image for the box? If so, load the image with loadImage() and draw it with image():

PImage question_box;

void setup() {
  size(600, 400);
  question_box = loadImage("question_box.png");
  imageMode(CENTER);
}

void draw() {
  background(64);
  image(question_box, width/2, height/2);
}

I’m not going to much about with images myself. Aside over.

1 Like
4

Ok. One block drawn. Let’s draw a second block type - the block after it is hit. Let’s add a mousePressed() function to switch between the two, plus some boolean variables to track the state, a few functions to reset the brown block, and a few variables to make it move / fall out of the frame.

boolean hit, brown_block, question_block=true; 
float bb_x, bb_y, bb_dy;

void setup() {
  size(600, 400);
  reset_brown_block();
}

void draw() {
  background(64);
  if( question_block ){
    question_box_draw(width/2, height/2);
  }
  if( brown_block ){
    bb_dy += 0.32;
    bb_y += bb_dy;
    brown_box_draw(bb_x, bb_y);
  }
  if( hit ){
    fill(255,0,0);
    ellipse(30,30,20,20);
  }
}

void reset_brown_block(){
  bb_dy = -5;
  bb_y = height/2;
  bb_x = width/2;
}

void brown_box_draw(float x, float y){
  pushStyle();
  pushMatrix();
  translate(x, y);
  fill(128, 64, 0);
  strokeWeight(3);
  stroke(0);
  rectMode(CENTER);
  rect(0, 0, 200, 200, 20);
  fill(0);
  translate(40,-30);
  pushMatrix();
  rotate(QUARTER_PI);
  rect(0,0,10,60);
  popMatrix();
  translate(-80,0);
  rotate(-QUARTER_PI);
  rect(0,0,10,60);
  popMatrix();
  popStyle();
}

void question_box_draw(float x, float y) {
  pushStyle();
  pushMatrix();
  translate(x, y);
  fill(255, 255, 0);
  strokeWeight(3);
  stroke(0);
  rectMode(CENTER);
  rect(0, 0, 200, 200, 20);
  textSize(196);
  textAlign(CENTER);
  translate(0, 70);
  fill(0);
  text("?", -2, 0);
  text("?", 2, 0);
  text("?", 0, -2);
  text("?", 0, 2);
  fill(255);
  text("?", 0, 0);
  popMatrix();
  popStyle();
}


void mousePressed(){
  if( !hit ){
    hit = true;
    brown_block = true;
    question_block = false;
  } else {
    hit = false;
    brown_block = false;
    question_block = true;
    reset_brown_block();
  }
}

Click the ? block. It becomes a brown block, and the brown block animates away.

A small red circle appears to indicate that we hit the block.

Click again and the ? block is reset.

1 Like
5

The idea is that when we detect the mouse click, we also pick a random item and draw it behind the brown block. That way it’ll look like it is coming out of the block as it falls away.

Let’s start with a few coins of various colors.

boolean hit, brown_block, question_block=true; 
float bb_x, bb_y, bb_dy;

void setup() {
  size(600, 400);
  reset_brown_block();
}

void draw() {
  background(64);
  pushMatrix();
  translate(width/2,height/2);
  draw_random_item();
  popMatrix();
  if( question_block ){
    question_box_draw(width/2, height/2);
  }
  if( brown_block ){
    if( bb_y > 1000 ){ brown_block = false; }
    bb_dy += 0.32;
    bb_y += bb_dy;
    brown_box_draw(bb_x, bb_y);
  }
  if( hit ){
    fill(255,0,0);
    //ellipse(30,30,20,20);
  }
}

void reset_brown_block(){
  bb_dy = -5;
  bb_y = height/2;
  bb_x = width/2;
}

void brown_box_draw(float x, float y){
  pushStyle();
  pushMatrix();
  translate(x, y);
  fill(128, 64, 0);
  strokeWeight(3);
  stroke(0);
  rectMode(CENTER);
  rect(0, 0, 200, 200, 20);
  fill(0);
  translate(40,-30);
  pushMatrix();
  rotate(QUARTER_PI);
  rect(0,0,10,60);
  popMatrix();
  translate(-80,0);
  rotate(-QUARTER_PI);
  rect(0,0,10,60);
  popMatrix();
  popStyle();
}

void question_box_draw(float x, float y) {
  pushStyle();
  pushMatrix();
  translate(x, y);
  fill(255, 255, 0);
  strokeWeight(3);
  stroke(0);
  rectMode(CENTER);
  rect(0, 0, 200, 200, 20);
  textSize(196);
  textAlign(CENTER);
  translate(0, 70);
  fill(0);
  text("?", -2, 0);
  text("?", 2, 0);
  text("?", 0, -2);
  text("?", 0, 2);
  fill(255);
  text("?", 0, 0);
  popMatrix();
  popStyle();
}


void mousePressed(){
  if( !hit ){
    hit = true;
    brown_block = true;
    question_block = false;
    r_item = int(random(3));
  } else {
    hit = false;
    brown_block = false;
    question_block = true;
    reset_brown_block();
  }
}

void draw_random_item(){
  switch(r_item){
    case 0: // Yellow coin.
      fill(255,255,0);
      ellipse(0,0,80,80);
      noFill();
      ellipse(0,0,60,60);
      rect(-5,-20,10,40);
      break;
    case 1: // Red coin.
      fill(200,0,0);
      ellipse(0,0,80,80);
      noFill();
      ellipse(0,0,60,60);
      rect(-5,-20,10,40);
      break;
    case 2: // Blue coin.
      fill(0,0,200);
      ellipse(0,0,80,80);
      noFill();
      ellipse(0,0,60,60);
      rect(-5,-20,10,40);
      break;
    default:
      fill(255,0,255);
      rect(0,0,20,20);
      fill(0);
      text("ERROR: unknown item number!", 0, 0);
      break;
  }
}

int r_item = 1;

And that’s enough help to get you started. Now it’s up to you to determine what items you want, or use images for them instead of drawing them yourself. Give it a go - post your code/images for more help.

1 Like