Modifying a grid

I am using processing connected to an Arduino with a sensor sheet. The output is a in java mode showing a mapped grid as shown in the attached image. I am wondering how I can curve the corners of the grid so that is in 3D “L” shape instead of flat.

The code is below:

import processing.serial.*;
import processing.opengl.*;

int bgcolor;                 // Background color
int fgcolor;                 // Fill color
Serial myPort;                       // The serial port
int[] serialInArray = new int[225];    // Where we'll put what we receive
int[] pastInArray = new int [225];
float[][] colorTarget   = new float[3][255];
float[][] currentColor   = new float[3][255];
PVector[][] vertices = new PVector[15][15];
float[] verticesTZ = new float[15];
float w = 30;
float ease = 0.75; 

int serialCount = 0;                 // A count of how many bytes we receive
int xpos, ypos;                  // Starting position of the ball
boolean firstContact = false;        // Whether we've heard from the microcontroller
int tiempoant;
int render=0;
int dif=0;

void setup() {
  size(960, 600, OPENGL);  // Stage size
  noStroke();      // No border on the next thing draw
  
  
  // Print a list of the serial ports, for debugging purposes:
  println(Serial.list());

  // I know that the first port in the serial list on my mac
  // is always my  FTDI adaptor, so I open Serial.list()[0].
  // On Windows machines, this generally opens COM1.
  // Open whatever port is the one you're using.
  
  myPort = new Serial(this, Serial.list()[4], 115200);
  
  for (int j = 0; j < 15; j++) {
        for (int i = 0; i < 15; i++) {
            vertices[i][j] = new PVector( i*w, j*w, 0);
        }
    }
    
  
}

void draw() {

  if (render==1) {
    
    translate(width/4, 100);
    rotateX(0.5);
    //rotateX(PI/10);
    background(0);
    for (int j=0; j<14; j++) {
      beginShape(QUAD_STRIP);
      for (int i=0; i<15; i++) {
          stroke(255);
     
          fill(serialInArray[j*15+i], 0, 0);
          float x = i*width/15;
          float y = j*height/15;
          verticesTZ[i] = serialInArray[j*15+i];
          
          vertices[i][j].z += (verticesTZ[i]-vertices[i][j].z)*ease;
          vertex( vertices[i][j].x, vertices[i][j].y, vertices[i][j].z);
          vertex( vertices[i][j+1].x, vertices[i][j+1].y, vertices[i][j+1].z);
        }
         endShape(CLOSE);
        //        println();
      }
      render=0;
  }
}

void serialEvent(Serial myPort) {
  // read a byte from the serial port:
  int inByte = myPort.read();
  // if this is the first byte received, and it's an A,
  // clear the serial buffer and note that you've
  // h
  //  ad first contact from the microcontroller. 
  // Otherwise, add the incoming byte to the array:
  if (firstContact == false) {
    if (inByte == 'A') { 
      myPort.clear();          // clear the serial port buffer
      firstContact = true;     // you've had first contact from the microcontroller
      myPort.write('A');       // ask for more
    }
  } else {
    // Add the latest byte from the serial port to array:

      serialInArray[serialCount] = inByte;

    serialCount++;

    // If we have 3 bytes:
    if (serialCount >= 225 ) {
      println(millis()-tiempoant);
      tiempoant = millis();
      
      render = 1;
    
      // Send a capital A to request new sensor readings:
      myPort.write('A');
      // Reset serialCount:
      serialCount = 0;
    }
  }
}
1 Like

The grid is in the x/z plane

the L section has a lower y-value





int bgcolor; // Background color
int fgcolor; // Fill color

int[] serialInArray = new int[225]; // Where we’ll put what we receive
int[] pastInArray = new int [225];
float[][] colorTarget = new float[3][255];
float[][] currentColor = new float[3][255];
PVector[][] vertices = new PVector[15][15];
float[] verticesTZ = new float[15];
float w = 30;
float ease = 0.75;

float angle; 

int serialCount = 0; // A count of how many bytes we receive
int xpos, ypos; // Starting position of the ball
boolean firstContact = false; // Whether we’ve heard from the microcontroller
//int tiempoant;
//int render=0;
//int dif=0;

void setup() {
  size(960, 600, P3D); // Stage size
  noStroke(); // No border on the next thing draw
  for (int j = 0; j < 15; j++) {
    for (int i = 0; i < 15; i++) {
      if (i<4||j>=12)
        vertices[i][j] = new PVector( i*w, -113, j*w);
      else 
      vertices[i][j] = new PVector( i*w, 3, j*w);
    }
  }
}

void draw() {
  background(0);
  lights(); 
  translate(width/4, 270, -433);
  rotateX(angle+=.021);

  for (int j=0; j<14; j++) {
    beginShape(QUAD_STRIP);
    for (int i=0; i<15; i++) {
      stroke(255);
      // fill(serialInArray[j*15+i], 0, 0);
      fill(255, 0, 0); 
      //float x = i*width/15;
      //float y = j*height/15;
      //verticesTZ[i] = serialInArray[j*15+i];

      // vertices[i][j].y += (verticesTZ[i]-vertices[i][j].y)         *ease;
      vertex( vertices[i][j].x, vertices[i][j].y, vertices[i][j].z);
      vertex( vertices[i][j+1].x, vertices[i][j+1].y, vertices[i][j+1].z);
    }
    endShape(CLOSE);
    //        println();
  }
}
//
1 Like

Hello,

Please format your code as a courtesy to everyone:
https://discourse.processing.org/faq#format-your-code

Cut and paste your code into Processing and you will understand why.

:)

Hello,

You also posted here looking for a “U instead of flat”.

You were also asked to format your code there as well.

Here is a good reference:
https://www.processing.org/examples/shapetransform.html
https://processing.org/tutorials/trig/

For the L:
I used 2 loops to draw the grid and swapped the x and z vertex in one of them; you will have to change ranges in the for() loops to get the L.

For the U:
I added sin() values to the z vertex; I used 0 to 15 > 0 to PI (mapped or math) … and I took the sin() of that multiplied by an amplitude and added that to z vertex.

You will have to determine a formula for amp to offset the z from 0 to 15.

To get you started with the U (just one loop):

vertex(vertices[z][x].x, vertices[z][x].y, vertices[z][x].z+amp); 
vertex(vertices[z][x+1].x, vertices[z][x+1].y, vertices[z][x+1].z+amp);

And the result of my efforts:

:)

1 Like

Thank you for all of your help, your images are exactly what I was trying to make. I apologize for my poor formatting of the code, making it inconvenient to copy, I will fix that for my next post and reply. For the L shape how did code the 2 for() loops. Also for the U, did you adjust the code by adding the amplitude within the 2 for() loops.

Thank you for sharing the updated code and providing a great explanation. I really appreciate all your time helping me!

For one of the loops swapped the x and z vertex :

vertex(vertices[z][x].z, vertices[z][x].y, vertices[z][x].x);
vertex(vertices[z][x+1].z, vertices[z][x+1].y, vertices[z][x+1].x); 

I only had one for loop; amp can be anything you want it to be. I used a sine wave.

vertex(vertices[z][x].x, vertices[z][x].y, vertices[z][x].z+amp); 
vertex(vertices[z][x+1].x, vertices[z][x+1].y, vertices[z][x+1].z+amp);

I updated my other post for clarity.

Can you provide a link to the sensor that you are using?

Is this an academic project that is going to be graded?

:)

1 Like

Thank you for help. Would you mind sending me your code. I keep getting errors for my loops. I am using resistive stretchable sensors that I made. Thank you!