Color with shape

Programming Questions

fach2k9

in Programming Questions • 10 months ago

Hello people,

I have a quick question, this is my situation:

I have 16 boxes in 4x4 configuration. I want to get reading from a Serial Port (COM) and update the color of each box. Let say, my PIC16F73 will send 16 BYTE (8bit each one) and then store in a buffer then once the buffer is completed by loading those 16 BYTES then they will show up on the screen depending of each byte which will correspond to each color from 0 to 255. I want to change only the color from white to black let say the transition in the middle will become gray. Example: the input is 125 that number will become grey at that moment and so on... The range will be black to white or viceversa.

First, How can I change the color of each shape?

This is my code so far:

void setup () {

size (1000, 600);

}

void draw () {

background (1);

beginShape();

vertex(0, 0);

vertex(250, 0);

vertex(250, 150);

vertex(0, 150);

endShape(CLOSE);

beginShape();

vertex(250, 0);

vertex(500, 0);

vertex(500, 150);

vertex(250, 150);

endShape(CLOSE);

beginShape();

vertex(500, 0);

vertex(750, 0);

vertex(750, 150);

vertex(500, 150);

endShape(CLOSE);

beginShape();

vertex(750, 0);

vertex(1000, 0);

vertex(1000, 150);

vertex(750, 150);

endShape(CLOSE);

beginShape();

vertex(0, 150);

vertex(250, 150);

vertex(250, 300);

vertex(0, 300);

endShape(CLOSE);

beginShape();

vertex(250, 150);

vertex(500, 150);

vertex(500, 300);

vertex(250, 300);

endShape(CLOSE);

beginShape();

vertex(500, 150);

vertex(750, 150);

vertex(750, 300);

vertex(500, 300);

endShape(CLOSE);

beginShape();

vertex(750, 150);

vertex(1000, 150);

vertex(1000, 300);

vertex(750, 300);

endShape(CLOSE);

beginShape();

vertex(0, 300);

vertex(250, 300);

vertex(250, 450);

vertex(0, 450);

endShape(CLOSE);

beginShape();

vertex(250, 300);

vertex(500, 300);

vertex(500, 450);

vertex(250, 450);

endShape(CLOSE);

beginShape();

vertex(500, 300);

vertex(750, 300);

vertex(750, 450);

vertex(500, 450);

endShape(CLOSE);

beginShape();

vertex(750, 300);

vertex(1000, 300);

vertex(1000, 450);

vertex(750, 450);

endShape(CLOSE);

beginShape();

vertex(0, 450);

vertex(250, 450);

vertex(250, 600);

vertex(0, 600);

endShape(CLOSE);

beginShape();

vertex(250, 450);

vertex(500, 450);

vertex(500, 600);

vertex(250, 600);

endShape(CLOSE);

beginShape();

vertex(500, 450);

vertex(750, 450);

vertex(750, 600);

vertex(500, 600);

endShape(CLOSE);

beginShape();

vertex(750, 450);

vertex(1000, 450);

vertex(1000, 600);

vertex(750, 600);

endShape(CLOSE);

}

Replies(11)

v.k.

Re: Color with shape

10 months ago

the simple answer is call fill(desiredColor) before each beginShape();

fach2k9

Re: Color with shape

10 months ago

Thanks V.K.

Do you know how can I set a range of color that is can go from Black to White only?

How Can I get the data and translate that into that range....

Appreciate any help

v.k.

Re: Color with shape

10 months ago

Here, before your new question I made this example of a more modular approach. Two actually, one using shapes, other using rect(). Click the mouse to see each.

Well, for grays just call fill() with one parameter, like fill(0) = black | fill(100) = gray | fill(255) = white;

You may want to use map to adapt ranges from your input.

something like

EDIT: ops, i forgot to use the variable in map method below. Corrected.

color c = color(map ( varReceivingInput, minimumInputVal, maxInputVal, 0, 255));

fill(c);

here the code made before your reply:

final int w = 1000;
final int h = 600;
final int xNumCells = 4;//pickup your number
final int yNumCells = 4;//pickup your number
int xInc = w/xNumCells;
int yInc = h/yNumCells;
void setup () {
size (w, h);
background(0);
}
void draw()
{
background(0);
if (!mousePressed)
{
for ( int i = 0; i < width; i+= xInc)
{
for ( int j = 0; j < height; j+= yInc)
{
PVector a = new PVector(i, j);
PVector b = new PVector(i+xInc, j);
PVector c = new PVector(i+xInc, j+yInc);
PVector d = new PVector(i, j+yInc);
drawShape(a, b, c, d, color(color(255 - i*0.15 - j*0.15)));
}
}
}else // or... using rect red mousePressed
{
for ( int i = 0; i < width; i+= xInc)
{
for ( int j = 0; j < height; j+= yInc)
{
fill(color(255 - i*0.15 - j*0.15, 0,0));
rect(i, j, xInc,yInc);
}
}
}
}
//only for shape approach
void drawShape(PVector a, PVector b, PVector c, PVector d, color col)
{
fill(col);
beginShape();
vertex(a.x, a.y);
vertex(b.x, b.y);
vertex(c.x, c.y);
vertex(d.x, d.y);
endShape(CLOSE);
}

v.k.

Re: Color with shape

10 months ago

here an example with mouse as input:

float dis = dist(0, 0, mouseX, mouseY);
float influence = map(dis, 0, width, 0, 50);
drawShape(a, b, c, d, color(color(255 - i*0.15 - j*0.05 - influence)));

If you use a large numbers of cells, and call noStroke() in setup, you end up with a gradient ;)

fach2k9

Re: Color with shape

10 months ago

Thanks a lot V.K.

I dont need to use a mouse.

Now, let say having the SERIAL PORT connected, how can I send each byte to a specific cells? and change that particular color cell with the byte coming from the COMM port?

One more time, thanks a lot for your help, you have saved my day bro!

v.k.

Re: Color with shape

10 months ago

Hi, glad it helped. :)

I used the mouse as a placeholder for your serial data, just replace 'dis' for your variable holding serial data.

As for passing different value for each rectangle, I believe the best approach would be a OOP one. Make a class that draw yours rectangles, an array of them and use a setColor(sensorData), method to update the colors.

But if u want to avoid classes, you could do an array of colors, same size of rects number, and uptade its colors accordingly to sensor data. Something like

(pseudo!)

colors[] c = new color[16];

color[0] = colors(mapedSensorData0);

color[1] = colors(mapedSensorData1);

and so on.

Then in drawing the rect you would pass color[i] as color parameter. BUT...

Again OOP is better way to go here.

fach2k9

Re: Color with shape

10 months ago

Hi V.K.

Can you do the code for me ? I still confused.. :S

Thanks

v.k.

Re: Color with shape

10 months ago

I'm don't have the time now, but i can try when I'm less busy. :)

fach2k9

Re: Color with shape

10 months ago

V.K. thanks for your help, let me know when you can finish it. I still trying to watch some youtube tutorial in order to understand better the process...I need to finish it by Thursday otherwise I am failing the project.

Thanks

v.k.

Re: Color with shape

10 months ago

:) finish is relative...

And don't take me as a good programmer, I'm not. :) This code may be dumb.

here i gave it a try:

click to randomise bytes

key to organise

final int w = 1000;
final int h = 600;
final int xNumCells = 4;// pick any number
final int yNumCells = 4;// pick any number
int xInc = w/xNumCells;
int yInc = h/yNumCells;
byte[] bytes = new byte[xNumCells*yNumCells];
SensorDisplay[][] sensors = new SensorDisplay[xNumCells][yNumCells];
void setup () {
size (w, h);
// some bytes to test :) no arduino runing
for ( int i = 0; i < bytes.length; i++)
{
bytes[i] = byte(map(i, 0, bytes.length, -128, 127));
}
println (bytes);
// initalize sensors
for ( int i = 0; i < sensors.length; i++)
{
for ( int j = 0; j < sensors[0].length; j++)
{
sensors[i][j] = new SensorDisplay(i * xInc, j * yInc, xInc, yInc, color(map(bytes[i], -128, 128, 0, 255)));
}
}
background(0);
smooth();
}
void draw()
{
background(0);
for ( int i = 0; i < sensors.length; i++)
{
for ( int j = 0; j < sensors[0].length; j++)
{
sensors[i][j].display();
}
}
// from one to two dimensions array
for ( int i = 0; i < bytes.length; i++)
{
sensors[i % xNumCells][ i / xNumCells].setColor(color(map(bytes[i], -128, 128, 0, 255)));
}
}
void mouseReleased()
{
// draw new bytes
for ( int i = 0; i < bytes.length; i++)
{
bytes[i] = (byte)random(-128, 128);
}
}
void keyReleased()
{
//reset bytes
for ( int i = 0; i < bytes.length; i++)
{
bytes[i] = byte(map(i, 0, bytes.length, -128, 127));
}
}
class SensorDisplay {
// member var
int x, y, wdt, heig;
color col;
//default constructor
SensorDisplay () {
}
SensorDisplay (int _x, int _y, int _wdt, int _heig, color _col) {
x = _x;
y = _y;
wdt = _wdt;
heig = _heig;
col = _col;
}
void display() {
stroke(120);
fill(col);
rect(x, y, wdt, heig);
}
void setColor (color c)
{
col = c;
}
}

fach2k9

Re: Color with shape

10 months ago

Hey v.k. that is almost what I want!!!!! You really are good programmer man.. doesnt matter how you did it, the important thing is the result!

One more modification, instead of doing mouserelease and keypressed, how can I do those changes to each cells with SERIALPORT,

Let say the first byte is going to the first cells, the second one go to the second one and so on... My PIC will send 1 byte(8 bit, from 0 to 255) at the time. From the Processing side, it could be a counter like C1 to C16 once it reach to C16 go back to C1 and keep reading front SERIAL PORT...

One more time, thanks a lot!!!!

Top Reply

Color with shape

Replies(11)

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Re: Color with shape

Statistics

Tags

Actions

Related Posts