audio spectrum on complex path/ shape

Ondreyu

Hi there I am very new to the processing and I am trying to apply an audio spectrum on a very complex shape. Any idea how?

For example:

void setup() {
  size(1000,700,JAVA2D);
  smooth(1);
  background (0);
}
void draw() {

 noFill();
stroke(255,0,0);
strokeWeight (2);
beginShape();
translate(400,300); 
beginShape();
vertex(12.55, 18.9);
vertex(6.45, 18.9);
bezierVertex(4.45, 18.9, 2.95, 20.5, 2.95, 22.4);
vertex(2.95, 56.2);
bezierVertex(2.95, 58.2, 4.55, 59.7, 6.45, 59.7);
vertex(81.55, 59.7);
bezierVertex(84.35, 59.7, 86.05, 62.9, 84.45, 65.2);
bezierVertex(65.45, 93, 34.65, 111.1, -0.05, 111.1);
bezierVertex(-57.65, 111.1, -104.55, 61.2, -104.55, -0.1);
bezierVertex(-104.55, -61.4, -57.65, -111.3, -0.05, -111.3);
bezierVertex(30.85, -111.3, 58.65, -96.9, 77.85, -74.2);
bezierVertex(83.65, -67.3, 88.65, -59.7, 92.75, -51.4);
bezierVertex(93.65, -49.5, 95.95, -48.8, 97.75, -49.8);
vertex(121.35, -63.4);
vertex(146.45, -77.9);
vertex(170.45, -91.8);
bezierVertex(172.05, -92.7, 172.75, -94.8, 171.85, -96.5);
bezierVertex(167.65, -104.8, 162.85, -112.7, 157.65, -120.2);
bezierVertex(122.25, -171.4, 64.75, -204.8, -0.05, -204.8);
bezierVertex(-107.45, -204.8, -194.85, -112.9, -194.85, 0);
bezierVertex(-194.85, 112.9, -107.45, 204.8, -0.05, 204.8);
bezierVertex(87.65, 204.8, 161.95, 143.6, 186.35, 59.8);
bezierVertex(189.25, 49.8, 191.45, 39.4, 192.85, 28.8);
bezierVertex(194.15, 19.4, 194.75, 9.8, 194.75, 0);
bezierVertex(194.75, -9.5, 194.15, -18.8, 192.95, -27.9);
bezierVertex(192.75, -29.7, 191.25, -31, 189.45, -31);
vertex(161.15, -31);
vertex(132.25, -31);
vertex(100.35, -31);
vertex(65.25, -31);
vertex(3.25, -31);
vertex(2.95, -31);
vertex(2.95, -30.8);
vertex(2.95, 5);
vertex(2.95, 7.1);
vertex(30.45, 7.1);
bezierVertex(32.45, 7.1, 33.95, 5.5, 33.95, 3.6);
vertex(33.95, 3.6);
bezierVertex(33.95, 1.6, 35.55, 0.1, 37.45, 0.1);
vertex(104.45, 0.1);
vertex(135.45, 0.1);
vertex(160.15, 0.1);
bezierVertex(162.15, 0.1, 163.75, 1.7, 163.65, 3.7);
bezierVertex(163.45, 12.3, 162.65, 20.7, 161.35, 28.9);
bezierVertex(159.65, 39.6, 157.05, 50, 153.65, 59.9);
bezierVertex(130.65, 126.4, 70.35, 173.9, -0.25, 173.9);
bezierVertex(-90.55, 173.9, -164.05, 95.9, -164.05, 0.1);
bezierVertex(-163.85, -95.8, -90.35, -173.8, -0.05, -173.8);
bezierVertex(51.95, -173.8, 98.35, -148, 128.35, -107.8);
bezierVertex(129.65, -106.1, 129.05, -103.7, 127.25, -102.6);
vertex(107.55, -91.2);
bezierVertex(106.05, -90.3, 104.15, -90.7, 103.05, -92.1);
bezierVertex(78.15, -122.7, 41.15, -142.2, -0.05, -142.2);
bezierVertex(-74.75, -142.2, -135.55, -78.4, -135.55, 0);
bezierVertex(-135.55, 78.4, -74.75, 142.2, -0.05, 142.2);
bezierVertex(54.35, 142.2, 101.25, 108.4, 122.85, 59.8);
bezierVertex(126.65, 51.3, 129.65, 42.4, 131.75, 33.1);
bezierVertex(132.25, 30.9, 130.55, 28.8, 128.25, 28.8);
vertex(100.85, 28.8);
vertex(37.35, 28.8);
bezierVertex(35.35, 28.8, 33.85, 27.2, 33.85, 25.3);
vertex(33.85, 22.5);
bezierVertex(33.85, 20.5, 32.25, 19, 30.35, 19);
vertex(24.25, 19);
endShape();
  stop();
}

// Thanks!

koogs

please edit post, highlight code, press ctrl-o. it's useless the way it currently looks.

Ondreyu

Thank you for the tip!

koogs

ok, so that's an outline G shape.

what do you mean by "apply an audio spectrum"?

Ondreyu

Yes it is. what 'm trying to achieve it to create a sound visualiser on typography. You type a word the you say it and path of the type will react to the sound. Hope I am explaining myself right. Please follow the link to see what I mean. I can do it in AfterEffect but I need an interactive app.

https://dropbox.com/s/e04glmo1fh3z6v0/Screen%20Shot%202016-03-21%20at%2013.11.20.png?dl=0

Ondreyu

caligraft.com/exhibition/hilos

This a a great example. But I need it to react to audio input rather then mouse movement.

koogs

(you can upload image files to the forum so people don't have to go to dropbox. just use the image icon on the top left of the text input window.)

i think you're going to be unlucky here. your shape is written in quite large strokes but you need to modify tiny sections of it to make it look like a waveform.

if you can find a character in a font that's close enough to what you want then you can use the caligraft code - it only works with characters from fonts afaik

or you might be able to write a vertex shader to modify the shape as you draw it. but this is a very advanced topic.

Ondreyu

Thank for you patience and help! I am just a student and need to get this done for my Uni project gona have to find another way :)