I don't have much experience in programming, but I'm working on a little program. Though I've had some help, I'm still struggling with x and y positions I wish to put in an array while the mouse is dragged. Later when the mouse is released, I'd like to draw little circles on the stored x and y positions. Also, these circles change colors (from red to purple and blue, depending on the frame at which the x and y positions were stored). When I try to print the locations of x and y at each frame, the x and y values are constant instead of different values per frame when the mouse is moved.

For experienced programmers, this is probably simple, but it has cost me some hours... Could you please take a look at a part of my code and suggest improvements?

Thanks a lot for your help; it's really appreciated!

Okay; here's some code:



import java.util.ArrayList;

ArrayList Point = new ArrayList(); // Array position mouse
int c1;                            // Red color
int c2;                            // Blue color
int i;                 // Number frame for ArrayList Point
float x;
float y;

void setup() {
 // stuff
}

void draw() {
 if (mousePressed == true) {
   i = frameCount;
   x = mouseX;
   y = mouseY;
   Point.add(new Point(i, x, y));
   println("i = " + i + " x = " + x + " y = " + y);
   // ??? i changes, but x and y are constants!
   // ??? I'd like x and y to be mouse positions per frame
 }
}
   
void mouseReleased() {
 for(i = 0; i < frameCount; i++) {
   int c1 = (255 - i);
   if (c1 < 0) {
     c1 = 0;
   }
   int c2 = i;
   if (c2 > 255) {
     c2 = 255;
   fill(c1, 0, c2);
   ellipse(mouseX, mouseY, 10, 10);
  // ??? This doesn't give any output...
  // ??? I'd like to have circles changing color per frame
   }
 }
 frameCount = 0;
 Point.clear();
}

class Point {
 Point (int i, float x, float y) {
 }
}

It is progressing well, you just forgot to store the values...
Also the fill and ellipse lines shouldn't be in the c2 test.
Also I don't know if you are allowed to reset frameCount, and I doubt it is a good idea. And you shouldn't call a variable with the same name as a class, it is confusing, at best.

I rewrote bits of your code, to make it work. You still have to make it doing what YOU want, of course... Particularly at the color management level.
Code:

import java.util.ArrayList;
 
ArrayList points = new ArrayList(); // Array position mouse
long start;
int c1;	  // Red color
int c2;	  // Blue color
 
void setup() {
  size(600, 600);
  background(#55AA55);
  // stuff
}

void draw() {
  if (mousePressed) {
    points.add(new Point(frameCount - start, mouseX, mouseY));
  }
}

void mousePressed() {
  start = frameCount;
}
     
void mouseReleased() {
  float maxI = (float)(frameCount - start); // To clamp values
  
  for(int i = 0; i < points.size(); i++) {
    Point p = (Point)points.get(i);
    long f = p.i; // Frame count since start of pressing mouse
    int c1 = int(255 * (1.0 - f/maxI));
    int c2 = int(255 * f/maxI);
    fill(c1, 0, c2);
    ellipse(p.x, p.y, 10, 10);
  }
  start = 0;
  points.clear();
}
 
class Point {
  long i; int x, y;
  Point(long _i, int _x, int _y) {
    i = _i; x = _x; y = _y;
  }
} 
 

Thank you very much for your help, especially for your code, PhiLho! I would not have figured it out that quickly by myself...

I still have three questions left about this part of my program. I tried to fix them myself, but failed so far...

I'll explain a bit more about the program. When the program starts, the user sees a blurred picture (VincentsRoomBlurred.jpg). But at the location of the mouse a small part of the picture is seen sharp. This is now done by copying a sharp version of the same picture and putting it in the position of the mouse. It's like a square is cut out of the blurred picture and a sharp picture is under it. When I press the mouse the first time, this is working perfectly. However, when I press the mouse again, I don't get to see a square with the sharp picture, but a square filled with blue!

First question: why do I get a blue square when I press the mouse more than once and how can I change the code so I see a part of the sharp picture again?

Thanks to PhiLho, the circles are drawn fine. While using the program I found out it would be nice to combine these circles with a line to get a better view of the movements of the mouse. I guess I have to use p.x and p.y. It should be simple, but I haven't figured out how I can draw a line from this array.

Second question: how can I draw a line from one point of the array to the next one (following the mouse)?

The third question is a less important 'beauty issue' I've been struggling with for a while. There's a really abrupt contrast between the sharp part and the blurred picture. I wondered if it would be possible to make a more gradual transition between sharp and blurred. I first fixed this by copying and placing different images with various degrees of blur (a smaller sharper square in a larger and more blurred one). But the result is not really satisfying and it slows down the progam a little. I don't know if this and be done real-time...

Question three: is it possible to work with a circle here instead of a square and make a more gradual transition between sharp and blurred without slowing down the program too much?

Your help is again greatly appreciated, especially with clues about the code. I'll keep you informed about the progress. Thank you so much for your help!


Okay, here's some more of my code integrated with PhilHo's suggestions:

import java.util.ArrayList;

PImage a1;                    // VincentsRoomBlurred.jpg
PImage a2;                    // VincentsRoom2.jpg
PImage a3;                    // VincentsRoomWhite.jpg
int qa;                       // Half value ra
int ra;                       // Width/height 1st rectangle
int w;                        // Total width
int h;                        // Total height
float t;                      // Total time in milliseconds
float mpf;                    // Milliseconds per frame
int rmpf;                     // Round mpf
float mb;                     // Milliseconds begin
ArrayList points = new ArrayList();
// Array position mouse long start;
int c1;                       // Red color
int c2;                       // Blue color
int i;                
// Number frame for ArrayList Point
float x;
float y;
int st;                       // Start

void setup() {
 frameRate(30);
 float m = millis();
 w = 1440;
 h = 900;
 background(0);
 ellipseMode(CENTER);
 noStroke();
 ra = 60;
 qa = ra/2;
 noFill();
 noStroke();
 noCursor();
 size(w, h);
 a1 = loadImage("VincentsRoomBlurred.jpg");
 a2 = loadImage("VincentsRoom2.jpg");
 a3 = loadImage("VincentsRoomWhite.jpg");
 image(a1, 0, 0);
}

void draw() {        
 if (mousePressed) {
   background(0);
   set(0, 0, a1);
   copy(a2, mouseX-qa, mouseY-qa, ra, ra, mouseX-qa, mouseY-qa, ra, ra);
   rect(mouseX-qa, mouseY-qa, ra, ra);
// Rectangle shows area being copied
   points.add(new Point(frameCount - st, mouseX, mouseY));
 }
}

void mousePressed() {
 st = frameCount;
 float m = millis();
 println("Begin (milliseconds) " + m);
 mb = m;
}
   
void mouseReleased() {
 set(0, 0, a3);
 float maxI = (float)(frameCount - st);
 float m = millis();
 println("End (milliseconds) " + m);
 t = m - mb;
 println("Total time (milliseconds): " + t);
 println("Number of frames: " + maxI);
 mpf = t / maxI;
 rmpf = round(mpf);  
 println("Milliseconds per frame: " + rmpf);
 for(int i = 0; i < points.size(); i++) {
   Point p = (Point)points.get(i);
   long f = p.i;                              
   // Frame count since start of pressing mouse
   int c1 = int(255 * (1.0 - f/maxI));
   int c2 = int(255 * f/maxI);
   fill(c1, 0, c2);
   ellipse(p.x, p.y, 10, 10);
   //line(p.x, p.y, ?, ?);
   // ??? How do I draw a line between these points from the array?
 }
 st = 0;
 points.clear();
}

class Point {
 long i; int x, y;
 Point(long _i, int _x, int _y) {
   i = _i; x = _x; y = _y;
 }
}  

The first two problems were quickly fixed with your help. I solved the third issue differently, but it was really nice to look at your code. Thank you so much!