Tuesday, January 26, 2016

Rotating Squares in Phases with Gif Loop Coder

All of these sketches, made with Gif Loop Coder, are the same save for the phase frequency. From the first with a phase of 0.01*i to the last with a phase of i the squares create remarkable iterative designs.

function onGLC(glc) {
    glc.loop();
     glc.size(400, 400);
     glc.setDuration(3);
     glc.setFPS(20);
     glc.setMode("single");
     glc.setEasing(false);
     glc.setMaxColors(10);
    glc.styles.backgroundColor = "black";

    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    var numSquares = 100,
        diameter = 100, 
        squareSize = 100;

    for (var i = 0; i < numSquares; i++) {
        newX = Math.cos(2 * Math.PI * i / numSquares) * diameter;
        newY = Math.sin(2 * Math.PI * i / numSquares) * diameter;
        list.addRect({
            x: width/2+newX,
            y: height/2+newY,
            fill: false,
            stroke: true,
            strokeStyle: "white",
            w: squareSize,
            h: squareSize,
            rotation: [0,90],
            lineWidth: 1.5,
            phase:i*0.01,
        })
    };

}
phase: i*0.01
phase: i*0.02
phase: i*0.03
phase: i*0.04
phase: i*0.05
phase: i*0.06
phase: i*0.07
phase: i*0.08
phase: i*0.09
phase: i*0.1
phase: i*0.11
phase: i*0.12
phase: i*0.15
phase:i*0.29
phase:i*0.38
phase:i*0.48
phase:i*0.56
phase:i*0.9
phase:i*0.94
phase:i*0.96
phase:i*0.97
phase:i*0.98
phase:i*0.99
phase:i

No comments :