Using mousePressed to move the location of an arrayed grid of images?
in
Programming Questions
•
11 months ago
The current sketch produces an over lay of two images, with the gridded array on top. I am trying to figure out how to click on one image from the grid and move it to a location on a line. The images in the array that appear after the clicked image should line along the line with certain spacing in between each image. I am having problems with the image image display after the mousePressed is initiated. Any ideas??
- /*
- Project Intent/ Shortened Pseudo-Code
- The sketch revolves around the idea of creating multiple iterations of a series of aerial shots that were taken
- along a chosen path. The aerial views act as visual markers for the entirety of the site, that will align with
- the infrastcutural map in the background. The rearrangment of a geographical grid into a series of changing
- lines allows for multiple relationships of the existing condition. The iterative process of changing the static
- condition allows for opportunities to explore the 'ideal' conditions only exposed by computational processes.
- Brief Pseudo_Code
- 1) Load a static image map in the background
- 2) Overlay an array of images in gridview
- 3) Tint overlay to make both simultaneously visible
- 4) Make the overlayed gridview interactive by creating mousepressed ability
- 5) Rearrange array of images by copying old location to new location
- 6) New location is dependent upon line present in background map
- 7) Images are displayed along line in ascending order of filename_01
- 8) New ordering of both maps is output as new_arrangment.png file
- 9) Right click resets maps to original state
- */
- //declare global variables for arranging images into grid - include the size of the tile, margin, number
- //of columns, number of rows, and the center point of the tile.
- int tile_size;
- int margin;
- int column;
- int row;
- int cnt;
- // Create image class for both array and background image
- PImage[] pic;
- PImage original;
- void setup() {
- size(1200,800);
- background(255);
- pic = new PImage[100];
- tile_size = 150; // define all variables for desired grid dimensions
- margin = 7;
- column = (width-margin)/tile_size; // declare characteristics of the column
- row = (height-margin)/tile_size; // declare characteristics of the column
- cnt = 0; // each center point starts at 0 and will be later moved by one but reset to 0
- original=loadImage("site_plan.png"); //Load Images in Memory
- println("site_plan.png loaded"); // print to console successful load
- original.resize(900,800); // resize background image dimensions
- image(original,150,0);
- for (int i=0; i<pic.length; i++) {
- pic[i] = loadImage("aerial_0"+i+".png"); // load 100 components of image array
- println("aerial_0"+i+".png loaded"); // make sure each file is read and loaded in ascending order
- }
- noLoop(); // make sure this process is not repeated
- }
- /* draw loop enables the images to be displayed independently from the setup loop. The nested for loop
- enables the creations of the necessary columns and the rows associated with each column.*/
- void draw() {
- for (int j=0; j<=column; j++) {
- for (int k=0; k<=row; k++) {
- tint(255,100);
- image(pic[cnt], (j*tile_size), (k*tile_size), tile_size, tile_size);
- cnt++;
- if(cnt%pic.length ==0)cnt=0;
- }
- }
- if (mousePressed == true) {
- for (int i=0; i<100; i++) {
- image(pic[i],?,?,?,?,
- ?,?,?,?);
- delay(40);
- }
- save("new_arrangement.tif");
- }
- }
1
