void draw() { if (screen == MAIN_MENU) { MAIN_MENU(); } else if (screen == INSTRUCTIONS) { INSTRUCTIONS(); } else if (screen == GAMEOVER) { GAMEOVER(); } else if (screen == STORY_1) { STORY_1(); } else if (screen == LEVEL_1) { LEVEL_1(); } } ` // wall collisions// boolean collision = true;

if (collision) { screen = GAMEOVER; } else { screen = LEVEL_1; }

if (dist(wal1_x, wal1_y, mouseX, mouseY)<=162) { collision = true; } else { collision = false; }`

   ` //in the main program we initialize
    var puck = new Puck(); 
    var left = new Paddle(true);
    var right = new Paddle(false);
    //and then call the method like this
    puck.checkPaddleLeft(left);
    puck.checkPaddleRight(right);
...`


  `  //in the puck class we have this
    function Puck(){
     this.x = 600/2; // Place the puck in the middle of the x axis.
     this.y = 400/2; // Place the puck in the middle of the y axis.
     this.xspeed = 0; // Sets the initial puck speed along the x axis.
     this.yspeed = 0; // Sets the initial puck speed along the y axis.
     this.r = 12; // Establishes the radius of the puck at 12 pixels.
     //reset();

    Puck.protoype.checkPaddleLeft = function(p) { // Function to determine collision between the puck and the left paddle.
      if (y < p.y + p.h/2 && y > p.y - p.h/2 && this.x - this.r < p.x + p.w/2) {
        if (this.x > p.x) {
          var diff = y - (p.y - p.h/2);
          var rad = radians(45);
          var angle = map(diff, 0, p.h, -rad, rad);
          this.xspeed = 5 * cos(angle);
          this.yspeed = 5 * sin(angle);
          this.x = p.x + p.w/2 + this.r;
        }
      }
    }
...}`

When you try to run this, it returns "Cannot set property 'checkPaddleLeft' of undefined" Any assistance on how to structure such calls is appreciated.

if (shape1.x && shape1.y === shape2.x && shape2.y) {
    //other code
}

but it doesn't work.

float ballX=300; float ballY=100; float speedX=6; float speedY=6; float padY=200; float padX=970; float padH=200; float pad2X=10; float pad2Y=200; float pad2H=200; float padSpeed=35; void setup() { size(1000,600); } void keyPressed() { if (key==CODED) { if (keyCode==UP) { padY=padY-padSpeed; } if (keyCode==DOWN) { padY=padY+padSpeed; } } if (key=='w') { pad2Y=pad2Y-padSpeed; } if (key=='s') { pad2Y=pad2Y+padSpeed; } } void draw() { background(255); fill(#00BC24); rect(500,0,width/2,height); if (ballX<width/2) fill(#00BC24); else fill(255); ellipse(ballX,ballY,40,40); //Ball fill(255); rect(padX,padY,20,padH); fill(#00BC24); rect(pad2X,pad2Y,20,pad2H);

if ((ballX>padX-10) && (ballY>=padY) && (ballY<=padY+padH)) speedX=-speedX; if ((ballX<pad2X+10) && (ballY<=pad2Y) && (ballY<=pad2Y+pad2H)) speedX=-speedX; if (ballY>height) speedY=-speedY; if (ballY<0) speedY=-speedY; ballX=ballX+speedX; ballY=ballY+speedY; }

In the code above, I don't get the logic behind

boolean overlaps(Particle other) {
  float d= dist(x,y,other.x,other.y);
  if(d<r+other.r){
    return true;
  }else{
    return false;
  }
}

For me it seems like, newly defined function 'overlaps' would take two inputs one of which is Particle and the other is other. And it will execute with the variable float d which represents distance between x&y coordinates of Particle and x&y coordinates of other. if the distance value is smaller than the sum of radius of Particle and other, it will yield the 'true' value.

However,

specifically, for "overlaps(Particle other)", I think there must be a comma between Particle and other as 'Particle' also requires commas among each entity going into its round bracket. like Particle (float tempX, float tempY,float tempZ).

I think I totally don't understand the part from boolean. can you explain what the part below is meaning?

boolean overlaps(Particle other) {
  float d= dist(x,y,other.x,other.y);

I really don't get this part...

Can I ask forum to let me know how to fix this problem? My modified sketch code and class codes are as below.

=Sketch=

Circle c;

Rectangle[] rects = new Rectangle[8];


void setup() {
  size(600,400);
  c = new Circle(0,0,30);
  for (int i=0; i<rects.length; i++) {
    float x = int(random(50,width-50)/50) * 50;
    float y = int(random(50,height-50)/50) * 50;
    rects[i] = new Rectangle(x,y, 50,50);
  }
}


void draw() {
  background(255);


  for (Rectangle r : rects) {
    r.checkCollision(c);  
    r.display();               
  }


  c.update();
  c.display();
}

=Circle Class=

class Circle {
  float x, y;    // position
  float r;       // radius

  Circle (float tempX, float tempY, float tempR) {
    x = tempX;
    y = tempY;
    r = tempR;
  }

  // move into mouse position
  void update() {
    x = mouseX;
    y = mouseY;
  }

  // draw
  void display() {
    fill(0, 150);
    noStroke();
    ellipse(x,y, r*2, r*2);
  }



}

=Rectangle Class=

class Rectangle {
  float x, y;            // position
  float w, h;            // size
  boolean hit = false;   // is it hit?
  boolean circleRect(float cx, float cy, float radius, float rx, float ry, float rw, float rh) {


  float testX = cx;
  float testY = cy;


  if (cx < rx)         testX = rx;      // compare left edge
  else if (cx > rx+rw) testX = rx+rw;   // right edge
  if (cy < ry)         testY = ry;      // top edge
  else if (cy > ry+rh) testY = ry+rh;   // bottom edge


  float distX = cx-testX;
  float distY = cy-testY;
  float distance = sqrt( (distX*distX) + (distY*distY) );

  // if the distance is less than the radius, collision!
  if (distance <= radius) {
    return true;
  }
  return false;
}

  Rectangle (float tempX, float tempY, float tempW, float tempH) {
    x = tempX;
    y = tempY;
    w = tempW;
    h = tempH;
  }

  // draw the rectangle
  // if hit, change the fill color
  void display() {
    if (hit) {
    fill(255,150,0);
    }
    else{ 
    fill(0,150,255);
    noStroke();
    rect(x,y, w,h);
  }
  for (Rectangle r : rects) {
  r.checkCollision(c);  // check for collision
  r.display();               // and draw
}
  }
   void checkCollision(Circle c) {
  hit = circleRect(c.x,c.y,c.r, x,y,w,h);
}
}

Here is my code

ArrayList <enemy> enemies = new ArrayList <enemy> ();
ArrayList <wall> walls = new ArrayList <wall> ();
void setup() {
  size(1000, 700);
  frameRate(60);

}
void draw() {
  background(0);
      enemy e = new enemy();
  if (frameCount %100==0) {


    enemies.add(e);
  }
  for (int i = enemies.size() - 1; i >= 0; i-=1) {
    enemy zz = enemies.get(i);
    if (zz.isalive==false) {
      enemies.remove(i);
    } else {
      zz.display();
      zz.move(e);
    }
  }
}
//================================================================
class enemy {
  boolean isalive = true, detected = false;
  float x  = -10000, y = -10000, size = 20,lock = -1,identity = random(99999);
  String names = "hi";
  enemy() {
    x  = random(width);
    y  = random(height);
  }
  void display() {
    fill(200, 0, 0);
    rect(x, y, size, size);
  }
  void move(enemy other) {
    if (dist(other.x, other.y, x, y)<other.size + size + 100) {
      detected = true;
      lock = other.identity;
    }
    if (other.isalive ==false) {
      detected = false;
      lock = -1;
    }
    if (detected && other.identity == lock) {
      if (x > other.x) {
        x -= 5;
      }
      if (x < other.x) {
        x += 5;
      }
      if (y > other.y) {
        y -= 5;
      }
      if (y < other.y) {
        y += 5;
      }
    }
    if (dist(x,y,other.x,other.y)<20){
      other.isalive = true;
    }
  }
}
//==============================================================
class me {
}
//============================================================
class wall {
}

Is there any other way I can check if transparent(not 100% transparent, but only parts of it) has been clicked. Without vertices. I wanted vertices because I could check it with raytracing.

The next thing I want to try is adding a random object to the window that will have collision detection PLUS a moving object like a bullet, that fires from one side to the other repeatedly.

BLOCK 1) I am going to create a random block (same size as the moving rectangle) and place it somewhere in the window 2) If the rectangle hits the block, I want collision detection and for it not to be able to move through it

BULLET 1) The bullet will be something small moving from left to right 2) If the bullet hits the moving rectangle, I want the rectangle to go back to the start.

Right now I have the random block placement, and I tried to make it so that it would be placed on the same coordinates as the rectangle (that is why I am using r1, r2 to round it to an even number). I am sure there is an easier way of doing it, but this works.

I do not have any collision detection yet. I thought I might have to add "OR" to the keyReleased conditionals:

if (keyCode == LEFT) and x1>=1 OR

But I am not sure if that would work. Here is the code so far. Any help is greatly appreciated it. And I do understand this isn't probably the most efficient way of doing things, but so far I do understand how I am doing it.

add_library("minim")

x1=100
x2=20
y1=0
y2=20
steps=0

def setup():
    global sf, steps, r1, r2
    size(200, 200)
    background(255) # white
    minim=Minim(this)
    sf=minim.loadFile("light ping.mp3", 2048)
    r1= int(random(5,155))
    r2 = int(r1/10) * 10
    print("This is the random number", r1)
    print("This is the random number", r2)


def draw():
    background(255)
    global x1,y1,x2,y2, steps
    fill(39,79,188)
    rect(r2,r2,x2,y2)

    fill(155)
    stroke(1)
    rect(x1, y1, x2, y2)
    noStroke()
    rect(0,0,5, height-25)
    rect(0,height-25,width, 5)
    rect(width-5, 0, 5, height-25)
    rect(0,0,width, 5)
    # score header
    text("SCORE", 10, height-5) 
    # steps counter
    text(steps, 60, height-5)



def keyReleased():
    global x1, y1, x2, y2, steps
    steps=steps+1
    rect(x1, y1, x2, y2)
    if (key==CODED):
        if (keyCode == LEFT) and x1>=1:
            x1=x1-10
            print(x1)
            rect(x1,y1,x2,y2)            

        elif (keyCode == RIGHT) and x1<=169:
            x1=x1+10
            print(x1)
            rect(x1,y1,x2,y2)

        elif (keyCode == UP) and y1>=1:
            y1=y1-10
            print(y1)
            rect(x1,y1,x2,y2)

        elif (keyCode == DOWN) and y1<=140:
            y1=y1+10
            print(y1)
            rect(x1,y1,x2,y2)

        else:
            fill(255,255,0)
            rect(x1,y1,x2,y2)
            sf.play()
            sf.rewind()

      ArrayList <Bullet> bullets = new ArrayList <Bullet> ();
      PVector me, speed,zombiespeed,Bullet;
      float maxSpeed = 2.5;
      float zombiex;
      float zombiey;
      zombie zombie1;
      zombie zombie2;
      void setup() { 
      rectMode(CENTER);
      size(600, 600);
      me = new PVector();
      speed = new PVector();
      zombiespeed = new PVector();
      Bullet = new PVector();
      noCursor();
      noStroke();
      me.x = 300;
      me.y = 300;
    }
    void draw(){
      background(255);
      //walls
      if (me.x < 0){me.x = 0;}
      if (me.x > width){me.x = width;}
      if (me.y < 0){me.y = 0;}
      if (me.y > height){me.y = height;}
      //zombie movement
      if (zombiex> me.x){zombiex-= random(1,2.5);}
      if (zombiey< me.y){zombiey += random(1,2.5);}
      if (zombiex< me.x){zombiex += random(1,2.5);}
      if (zombiey > me.y){zombiey -= random(1,2.5);}
      //player
      me.add(speed);
      fill(255, 0, 0);
      ellipse(me.x, me.y, 20, 20);
      //zombie
      fill(0,150,50);
      zombie1 = new zombie();
      zombie2 = new zombie();

  //mouse
  PVector mouse = new PVector(mouseX, mouseY);
  fill(0);
  ellipse(mouse.x, mouse.y, 5, 5);
  //shoot
  if (frameCount%20==0 && mousePressed) {PVector dir = PVector.sub(mouse,me);
  dir.normalize();
  dir.mult(9);
  Bullet b = new Bullet(me, dir);
  bullets.add(b); }
  //bullet movement
  for (Bullet b : bullets) {b.bullup();
  b.bulldis();}
  }
  //bullet class
  class Bullet extends PVector { PVector vel; 
  Bullet(PVector loc, PVector vel) { super(loc.x, loc.y);
  this.vel = vel; }
  void bullup() {add(vel);}
  void bulldis() {fill(0, 150, 55);
  ellipse(x, y, 5, 5);}
  }
  class zombie{PVector pos;
zombie(PVector pos,PVector zom){super (zom.x,zom.y);
  this.pos = pos;}
    void zomup(){add(pos);}
  void zomdis(){fill 0,150,50)
  rect(x,y,25,25);}
  }
}
  //move
  void keyPressed() {
  if (key == 'w'){ speed.y = -maxSpeed; }
  if (key == 's'){ speed.y =  maxSpeed; }
  if (key == 'a'){ speed.x = -maxSpeed; }
  if (key == 'd'){ speed.x =  maxSpeed; }
  }
  //stop
  void keyReleased() {
  if (key == 'w' || key == 's'){ speed.y = 0; }
  if (key == 'a' || key == 'd'){ speed.x = 0; }
  }

var canvasWidth = 700;
var canvasHeight = 400;
var yoff = 0.0;   

function setup() { 
  createCanvas(canvasWidth, canvasHeight);
} 


function draw() {
  drawBackground();
    drawCar();
}


//Car (player)
var car = {
  x : 50,
  y : 230,
  draw : function() {
    fill(0);
    rect(this.x, this.y, 50, 50);
    }
}



//Rock (enemies to avoid)
var rocks = [];

function rock(I) {
  I.active = true;
  I.yvelocity = 2;
  I.width = 20;
  I.height = 20;
  I.y = Math.random() * (canvasHeight-I.height);
  I.x = 400;
  I.inBounds = function() {
    return I.x >= 700 && I.x < canvasWidth + I.width;
  };
  I.draw = function() {
    //fill(0); this comes up as an error every now and then, not sure how to add 
    //this attribute to the var in the array, unlike I did with the car. 
    //The rect attribute also comes up with an error sometimes
    rect(I.x, I.y, I.width, I.height);
  };
  I.update = function() {
    I.active = I.active && I.inBounds();
    I.x -= I.xvelocity;
  };
  return I;

}


//Background and setting
function drawBackground() { 
  background(175, 213, 255);
  //noStroke();
  fill(225, 212, 160);
  beginShape(); 
    var xoff = 0;     
    // Iterate over horizontal pixels
    for (var x = 0; x <= width; x += 10) {
        // Calculate a y value according to noise, map to 
        var y = map(noise(xoff, yoff), 0, 1, 100,200);
        vertex(x, y); 
        // Increment x dimension for noise
        xoff += 0.05;
    }
    // increment y dimension for noise
    yoff += 0.01;
    vertex(width, height);
    vertex(0, height);
  endShape(CLOSE);
}


//Car controls / drawing
function drawCar() {

  car.draw();
  if (keyIsDown(DOWN_ARROW)) {
    if (car.y + 5 >= 350)
      car.y = 350;
    else
      car.y += 5;
    }
    if (keyIsDown(UP_ARROW)) {
    if (car.y <= 150)
        car.y = 150;
    else
      car.y -= 5;
    }
}

if(Math.random() < 0.05){
    rocks.push(rock({}));
}

rocks = rocks.filter(function(rock){
  return rock.active;
});
rocks.forEach(function(rock){
    rock.update();
  rock.draw();
});

I hope this isn't a duplicate but I haven't found a thread that told me what I wanted to know.

To keep it short, I'm trying to make a little "Pairs" style game and now I'm looking for a way to detect when the mouse is hovering over one of the cards. I have written some code, shown below, that initializes an array, then populates it with the specified number of Objects from the "Card" class and displays them.

If possible, I'd like to be able to trigger a function (change color or something like that) when hovering over the card; if that doesn't work, only triggering something when actually clicking the card would be fine as well.

The only idea I had was to iterate over the array on every MousePressed(), calculate the size of each rect (x and y are stored in the object, width and height are global variables) and compare if MouseX and MouseY are between the rects or not, but that seems really overengineered and it would probably be really slow.

Is there a better way?

Thank you very much!

Card[] cards = new Card [36];

int rows = 6;
int columns = 6;
int cardsize = 75;
int space = 25;
int border = 12;
int cardstotal = (rows * columns);



void setup() {
  size(600, 600);
  background(255, 204, 0);
  int cardsinrow = 0;
  int cardsincolumn = 0;

  // Puts cards where they belong
  for (int i = 0; i < cards.length; i++) {
    cards[i] = new Card((border + (cardsinrow * (cardsize + space))), (border + (cardsincolumn * (cardsize + space))), 1, false);
    cardsinrow++;
    if (cardsinrow >= columns) { // "Line break" for the cards
      cardsinrow = 0;
      cardsincolumn++;
    }
    println(cardsincolumn); // Debug
  }
}

void draw() {

  for (int i=0; i < cards.length; i++) {
    cards[i].display();
  }
}

public class Card {

  int cardposx;
  int cardposy;
  int cardcontent;
  boolean cardstatus;


  Card(int cardposx_, int cardposy_, int cardcontent_, boolean cardstatus_) {
    cardposx = cardposx_;
    cardposy = cardposy_;
    cardcontent = cardcontent_;
    cardstatus = cardstatus_;
  }

  void display() {
    rect(cardposx, cardposy, cardsize, cardsize);
  }
}

// class =======================================================

The map1 class

class map1 {
  int SIDE = 30; //How big is the rectangle (30x30)
  PImage tile;
  char[][] map = {
  //Where X is a rectangle will be drawn. 
  //1,2,3 and 4 are for portals (which I didn't code yet). 
  //The A is an empty spot, seems like I can't leave the array empty so I filled it with A

    {'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', '1', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '2', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', ' ', ' ', ' ', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', 'X', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'X', 'X', 'X', 'X', 'X', 'X'}, 
    {'X', ' ', ' ', ' ', 'X', 'X', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', 'X', 'X', ' ', ' ', ' ', 'P', 'x', 'x', 'x', 'x', 'x', 'p'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'X', 'X', 'X', 'X', 'X', 'X'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'x', 'x', 'x', 'x', 'x', 'X', 'X', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', 'X', ' ', ' ', 'X', 'X', 'X', 'x', 'X', 'X', 'X', ' ', ' ', 'X', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', 'X', 'X', 'X', 'X', 'X', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', 'X', 'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'X', ' ', ' ', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', ' ', ' ', 'X', ' ', ' ', 'X', ' ', ' ', ' ', 'X', ' ', 'X', 'X', ' ', 'X', 'X', ' ', 'X', ' ', ' ', ' ', 'X', ' ', ' ', 'X', ' ', ' ', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', ' ', ' ', ' ', 'X', 'X', 'X', ' ', 'X', ' ', ' ', ' ', 'X', ' ', 'X', 'X', 'X', ' ', ' ', ' ', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'X', ' ', ' ', ' ', 'X', ' ', ' ', ' ', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', ' ', 'X', ' ', 'X', 'X', 'X', 'X', ' ', 'X', 'X', 'X', 'X', ' ', 'X', 'X', 'X', ' ', 'X', 'X', 'X', 'X', ' ', 'X', 'X', 'X', 'X', ' ', 'X', ' ', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', '3', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', 'X', 'X', 'X', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '4', 'X', 'A', 'A', 'A', 'A', 'A', 'A'}, 
    {'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'X', 'A', 'A', 'A', 'A', 'A', 'A'} };

  map1() {

    tile = loadImage("tile.jpg");
  }

  void display() {

    for (int i = 0; i<23; i++) {

      for (int j = 0; j<37; j++) { 

        if (map[i][j]=='X') { 

          image(tile, j*SIDE, i*SIDE); 
        }
      }
    }
  }
}

Pac class

class pac {

  int x, y, R, speed = 2;
  String TOUP, TODOWN, TOLEFT, TORIGHT, direction = "TORIGHT";

  pac() {
    x = 465;
    y = 405;
    R = 15; 
  }

  void display() {

    ellipse(x,y,R*2,R*2);
  }

  void move() {

    switch (direction) {

      case "TORIGHT":
          x+=speed;
      break;
      case "TOLEFT":
          x-=speed;
      break;
      case "TOUP":
          y-=speed;
      break;
      case "TODOWN":
          y+=speed;
      break;
      case "NOMOVE":
          //Stop moving if hits a wall
      break;      
    }

    if (keyCode == LEFT) {
      direction = "TOLEFT";
    }
    if (keyCode == RIGHT) {
      direction = "TORIGHT";
    }
    if (keyCode == DOWN) {
      direction = "TODOWN";
    }
    if (keyCode == UP) {
      direction = "TOUP";
    }

  }

  void collision() {


  }

}

How the game looks so far if helps, don't pay attention to the numbers, I was just trying to make collisions work.

This my code:

int a=390;
int b=390;
int c=390;
int d=390;
int e=390;
int f=390;
int g=390;
int h=390;
int i=390;
int j=390;

void setup () {
size (420,420);
}

void draw () {
  background(mouseY +250,mouseY ,0);
  ellipse (mouseX,mouseY, 30,30);
    a=a-5;
    b=b-4;
    c=c-7;
    d=d-5;
    e=e-6;
    f=f-3;
    g=g-5;
    h=h-6;
    i=i-7;
    j=j-3;
    ellipse (30,a+1, 25,25);
    ellipse (75,b+2, 25,25);
    ellipse (120,c+1,25,25);
    ellipse (165,d+2,25,25);
    ellipse (210,e+1,25,25);
    ellipse (255,f+2,25,25);
    ellipse (300,g+1,25,25);
    ellipse (345,h+2,25,25);
    ellipse (390,i+1,25,25);

    if (a<=0)
    a=390;
    if (b<=0)
    b=390;
    if (c<=0)
    c=390;
    if (d<=0)
    d=390;
    if (e<=0)
    e=390;
    if (f<=0)
    f=390;
    if (g<=0)
    g=390;
    if (h<=0)
    h=390;
    if (i<=0)
    i=390;

}

Any help will be appreciated!

I am new with p5.js and I am learning to do some fun simulations with it. But I would like to ask for some help.

I am trying to do a simulation about diffusion. Particles moving randomly from left to right. So far this is what I have done:

https://www.openprocessing.org/sketch/435895

I would like to know how to count the number of particles crossing the middle wall in the simulation. Or how can I count particles from one region to another?

Please, if you have any advice or a link where I can learn about this, I would appreciate it.

Thanks in advance...

var snake;
var apples = [];
function setup() {
  createCanvas(600,600);
  frameRate(10);
  snake = new snake();
  for (var i = 0; i < 20; i++) {
    apples.push(new apple(Math.round(random(600) / 10) * 10,Math.round(random(600) / 10) * 10));
  } //generates apples 
}

function draw() {
  background(51);
  snake.update();
  snake.show();
  
  for (var i = 0; i < 20; i++) {
    apples[i].show();
  }
}

function keyPressed() {
  if (keyCode === 87) {
    snake.dir(0,-10);
  } 
  else if (keyCode === 83){
    snake.dir(0,10);
  } 
  else if (keyCode === 65){
    snake.dir(-10,0);}
    
    else if (keyCode === 68) {
    snake.dir(10,0);
    }
  }

function snake() {
  this.x = 300;
  this.y = 300;
  this.xspeed = 0;
  this.yspeed = 0;
  
  this.update = function(){
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
    Math.ceil(this.x / 10) * 10;
    Math.ceil(this.y / 10) * 10;
    
    for (var i = 0; i == apples.length - 1; i++){
      if (this.x == apples[i].x && this.y == apples[i].y){
        console.log ("collision");
      }
    }
  }

  this.show = function() {
    fill(255);
    rect(this.x,this.y,10,10);
  }
  
  this.dir = function(x,y){
    this.xspeed = x;
    this.yspeed = y;
    
  }
}

function apple(x,y) {
  this.x = x;
  this.y = y;
  
  this.show = function() {
    fill(255);
    rect(this.x,this.y,10,10);
  }
}

Hero heros;
ArrayList<Actor> actors=new ArrayList<Actor>();

void setup() {
  size(1600, 800);
  addActors();
}

void draw() {
  background(120, 120, 255);
  for (int i=0; i<actors.size(); i++) {
    Actor currActor=actors.get(i);

    for (int j = i + 1; j < actors.size(); j++) {
      Actor otherActor = actors.get(j);
      if (currActor.hitActor(otherActor)) {
        currActor.resolveHitActor(otherActor);
      }
    }
    currActor.update();
  }
  heros.update();
  heros.handleCollision();
  heros.force();
}

void keyPressed () {
  heros.keyPressed();
}
void keyReleased () {
  heros.keyReleased();
}

void addActors () {
  for (int i=0; i<10; i++) {
    actors.add(new Baddy(new PVector(random(50, width-50), random(50, width-50)), new PVector(random(2, 4), random(2, 4)), random(20, 50)));
    actors.add(new BossBaddy(new PVector(random(50, width-50), random(50, width-50)), new PVector(random(2, 4), random(2, 4)), random(20, 50)));
  }
  heros=new Hero(new PVector(random(50, width-50), random(50, width-50)), new PVector(random(2, 4), random(2, 4)), 100);
}

//ACTOR CLASS
class Actor {
  PVector pos;
  PVector vel;
  PVector grav;
  float diameter;

  Actor(PVector pos, PVector vel, float diameter) {
    this.pos = pos;
    this.vel = vel;
    //   size = s;
    this.diameter = diameter;
    grav = new PVector(0, 0.2);
  }

  // Check for collisiond between actors
  boolean hitActor (Actor other) {
    if (dist(pos.x, pos.y, other.pos.x, other.pos.y) < diameter/2 + other.diameter/2) {
      return true;
    }
    return false;
  }
  //resolve collision
  void resolveHitActor(Actor other) {
    float angle = atan2(pos.y - other.pos.y, pos.x - other.pos.x);
    float avgSpeed = (vel.mag() + other.vel.mag())*0.49;
    vel.x = avgSpeed * cos(angle);
    vel.y = avgSpeed * sin(angle);
    other.vel.x = avgSpeed * cos(angle - PI);
    other.vel.y = avgSpeed * sin(angle - PI);
  }

  void update() {
    move();
    wallCollision();
    drawMe();
  }

  void move() {
    pos.add(vel);
    vel.add(grav);
  }

  void wallCollision() {
    if ((pos.x > width - diameter/2) || (pos.x < 0 + diameter/2)) {
      vel.x = vel.x * -1;
    }
    if (pos.y > height - 100) {
      vel.y = vel.y *-0.95;
      pos.y = height- 100;
    }
  }

  void drawMe() {
    pushMatrix ();
    fill(0);
    translate(pos.x, pos.y);
    ellipse(0, 0, diameter, diameter);
    popMatrix ();
  }
}
//BADDY CLASS
class Baddy extends Actor {

  Baddy(PVector pos, PVector vel, float diameter) {
        super (pos, vel, diameter);
        this.diameter = diameter;

  }

  void drawMe() {
    pushMatrix();
    strokeWeight(5);
    stroke(255, 255, 0);
    fill(0, 255, 0);
    translate(pos.x, pos.y);
    ellipse(0, 0, diameter, diameter);
    popMatrix();
  }
}
//BOSSBADDY CLASS
class BossBaddy extends Baddy {

  BossBaddy(PVector pos, PVector vel, float diameter) {
        super (pos, vel, diameter);
    this.diameter = diameter;
  }

  void drawMe (){
    pushMatrix ();
    translate (pos.x, pos.y);
    noStroke();
    fill(255, 0, 0);
    ellipse(0, 0, diameter, diameter);
    popMatrix ();
  }
}

//HERO CLASS

class Hero extends Actor {
  float damp = 0.9;
  float angle;
  boolean up = false;
  boolean down = false;
  boolean left = false;
  boolean right = false;

  Hero(PVector pos, PVector vel, float diameter) {
        super (pos, vel, diameter);
    this.diameter = diameter;
  }

  void force(){
  PVector upForce = new PVector (0, -2);
  PVector downForce = new PVector (0, 2);
  PVector leftForce = new PVector (-2, 0);
  PVector rightForce = new PVector (2, 0);

  if (up) accelerate(upForce);
  if (down) accelerate(downForce);
  if (left) accelerate(leftForce);
  if (right) accelerate(rightForce);
  }

  void keyPressed () {

    if (key == 'w') up = true;
    if (key == 's') down = true;
    if (key == 'a') left = true;
    if (key == 'd') right = true;
  }

  void keyReleased () {
    if (key == 'w') up = false;
    if (key == 's') down = false;
    if (key == 'a') left = false;
    if (key == 'd') right = false;
  }
  void update() {
    move();
    drawMe();
  }
  void move() {
    pos.add(vel);
    vel.mult(damp);
  }
  void accelerate(PVector force) {
    vel.add(force);
  }
  void handleCollision() {
    if ((pos.x > width - diameter) || (pos.x < 0 + diameter)) {
      vel.x = vel.x * -1.8;
    }
    if (pos.y < 0 + diameter/2 + 20) {
      vel.y = vel.y * -1;
      pos.y = 0 + diameter/2 + 20;
    }
    if (pos.y > height - 100) {
      vel.y = vel.y *-0.05;
      pos.y = height- 100;
    }
  }
  void drawMe() {
 translate (pos.x, pos.y);
 fill(255 );
 ellipse(0,0, diameter, diameter);
  }
}

http://www.jeffreythompson.org/collision-detection/

Table of Contents:

http://www.jeffreythompson.org/collision-detection/table_of_contents.php

(you might want to use dist() rather than calculating the distance yourself though...)

more here: http://happycoding.io/tutorials/processing/collision-detection

Here is the link to the code (I couldn't figure out how to indent the code on here): https://paste.ofcode.org/sBSTST866aqUv5xkzWJ84g

I tried doing if (pandaX==xPosCandy && pandaY==yPosCandy ) But it didn't work. I also tried doing if (pandaX>xPosCandy && pandaY<yPosCandy ) but it says YOU TOUCHED THE CANDY too soon.

Any help would be appreciated, and let me know if you need more code. Thanks!

PImage sprite;
int x = 580;
int y = 200;
int black = -16777216;
int speed = 3;
void setup(){
  size(800, 600);
  smooth();
  frameRate(60);
  sprite = loadImage("scaled_sprite.png");
}

void draw(){
  fill(0);
  rect(0,0, 400,2000);
  fill(255);
  rect(400,0, 400,2000);
  image(sprite,x,y);

  color c = get(x,y);
  if(c != black ){
  if ((keyPressed == true) && (key == 'w')) {
    y-=speed;
  }
  if ((keyPressed == true) && (key == 'a')) {
    x-=speed;
  }
   if ((keyPressed == true) && (key == 's')) {
    y+=speed;
  }
    if ((keyPressed == true) && (key == 'd')) {
    x+=speed;
  }
  }



println(c);
}

https://openprocessing.org/sketch/429876

int x = 250;
int y = 475;
int xPos=225;
int xDir=3;
int xPos2=200;
int xDir2=2;
int xPos3=25;
int xDir3=1;
int xPos4=25;
int xDir4=2;
void setup()
{
  size(500,500);

}
void car()
{
  if(dist(x, y, xPos,150) < 15) {

// hit

x=250;

y=475;

}
    fill(255,0,0);
    rect(xPos, 150, 25, 25);
  xPos=xPos+xDir;
  if (xPos>width || xPos<20)
  {
    xDir=-xDir;
  }
  if(dist(x, y, xPos2, 275) < 15) {



x=250;

y=475;

}
  rect(xPos2,275,25,25);
  xPos2=xPos2+xDir2;
  if (xPos2>width || xPos2<20)
  {
    xDir2=-xDir2;
  }
  }
  void log() {


   fill(128,64,0);
   rect(xPos3, 80, 125, 35);

  xPos3=xPos3+xDir3;
  if (xPos3>width || xPos3<20)
  {
    xDir3=-xDir3;
  }
  fill(128,64,0);
   rect(xPos4, 42, 125, 37);

  xPos4=xPos4+xDir4;
  if (xPos4>width || xPos4<20)
  {
    xDir4=-xDir4;
  }
  }
void draw()
{
    fill(0);
  rect(0,115,500,325);

  fill(0,128,0);
  rect(0,350,500,375);
  fill(0,0,255);
  rect(0,0,500,125);
  fill(1,50,32);
  rect(0,0,500,41);
  for(int a=25; a < width; a=a+100)
{
  fill(255,255,0);
  rect(a,215,45,10);}

  log();

  fill(0,255,0);
  rect(x,y,25,24);
  car();

}

void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      y -= 35;
    } else if (keyCode == DOWN) {
      y += 35;
    } else if (keyCode == LEFT) {
      x -= 35;
    } else if (keyCode == RIGHT) {
      x += 35;
    }  
  } 
}

Just wondering if anyone can help me out with this bit of code.

I'm trying to remove an ellipse that's drawn to the screen after I've clicked it. Not sure how to approach the problem?

ArrayList <ball> balls = new ArrayList <ball>();
int numOfBalls = 5;
float dist;

class ball {

  float x, y;

  ball() {

    x = random(20, width-20);
    y = random(20, height-20);
  }

  void draw_ball () {
    ellipse(x, y, 20, 20);
  }

  void remove_ball () {
    for (int i = numOfBalls-1; i >=0; i--) {

      dist = sqrt((x-mouseX) * (x-mouseX) + (y-mouseY) * (y-mouseY));
      if (dist <= 20) {

        balls.remove(i);
      }
    }
  }
}

void setup () {
  size(500, 500);
  for ( int i = 0; i < numOfBalls; i++)
    balls.add(new ball());
}

void draw () {
  for ( int i = 0; i < numOfBalls; i++)
    balls.get(i).draw_ball();
}

void mousePressed() {

  remove_ball();
}