Specific position of squares

Processing Coding Questions
1

Hi, I need help with a college job. It consists of generating with the movement and speed of the mouse, different abstract works of art, in my case select some that contain different squares each one in a specific position. The question is that I don’t know how to move the mouse to generate the squares. As the mouse increases its speed, the squares with warmer colors should appear, and on the contrary, the colder colors and each one in its specific positions (which is the most complicated). I pass the code that I have already advanced. Hopefully someone can help me thanks!

class prototype ------------------------------------------------ -----------------------------------------------

Address_Speed ​​mySpeedYDirection; // declare object
ArrayList walkers; // declare ArrayList object

null configurations () {
size (600,600);
// I initialize the object
mySpeedYaddress = new Speed_Address ();

walkers = new ArrayList ();

for (int i = 0; i <random (0.5); i ++)
walkers.add (new Walker ());
}

empty draw () {
miVelocidadYDireccion.calcularTodo (mouseX, mouseY);

noStroke ();
for (Walker c: walkers) {
c. draw ();
if (mySpeedYaddress.speed ()> 10)
c.mover ();
}

}

class walking ------------------------------------------------ -------------------------------------------------- -

class Walker {

// Attributes
float x1, y1;
float x2, y2;
float dir;
float vel;
float t;

//Builder
Walker () {

`` ''
x1 = random (width);
y1 = random (height);
x2 = random (width);
y2 = random (height);
vel = 15;
t = random (50,100);
dir = random (width, height);
`` ''

}

// what is going to be drawn depending on the direction and speed
void draw () {

`` ''
fill (mySpeedYaddress.speed ()); / * the slower the mouse is, squares with dark colors are drawn
                                          The more speed the mouse has, the colored squares are drawn
                                          more clear*/
rect (x1, y1, t, t);
`` ''

}
// action of when you move the mousse
void move () {

`` ''
x1 = x2 + random (0.600); // DISTRIBUTION AND MOVEMENT OF SQUARES
y1 = y2 + random (0.600); // DISTRIBUTION AND MOVEMENT OF SQUARES
`` ''

// toroidal space
x1 = (x1> width? x1-width: x1);
x1 = (x1 <0? x1 + width: x1);
y1 = (y1> height? y1-height: y1);
y1 = (y1 <0? + height: y1);

}
}

class Address_and_speed ------------------------------------------------ --------------------------------------

class Speed_Address {
float posX;
float posY;
float PosPrevX;
float PosPrevY;
float myDirectionX;
float myAddressY;
float myPolarAddress;
float vel;

Speed_Address () {
this.posX = 50;
this.posY = 600;
vel = 50;
myDirectionX = 600;
myDirectionY = 600;
}

void calculateAll (float my_X, float my_Y) {
PosPrevX = posX;
PosPrevY = posY;
posX = my_X;
posY = my_Y;

`` ''
myDirectionX = posX-PosPrevX;
myDirectionY = posY-PosPrevY;
myPolarAddress = degrees (atan2 (posY-PosPrevY, posX-PosPrevX));

vel = dist (posX, posY, PosPrevX, PosPrevY);
`` ''

}

// methods that return values ​​or something

speed float () {
return vel;
}

float xaddress () {
return myXAddress;
}

float addressY () {
return myAddressY;
}

float polaraddress () {
return myPolarAddress;
}

}
2

You have two tasks so I understand and they are:

Task #1

Task #2

From your description, it is not clear how to draw the squares. You did not provide specific details and your code is a bit hard to read. Could you start by formatting your code? Go back to your post, click in the pencil to edit it, then select your code and hit the button in the post menu bar that looks like this: </>. This will format your code properly in the forum. Do you want to draw the square at the mouse position where the velocity is calculated? How often do you want to draw the squares?

For the second task, the color will depend on mouse speed and the latter can be calculated when you know at least two mouse positions and the time that lapsed between these two positions. It would be something like this:

void setup(){
   ... 
}

void draw(){
   //Current mouse position
   curr_pos_x = mouseX;
   curr_pos_y = mouseY;
   curr_time=millis(); //Time in milliseconds
  
  //Linear distance between two mouse positions
  dista=dist(prev_pos_x, prev_pos_y, curr_pos_x, curr_pos_y);
  //Time difference
  deltaTime=curr_time-prev_time;

  //Mouse speed in pixels per second
  mouseSpeed=dista/deltaTime; 

  //Update your previous coordinates for the next draw loop
  prev_pos_x = curr_pos_x;
  prev_pos_y = curr_pos_y;
  prev_time=curr_time;

  ....MORE code here
}

With mouseSpeed you can map it to a color so slow speeds gives you a colder color and higher speeds give you warmer ones. For this, you need to normalize the speed so it gives you a value between 0 and 1. The maximum speed you can register in your sketch would be the hypothetical case that a user is able to move the mouse position from one corner of your sketch to the opposite corner in a single frame lapsed. To make this calculation a bit easier (for me) I will take the width of your sketch instead of the diagonal. This is meant to calculate the maximum possible speed you can get from your sketch. If your sketch has a width of 400 pixels, the maximum speed would be:
maxSpeed=400 * 1.0/60 where the latter is the time for one frame assuming your sketch is running at 60 fps. The normalize speed would be:

mouseSpeedNorm=mouseSpeed/maxSpeed;

Finally, you can use lerpColor to get your color assuming blue is cold and red is warm:

coldColor = color(0,0,255);
warmColor = color(255,0,0);
colorMouseSpeed = lerpColor(coldColor , warmColor , mouseSpeedNorm);

Notice that lerpColor needs a value from 0 to 1. Hence, the reason I normalized the mouse speed. Nw you can use this color to fill your square.

Kf