# How do I give each triangle its own colour?

``````Points[] myPoints = new Points[100];

boolean bover = false;
boolean locked = false;
int hrs = 12; //radius of hidden circles
float charge = random(0,1);

void setup() {
background(255);
size( 306 ,  605 );

int counter = 0;
for (int i = 0; i < width; i+= width/6) {
for (int j = 0; j < height; j+= height/8){
Points newPoint = new Points(i,j);
myPoints[counter] = newPoint;
counter += 1;
}
}
}

void draw() {

background(255);
for (int i = 0; i < myPoints.length; i+= 1) {

pushMatrix();

float c = random(60);

stroke(0);
strokeWeight(1);

if (c < 10){
fill(255, 66, 149);
} else if ((c > 10) && (c < 20)) {
fill(232, 60, 222);
} else if ((c > 20) && (c < 30)) {
fill(213, 79, 255);
} else if ((c > 30) && (c < 40)) {
fill(144, 60, 232);
} else if ((c > 40) && (c < 50)) {
fill(107, 66, 255);
} else if ((c > 50) && (c < 60)) {
fill(255, 70, 91);
}

triangle (myPoints[0].ptx,myPoints[0].pty, myPoints[8].ptx,myPoints[8].pty, myPoints[1].ptx,myPoints[1].pty)
triangle (myPoints[1].ptx,myPoints[1].pty, myPoints[8].ptx,myPoints[8].pty, myPoints[9].ptx,myPoints[9].pty)
triangle (myPoints[8].ptx,myPoints[8].pty, myPoints[16].ptx,myPoints[16].pty, myPoints[9].ptx,myPoints[9].pty)
triangle (myPoints[9].ptx,myPoints[9].pty, myPoints[16].ptx,myPoints[16].pty, myPoints[17].ptx,myPoints[17].pty)
triangle (myPoints[16].ptx,myPoints[16].pty, myPoints[24].ptx,myPoints[24].pty, myPoints[17].ptx,myPoints[17].pty)
triangle (myPoints[17].ptx,myPoints[17].pty, myPoints[24].ptx,myPoints[24].pty, myPoints[25].ptx,myPoints[25].pty)
triangle (myPoints[24].ptx,myPoints[24].pty, myPoints[32].ptx,myPoints[32].pty, myPoints[25].ptx,myPoints[25].pty)
triangle (myPoints[25].ptx,myPoints[25].pty, myPoints[32].ptx,myPoints[32].pty, myPoints[33].ptx,myPoints[33].pty)
triangle (myPoints[32].ptx,myPoints[32].pty, myPoints[40].ptx,myPoints[40].pty, myPoints[33].ptx,myPoints[33].pty)
triangle (myPoints[33].ptx,myPoints[33].pty, myPoints[40].ptx,myPoints[40].pty, myPoints[41].ptx,myPoints[41].pty)

// row 2
triangle (myPoints[1].ptx,myPoints[1].pty, myPoints[9].ptx,myPoints[9].pty, myPoints[2].ptx,myPoints[2].pty)
triangle (myPoints[2].ptx,myPoints[2].pty, myPoints[9].ptx,myPoints[9].pty, myPoints[10].ptx,myPoints[10].pty)
triangle (myPoints[9].ptx,myPoints[9].pty, myPoints[17].ptx,myPoints[17].pty, myPoints[10].ptx,myPoints[10].pty)
triangle (myPoints[10].ptx,myPoints[10].pty, myPoints[17].ptx,myPoints[17].pty, myPoints[18].ptx,myPoints[18].pty)
triangle (myPoints[17].ptx,myPoints[17].pty, myPoints[25].ptx,myPoints[25].pty, myPoints[18].ptx,myPoints[18].pty)
triangle (myPoints[18].ptx,myPoints[18].pty, myPoints[25].ptx,myPoints[25].pty, myPoints[26].ptx,myPoints[26].pty)
triangle (myPoints[25].ptx,myPoints[25].pty, myPoints[33].ptx,myPoints[33].pty, myPoints[26].ptx,myPoints[26].pty)
triangle (myPoints[26].ptx,myPoints[26].pty, myPoints[33].ptx,myPoints[33].pty, myPoints[34].ptx,myPoints[34].pty)
triangle (myPoints[33].ptx,myPoints[33].pty, myPoints[41].ptx,myPoints[41].pty, myPoints[34].ptx,myPoints[34].pty)
triangle (myPoints[34].ptx,myPoints[34].pty, myPoints[41].ptx,myPoints[41].pty, myPoints[42].ptx,myPoints[42].pty)

// row 3
triangle (myPoints[1+1].ptx,myPoints[1+1].pty, myPoints[9+1].ptx,myPoints[9+1].pty, myPoints[2+1].ptx,myPoints[2+1].pty)
triangle (myPoints[2+1].ptx,myPoints[2+1].pty, myPoints[9+1].ptx,myPoints[9+1].pty, myPoints[10+1].ptx,myPoints[10+1].pty)
triangle (myPoints[9+1].ptx,myPoints[9+1].pty, myPoints[17+1].ptx,myPoints[17+1].pty, myPoints[10+1].ptx,myPoints[10+1].pty)
triangle (myPoints[10+1].ptx,myPoints[10+1].pty, myPoints[17+1].ptx,myPoints[17+1].pty, myPoints[18+1].ptx,myPoints[18+1].pty)
triangle (myPoints[17+1].ptx,myPoints[17+1].pty, myPoints[25+1].ptx,myPoints[25+1].pty, myPoints[18+1].ptx,myPoints[18+1].pty)
triangle (myPoints[18+1].ptx,myPoints[18+1].pty, myPoints[25+1].ptx,myPoints[25+1].pty, myPoints[26+1].ptx,myPoints[26+1].pty)
triangle (myPoints[25+1].ptx,myPoints[25+1].pty, myPoints[33+1].ptx,myPoints[33+1].pty, myPoints[26+1].ptx,myPoints[26+1].pty)
triangle (myPoints[26+1].ptx,myPoints[26+1].pty, myPoints[33+1].ptx,myPoints[33+1].pty, myPoints[34+1].ptx,myPoints[34+1].pty)
triangle (myPoints[33+1].ptx,myPoints[33+1].pty, myPoints[41+1].ptx,myPoints[41+1].pty, myPoints[34+1].ptx,myPoints[34+1].pty)
triangle (myPoints[34+1].ptx,myPoints[34+1].pty, myPoints[41+1].ptx,myPoints[41+1].pty, myPoints[42+1].ptx,myPoints[42+1].pty)

// row 4
triangle (myPoints[1+2].ptx,myPoints[1+2].pty, myPoints[9+2].ptx,myPoints[9+2].pty, myPoints[2+2].ptx,myPoints[2+2].pty)
triangle (myPoints[2+2].ptx,myPoints[2+2].pty, myPoints[9+2].ptx,myPoints[9+2].pty, myPoints[10+2].ptx,myPoints[10+2].pty)
triangle (myPoints[9+2].ptx,myPoints[9+2].pty, myPoints[17+2].ptx,myPoints[17+2].pty, myPoints[10+2].ptx,myPoints[10+2].pty)
triangle (myPoints[10+2].ptx,myPoints[10+2].pty, myPoints[17+2].ptx,myPoints[17+2].pty, myPoints[18+2].ptx,myPoints[18+2].pty)
triangle (myPoints[17+2].ptx,myPoints[17+2].pty, myPoints[25+2].ptx,myPoints[25+2].pty, myPoints[18+2].ptx,myPoints[18+2].pty)
triangle (myPoints[18+2].ptx,myPoints[18+2].pty, myPoints[25+2].ptx,myPoints[25+2].pty, myPoints[26+2].ptx,myPoints[26+2].pty)
triangle (myPoints[25+2].ptx,myPoints[25+2].pty, myPoints[33+2].ptx,myPoints[33+2].pty, myPoints[26+2].ptx,myPoints[26+2].pty)
triangle (myPoints[26+2].ptx,myPoints[26+2].pty, myPoints[33+2].ptx,myPoints[33+2].pty, myPoints[34+2].ptx,myPoints[34+2].pty)
triangle (myPoints[33+2].ptx,myPoints[33+2].pty, myPoints[41+2].ptx,myPoints[41+2].pty, myPoints[34+2].ptx,myPoints[34+2].pty)
triangle (myPoints[34+2].ptx,myPoints[34+2].pty, myPoints[41+2].ptx,myPoints[41+2].pty, myPoints[42+2].ptx,myPoints[42+2].pty)

// row 5
triangle (myPoints[1+3].ptx,myPoints[1+3].pty, myPoints[9+3].ptx,myPoints[9+3].pty, myPoints[2+3].ptx,myPoints[2+3].pty)
triangle (myPoints[2+3].ptx,myPoints[2+3].pty, myPoints[9+3].ptx,myPoints[9+3].pty, myPoints[10+3].ptx,myPoints[10+3].pty)
triangle (myPoints[9+3].ptx,myPoints[9+3].pty, myPoints[17+3].ptx,myPoints[17+3].pty, myPoints[10+3].ptx,myPoints[10+3].pty)
triangle (myPoints[10+3].ptx,myPoints[10+3].pty, myPoints[17+3].ptx,myPoints[17+3].pty, myPoints[18+3].ptx,myPoints[18+3].pty)
triangle (myPoints[17+3].ptx,myPoints[17+3].pty, myPoints[25+3].ptx,myPoints[25+3].pty, myPoints[18+3].ptx,myPoints[18+3].pty)
triangle (myPoints[18+3].ptx,myPoints[18+3].pty, myPoints[25+3].ptx,myPoints[25+3].pty, myPoints[26+3].ptx,myPoints[26+3].pty)
triangle (myPoints[25+3].ptx,myPoints[25+3].pty, myPoints[33+3].ptx,myPoints[33+3].pty, myPoints[26+3].ptx,myPoints[26+3].pty)
triangle (myPoints[26+3].ptx,myPoints[26+3].pty, myPoints[33+3].ptx,myPoints[33+3].pty, myPoints[34+3].ptx,myPoints[34+3].pty)
triangle (myPoints[33+3].ptx,myPoints[33+3].pty, myPoints[41+3].ptx,myPoints[41+3].pty, myPoints[34+3].ptx,myPoints[34+3].pty)
triangle (myPoints[34+3].ptx,myPoints[34+3].pty, myPoints[41+3].ptx,myPoints[41+3].pty, myPoints[42+3].ptx,myPoints[42+3].pty)

// row 6
triangle (myPoints[1+4].ptx,myPoints[1+4].pty, myPoints[9+4].ptx,myPoints[9+4].pty, myPoints[2+4].ptx,myPoints[2+4].pty)
triangle (myPoints[2+4].ptx,myPoints[2+4].pty, myPoints[9+4].ptx,myPoints[9+4].pty, myPoints[10+4].ptx,myPoints[10+4].pty)
triangle (myPoints[9+4].ptx,myPoints[9+4].pty, myPoints[17+4].ptx,myPoints[17+4].pty, myPoints[10+4].ptx,myPoints[10+4].pty)
triangle (myPoints[10+4].ptx,myPoints[10+4].pty, myPoints[17+4].ptx,myPoints[17+4].pty, myPoints[18+4].ptx,myPoints[18+4].pty)
triangle (myPoints[17+4].ptx,myPoints[17+4].pty, myPoints[25+4].ptx,myPoints[25+4].pty, myPoints[18+4].ptx,myPoints[18+4].pty)
triangle (myPoints[18+4].ptx,myPoints[18+4].pty, myPoints[25+4].ptx,myPoints[25+4].pty, myPoints[26+4].ptx,myPoints[26+4].pty)
triangle (myPoints[25+4].ptx,myPoints[25+4].pty, myPoints[33+4].ptx,myPoints[33+4].pty, myPoints[26+4].ptx,myPoints[26+4].pty)
triangle (myPoints[26+4].ptx,myPoints[26+4].pty, myPoints[33+4].ptx,myPoints[33+4].pty, myPoints[34+4].ptx,myPoints[34+4].pty)
triangle (myPoints[33+4].ptx,myPoints[33+4].pty, myPoints[41+4].ptx,myPoints[41+4].pty, myPoints[34+4].ptx,myPoints[34+4].pty)
triangle (myPoints[34+4].ptx,myPoints[34+4].pty, myPoints[41+4].ptx,myPoints[41+4].pty, myPoints[42+4].ptx,myPoints[42+4].pty)

// row 7
triangle (myPoints[1+5].ptx,myPoints[1+5].pty, myPoints[9+5].ptx,myPoints[9+5].pty, myPoints[2+5].ptx,myPoints[2+5].pty)
triangle (myPoints[2+5].ptx,myPoints[2+5].pty, myPoints[9+5].ptx,myPoints[9+5].pty, myPoints[10+5].ptx,myPoints[10+5].pty)
triangle (myPoints[9+5].ptx,myPoints[9+5].pty, myPoints[17+5].ptx,myPoints[17+5].pty, myPoints[10+5].ptx,myPoints[10+5].pty)
triangle (myPoints[10+5].ptx,myPoints[10+5].pty, myPoints[17+5].ptx,myPoints[17+5].pty, myPoints[18+5].ptx,myPoints[18+5].pty)
triangle (myPoints[17+5].ptx,myPoints[17+5].pty, myPoints[25+5].ptx,myPoints[25+5].pty, myPoints[18+5].ptx,myPoints[18+5].pty)
triangle (myPoints[18+5].ptx,myPoints[18+5].pty, myPoints[25+5].ptx,myPoints[25+5].pty, myPoints[26+5].ptx,myPoints[26+5].pty)
triangle (myPoints[25+5].ptx,myPoints[25+5].pty, myPoints[33+5].ptx,myPoints[33+5].pty, myPoints[26+5].ptx,myPoints[26+5].pty)
triangle (myPoints[26+5].ptx,myPoints[26+5].pty, myPoints[33+5].ptx,myPoints[33+5].pty, myPoints[34+5].ptx,myPoints[34+5].pty)
triangle (myPoints[33+5].ptx,myPoints[33+5].pty, myPoints[41+5].ptx,myPoints[41+5].pty, myPoints[34+5].ptx,myPoints[34+5].pty)
triangle (myPoints[34+5].ptx,myPoints[34+5].pty, myPoints[41+5].ptx,myPoints[41+5].pty, myPoints[42+5].ptx,myPoints[42+5].pty)

fill(0);
stroke(0);
ellipse(myPoints[i].ptx,myPoints[i].pty,10,10); // small points at each ptx & pty

if (i > 7) {
line(myPoints[i].ptx, myPoints[i].pty, myPoints[i-8].ptx,myPoints[i-8].pty);
}
if (i%8 != 0 && i > 0 && i%8 != 8) {
line(myPoints[i].ptx, myPoints[i].pty, myPoints[i-1].ptx,myPoints[i-1].pty);
}

// draws charge icons above points
pushMatrix();
stroke(255);
strokeWeight(2);
line (myPoints[i].ptx - 3, myPoints[i].pty, myPoints[i].ptx + 3, myPoints[i].pty);
if ( charge > 0.5 ) {
line (myPoints[i].ptx, myPoints[i].pty - 3, myPoints[i].ptx, myPoints[i].pty + 3);
}

popMatrix();
// find out if mouse is over the point and displays control circle if this is true
if (mouseX > myPoints[i].ptx-hrs && mouseX < myPoints[i].ptx+hrs &&
mouseY > myPoints[i].pty-hrs && mouseY < myPoints[i].pty+hrs) {
bover = true;

if(!locked) {
int hide = 255;
}
} else {
int hide = 0;
bover = false;
}

// set drawing code for hover circles
pushMatrix();
noFill();
stroke(120,hide);
ellipse(myPoints[i].ptx,myPoints[i].pty,hrs,hrs);

}
}

void mousePressed() {
if (bover) {
locked = true;
fill(0);
} else {
locked = false;
}
}

void mouseDragged() {
for (int i = 0; i < myPoints.length; i++) {
//Check mouse position against current position of each point
if (dist(myPoints[i].ptx, myPoints[i].pty, mouseX, mouseY) < hrs) {
//Set X/Y position of current point to cursor position
myPoints[i].ptx = mouseX;
myPoints[i].pty = mouseY;
//Return stops multiple overlapping points being moved at once
return;
}
}
}

void mouseReleased() {
locked = false;
}

class Points {

float ptx;
float pty;

Points (float ptx_, float pty_){

ptx = ptx_;
pty = pty_;

}

}``````