# Audio Voronoi

Voronoi diagram is a well known solution for finding closest to the point n-gonth.

For audio generation — I to a continuous Voronoi diagram. It would be achieved by connecting left-right edges together, same for top-bottom. When I've just implemented it — it looked buggy until I decrease points count to 2 and understand what's going on. Since topologically this edge looping is similar to making a tor in 3D space — this diamond like structures appears.

Implemented collection of basic UI elements, so it is now easy to create Buttons like `refresh`

and `mute`

. Maybe would update previous articles for better readability.

```
var points = [];
const voronoiLayer = px.createLayer(1);
const pointsLayer = px.createLayer(2);
var pointCount = 2;
var refreshBtn = new UI.RefreshButton({
layer: voronoiLayer,
onClick: function(){
points = [];
for(let i = 0; i < pointCount; i++){
var point = new Point(rand(w), rand(h));
point.dx = rand(maxSpeed) - maxSpeed/2;
point.dy = rand(maxSpeed) - maxSpeed/2;
point.color = color(
0x33+rand(0x88),
0x55+rand(0x99),
0x44+rand(0x88)
);
points.push(point);
}
}
});
var maxSpeed = w/6;
update = (dt, t)=>{
pointsLayer.clear();
var x, y, i;
for(i = 0; i < pointCount; i++){
var point = points[i];
// moving points
point.x = (point.x + w + point.dx*dt) % w;
point.y = (point.y + h + point.dy*dt) % h;
pointsLayer.circle(point.x, point.y, 1.5, lighter(point.color,2));
pointsLayer.point(point.x, point.y, darker(point.color,2));
}
// instead of colour it is possible to use a function
// that would be called for each x and y position
// that's exactly what we need here
voronoiLayer.rect(0,0,w,h, function(x, y){
var nearest = points[0],
minDistance = w*w+h*h;
var dx, dy;
for(i = 0; i < pointCount; i++){
var point = points[i], px = point.x, py = point.y,
dx = abs(px-x),
dy = abs(py-y);
// minimal distance can not be larger than a half
if(dx > w/2)
dx = w - dx;
if(dy > h/2)
dy = h - dy;
// squared distance is ok for this purpose
distance = dx*dx+dy*dy;
if( distance < minDistance ){
minDistance = distance;
nearest = point;
}
}
return nearest.color;
});
refreshBtn.draw();
}
move = function(){};
refreshBtn.click();
```

For eight points it looks better!

## Music

Now I've placed 7 notes. When color behind any of them is changed — they are played. There is a visual feedback — note increased.

Sounds like human music from Rick & Morty. Maybe adding more points would make it a bit better.

This is more melodic.

Let's add more variation. An octave switch in the center would be great. It would work as a note in terms of collision with the diagram, but instead of playing a note — it would switch the octave of notes in the inner circle.

And maybe some note circles rotation would make it better.

As a last tune I want to switch the notes in a Solfège way