Processing Triangles blurry animation

2015-09-03 Flags [EverydaySketch]

by schrodingers

HTML

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

CSS

</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: Triangles. Sahalin.
 date: 2015-09-03
 */

color[] spring = {
  #ff6699, #ff9900, #ffcc00, #9adb1b, #00cc66, #00cccc, #00ccff, #6633cc, #ff66cc
};
color[] flat = {
  #2ecc71, #e74c3c, #3498db, #9b59b6, #f1c40f, #e67e22, #be643c, #ecf0f1, #1abc9c, #2c3e50, #f5f5f5, #bdc3c7, #7f8c8d, #95a5a6, #e0e0e0, #34495e
};
 float theta;
 float d = 100; //polygons side length
float num = 8;
void setup() {
    size(800, 600);
}

void draw() {
fill(250, 250, 250, 98);
rect(0, 0, width, height);
  stroke(220);
    for (int i=0; i < num; i++){
    float offSet = TAU/num*i;
        pushMatrix();        
        float s = map(sin(theta+offSet*3.014), -1, 1, -d, d); // vertex
        translate(d*i, height-d);
        fill(spring[i]);
        triangle(-d/2, 0, 0, s, d/2, 0);
        
        
        popMatrix();
    }
    theta+=0.05; // TIME...
}