Triangle Grids

Triangle Grids2015-07-11

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

float radius = 40;
float x, y;
float prevX, prevY;
Boolean fade = true;
Boolean saveOne = false;

void setup() {
    size(800, 600);
    background(0);
    stroke(255);

    x = width / 2;
    y = height / 2;

    prevX = x;
    prevY = y;

    stroke(255);
    strokeWeight(2);
    point(x, y);

}

void draw() {
    if (fade) {
        noStroke();
        fill(0, 5);
        rect(0, 0, width, height);
    }

    float angle = (TWO_PI / 6) * floor(random(5.6));
    x += cos(angle) * radius;
    y += sin(angle) * radius;

    if (x < 0 || x > width) {
        x = prevX;
        y = prevY;
    }

    if (y < 0 || y > height) {
        x = prevX;
        y = prevY;
    }

    stroke(255, 64);
    strokeWeight(1);
    line(x, y, prevX, prevY);

    strokeWeight(3);
    point(x, y);

    prevX = x;
    prevY = y;

    if (saveOne) {
        saveFrame("images/triangle-grid-#####.png");
        saveOne = false;
    }

}

void keyPressed() {
    if (key == 'f') {
        fade = !fade;
    }

    if (key == 's') {
        saveOne = true;
    }
}