Processing polka dots

p. sketch <-> mouse interaction.

by schrodingers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.15/processing.js"></script>
<canvas></canvas>

CSS

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
}
</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var scripts=document.body.getElementsByTagName('script');
    var canvases=document.body.getElementsByTagName('canvas');
    new Processing(canvases[0], scripts[0].text);
}
, false);
 // Here prevent javascript in body from throwing error </script> <style>

JavaScript

/* 
 title: Polka dots - mouse - sketch interaction.
 date: 2015-07-24
 */
float distance = 0;
void setup() {
    size(600, 600);
    smooth(8);
    noStroke();
    distance = dist(0, 0, width, height);
}
void draw() {
    fill(50);
    rect(0, 0, width, height);
    fill(250);
    for (int i = 0; i <= width; i += 20) {
        for (int j = 0; j <= height; j += 20) {
            float size = dist(mouseX, mouseY, i, j);
            size = size / distance * 50;
            ellipse(i, j, size, size);
        }
    }
}