# Change color of the shapes with audio

**URL:** <https://discourse.processing.org/t/change-color-of-the-shapes-with-audio/1495>\
**Category:** Beginners\
**Created:** [July 4, 2018, 2:41pm UTC](https://discourse.processing.org/t/change-color-of-the-shapes-with-audio/1495 "2018-07-04T14:41:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![IlPastaio](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ilpastaio/32/666_2.png) [@IlPastaio](https://discourse.processing.org/u/IlPastaio)\
**Post date:** [July 4, 2018, 2:41pm UTC](https://discourse.processing.org/t/change-color-of-the-shapes-with-audio/1495/1 "2018-07-04T14:41:30Z")

</div>

Hello everyone, I need your help for a project I’m creating. First of all, I’m a complete noob! So try to be as simple as possible with me please. Basically I’ve created this simple draw ![53](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/b88dd01dcb2d17bb726a2ca769b09fc283116197.png)  
and I need that every shape inside change its color to a specific one with the audio input, I know that I probably need to use the minim library, but I don’t how to do it. Can you please help me? Thanks in advance!

This is my job atm

void setup(){  
setupAudio();

size(700,700);  
}

void draw(){  
ellipseMode(CENTER);

// Draw the pieces  
getVolume(); // this call fetches the mic volume for the current frame.  
float Y = map(volume, 0,100, 2,120); // now we can use it for something!

float SOUND =Y;

fill(0,141,54);  
noStroke();  
triangle(0, 0, 0, 70, 35, 0);  
triangle(35, 0, 70, 70, 105, 0);  
triangle(105, 0, 140, 70, 175, 0);  
triangle(175, 0, 210, 70, 245, 0);  
triangle(315, 0, 350, 70, 385, 0);  
triangle(385, 0, 420, 70, 455, 0);  
triangle(455, 0, 490, 70, 525, 0);  
triangle(525, 0, 560, 70, 595, 0);  
triangle(595, 0, 630, 70, 665, 0);  
triangle(665, 0, 700, 70, 700, 0);  
triangle(245, 0, 280, 70, 315, 0);  
triangle(0, 210, 35, 280, 0, 280);

// TRIANGOLI VERDE SCURO

fill(26,165,78);  
noStroke();  
triangle(0, 70, 35, 0, 70, 70);  
triangle(70, 70, 105, 0, 140, 70);  
triangle(140, 70, 175, 0, 210, 70);  
triangle(210, 70, 245, 0, 280, 70);  
triangle(280, 70, 315, 0, 350, 70);  
triangle(350, 70, 385, 0, 420, 70);  
triangle(420, 70, 455, 0, 490, 70);  
triangle(490, 70, 525, 0, 560, 70);  
triangle(560, 70, 595, 0, 630, 70);  
triangle(630, 70, 665, 0, 700, 70);  
triangle(0, 70, 35, 140, 70, 70);  
triangle(70, 70, 105, 140, 140, 70);  
triangle(140, 70, 175, 140, 210, 70);  
triangle(210, 70, 245, 140, 280, 70);  
triangle(280, 70, 315, 140, 350, 70);  
triangle(350, 70, 385, 140, 420, 70);  
triangle(420, 70, 455, 140, 490, 70);  
triangle(490, 70, 525, 140, 560, 70);  
triangle(560, 70, 595, 140, 630, 70);  
triangle(630, 70, 665, 140, 700, 70);

// TRIANGOLI VERDE CHIARO

fill(0,141,54);  
noStroke();  
triangle(0, 70, 35, 140, 0, 140);  
triangle(35, 140, 70, 70, 105, 140);  
triangle(105, 140, 140, 70, 175, 140);  
triangle(175, 140, 210, 70, 245, 140);  
triangle(245, 140, 280, 70, 315, 140);  
triangle(315, 140, 350, 70, 385, 140);  
triangle(385, 140, 420, 70, 455, 140);  
triangle(455, 140, 490, 70, 525, 140);  
triangle(525, 140, 560, 70, 595, 140);  
triangle(595, 140, 630, 70, 665, 140);  
triangle(665, 140, 700, 70, 700, 140);  
triangle(0, 140, 35, 140, 0, 210);  
triangle(35, 140, 105, 140, 70, 210);  
triangle(105, 140, 175, 140, 140, 210);  
triangle(175, 140, 210, 210, 245, 140);  
triangle(245, 140, 280, 210, 315, 140);  
triangle(315, 140, 350, 210, 385, 140);  
triangle(385, 140, 420, 210, 455, 140);  
triangle(455, 140, 490, 210, 525, 140);  
triangle(525, 140, 560, 210, 595, 140);  
triangle(595, 140, 630, 210, 665, 140);  
triangle(665, 140, 700, 210, 700, 140);  
triangle(0, 210, 0, 280, 35, 280);  
triangle(35, 280, 70, 210, 105, 280);  
triangle(105, 280, 140, 210, 175, 280);  
triangle(175, 280, 210, 210, 245, 280);  
triangle(245, 280, 280, 210, 315, 280);  
triangle(315, 280, 350, 210, 385, 280);  
triangle(385, 280, 420, 210, 455, 280);  
triangle(455, 280, 490, 210, 525, 280);  
triangle(525, 280, 560, 210, 595, 280);  
triangle(595, 280, 630, 210, 665, 280);  
triangle(665, 280, 700, 210, 700, 280);

// TRIANGOLI VERDE SCURO

fill(26,165,78);  
noStroke();  
triangle(35, 140, 0, 210, 70, 210);  
triangle(70, 210, 105, 140, 140, 210);  
triangle(140, 210, 175, 140, 210, 210);  
triangle(210, 210, 245, 140, 280, 210);  
triangle(280, 210, 315, 140, 350, 210);  
triangle(350, 210, 385, 140, 420, 210);  
triangle(420, 210, 455, 140, 490, 210);  
triangle(490, 210, 525, 140, 560, 210);  
triangle(560, 210, 595, 140, 630, 210);  
triangle(630, 210, 665, 140, 700, 210);  
triangle(0, 210, 35, 280, 70, 210);  
triangle(70, 210, 105, 280, 140, 210);  
triangle(140, 210, 175, 280, 210, 210);  
triangle(210, 210, 245, 280, 280, 210);  
triangle(280, 210, 315, 280, 350, 210);  
triangle(350, 210, 385, 280, 420, 210);  
triangle(420, 210, 455, 280, 490, 210);  
triangle(490, 210, 525, 280, 560, 210);  
triangle(560, 210, 595, 280, 630, 210);  
triangle(630, 210, 665, 280, 700, 210);

// TRIANGOLI VERDE CHIARO

fill(0,141,54);  
noStroke();  
triangle(0, 280, 35, 280, 0, 350);  
triangle(35, 280, 70, 350, 105, 280);  
triangle(105, 280, 140, 350, 175, 280);  
triangle(175, 280, 210, 350, 245, 280);  
triangle(245, 280, 280, 350, 315, 280);  
triangle(315, 280, 350, 350, 385, 280);  
triangle(385, 280, 420, 350, 455, 280);  
triangle(455, 280, 490, 350, 525, 280);  
triangle(525, 280, 560, 350, 595, 280);  
triangle(595, 280, 630, 350, 665, 280);  
triangle(665, 280, 700, 350, 700, 280);  
triangle(0, 350, 0, 420, 35, 420);  
triangle(35, 420, 70, 350, 105, 420);  
triangle(105, 420, 140, 350, 175, 420);  
triangle(175, 420, 210, 350, 245, 420);  
triangle(245, 420, 280, 350, 315, 420);  
triangle(315, 420, 350, 350, 385, 420);  
triangle(385, 420, 420, 350, 455, 420);  
triangle(455, 420, 490, 350, 525, 420);  
triangle(525, 420, 560, 350, 595, 420);  
triangle(595, 420, 630, 350, 665, 420);  
triangle(665, 420, 700, 350, 700, 420);

// TRIANGOLI VERDE SCURO

fill(26,165,78);  
noStroke();  
triangle(0, 350, 35, 280, 70, 350);  
triangle(70, 350, 105, 280, 140, 350);  
triangle(140, 350, 175, 280, 210, 350);  
triangle(210, 350, 245, 280, 280, 350);  
triangle(280, 350, 315, 280, 350, 350);  
triangle(350, 350, 385, 280, 420, 350);  
triangle(420, 350, 455, 280, 490, 350);  
triangle(490, 350, 525, 280, 560, 350);  
triangle(560, 350, 595, 280, 630, 350);  
triangle(630, 350, 665, 280, 700, 350);  
triangle(0, 350, 35, 420, 70, 350);  
triangle(70, 350, 105, 420, 140, 350);  
triangle(140, 350, 175, 420, 210, 350);  
triangle(210, 350, 245, 420, 280, 350);  
triangle(280, 350, 315, 420, 350, 350);  
triangle(350, 350, 385, 420, 420, 350);  
triangle(420, 350, 455, 420, 490, 350);  
triangle(490, 350, 525, 420, 560, 350);  
triangle(560, 350, 595, 420, 630, 350);  
triangle(630, 350, 665, 420, 700, 350);

// TRIANGOLI VERDE CHIARO

fill(0,141,54);  
noStroke();  
triangle(0, 420, 0, 490, 35, 420);  
triangle(35, 420, 70, 490, 105, 420);  
triangle(105, 420, 140, 490, 175, 420);  
triangle(175, 420, 210, 490, 245, 420);  
triangle(245, 420, 280, 490, 315, 420);  
triangle(315, 420, 350, 490, 385, 420);  
triangle(385, 420, 420, 490, 455, 420);  
triangle(455, 420, 490, 490, 525, 420);  
triangle(525, 420, 560, 490, 595, 420);  
triangle(595, 420, 630, 490, 665, 420);  
triangle(665, 420, 700, 490, 700, 420);  
triangle(0, 490, 0, 560, 35, 560);  
triangle(35, 560, 70, 490, 105, 560);  
triangle(105, 560, 140, 490, 175, 560);  
triangle(175, 560, 210, 490, 245, 560);  
triangle(245, 560, 280, 490, 315, 560);  
triangle(315, 560, 350, 490, 385, 560);  
triangle(385, 560, 420, 490, 455, 560);  
triangle(455, 560, 490, 490, 525, 560);  
triangle(525, 560, 560, 490, 595, 560);  
triangle(595, 560, 630, 490, 665, 560);  
triangle(665, 560, 700, 490, 700, 560);

// TRIANGOLI VERDE SCURO

fill(26,165,78);  
noStroke();  
triangle(35, 420, 0, 490, 70, 490);  
triangle(70, 490, 105, 420, 140, 490);  
triangle(140, 490, 175, 420, 210, 490);  
triangle(210, 490, 245, 420, 280, 490);  
triangle(280, 490, 315, 420, 350, 490);  
triangle(350, 490, 385, 420, 420, 490);  
triangle(420, 490, 455, 420, 490, 490);  
triangle(490, 490, 525, 420, 560, 490);  
triangle(560, 490, 595, 420, 630, 490);  
triangle(630, 490, 665, 420, 700, 490);  
triangle(0, 490, 35, 560, 70, 490);  
triangle(70, 490, 105, 560, 140, 490);  
triangle(140, 490, 175, 560, 210, 490);  
triangle(210, 490, 245, 560, 280, 490);  
triangle(280, 490, 315, 560, 350, 490);  
triangle(350, 490, 385, 560, 420, 490);  
triangle(420, 490, 455, 560, 490, 490);  
triangle(490, 490, 525, 560, 560, 490);  
triangle(560, 490, 595, 560, 630, 490);  
triangle(630, 490, 665, 560, 700, 490);

// TRIANGOLI VERDE CHIARO

fill(0,141,54);  
noStroke();  
triangle(0, 560, 0, 630, 35, 560);  
triangle(35, 560, 70, 630, 105, 560);  
triangle(105, 560, 140, 630, 175, 560);  
triangle(175, 560, 210, 630, 245, 560);  
triangle(245, 560, 280, 630, 315, 560);  
triangle(315, 560, 350, 630, 385, 560);  
triangle(385, 560, 420, 630, 455, 560);  
triangle(455, 560, 490, 630, 525, 560);  
triangle(525, 560, 560, 630, 595, 560);  
triangle(595, 560, 630, 630, 665, 560);  
triangle(665, 560, 700, 630, 700, 560);  
triangle(0, 630, 0, 700, 35, 700);  
triangle(35, 700, 70, 630, 105, 700);  
triangle(105, 700, 140, 630, 175, 700);  
triangle(175, 700, 210, 630, 245, 700);  
triangle(245, 700, 280, 630, 315, 700);  
triangle(315, 700, 350, 630, 385, 700);  
triangle(385, 700, 420, 630, 455, 700);  
triangle(455, 700, 490, 630, 525, 700);  
triangle(525, 700, 560, 630, 595, 700);  
triangle(595, 700, 630, 630, 665, 700);  
triangle(665, 700, 700, 630, 700, 700);

// TRIANGOLI VERDE SCURO

fill(26,165,78);  
noStroke();  
triangle(0, 630, 35, 560, 70, 630);  
triangle(70, 630, 105, 560, 140, 630);  
triangle(140, 630, 175, 560, 210, 630);  
triangle(210, 630, 245, 560, 280, 630);  
triangle(280, 630, 315, 560, 350, 630);  
triangle(350, 630, 385, 560, 420, 630);  
triangle(420, 630, 455, 560, 490, 630);  
triangle(490, 630, 525, 560, 560, 630);  
triangle(560, 630, 595, 560, 630, 630);  
triangle(630, 630, 665, 560, 700, 630);  
triangle(0, 630, 35, 700, 70, 630);  
triangle(70, 630, 105, 700, 140, 630);  
triangle(140, 630, 175, 700, 210, 630);  
triangle(210, 630, 245, 700, 280, 630);  
triangle(280, 630, 315, 700, 350, 630);  
triangle(350, 630, 385, 700, 420, 630);  
triangle(420, 630, 455, 700, 490, 630);  
triangle(490, 630, 525, 700, 560, 630);  
triangle(560, 630, 595, 700, 630, 630);  
triangle(630, 630, 665, 700, 700, 630);

fill(255,165,78);  
noStroke();  
quad(245, 140, 315, 140, 315, 560, 245, 560);  
quad(315, 140, 315, 210, 455, 210, 455, 140);  
quad(385, 210, 385, 280, 455, 280, 455, 210);  
quad(315, 280, 310, 350, 455, 350, 455, 280);  
}

---

<div class="post-metadata">

**Author:** ![mat650](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mat650/32/564_2.png) [@mat650](https://discourse.processing.org/u/mat650)\
**Post date:** [July 4, 2018, 8:27pm UTC](https://discourse.processing.org/t/change-color-of-the-shapes-with-audio/1495/2 "2018-07-04T20:27:36Z")

</div>

HI, first of all I think that you need to optimize your code. You hard coded each single rhombus as a couple of triangles, that’s very time consuming and misleading way of draw the canvas. If you want to manage any interaction like color change according to come parameters you first need to code by using loops like for(condition){statement} and while(condition){statement}. To draw the rhombus quad() is probably a better choice.  
If you don’t know what I’m talking about you need to follow some tutorials before working on your own project.  
[https://processing.org/tutorials/](https://processing.org/tutorials/)

The references:  
[https://processing.org/reference/quad\_.html](https://processing.org/reference/quad_.html)  
[https://processing.org/reference/for.html](https://processing.org/reference/for.html)  
[https://processing.org/reference/while.html](https://processing.org/reference/while.html)  
[https://processing.org/reference/for.html](https://processing.org/reference/for.html)

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 5, 2018, 1:08am UTC](https://discourse.processing.org/t/change-color-of-the-shapes-with-audio/1495/3 "2018-07-05T01:08:09Z")

</div>

Check this [https://forum.processing.org/two/discussion/comment/123484#Comment\_123484](https://forum.processing.org/two/discussion/comment/123484#Comment_123484)

Kf