<repo_name>roytanck/gifloopcoder-scripts<file_sep>/code/roy-typo.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(3);
	glc.setFPS(20);
	glc.setMode("single");
	glc.setEasing(false);
	glc.setMaxColors(256);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#fff8ee';
	var grid = 9;
	var length = Math.sqrt( Math.pow((width/grid),2) + Math.pow((width/grid),2) );
	var letters = 'abcdefghijklmnopqrstuvwxyz';

	for( var x=0; x<grid+2; x++ ){
		for( var y=0; y<grid+2; y++ ){
			var letter = letters.charAt( Math.floor( Math.random() * letters.length ) );
			var offset = Math.random() * 360;
			list.addText({
				x: x * (width/grid) - (width/grid)/2,
				y: y * (height/grid) - (height/grid)/2,
				text: letter,
				fontSize: getSize,
				fontWeight: 'normal',
				fontFamily: 'sans-serif',
				fontStyle: 'normal',
				rotation: [ offset, offset + 360 ],
				fillStyle: color.rgba(0,0,0,0.7),
				phase: (x+y)/(grid+grid)
			});
		}
	}

	function getSize( t ){
		return Math.sin( t*Math.PI ) * ( 2.5 * length );
	}

}<file_sep>/code/roy-silk.js
function onGLC(glc) {
    glc.loop();
    glc.size(600, 400);
    glc.setDuration(4);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#333';
	var nr = 600;
    var sides = 7;
    var margin = -180;
        
    for( var i=0; i<nr; i++ ){
        list.addPoly({
            x: i * ( (width+2*margin)/nr ) - margin,
            y: function(t) {
                return (height/2) + Math.cos( t*2*Math.PI ) * 10;
            },
            radius: function(t) {
                return 100 + Math.sin( t*2*Math.PI ) * 20;
            },
            sides: sides,
            fill: false,
            stroke: true,
            strokeStyle: '#efc',
            lineWidth: 0.125,
            rotation: function(t) {
                return Math.cos( t*1*Math.PI ) * (180/sides);
            },
            phase: i/nr,
        });
	
    }

}
<file_sep>/code/roy-interference.js
function onGLC(glc) {
    glc.loop();
	glc.size( 460, 460 );
	glc.setDuration( 3 );
	glc.setFPS( 25 );
	glc.setMode('single');
	glc.setEasing( false );
    glc.setMaxColors( 8 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#235';
	var sources = [];
    var nr = 4;
    var grid = 40;
    var margin = 40;
    var dist = ( width - (2*margin) ) / (grid - 1 );
    var size = 3.5;
    var maxWavelength = 360;
    
	for( var i=0; i<nr; i++ ){
        sources.push({
            x: Math.random() * width,
            y: Math.random() * height,
            wl: ( maxWavelength/2 ) + Math.random() * (maxWavelength/2),
        });
    }

    for( var x=0; x<grid; x++ ){
        for( var y=0; y<grid; y++ ){
            
            var c = list.addCircle({
                x: margin + x * dist,
                y: margin + y * dist,
                fillStyle: 'white',
                radius: function( t ){
                    var s = 0;
                    for( var i=0; i<sources.length; i++ ){
                		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
                        var wavePos = ( t + ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
                        s += ( size / sources.length ) + Math.sin( wavePos ) * ( size / sources.length );
                    }
                    return s;
                },
            });

        }
    }
    
}
<file_sep>/code/roy-balldance.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 0.5 );
	glc.setFPS( 30 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 32 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#bbddff';
	var rings = 5;
	var size = 20;
	var mindist = 60;

	for( var r=0; r<rings; r++){

		var radius = 40 + r * mindist;
		var circlesize = 2 * Math.PI * radius;
		var nrofdots = Math.max( Math.floor( circlesize / mindist ), 1 );

		for( var i=0; i<nrofdots; i++ ){

			var gradient = color.createRadialGradient( -6, -6, 0, -6, -6, 26 );
			gradient.addColorStop( 0, '#ffffff' );
    		gradient.addColorStop( 0.8, '#667788' );
    		gradient.addColorStop( 1, '#4466aa' );

			list.addCircle({
				x: function( t ){
					return (width/2) + Math.sin( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
				},
				y: function( t ){
					return (height/2) + -Math.cos( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
				},
				radius: size,
				stroke: false,
				fill: true,
				fillStyle: gradient,//color.rgba( 255, 255, 255, 1 ),
				shadowColor: color.rgba( 0, 0, 0, 0.15 ),
				shadowOffsetX: 10,
				shadowOffsetY: 10,
				shadowBlur: 5,
				p_radius: radius,
				p_nr: i,
				p_nrofdots: nrofdots
			});
		}
	}

}<file_sep>/code/iris-bolgrootte.js
€‹function onGLC(glc) {
    glc.loop();
    glc.size(400, 400);
    glc.setDuration(2);
    glc.setFPS(25);
    //glc.setMode('single');
    //glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = 'white';
    var nr = 21;
    var marge = 20;
    var tussenruimte = ( width - 2*marge ) / (nr-1);

    for( var y=0; y<nr; y++ ){

        for( var x=0; x<nr; x++ ){

            list.addCircle({
                x: marge + x*tussenruimte,
                y: marge + y*tussenruimte,
                radius: [ 4, 10 ],
                //fillStyle: ['red','blue'],
                fillStyle: color.animHSV( 160, 240, 1, 1, 0.9, 0.9 ),
                //fillStyle: color.rgba( 30,50,70,1 ),
                phase: (x+y) / (nr+nr)
                //phase: Math.random()
            });
            
        }
        
    }

}<file_sep>/code/roy-wavelines.js
function onGLC(glc) {
	glc.loop();
	glc.size( 500, 300 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 16 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 50, 40, 60, 1 );

	var waves = 21;
	var nr = 7;

	for( var w=0; w<waves; w++ ){

		for( var i=0; i<nr; i++ ){
			if( i != 0 ){
				list.addLine({
					x0: i * ( width/nr ) - (width/nr)/3,
					y0: function( t ){
						return getY( t, this.nr-0.1 );
					},
					x1: i * ( width/nr ) + (width/nr)/3,
					y1: function( t ){
						return getY( t, this.nr+0.1 );
					},
					stroke: true,
					strokeStyle: color.rgba( 255, 255, 255, 0.6 ),
					lineWidth: 2,
					nr: i,
					phase: w / ( waves * 2.2 )
				});
			}

		}

	}

	function getY( t, i ){
		var y = height/2 + Math.sin( ( t + ( i / nr ) ) * 2 * Math.PI ) * 100;
		return y;
	}

}<file_sep>/code/roy-shapeshift.js
function onGLC(glc) {
    glc.loop();
    glc.size(540, 540);
    glc.setDuration( 4.5 );
    glc.setFPS( 30 );
    glc.setMode('single');
    glc.setEasing(false);
    glc.setMaxColors( 16 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = color.hsv( 200, 1, 0.35 );
	var r = 100;
    var r2 = r/2;
    var a = r * Math.sqrt(3);
    var h = r/2 + r2/2;
    
    for( var x=-1; x<8; x++ ){
        
        var ypos = -h;
        
        for( var y=-1; y<9; y++ ){

            var oddeven = y % 2;
            ypos += oddeven ? r : r2;

 			list.addStar({
                x: x * a + ( Math.floor(y/2) % 2 ) * (a/2),
                y: ypos,
                //outerRadius: r,
                outerRadius: function( t ){
                    return r + Math.abs( Math.sin( t*2*Math.PI ) * (r/6.66) );
                },
                innerRadius: 0,
                points: 3,
                stroke: true,
                strokeStyle: 'white',
                lineWidth: 2,
                fill: false,
                //blendMode: 'screen',
                rotation: oddeven ? [ 90, 210 ] : [ 270, 390 ],
            });
            
        }
    }
}
<file_sep>/code/roy.js
function onGLC(glc) {
    glc.loop();
    glc.size( 500, 500 );
    glc.setDuration( 5 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	var grid = 5;
    var gridSize = 40;
	var maxSize = Math.sqrt( Math.pow( gridSize/2, 2 ) + Math.pow( gridSize/2, 2 ) );

    var container = list.addContainer({
		x: width / 2,
		y: height / 2
	});
	
    
    for( var x=-grid; x<=grid; x++ ){
        for( var y=-grid; y<=grid; y++ ){
            list.addCircle({
                x: x * gridSize,
                y: y * gridSize,
                radius: 10,
                parent: container,
            });
        }
    }
    
}
<file_sep>/code/roy-semicircles.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 10 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 51, 51, 51, 1 );

	var grid = 4;
	var padding = 20;
	var gridSize = ( width - ( 2*padding ) ) /grid;
	var cols = [ '#c00', '#0c0', '#00c' ];

	for( var x=0; x<grid; x++ ){
		for( var y=0; y<grid; y++ ){

			var speeds = [1,2,3,4];
			speeds.sort( function(){ return 0.5 - Math.random(); } );

			for( var c=0; c<cols.length; c++ ){

				list.addCircle({
					x: padding + x * gridSize + gridSize/2,
					y: padding + y * gridSize + gridSize/2,
					radius: gridSize * 0.4,
					drawFromCenter: true,
					startAngle: 0,
					endAngle: 180,
					rotation: [ 0, 360 ],
					stroke: false,
					fill: true,
					fillStyle: cols[c],
					blendMode: 'lighter',
					speedMult: speeds[c]
				});

			}

		}
	}

}<file_sep>/code/roy-soap.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 2 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#114488';
	var nr = 60;

	for( var i=0; i<nr; i++){

		var size = 10 + Math.random() * 60;
		var wavelength = 50 + Math.random() * 100;
		var amplitude = 15 + Math.random() * 30;
		var xpos = Math.random() * width;

		list.addCircle({
			x: function( t ){
				var ypos = ( height+size*2 ) - t * ( height - 4*size );
				return this.xpos + ( Math.sin( ypos/this.wl ) * this.amp );
			},
			y: [ height + size*2, -size*2 ],
			radius: size,
			stroke: true,
			lineWidth: 1,
			strokeStyle: color.rgba(255,255,255,0.5),
			fill: true,
			fillStyle: color.rgba(255,255,255,0.1),
			wl: wavelength,
			amp: amplitude,
			xpos: xpos,
			phase: Math.random()
		});
	}

}<file_sep>/code/roy-curvedlines.js
function onGLC(glc) {
    glc.loop();
    glc.size(700, 500);
    glc.setDuration(3.5);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#333';
	var nr = 27;
    var margin = 100;
    var x0 = margin;
    var x1 = 300;
    var x2 = 400;
    var x3 = width - margin;
    var amplitude = 80;
	
    for( var i=0; i<nr; i++ ){

        var baseY = margin + i * ( ( height - ( margin*2 ) ) / (nr-1) );
        
        list.addBezierCurve({
            x0: x0,
            y0: baseY,
            x1: function(t){
                return x1 + Math.cos( t*2*Math.PI ) * amplitude;
            },
            y1: function(t){
                return this._baseY + Math.sin( t*2*Math.PI ) * amplitude;
            },
            x2: function(t){
                return x2 + Math.cos( t*2*Math.PI ) * amplitude;
            },
            y2: function(t){
                return this._baseY + Math.sin( (t+0.5)*2*Math.PI ) * amplitude;
            },
            x3: x3,
            y3: baseY,
            strokeStyle: '#fff',
            lineWidth: 1.5,
            phase: i/(nr*2.73),
            _baseY: baseY,
        });
        
    }
}<file_sep>/code/roy-hexagon.js
function onGLC(glc) {
    glc.loop();
    glc.size( 600, 600 );
    glc.setDuration( 2.5 );
    glc.setFPS( 30 );
    glc.setMode('single');
    //glc.setEasing(false);
    glc.setMaxColors( 32 );
    glc.setQuality( 10 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#234';
    var nr = 5;
    var corners = [];
    var size = 10;
    var dist = 50;
        
    var c = list.addContainer({
        x: width / 2,
        y: height / 2,
    });

    list.addCircle({
        x: 0,
        y: 0,
        radius: size,
        stroke: false,
        fill: true,
        fillStyle: 'white',
        parent: c
    });
    
    for( var n=1; n<nr; n++ ){
        
        var rad = n * dist;
        var sideDots = Math.max( 0, n - 1 );
        var totalDots = 6;
        totalDots += 6 * sideDots;

        for( var i=0; i<6; i++ ){
            corners[i] = {
                x: Math.sin( (i/6) * 2*Math.PI ) * rad,
                y: -Math.cos( (i/6) * 2*Math.PI ) * rad
            }
        }
        
        for( var d=0; d<totalDots; d++ ){
            
            var dir = ( n % 2 == 0 ) ? 1 : -1;
            var pos = getDotPosition( rad, sideDots, totalDots, d );
            var pos2 = getDotPosition( rad, sideDots, totalDots, d + dir );
            
            list.addCircle({
                x: [ pos.x, pos2.x ],
                y: [ pos.y, pos2.y ],
                radius: size,
                stroke: false,
                fill: true,
                fillStyle: 'white',
                parent: c
            });

        }
        
    }
    
    
    function getDotPosition( rad, sideDots, totalDots, d ){
        if( d < 0 ){ d = totalDots+d; }
        var sidePos = d / ( 1+sideDots );
        var c1 = corners[ Math.floor( sidePos ) % 6 ];
        var c2 = corners[ ( Math.floor( sidePos ) + 1 ) % 6 ];
        var relPos = sidePos % 1;
        var pos = {
            x: ( (1-relPos)  * c1.x ) + ( relPos * c2.x ),
            y: ( (1-relPos) * c1.y ) + ( relPos * c2.y ),
        };
        return pos;
    }

}
<file_sep>/code/roy-warp.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 8 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#335599';
	var innerRadius = 40;
	var outerRadius = 480;
	var lines = 60;

	for( var i=0; i<lines; i++ ){

		list.addLine({
			x0: function( t ){
				return width/2 + Math.sin( ( Math.sin( t*2*Math.PI )/7 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * innerRadius;
			},
			y0: function( t ){
				return height/2 + -Math.cos( ( Math.sin( t*2*Math.PI )/3 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * innerRadius;
			},
			x1: function( t ){
				return width/2 + Math.sin( (  Math.sin( -t*2*Math.PI )/11 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * outerRadius;
			},
			y1: function( t ){
				return height/2 + -Math.cos( ( Math.sin( -t*2*Math.PI )/5 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * outerRadius;
			},
			lineWidth: 1.5,
			strokeStyle: color.rgba( 255, 255, 255, 0.5 ),
			nr: i
		});

	}

}<file_sep>/code/roy-10kdotgrid.js
function onGLC(glc) {
	glc.loop();
	glc.size(400, 400);
	glc.setDuration(2.5);
	glc.setFPS(25);
	glc.setMode('single');
	glc.setEasing(false);
	glc.setMaxColors(24);
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#144';

	var grid = 70;
	var extra = 50;
	var maxDist = Math.sqrt( Math.pow( width/2 + extra, 2 ), Math.pow( height/2 + extra, 2 ) );
	
	for( var x=0; x<grid; x++){
		for( var y=0; y<grid; y++){
		
			var xpos = x * ( width + 2*extra ) / grid - extra;
			var ypos = y * ( height + 2*extra ) / grid - extra;
			var xdist = xpos - width/2;
			var ydist = ypos - height/2;
			var dist = Math.sqrt( Math.pow( xdist, 2 ) + Math.pow( ydist, 2 ) );

			list.addCircle({
				x: function( t ){
					return this.xpos + Math.sin( t*2*Math.PI ) * this.xdist/7;
				},
				y: function( t ){
					return this.ypos + Math.sin( t*2*Math.PI ) * this.ydist/7;
				},
				radius: 1.25,
				fill: true,
				fillStyle: '#fff',
				stroke: false,
				phase: dist / maxDist,
				xpos: xpos,
				ypos: ypos,
				xdist: xdist,
				ydist: ydist,
				speedMult: -1,
			});
		}
	}
}<file_sep>/code/roy-pattern.js
function onGLC(glc) {
    glc.loop();
    glc.size( 480, 480 );
    glc.setDuration( 2.5 );
    glc.setFPS( 30 );
    glc.setMode( 'single' );
    //glc.setEasing( false );
	glc.setMaxColors( 16 );
	glc.setQuality( 5 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = color.hsv( 200, 0, 1 );
    var margin = 80;
	var grid = 10;
    var dist = ( width - 2*margin ) / (grid-1);
    var size = Math.sin( 0.25*Math.PI ) * (dist/2);
    var dotSize = 2.5;

    var positions = [];
    for( var d=0; d<4; d++ ){
        positions[d] = {
            x: Math.sin( ( (d/4) + 0.125 ) * 2*Math.PI ) * size,
            y: -Math.cos( ( (d/4) + 0.125 ) * 2*Math.PI ) * size,
        }
    }    

    for( var x=0; x<(grid*2); x++ ){
        list.addRay({
            x: margin + x * dist/2 - dist/4,
            y: 0,
            angle: 90,
			length: height,
            strokeStyle: 'black',
            lineWidth: 0.15,
        });
    }
    
    for( var y=0; y<(grid*2); y++ ){
        list.addRay({
            x: 0,
            y: margin + y * dist/2 - dist/4,
            angle: 0,
			length: height,
            strokeStyle: 'black',
            lineWidth: 0.15,
        });
    }
    
    for( var x=0; x<grid; x++ ){
        for( var y=0; y<grid; y++ ){
            for( var d=0; d<4; d++ ){
                list.addCircle({
                    x: [
                        margin + x * dist + positions[d].x,
                        margin + x * dist + positions[(d+1)%4].x,
                    ],
                    y: [
                        margin + y * dist + positions[d].y,
                   	    margin + y * dist + positions[(d+1)%4].y,
                   	],
                    radius: dotSize,
                    fillStyle: 'black',
                    phase: (y/grid)/2 + (x/grid)/5
                });
            }
        }
    }
    
}<file_sep>/code/roy-elegance.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	//glc.setMode( "single" );
	//glc.setEasing( false );
	glc.setMaxColors( 16 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#335577';

	var c = list.addContainer({
		x: width/2,
		y: height/2,
		rotation: [-20,20]
	});
	var prev = c;
	var nr = 6;
	var size = 6;
	var segments = 27;

	for( var a=0; a<nr; a++ ){

		for( var i=0; i<segments; i++ ){

			var angle = ( i==0 ) ? a * 360/nr : 0;

			var prev = list.addRay({
				x: size,
				y: 0,
				length: size,
				angle: [ angle-i*1.25, angle+i*1.25 ],
				lineWidth: 2,
				strokeStyle: 'white',
				parent: prev
			});

			if( i == segments-1 ){
				prev = c;
			}
		}

	}
}<file_sep>/code/roy-boxedrays.js
function onGLC(glc) {
    glc.loop();
    glc.size( 600, 320 );
    glc.setDuration( 1 );
    glc.setFPS( 25 );
    glc.setMode( 'single' );
    glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#135';
    var nr = 51;
    var size = 120;
    var dist = 135;
    var diagSize = Math.sqrt( Math.pow( size, 2 ) + Math.pow( size, 2 ) );

    for( var j=0; j<2; j++ ){
    
        list.addRect({
            x: j ? width/2 - dist : width/2 + dist,
            y: height / 2,
            w: size * 2,
            h: size * 2,
            fill: true,
            fillStyle: color.rgba( 0, 0, 0, 0.3 ),
            stroke: true,
            strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
            lineWidth: 1,
        });

        for( var i=0; i<nr; i++ ){

            list.addRay({
                x: j ? width/2 - dist : width/2 + dist,
                y: height / 2,
                angle: j ? [ 360, 0 ] : [ 0, 360 ],
                strokeStyle: color.rgba( 255, 255, 255, 0.75 ),
                length: function( t ){
                    var a = ( t*2*Math.PI ) % (Math.PI/2);
                    if( a > Math.PI/4 ){ a = (Math.PI/2) - a; }
                    var l = size / Math.cos( a );
                    return l;
                },
                lineWidth: 2.25,
                phase: i/nr,
                speedMult: 1/nr,
            });
        }

    }

}<file_sep>/code/roy-diamonds.js
function onGLC(glc) {
	glc.loop();
	glc.size(400, 400);
	glc.setDuration( 3 );
	glc.setFPS( 25 );
	glc.setMode( 'single' );
	glc.setEasing( false );
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:

	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );
	var sizeX = 32;
	var sizeY = 48;
	var gutter = 2;
	var gridX = Math.ceil( width/(sizeX+gutter)/2 ) + 1;
	var gridY = Math.ceil( height/(sizeY+gutter)/2 ) + 1;
	
	for( var x=-gridX; x<gridX; x++ ){
		for( var y=-gridY; y<gridY; y++ ){
			
			var xpos = width/2 + x * ( sizeX*2 + gutter ) + ( ( y%2==0 ) ? -( sizeX + gutter/2 ) : 0 );
			var ypos = height/2 + y * ( sizeY + gutter );
			var dist = Math.sqrt( Math.pow( width/2-xpos, 2 ) + Math.pow( height/2-ypos, 2 ) );
			
			list.addStar({
				x: xpos,
				y: ypos,
				points: 2,
				innerRadius: function( t ){
					return Math.sin( t*Math.PI ) * sizeX;
				},
				outerRadius: sizeY,
				stroke: false,
				rotation: 22.5,
				fillStyle: function(t){
					if( t < 0.5 ){
						var sat = 0.75 + t/2;
						return color.hsv( this.frontColor, sat, 1 );
					} else {
						var val = 1 - (t-0.5);
						return color.hsv( this.frontColor, 1, val );
					}
				},
				phase: dist/600,
				frontColor: 200,
			});
			
		}
	}

}<file_sep>/code/roy-singlestar.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(5);
	glc.setFPS(30);
	glc.setMode("single");
	glc.setEasing(false);
	// glc.setMaxColors(256);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	var maxsize = 800;
	var points = 8;

	list.addStar({
		points: points,
		x: width/2,
		y: height/2,
		innerRadius: [ 180, 0 ],
		outerRadius: [ 0, 180 ],
		rotation: [ 0, 360 ],
		fill: true,
		stroke: false,
		fillStyle: color.animHSV(0, 60, 1, 1, 0, 1),
		strokeStyle: 'rgba(0,0,100,1)',
	});

}<file_sep>/code/unsuccessful/roy-lavalamp.js
function onGLC(glc) {
	glc.loop();
	glc.size(400, 400);
	glc.setDuration( 10 );
	glc.setFPS( 25 );
	glc.setMode( 'single' );
	glc.setEasing( false );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:

	glc.styles.backgroundColor = color.rgba( 50, 50, 50, 1 );
	var nr = 5;
	
	for( var n=0; n<nr; n++ ){

		var maxwidth = 100 + Math.random() * 200;
		var xpos = 50 + Math.random()*(width-100);
		var amp = Math.random() * 150;
		var offset = Math.random();
		var speed = Math.ceil( Math.random() * 6 - 3 );

		for( var i=0; i<height; i++ ){

			list.addRect({
				x: function( t ){
				   return this.xpos + Math.sin( t*2*Math.PI ) * this.amp;
				},
				y: i,
				w: function( t ){
					return this.maxwidth + Math.sin( t*2*Math.PI ) * this.maxwidth/2;
				},
				h: 1,
				stroke: false,
				fillStyle: color.rgba( 255, 80, 0, 0.5 ),
				phase: i/height + offset,
				maxwidth: maxwidth,
				amp: amp,
				xpos: xpos,
				speedMult: speed
			});
		}

	}

}<file_sep>/code/roy-crosswind.js
function onGLC(glc) {
    glc.loop();
    glc.size(600, 600);
    glc.setDuration(2.5);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#333';
	var nr = 67;
    var margin = 100;
    var x0 = margin;
    var x1 = width/2;
    var x2 = width/2;
    var x3 = width - margin;
    var amplitude = 60;
	
    for( var i=0; i<nr; i++ ){

        var baseY = margin + i * ( ( height - ( margin*2 ) ) / (nr-1) );
        var stepX = ( (width)-(2*x0) )/(nr-1);
        var amp = amplitude * ( Math.abs( baseY-(width/2) ) / Math.abs( (width/2)-margin ) );
        
        list.addBezierCurve({
            x0: x0 + i * stepX,
            y0: baseY,
            x1: function(t){
                return x1 + Math.cos( t*2*Math.PI ) * this._ampl;
            },
            y1: function(t){
                return this._baseY + Math.sin( t*2*Math.PI ) * this._ampl;
            },
            x2: function(t){
                return x2 + Math.cos( t*2*Math.PI ) * this._ampl;
            },
            y2: function(t){
                return this._baseY + Math.sin( (t+0.37)*2*Math.PI ) * this._ampl;
            },
            x3: x3 - i * stepX,
            y3: baseY,
            strokeStyle: '#fff',
            lineWidth: 1.5,
            phase: i/(nr*3.73),
            _baseY: baseY,
            _ampl: amp
        });
        
        list.addBezierCurve({
            y0: x0 + i * stepX,
            x0: baseY,
            y1: function(t){
                return x1 + Math.cos( t*2*Math.PI ) * this._ampl;
            },
            x1: function(t){
                return this._baseY + Math.sin( (t+0.71)*2*Math.PI ) * this._ampl;
            },
            y2: function(t){
                return x2 + Math.cos( t*2*Math.PI ) * this._ampl;
            },
            x2: function(t){
                return this._baseY + Math.sin( (t+0.37)*2*Math.PI ) * this._ampl;
            },
            y3: x3 - i * stepX,
            x3: baseY,
            strokeStyle: '#fff',
            lineWidth: 1.5,
            phase: i/(nr*4.73),
            _baseY: baseY,
            _ampl: amp,//amplitude - i*stepAmp
        });
        
    }
}<file_sep>/code/roy-hearts.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(5);
	glc.setFPS(30);
	// glc.setMode("single");
	// glc.setEasing(false);
	// glc.setMaxColors(256);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h;

	// your code goes here:
	var x = 0;
	var y = 0;
	var grid = 6;
	var dist = 400 / grid;
	var maxsize = dist * 2;

	glc.styles.lineWidth = 2;

	for( x = 0; x < grid+2; x++ ){
		for( y = 0; y < grid+2; y++ ){
			list.addHeart({
				x: x*dist - ( 0.5 * dist ),
				y: y*dist - ( 0.5 * dist ),
				w: [ 0, maxsize ],
				h: [ 0, maxsize ],
				rotation: [ -Math.random()*360, Math.random()*360 ],
				stroke: false,
				fill: true,
				strokeStyle: '#aa2266',
				fillStyle: '#ff3399',
			});
		}
	}

}		<file_sep>/code/roy-moire.js
function onGLC(glc) {
    glc.loop();
    glc.size(550, 550);
    glc.setDuration(5);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    glc.setQuality(20);
    glc.setMaxColors(128);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#123';
    nr = 63
    
    for( var j=0; j<2; j++ ){
        
        var rot = Math.random() * Math.PI * 2;

        for( var i=0; i<nr; i++ ){
            list.addCircle({
                x: function( t ){
                    return width/2 + Math.sin( t*2*Math.PI ) * this._r;
                },
                y: function( t ){
                    if( this._j % 2 == 0 ){
	                    return height/2 + Math.cos( t*2*Math.PI + this._rot ) * this._r;
                    } else {
                        return height/2 - Math.cos( t*2*Math.PI + this._rot ) * this._r;
                    }
                },
                radius: i*3,
                stroke: true,
                strokeStyle: color.rgba( 255, 255, 255, (i/nr) ),//'#fff',
                fill: false,
                blendMode: 'lighter',
                lineWidth: 0.5,
                _r: (nr-i),
                _j: j,
                _rot: rot,
                phase: (i/nr)/3 + (j/2)
            });

        }
        
    }
}
<file_sep>/README.md
# gifloopcoder-scripts

A collection of random experiments made with Bit101's gifloopcoder

See https://github.com/bit101/gifloopcoder

To run these:

* Copy the scripts to gifloopcoder's "sketches/code" folder, and open the index.html file in glc's folder.
* Or clone this repository "next to" gifloopcoder (so they're side by side in the same parent folder), and open the index.html from this repository.

Enjoy!
<file_sep>/code/roy-shading.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 2 );
	glc.setFPS( 30 );
	glc.setMode('single');
	glc.setEasing( false );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#125';
	var nr = 6;
	var radius = 70;
	
	for(var i=0; i<nr; i++ ){
		list.addPoly({
			x: function( t ){
				return width/2 + Math.sin( (t/nr)*2*Math.PI + this.offset ) * radius*1.1;
			},
			y: function( t ){
				return height/2 - Math.cos( (t/nr)*2*Math.PI + this.offset ) * radius*1.1;
			},
			radius: radius,
			sides: 3,
			fill: true,
			fillStyle: function( t ){
				var angle = this.nr/nr * 360 + ( t * ( 360/nr ) + 35 );
				var brightness = 0.2 + ( Math.abs( (angle%360) -180 ) / 180 ) * 0.8;
				return color.hsva( 200, 1, 1, brightness );
			},
			blendMode: 'screen',
			rotation: function( t ){
				return this.nr/nr * 360 + ( t * ( 360/nr ) + 90 );
			},
			nr: i,
			offset: (2*Math.PI) * (i/nr),
		});
	}

}<file_sep>/code/roy-corner.js
function onGLC(glc) {
	glc.loop();
	glc.size( 600, 400 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	//glc.setMode('single');
	//glc.setEasing(false);
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 0, 0, 0, 1 );
	var nr = 31;
	var v1 = 50;
	var v2 = width - 50;
	var padding = 0.1
	var dist = ( height * (1-padding*2) ) / nr;
	
	for( var i=0; i<nr; i++ ){

		list.addSegment({
			x0: v1,
			y0: height/2,
			x1: width/2,
			y1: height * padding + dist * i,
			segmentLength: 180,
			strokeStyle: color.hsva( 200, 1, 1, 1 ),
			lineWidth: [0,5],
			shadowColor: color.hsva( 200, 1, 1, 1 ),
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			shadowBlur: 10,
			phase: (i/nr)/7,
			globalAlpha: [ 0, 1 ]
		});

		list.addSegment({
			x0: v2,
			y0: height/2,
			x1: width/2,
			y1: height * padding + dist * i,
			segmentLength: 180,
			strokeStyle: color.hsva( 210, 1, 1, 1 ),
			lineWidth: [0,2.5],
			shadowColor: color.hsva( 210, 1, 1, 1 ),
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			shadowBlur: 10,
			phase: (i/nr)/7,
			globalAlpha: [ 0, 1 ]
		});
		
	}

}<file_sep>/code/roy-bright.js
function onGLC(glc) {
    glc.loop();
    glc.size(600, 400);
    glc.setDuration(2);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#333f49';
	var nr = 12500;
    var size = 350;
    var margin = 100;
    
    for( var i=0; i<nr; i++ ){
        
        var dist = ( Math.random() * Math.random() ) * size;
        var angle = Math.random() * 2 * Math.PI;
        var x = (width/2) + Math.sin( angle ) * dist;
        var y = (height/2) - Math.cos( angle ) * dist;

        list.addLine({
            x0: function( t ){
            	return this._x + Math.sin( t*2*Math.PI ) * this._len;
            },
            y0: function( t ){
            	return this._y - Math.cos( t*2*Math.PI ) * this._len;
            },
            x1: function( t ){
            	return this._x - Math.sin( t*2*Math.PI ) * this._len;
            },
            y1: function( t ){
            	return this._y + Math.cos( t*2*Math.PI ) * this._len;
            },
            _x: x,
            _y: y,
            _len: (size-dist)/8 + Math.random() * (size/10),
            lineWidth: 1.75,
            strokeStyle: color.rgba( 255, 255, 255, ( (size-dist)/size )*0.025 ),
            blendMode: 'lighter',
            speedMult: ( Math.random() < 0.5 ) ? 1 : -1,
            phase: (i/nr),
        });
    }


}
<file_sep>/code/roy-touchingballs.js
function onGLC(glc) {
    glc.loop();
    glc.size( 500, 500 );
    glc.setDuration( 3 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing(false);
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#456';

	var grid = 4;
    var gridSize = 100;
	var maxSize = Math.sqrt( Math.pow( gridSize/2, 2 ) + Math.pow( gridSize/2, 2 ) );
	var sizeFactor = (gridSize/2) / maxSize;
    
    var container = list.addContainer({
		x: width / 2,
		y: height / 2,
        rotation: 21, 
	});
	
    
    for( var x=-grid; x<=grid; x++ ){
        for( var y=-2*grid; y<=2*grid; y++ ){
            var oddeven = y % 2;
            list.addCircle({
                x: x * gridSize + ( oddeven ? -gridSize/4 : gridSize/4 ),
                y: y * gridSize/2,
                stroke: false,
                fillStyle: oddeven ? '#6af' : '#fd6',
                radius: function( t ){
                	return ( maxSize * 0.5 ) + Math.sin( t*2*Math.PI ) * ( maxSize * (sizeFactor-0.5) );
            	},
                parent: container,
                oddeven: oddeven,
                phase: oddeven * 0.5,
            });
        }
    }
    
}
<file_sep>/code/roy-beziersines.js
function onGLC(glc) {
	glc.loop();
	glc.size( 500, 300 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 50, 50, 50, 1 );

	var waves = 11;
	var nr = 9;

	for( var w=0; w<waves; w++ ){

		for( var i=0; i<nr; i++ ){
			if( i != 0 ){
				list.addCircle({
					x: i * ( width/nr ),
					y: function( t ){
						return getY( t, this.nr, 0, false );
					},
					radius: 2,
					stroke: false,
					fill: true,
					fillStyle: color.rgba( 255, 255, 255, 0.6 ),
					nr: i,
					phase: w / ( waves * 2.2 )
				});
			}

			list.addBezierCurve({
				x0: function( t ){
					return getX( t, this.nr, 0, true );
				},
				y0: function( t ){
					return getY( t, this.nr, 0, false );
				},
				x1: function( t ){
					return getX( t, this.nr, -1, true );
				},
				y1: function( t ){
					return getY( t, this.nr, -1, true );
				},
				x2: function( t ){
					return getX( t, this.nr+1, 1, true );
				},
				y2: function( t ){
					return getY( t, this.nr+1, 1, true );
				},
				x3: function( t ){
					return getX( t, this.nr, 1, false );
				},
				y3: function( t ){
					return getY( t, this.nr, 1, false );
				},
				stroke: true,
				strokeStyle: color.rgba( 255, 220, 100, 0.6 ),
				lineWidth: 2,
				nr: i,
				phase: w / ( waves * 2.2 )
			});
		}

	}


	function getX( t, i, offset, reverse ){
		var currentX = i * ( width / nr );
		var offsetX = ( i + offset ) * ( width / nr );
		if( reverse ){
			return currentX - ( offsetX - currentX )/5;
		}
		return offsetX;
	}

	function getY( t, i, offset, reverse ){
		var currentY = height/2 + Math.sin( ( t + ( i / nr ) ) * 2 * Math.PI ) * 100;
		var offsetY = height/2 + Math.sin( ( t + ( (i + offset ) / nr ) ) * 2 * Math.PI ) * 100;
		if( reverse ){
			return currentY - ( offsetY - currentY )/5;
		}
		return offsetY;
	}


}<file_sep>/code/roy-textspiral.js
function onGLC(glc) {
	glc.loop();
	glc.size( 320, 320 );
	glc.setDuration( 3 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 32 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 50, 80, 110, 1 );

	var nr = 200;
	var size = 330;
	var scale = 0.98;
	var str = 'GIFLOOPCODER';
	var letterAngle = 13;

	for( var i=0; i<nr; i++ ){
		var c = list.addContainer({
			x: width/2,
			y: height/2,
			rotation: [ i * letterAngle, ( i + str.length ) * letterAngle ]
		});

		var currentSize = getSize( i );
		var targetSize = getSize( i + str.length );

		list.addText({
			text: str.charAt( i % str.length ),
			x: 0,
			y: [ -currentSize, -targetSize ],
			rotation: 4,
			fontSize: [ currentSize/3, targetSize/3 ],
			fontWeight: 'bold',
			fontFamily: 'Roboto Condensed',
			fontStyle: 'normal',
			fillStyle: 'white',
			parent: c
		});

	}

	var gradient = color.createRadialGradient( 0, 0, 0, 0, 0, width/2 );
	gradient.addColorStop( 0, color.rgba( 50, 80, 110, 1 ) );
	gradient.addColorStop( 1, color.rgba( 50, 80, 110, 0 ));

	list.addCircle({
		x: width/2,
		y: height/2,
		radius: width/2,
		stroke: false,
		fill: true,
		fillStyle: gradient
	});

	function getSize( i ){
		return size * Math.pow( scale, i );
	}
}<file_sep>/code/roy-concentric-circles.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 4 );
	glc.setFPS( 30 );
	glc.setMode('single');
	glc.setEasing( false );
	glc.setMaxColors( 8 );
	glc.setQuality( 10 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#fff';
	var nr = 9;
	var sources = [];
	var baseSize = 200;
	var steps = 17;
	var sizeStep = 11.5;
	var cols = [ '#eef6ff', '#136' ];

	for( var i=0; i<nr; i++ ){
		var src = [];
		src['x'] = 50 + i%3 * 150;
		src['y'] = 50 + Math.floor(i/3) * 150;
		src['r'] = 20 + Math.random() * 40;
		src['d'] = Math.random() < 0.5 ? 1 : -1;
		sources.push( src );
	}
	
	for( var i=0; i<steps; i++ ){
		for( var s=0; s<sources.length; s++ ){
			
			list.addCircle({
				x: function( t ){
					return this.xpos + this.dir * Math.sin( t*2*Math.PI ) * this.rad;
				},
				y: function( t ){
					return this.ypos - Math.cos( t*2*Math.PI ) * this.rad;
				},
				xpos: sources[s]['x'],
				ypos: sources[s]['y'],
				rad: sources[s]['r'],
				dir: sources[s]['d'],
				radius: baseSize - ( i * sizeStep ),
				stroke: false,
				fillStyle: cols[ i%cols.length ],
				phase: s/nr,
			});
	
		}
	}
}<file_sep>/code/roy-blackstar.js
function onGLC(glc) {
	glc.loop();
	glc.size(400, 400);
	glc.setDuration(3.5);
	glc.setFPS(30);
	glc.setMode('single');
	//glc.setEasing(false);
	glc.setMaxColors(256);
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#fff';
	var size = 140;
	var points = 5;
	var innerRatio = 0.5 * ( 3 - Math.sqrt( points ) ); // from http://www.jdawiseman.com/papers/easymath/surds_star_inner_radius.html

	list.addStar({
		x: width / 2,
		y: height / 2,
		outerRadius: [ size, innerRatio * size ],
		innerRadius: [ innerRatio * size, size ],
		points: points,
		rotation: [ -90, (180/points)-90 ],
		stroke: false,
		fillStyle: '#000',
	});

}<file_sep>/code/roy-memegen.js
function onGLC(glc) {
    glc.loop();
    glc.size( 600, 600 );
    glc.setDuration( 3 );
    glc.setFPS( 25 );
    glc.setMode( 'single' );
    glc.setEasing( false );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#333';
    glc.context.imageSmoothingEnabled = true;
    
    parts = [
        [ 'Just because', 'When', 'Sometimes', 'If', 'Whenever', 'In case' ],
        [ 'life', 'your best friend', 'an orange', 'the police', 'the internet', 'your enemy', 'your family', 'your boss', 'someone', 'your mom' ],
        [ 'looks like', 'hands you', 'isn\'t', 'needs', 'wants', 'makes you think of', 'asks you for' ],
        [ 'a ride,', 'lemons,', 'monkeys,', 'something wonderful,', 'a banana,', 'happiness,', 'a kiss,', 'your help,', 'the space shuttle,', 'the remote,' ],
        [ 'always', 'never', 'you should', 'remember to', 'you shouldn\'t', 'it\'s okay to' ],
        [ 'cry.', 'party.', 'be happy.', 'say no.', 'kiss.', 'do nothing.', 'oblige.', 'give up', 'make lemonade.' ]
    ];
    
    words = [];
    for( var i=0; i<parts.length; i++ ){
        words.push( parts[i][ Math.floor( Math.random() * parts[i].length ) ] );
    }
    
    var lineHeight = 50;
    var fontSize = 40;
    var yOffset = ( height - ( ( words.length - 1 ) * lineHeight ) ) / 2;
    
    for( var i=0; i<words.length; i++ ){
        
        var container = list.addContainer({
            //x: width/2,
            y: yOffset + i*lineHeight,
            x: function( t ){
                return ( width/2 ) + Math.cos( t*2*Math.PI ) * 20;
            },
//             scaleX : 1,
//             scaleY: function( t ){
//                 return Math.cos( t*2*Math.PI );
//             },
            phase: 1 - ( i / words.length )/5,
        });
	
        
        list.addText({
            x: 0,
            y: 0,
            text: words[i],
			fontSize: fontSize,
			fontWeight: "bold",
			fontFamily: '"Open Sans", sans-serif',
			fontStyle: 'normal',
            fillStyle: 'white',
            stroke: true,
            strokeStyle: '#fff',
            lineWidth: 1,
            parent: container,
        });
        
    }

}
<file_sep>/code/roy-flair.js
function onGLC(glc) {
    glc.loop();
    glc.size(500, 500);
    glc.setDuration(3.5);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
    glc.setMaxColors( 128 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#234';

    var nr = 21;
    var rad = 100;
    var size = 110;
    var cols = [ '#f00', '#0f0', '#00f' ];
    var phaseChange = 0.025;
    
    for( var c=0; c<cols.length; c++ ){

        for( var i=0; i<nr; i++ ){

            var container = list.addContainer({
                x: function( t ){
                    var ti = this.i + Math.cos( t*2*Math.PI ) * (i/nr);
                    return width/2 + Math.sin( (ti/nr)*2*Math.PI ) * rad;
                },
                y: function( t ){
                    var ti = this.i + Math.cos( t*2*Math.PI ) * (i/nr);
                    return height/2 - Math.cos( (ti/nr)*2*Math.PI ) * rad;
                },
                baseAngle: (i/nr) * 360 - 90,
                i: i,
                rotation: function( t ){
                    return this.baseAngle + Math.sin( t*2*Math.PI ) * 30;
                },
                phase: c * phaseChange,
            });

            list.addRay({
                x: 0,
                y: 0,
                length: size,
                parent: container,
                lineWidth: 10,
                strokeStyle: cols[c],
                blendMode: 'screen',
            });

        }
        
    }

}<file_sep>/code/iris-hearts.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 1 );
	glc.setFPS( 30 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#335599';
	var rings = 5;
	var size = 45;
	var mindist = 60;

	for( var r=0; r<rings; r++){

		var radius = 32 + r * mindist;
		var circlesize = 2 * Math.PI * radius;
		var nrofhearts = Math.max( Math.floor( circlesize / mindist ), 1 );
		var col = color.hsv( 180+(r/rings)*180, 0.25, 1 );

		for( var i=0; i<nrofhearts; i++ ){
			list.addHeart({
				x: function( t ){
					return (width/2) + Math.sin( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofhearts ) ) * this.p_radius;
				},
				y: function( t ){
					return (height/2) + -Math.cos( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofhearts ) ) * this.p_radius;
				},
				rotation: function( t ){
					return ( ( t+this.p_nr ) / this.p_nrofhearts ) * 360;
				},
				w: size,
				h: size,
				stroke: false,
				fill: true,
				fillStyle: col,
				shadowColor: color.rgba( 0, 0, 0, 0.25 ),
				shadowOffsetX: 5,
				shadowOffsetY: 5,
				shadowBlur: 10,
				p_radius: radius,
				p_nr: i,
				p_nrofhearts: nrofhearts
			});
		}
	}

}<file_sep>/code/unsuccessful/roy-weirdbubble.js
function onGLC(glc) {
    glc.loop();
    glc.size(400, 400);
    glc.setDuration(2.5);
    glc.setFPS(20);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:

	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );
    var nr = 300;
    var wmax = 150;
    
    for( var i=0; i<nr; i++ ){
        var wtotal = Math.sin( ( i/nr ) * Math.PI ) * wmax ;
        
        list.addRect({
            x: width/2,
            y: i + ( width-nr)/2,
            w: wtotal,
            h: 1,
            stroke: false,
            fillStyle: color.rgba( 80, 80, 80, 1 )
        });

        list.addRect({
            x: function( t ){
                var w1 = Math.sin(t*2*Math.PI) * this.wtotal;
                if( w1 > 0 ){
                	return width/2 - this.wtotal/2 + w1/2;    
                } else {
                    return width/2 + this.wtotal/2 + w1/2;
                }
            },
            y: i + ( width-nr)/2,
            w: function( t ){
            	return Math.sin(t*2*Math.PI) * this.wtotal;
            },
            h: 1,
            stroke: false,
            fillStyle: 'green',
            wtotal: wtotal,
            phase: i/nr
        });
        
        
        list.addRect({
            x: function( t ){
                var w1 = -Math.sin(t*2*Math.PI) * this.wtotal;
                if( w1 < 0 ){
                	return width/2 + this.wtotal/2 + w1/2;    
                } else {
                    return width/2 - this.wtotal/2 + w1/2;
                }
            },
            y: i + ( width-nr)/2,
            w: function( t ){
            	return -Math.sin(t*2*Math.PI) * this.wtotal;
            },
            h: 1,
            stroke: false,
            fillStyle: 'blue',
            wtotal: wtotal,
            phase: i/nr
        });


    }
    
//     var gradient = color.createLinearGradient( 0, -height/2, 0, height/2 );
//     gradient.addColorStop( 0, '#f00' );
//     gradient.addColorStop( 1, '#00f' );

//     var gradient2 = color.createLinearGradient( 0, -height/2, 0, height/2 );
//     gradient2.addColorStop( 0, '#224' );
//     gradient2.addColorStop( 0.5, '#66b' );
//     gradient2.addColorStop( 1, '#ddf' );
    

}<file_sep>/code/roy-present.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 5 );
	glc.setFPS( 25 );
	// glc.setMode('single');
	// glc.setEasing(false);
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 30, 50, 70, 1 );
	var lw1 = 7;
	var lw2 = 7;
	var col1 = color.rgba( 40, 180, 60, 1 );
	var col2 = color.rgba( 255, 60, 40, 1 );

	var c = list.addContainer({
		x: width/2,
		y: height/2 + 10,
	});
	
	// box outlines
	var lines1 = [
		[ -120, -80, -120, 80 ],
		[ 120, 80, 120, -80 ],
		[ -120, -80, 0, -120 ],
		[ 120, -80, 0, -120 ],
		[ -120, 80, 0, 120 ],
		[ 120, 80, 0, 120 ],
		[ -120, -80, 0, -40 ],
		[ 120, -80, 0, -40 ],
		[ 0, -40, 0, 120 ]
	];

	for( var i=0; i<lines1.length; i++ ){
		list.addSegment({
			x0: lines1[i][0],
			y0: lines1[i][1],
			x1: lines1[i][2],
			y1: lines1[i][3],
			lineWidth: lw1,
			stroke: true,
			strokeStyle: col1,
			segmentLength: 160,
			parent: c,
			globalAlpha: getAlpha
		});
	}

	// ribbon
	var lines2 = [
		[ 60, -60, -60, -100 ],
		[ 60, -100, -60, -60 ],
		[ -60, -60, -60, 100 ],
		[ 60, 100, 60, -60 ]
	];
		
	for( var i=0; i<lines2.length; i++ ){
		list.addSegment({
			x0: lines2[i][0],
			y0: lines2[i][1],
			x1: lines2[i][2],
			y1: lines2[i][3],
			lineWidth: lw2,
			stroke: true,
			strokeStyle: col2,
			segmentLength: 160,
			parent: c,
			globalAlpha: getAlpha
		});
	}
	
	// knot
	var arcs = [
		[ 10, -116, 90 ],
		[ -10, -110, -90 ]
	];
	
	for( var i=0; i<arcs.length; i++ ){
		list.addArcSegment({
			x: arcs[i][0],
			y: arcs[i][1],
			radius: 30,
			lineWidth: lw2,
			stroke: true,
			strokeStyle: col2,
			rotation: arcs[i][2],
			arc: [0,720],
			parent: c,
			globalAlpha: getAlpha
		});        
	}

	function getAlpha( t ){
		return Math.min( 1, Math.sin( t*Math.PI )*2 );
	}
	
}<file_sep>/code/roy-cubes.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(5);
	glc.setFPS(30);
	glc.setMode("single");
	glc.setEasing(false);
	// glc.setMaxColors(256);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h;

	// your code goes here:
	var maxsize = 800;
	var nr = 31;

	glc.styles.lineWidth = 4;

/*	list.addRect({
		x: width/2,
		y: height/2,
		w: width,
		h: height,
		fill: true,
		fillStyle: '#99aaee'
	});*/

	for( var i = 0; i < nr; i++ ){
		var size = Math.sin( (i*2*Math.PI)/nr ) * maxsize;
		list.addCube({
			x: width/2,
			y: height/2,
			z: [0, 100],
			rotationX: [0, 180],
			rotationY: [0, 180],
			rotationZ: [0, 180],
			size: [ size, 0 ],
			strokeStyle: ['rgba(0,0,0,0)','rgba(0,0,0,1)'],
			phase: i/nr
		});

	}

}<file_sep>/code/roy-beziers.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(3);
	glc.setFPS(30);
	//glc.setMode("single");
	//glc.setEasing(false);
	glc.setMaxColors(256);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	var nr = 5;
	var amp = 2;
	var counter = 0;

	for( var i=0; i<nr; i++ ){
		list.addBezierCurve({
			x0: width/2,
			y0: height/2,
			x1: getInnerX,
			y1: getInnerY,
			x2: width/2 + Math.sin( i*(2*Math.PI)/nr ) * 200,
			y2: height/2 + -Math.cos( i*(2*Math.PI)/nr ) * 200,
			x3: getOuterX,
			y3: getOuterY,
			fill: false,
			lineWidth: 2,
			strokeStyle: '#000000'
		});
	}

	function getInnerX( t ){
		var progress = counter + ( (t-0.5) * 2 ) * amp;
		return width/2 + Math.sin( progress*(2*Math.PI)/nr ) * 10;
	}

	function getInnerY( t ){
		var progress = counter + ( (t-0.5) * 2 ) * amp;
		return width/2 + -Math.cos( progress*(2*Math.PI)/nr ) * 10;
	}

	function getOuterX( t ){
		var progress = counter + ( (t-0.5) * 2 ) * amp;
		return width/2 + Math.sin( progress*(2*Math.PI)/nr ) * 300;
	}

	function getOuterY( t ){
		var progress = counter + ( (t-0.5) * 2 ) * amp;
		var y = height/2 + -Math.cos( progress*(2*Math.PI)/nr ) * 300;
		counter++;
		counter = counter%nr;
		return y;
	}
}<file_sep>/code/roy-pixels3.js
var pixels = [];

function onGLC(glc) {
    glc.loop();
    glc.size( 360, 360);
    glc.setDuration( 1 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing(false);
    glc.setMaxColors( 256 );
    glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = color.rgb( 0, 0, 0 );
    var imgx = 60;
    var imgy = 60;
    var blocksize = 6;
    var hvar = 10;
    var svar = 0.1;
    var vvar = 0.1;

	var img = list.addImage({
		x: imgx/2,
		y: imgy/2,
		url: "file:///C:/Users/Roy/Desktop/glc-windows/lianne3-square.png",
        globalAlpha: function( t ){
            return ( pixels.length == 0 ) ? 1 : 0;
        },
	});
	
    for( var x=0; x<imgx; x++ ){
        for( var y=0; y<imgy; y++ ){
            list.addCircle({
                x: x * blocksize + (blocksize/2),
                y: y * blocksize + (blocksize/2),
                //radius: [ blocksize/2, blocksize ],
                radius: function( t ){
                    return blocksize*0.85 + Math.sin( t*2*Math.PI ) * blocksize*0.25;
                },
                stroke: false,
                fillStyle: function( t ){
                    if( pixels.length != 0 ){
	                    var pixel = pixels[ this.xpos ][ this.ypos ];
                        // calculate hue
	                    var f1 = Math.sin( ( t+this.rand1 ) * 2*Math.PI );
                        var hue = Math.round( pixel[3] + f1*hvar );
                        hue = ( hue + 360 ) % 360;
                        // calculate sat
                        var f2 = Math.sin( ( t+this.rand2 ) * 2*Math.PI );
                        var sat = pixel[4] + f2*svar;
                        // ... and val
                        var f3 = Math.sin( ( t+this.rand3 ) * 2*Math.PI );
                        var val = pixel[5] + f3*vvar;
                        // return the slightly modified color
                        return color.hsv( hue, sat, val );
                    } else {
                    	return this.defaultColor;    
                    }
                },
                xpos: x,
                ypos: y,
                defaultColor: color.rgba( 0, 0, 0, 0 ),
                rand1: Math.random(),
                rand2: Math.random(),
                rand3: Math.random(),
                phase: Math.random(),
            });
        }
    }
    
    // harvest color info from the loaded image for use in the fillStyle function
    glc.onExitFrame = function(t) {
        if( t == 0 && pixels.length == 0 ){
            for( var x=0; x<imgx; x++ ){
                pixels[x] = [];
                for( var y=0; y<imgy; y++ ){
                    var pixel = glc.context.getImageData( x, y, 1, 1 ).data;
                    var hsv = rgb2hsv( pixel[0], pixel[1], pixel[2] );
                    pixels[x][y] = [ pixel[0], pixel[1], pixel[2], hsv.h, hsv.s, hsv.v ];
                }
            }
        }
    }
}


/* slightly modified from: http://stackoverflow.com/a/8023734 */

function rgb2hsv () {
    var rr, gg, bb,
        r = arguments[0] / 255,
        g = arguments[1] / 255,
        b = arguments[2] / 255,
        h, s,
        v = Math.max(r, g, b),
        diff = v - Math.min(r, g, b),
        diffc = function(c){
            return (v - c) / 6 / diff + 1 / 2;
        };

    if (diff == 0) {
        h = s = 0;
    } else {
        s = diff / v;
        rr = diffc(r);
        gg = diffc(g);
        bb = diffc(b);

        if (r === v) {
            h = bb - gg;
        }else if (g === v) {
            h = (1 / 3) + rr - bb;
        }else if (b === v) {
            h = (2 / 3) + gg - rr;
        }
        if (h < 0) {
            h += 1;
        }else if (h > 1) {
            h -= 1;
        }
    }
    return {
        h: Math.round(h * 360),
        s: s,
        v: v
    };
}<file_sep>/code/roy-packages.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 400, 400 );
	glc.setDuration( 2 );
	glc.setFPS( 30 );
	glc.setMode( "single" );
	//glc.setEasing( false );
	glc.setMaxColors( 32 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#446f88';
	var grid = 5;
	var size = width / grid;
	var points = 6;
	var angle = ( 120/360 ) * 2 * Math.PI;
	var dist = size;
	var transx = Math.sin( angle ) * dist;
	var transy = -Math.cos( angle ) * dist;

	for( var x=-(grid+1); x<(grid+1); x++ ){

		list.addLine({
			x0: width/2 + ( -grid * transx ) + ( x * transx ),
			y0: height/2 + ( x * transy ) - ( -grid * transy ) - Math.cos( angle ) * ( size/2.5 ),
			x1: width/2 + ( grid * transx ) + ( x * transx ),
			y1: height/2 + ( x * transy ) - ( grid * transy ) - Math.cos( angle ) * ( size/2.5 ),
			lineWidth: size/1.8,
			strokeStyle: color.rgba( 0, 0, 0, 0.3 ),

		});

		var linePhase = Math.random();

		for( var y=-(grid+1); y<(grid+1); y++ ){

			var xpos = width/2 + ( y * transx ) + ( x * transx );
			var ypos = height/2 + ( x * transy ) - ( y * transy );
			var nextxpos = width/2 + ( (y-1) * transx ) + ( x * transx );
			var nextypos = height/2 + ( x * transy ) - ( (y-1) * transy );

			list.addPoly({
				x: [ xpos, nextxpos ],
				y: [ ypos, nextypos ],
				radius: size/2.5,
				sides: points,
				stroke: true,
				strokeStyle: color.rgba( 0, 0, 0, 0.4 ),
				lineWidth: 1.5,
				rotation: 180 / points,
				fill: true,
				fillStyle: '#eecc8f',
				phase: linePhase
			});
			
			list.addStar({
				x: [ xpos, nextxpos ],
				y: [ ypos, nextypos ],
				outerRadius: size/2.5,
				innerRadius: 0,
				points: points/2,
				stroke: true,
				strokeStyle: color.rgba( 0, 0, 0, 0.4 ),
				lineWidth: 1.5,
				rotation: -180 / points,
				fill: false,
				phase: linePhase
			});

		}
	}

}<file_sep>/code/roy-shadowdots.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 420, 420 );
	glc.setDuration(2);
	glc.setFPS(30);
	//glc.setMode("single");
	//glc.setEasing(false);
	glc.setMaxColors(16);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#ffffff';
	var grid = 5;
	var padding = 40;
	var gridsizeX = ( width - 2*padding ) / grid;
	var gridsizeY = ( height - 2*padding ) / grid;

	for( var x=0; x<grid; x++){
		for( var y=0; y<grid; y++){

			var basex = padding + ( x * gridsizeX + gridsizeX/2 );
			var basey = padding + ( y * gridsizeY + gridsizeY/2 );
			var topx = basex + ( basex - (width/2) ) / 15;
			var topy = basey + ( basey - (width/2) ) / 15;
			var fromcenter = Math.sqrt( Math.pow( ( basex - (width/2) ), 2 ) + Math.pow( ( basey - (height/2) ), 2 ) );

			list.addCircle({
				x: [ basex, topx ],
				y: [ basey, topy ],
				radius: [ 25, 28 ],
				stroke: false,
				fill: true,
				fillStyle: color.rgba( 255, 255, 255, 1 ),
				shadowColor: [ color.rgba( 0, 0, 0, 0.4 ), color.rgba( 0, 0, 0, 0.25 ) ],
				shadowOffsetX: [ 0, 15 ],
				shadowOffsetY: [ 0, 15 ],
				shadowBlur: [ 0, 20 ],
				phase: -fromcenter  / 750
			});

		}
	}

}<file_sep>/code/roy-marquee.js
function onGLC(glc) {
	glc.loop();
	glc.size( 600, 300 );
	glc.setDuration( 3 );
	glc.setFPS( 15 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 30, 50, 70, 1 );

	var marquee = [
		' ******   ***      ******       **   **      ',
		'***  ***  ***     ***  ***     **** ****     ',
		'***       ***     ***  ***     *********     ',
		'*** ****  ***     ***           *******      ',
		'***  ***  ***     ***  ***       *****       ',
		'***  ***  ***     ***  ***        ***        ',
		' ******   ******   ******          *         ',
	];

	var dist = 12;
	var columns = Math.floor( width/dist );
	var nrofFrames = marquee[0].length;
	var paddingY = ( height - marquee.length * dist ) / 2;


	for( var x=0; x<columns; x++ ){
		for( var y=0; y<marquee.length; y++ ){

			list.addCircle({
				x: dist/2 + x*dist,
				y: dist/2 + y*dist + paddingY,
				radius: dist * 0.35,
				stroke: false,
				fillStyle: 'white',
				shadowColor: function( t ){
					return getOnOff( t, this.column, this.row ) ? color.rgba( 255, 255, 150, 1 ) : color.rgba( 255, 255, 150, 0 );
				},
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				shadowBlur: dist,
				globalAlpha: function( t ){
					return getOnOff( t, this.column, this.row ) ? 1 : 0.2;
				},
				column: x,
				row: y,
			});

		}
	}

	function getOnOff( t, x, y ){
		var frame = Math.round( t*nrofFrames );
		var char = marquee[ y ].charAt( ( x + frame ) % marquee[ y ].length );
		return ( char == '*' ) ? true : false;
	}

}<file_sep>/code/roy-flame.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 1.5 );
	glc.setFPS( 25 );
	glc.setMode('single');
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 70, 50, 30, 1 );
	var nr = 250;
	var r1 = 20;
	var r2 = 50;

	var bgGradient = color.createRadialGradient( 0, 0, 0, 0, 0, 300 );
	bgGradient.addColorStop( 0, color.rgba( 255, 180, 0, 0.3 ) );
	bgGradient.addColorStop( 1, color.rgba( 255, 160, 0, 0 ) );

	list.addCircle({
		x: width/2,
		y: 260,
		radius: 300,
		fillStyle: bgGradient,
		stroke: false
	});
	
	var gradient1 = color.createRadialGradient( 0, 0, 0, 0, 0, r1 );
	gradient1.addColorStop( 0, color.rgba( 255, 220, 0, 1 ) );
	gradient1.addColorStop( 1, color.rgba( 255, 200, 0, 0.25 ) );

	var gradient2 = color.createRadialGradient( 0, 0, 0, 0, 0, r2 );
	gradient2.addColorStop( 0, color.rgba( 255, 180, 0, 0.65 ) );
	gradient2.addColorStop( 1, color.rgba( 255, 160, 0, 0 ) );
 
	
	for( var i=0; i<nr; i++ ){
		list.addCircle({
			x: function( t ){
				return width/2 + Math.sin( t * Math.PI ) * this.amp;
			},
			y: [ 325, 200 - Math.random()*175 ],
			radius: [ r1, r2 ],
			stroke: false,
			fill: true,
			fillStyle: [ gradient1, gradient2 ],
			globalAlpha: [ 0.75, 0 ],
			phase: Math.random(),
			wl: -Math.random()*100 - 50,
			amp: ( Math.random() * 80 ) - 40,
			speedMult: Math.ceil( Math.random() * 2 )
		});
	}

}<file_sep>/code/roy-swarm.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(600, 400);
	glc.setDuration(2);
	glc.setFPS(30);
	glc.setMode("single");
	//glc.setEasing(false);
	glc.setMaxColors(16);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#002244';
	var nr = 500;
	var variance = 600;

	for( var i=0; i<nr; i++ ){

		list.addBezierSegment({
			x0: 100,
			y0: 200,
			x1: getVariance(100),
			y1: getVariance(200),
			x2: getVariance(500),
			y2: getVariance(200),
			x3: 500,
			y3: 200,
			lineWidth: function( t ){
				return 0.1 + ( Math.sin( t * Math.PI ) * 3 );
			},
			strokeStyle: color.randomRGB( 51, 255 ),
			percent: 0.1,
			phase: ( i / nr ) / 3
		});

		function getVariance( offset ){
			var angle = Math.random() * (2*Math.PI);
			var dist = Math.random()*variance - (variance/2);
			return offset + ( Math.sin( angle ) * dist );
		}

	}
}<file_sep>/code/gifissue.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(400, 400);
	glc.setDuration(2);
	glc.setFPS(30);
	glc.setMode("single");
	glc.setEasing(false);
	glc.setMaxColors(8);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	var nr = 6;

	for( var x=0; x<nr+2; x++ ){
		for( var y=0; y<nr+2; y++ ){
			var r = Math.min( 255, Math.floor( x * 32 ) );
			var g = Math.min( 255, Math.floor( y * 32 ) );
			var b = 0;
			list.addRect({
				x: x*(width/nr) - (width/nr)/2,
				y: y*(height/nr) - (height/nr)/2,
				w: 68,
				h: 68,
				rotation: [ 0, 90 ],
				fill: true,
				stroke: false,
				/*fillStyle: color.rgba( r, g, b, 1 ),*/
				fillStyle: 'rgba(' + r + ',' + g + ',' + b + ',1)',
			});
		}
	}

}<file_sep>/code/android-circles.js
function onGLC(glc) {
    glc.loop();
    glc.size( 600, 600 );
    glc.setDuration( 4 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing( false );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#000';
	var colors = [
        'magenta',
        'yellow',
        'cyan'
    ];
    
    for( var i=0; i<colors.length; i++ ){

        var ir = 120 * i; //Math.random() * 360;
        
		var container = list.addContainer({
			x: width / 2,
			y: height / 2,
            rotation: [ ir, ir+360 ]
		});
		
        list.addCircle({
			x: ( Math.random() * 10 ) - 5,
			y: ( Math.random() * 10 ) - 5,
			radius: 140,
            lineWidth: 12,
            strokeStyle: colors[i],
            stroke: true,
            fill: false,
            parent: container,
            blendMode: 'lighten'
		});
	
    }
}<file_sep>/code/roy-bokeh-video.js
function onGLC(glc) {
    glc.loop();
	glc.size( 1280, 720 );
	glc.setDuration( 30 );
	glc.setFPS( 60 );
	glc.setMode('single');
	glc.setEasing( false );
    glc.setMaxColors( 256 );
	//glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#236';
	
    var nr = 450;
    
    for( var i=0; i<nr; i++ ){
        
        var col = 100 + Math.random() * 120;
        var xpos = ( Math.random() * ( width * 5 ) ) - ( width * 2);
        var zpos = Math.random() * 10;
        var size = Math.random() * ( 30 * zpos ) + 10;
        var trans = 0.3 + Math.random() * 0.3;
        
        var gradient = color.createRadialGradient( 0, 0, 0, 0, 0, size );
 	   	gradient.addColorStop( 0, color.hsva( col, 1, 1, trans ) );
    	gradient.addColorStop( 0.5, color.hsva( col, 1, 1, (trans*0.95) ) );
    	gradient.addColorStop( 0.9, color.hsva( col, 1, 1, (trans*0.05) ) );
    	gradient.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
        
        list.addCircle({
            x: [ xpos + ( zpos * 300 ), xpos - ( zpos * 300 ) ],
            y: Math.random() * height,
            radius: size,
            //fillStyle: color.hsva( 80+Math.random()*100, 1, 1, 0.6 ),
            fillStyle: gradient,
            blendMode: 'screen',
        });
    }
    
}
<file_sep>/code/roy-interference-video.js
function onGLC(glc) {
    glc.loop();
	glc.size( 640, 480 );
	glc.setDuration( 30 );
	glc.setFPS( 60 );
	glc.setMode('single');
	glc.setEasing( false );
    glc.setMaxColors( 256 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#235';
	var sources = [];
    var nr = 6;
    var gridx = 640/6 + 1;
    var gridy = 480/6 + 1;
    var margin = 0;
    var dist = 6;
    var size = 2.3;
    var maxWavelength = 300;
    
	for( var i=0; i<nr; i++ ){
        sources.push({
            x: Math.random() * width,
            y: Math.random() * height,
            wl: ( maxWavelength/2 ) + Math.random() * (maxWavelength/2),
            speed: Math.ceil( Math.random()*33 ),
        });
    }

    for( var x=0; x<gridx; x++ ){
        for( var y=0; y<gridy; y++ ){
            
            var c = list.addCircle({
                x: margin + x * dist,
                y: margin + y * dist,
                fillStyle: 'white',
                radius: function( t ){
                    var s = 0;
                    for( var i=0; i<sources.length; i++ ){
                		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
                        var wavePos = ( ( t * sources[i].speed ) - ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
                        s += ( size / sources.length ) + Math.sin( wavePos ) * ( size / sources.length );
                    }
                    return s;
                },
            });

        }
    }
    
}
<file_sep>/code/roy-rating.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size(420, 100);
	glc.setDuration(1.5);
	glc.setFPS(20);
	glc.setMode("single");
	glc.setEasing(false);
	glc.setMaxColors(8);
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	var points = 5;
	var nr = 5;

	for( var i=0; i<nr; i++ ){
		list.addStar({
			points: points,
			x: i*80 + 50,
			y: height/2,
			innerRadius: 18	,
			outerRadius: 35,
			rotation: [ 0, 360/points ],
			fill: true,
			stroke: false,
			fillStyle: 'rgba(0,50,102,1)',
			/*phase: i/nr*/
		});
	}

}<file_sep>/code/roy-segments.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 4 );
	glc.setFPS( 30 );
	glc.setMode('single');
	//glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#457';
	var nr = 7;
	var radius = 80;
	
	// draw the full circles in the background
	for(var i=0; i<nr; i++ ){
		list.addCircle({
			x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
			y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
			radius: radius,
			fill: false,
			stroke: true,
			strokeStyle: color.rgba( 0, 0, 0, 0.3 ),
			lineWidth: 1,
		});
	}
	
	// draw partial circles
	for(var i=0; i<nr; i++ ){

		list.addCircle({
			x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
			y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
			radius: radius,
			fill: false,
			stroke: true,
			strokeStyle: '#fff',
			lineWidth: 2.25,
			startAngle: -360/nr,
			endAngle: 360/nr,
			rotation: [ i * (360/nr) -90, (i * (360/nr)) + 270 ],
		});
	}

}<file_sep>/code/roy-starwave.js
function onGLC(glc) {
	glc.loop();
	// glc.playOnce();
	glc.size( 320, 320 );
	glc.setDuration( 2 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 64 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	var nr = 30;
	var maxsize = 600;
	var points = 5;
	var rot = Math.random() * 360;
	var col = color.rgba( 100,160,120, 1 );
	glc.styles.backgroundColor = col;

	for( var i=0; i<nr; i++){

		var size = maxsize - ( (i/nr) * maxsize );

		list.addStar({
			x: width/2,
			y: height/2,
			innerRadius: function( t ){
				return this.basesize/2 + Math.sin( t*2*Math.PI ) * (this.basesize/16);
			},
			outerRadius: function( t ){
				return this.basesize + Math.sin( t*2*Math.PI ) * this.basesize/8;
			},
			rotation: function( t ){
				return rot + Math.sin( t*2*Math.PI )*4;
			},
			points: points,
			stroke: true,
			lineWidth: 1,
			strokeStyle: color.rgba( 255, 255, 255, 0.7 ),
			fill: true,
			fillStyle: col,
			shadowColor: color.rgba( 0, 0, 0, 0.35 ),
			shadowOffsetX: 4,
			shadowOffsetY: 8,
			shadowBlur: 10,
			basesize: size,
			phase: i/nr
		});
	}

}<file_sep>/code/roy-waves.js
function onGLC(glc) {
	glc.loop();
	glc.size( 500, 300 );
	glc.setDuration( 3 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 32 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 45, 50, 30, 1 );

	var waves = 30;
	var ypos = 40;

	for( var i=0; i<waves; i++ ){

		var wl = 50 + i*10;
		var amp = 5 + i*1;
		var path = [];

		for( var l=-( width/2 + wl*2 ); l<width/2 + wl*2; l+=wl/40 ){
			var x = l;
			var y = Math.sin( (l/wl)*2*Math.PI ) * amp;
			path.push( x );
			path.push( y );
		}

		var c = list.addContainer({
			x: [ width/2, (width/2)-wl ],
			y: ypos,
			phase: ypos/225
		});

		var w = list.addPath({
			x: 0,
			y: 0,
			strokeStyle: color.rgba( 255, 255, 255, i/waves ),
			lineWidth: 2,
			path: path,
			parent: c
		});

		ypos = ypos * 1.073;
	}

}<file_sep>/code/roy-creature.js
function onGLC(glc) {
    glc.loop();
    glc.size( 700, 700 );
    glc.setDuration( 4 );
    glc.setFPS( 30 );
    glc.setMode('single');
    glc.setEasing(false);
	glc.setMaxColors( 32 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#345';
	var points = 9;
    var segments = 120;
    var wave = 0.03;
    
    for( var p=0; p<points; p++ ){
        
        var segmentSize = 35;
        
        for( var s=0; s<segments; s++ ){
            
            segmentSize = segmentSize * 0.98;
            var rad = s*2;
            
            list.addCircle({
                x: function( t ){
                    return width/2 + Math.sin( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI ) * this.rad;
                },
                y: function( t ){
                    return width/2 - Math.cos( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI ) * this.rad;
                },
                radius: segmentSize,
                stroke: false,
                fillStyle: '#fff8cc',
                point: p,
                segment: s,
                rad: rad,
                phase: 1 - s/segments,
            });
	
        }
        
    }

}
<file_sep>/code/roy-groovy.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 4 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 0, 0, 0, 1 );

	var cols = [ '#f00', '#0f0', '#00f' ];
	var clusters = 5;
	var clusterRadius = 140;
	var nr = cols.length;

	for( var c=0; c<clusters; c++ ){
		var bx = width/2 + Math.sin( (c/clusters)*2*Math.PI ) * clusterRadius;
		var by = height/2 - Math.cos( (c/clusters)*2*Math.PI ) * clusterRadius;

		for( var i=0; i<nr; i++ ){

			list.addCircle({
				x: function( t ){
					return this.bx + Math.sin( (t+this.nr/nr)*2*Math.PI ) * ( Math.sin(t*2*Math.PI) * this.r );
				},
				y: function( t ){
					return this.by - Math.cos( (t+this.nr/nr)*2*Math.PI ) * ( Math.sin(t*2*Math.PI) * this.r );
				},
				radius: 85,
				stroke: false,
				fill: true,
				fillStyle: cols[ i ],
				blendMode: 'lighter',
				nr: i,
				r: 60,
				bx: bx,
				by: by,
				phase: c/clusters
			});

		}

	}

}<file_sep>/code/roy-crescents.js
function onGLC(glc) {
    glc.loop();
    glc.size( 500, 500 );
    glc.setDuration( 5 );
    glc.setFPS( 30 );
    glc.setMode('single');
    glc.setEasing(false);
    glc.setMaxColors( 256 );
	glc.setQuality( 5 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    var nr = 5;
    var size = 90;
    var rad = 55;

    for( var i=0; i<nr; i++ ){

        list.addCrescent({
            x: width / 2 + Math.sin( (i/nr)*2*Math.PI ) * rad,
            y: height / 2 - Math.cos( (i/nr)*2*Math.PI ) * rad,
            radius: size,
            percent: function( t ){
                return 0.5 + Math.cos( t*2*Math.PI ) * 0.5;
            },
            baseAngle: 360*(i/nr),
            rotation: function( t ){
                return this.baseAngle + Math.cos( t*Math.PI ) * 180;
            },
            stroke: false,
            fillStyle: color.hsva( 200, 1, 1, 0.225 ),
        });
        
    }

}
<file_sep>/code/roy-olympic.js
function onGLC(glc) {
    glc.loop();
    glc.size(600, 400);
    glc.setDuration(6.5);
    glc.setFPS(30);
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    var lw = function(t){
        return Math.sin( Math.PI*t ) * 10;
    };
    
    var rad = function(t){
        if( t< 0.25 || t>0.75 ){
	        if( t > 0.75 ){ t = t -0.5; }
        	return 325 - Math.sin( Math.PI*t*2 ) * 275;
        } else {
            return 50;
        }
    };
    
    var ga = function(t){
        return 1;
    };
    
    var ss = function(t){
        var f = 1-Math.sin( Math.PI * t );
        var r = this._r + f * ( 255-this._r );
        var g = this._g + f * ( 255-this._g );
        var b = this._b + f * ( 255-this._b );
        return color.rgb( r, g, b );
    }
    
    var container = list.addContainer({
		x: width / 2,
		y: height / 2 - 10,
        globalAlpha: function(t){
        	return Math.sin( Math.PI*t );
    	}
	});
	
	var blue1 = list.addCircle({
		x: -120,
		y: -25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 0,
        _g: 133,
        _b: 199,
        fill: false,
        lineWidth: lw,
        startAngle: 45,
        endAngle: 235,
        globalAlpha: ga,
        parent: container
	});

    var yellow1 = list.addCircle({
		x: -60,
		y: 25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 244,
        _g: 195,
        _b: 0,
        fill: false,
        lineWidth: lw,
        startAngle: -45,
        endAngle: 135,
        globalAlpha: ga,
        parent: container
	});

    var red1 = list.addCircle({
		x: 120,
		y: -25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 223,
        _g: 0,
        _b: 36,
        fill: false,
        lineWidth: lw,
        startAngle: 135,
        endAngle: 135+180,
        globalAlpha: ga,
        parent: container
	});
    
	var green1 = list.addCircle({
		x: 60,
		y: 25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 0,
        _g: 159,
        _b: 61,
        fill: false,
        lineWidth: lw,
        startAngle: -135,
        endAngle: 45,
        globalAlpha: ga,
        parent: container
	});
    
    var black = list.addCircle({
		x: -0,
		y: -25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
		_r: 0,
        _g: 0,
        _b: 0,
        fill: false,
        lineWidth: lw,
        globalAlpha: ga,
        parent: container
	});

    var red2 = list.addCircle({
		x: 120,
		y: -25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
		_r: 223,
        _g: 0,
        _b: 36,
        fill: false,
        lineWidth: lw,
        startAngle: -45,
        endAngle: 135,
        globalAlpha: ga,
        parent: container
	});
    
    var yellow2 = list.addCircle({
		x: -60,
		y: 25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 244,
        _g: 195,
        _b: 0,
        fill: false,
        lineWidth: lw,
        startAngle: 135,
        endAngle: 135+180,
        globalAlpha: ga,
        parent: container
	});

	var green3 = list.addCircle({
		x: 60,
		y: 25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
        _r: 0,
        _g: 159,
        _b: 61,
        fill: false,
        lineWidth: lw,
        startAngle: 45,
        endAngle: 235,
        globalAlpha: ga,
        parent: container
	});

	var blue2 = list.addCircle({
		x: -120,
		y: -25,
		radius: rad,
        stroke: true,
        strokeStyle: ss,
		_r: 0,
        _g: 133,
        _b: 199,
        fill: false,
        lineWidth: lw,
        startAngle: 235,
        endAngle: 235+180,
        globalAlpha: ga,
        parent: container
	});

}

<file_sep>/code/roy-radar.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 3 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 128 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 0, 40, 10, 1 );
	var lines = 50;
	var targets = 11;
	var rad = width/2 - 20;

	// grid
	list.addGrid({
		x: 0,
		y: 0,
		w: width,
		h: height,
		gridSize: 20,
		lineWidth: 1,
		strokeStyle: color.rgba( 150, 255, 200, 0.3 )
	});

	// axis lines
	for( var i=0; i<2; i++ ){
		list.addLine({
			x0: i ? 0 : width/2,
			y0: i ? height/2 : 0,
			x1: i ? width : width/2,
			y1: i ? height/2 : height,
			lineWidth: 1,
			strokeStyle: color.rgba( 150, 255, 200, 0.4 )
		});
	}

	// outer circle
	list.addCircle({
		x: width/2,
		y: height/2,
		radius: rad,
		fill: false,
		stroke: true,
		strokeStyle: color.rgba( 150, 255, 200, 1 ),
		lineWidth: 1.5
	});

	// bleep, bleep
	for( var i=0; i<lines; i++ ){
		list.addRay({
			x: width/2,
			y: height/2,
			length: rad,
			angle: [ 0, 360 ],
			lineWidth: 3,
			strokeStyle: color.rgba( 150, 255, 200, (1-(i/lines))*0.8 ),
			phase: 1 - i/360
		});
	}

	// targets
	for( var i=0; i<targets; i++ ){
		var angle = Math.random() * ( 2 * Math.PI );
		var dist = 40 + Math.random() * ( rad - 60 );
		list.addCircle({
			x: width/2 + Math.sin( angle ) * dist,
			y: height/2 - Math.cos( angle ) * dist,
			radius: [ 6, 2 ],
			fill: true,
			fillStyle: [ color.rgba( 150, 255, 200, 1 ), color.rgba( 150, 255, 200, 0 ) ],
			stroke: false,
			shadowColor: [ color.rgba( 150, 255, 200, 1 ), color.rgba( 150, 255, 200, 0 ) ],
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			shadowBlur: 10,
			phase: 1 - ( ( angle - Math.PI/2.05 )  / ( 2 * Math.PI ) ),
		});
	}

}<file_sep>/code/roy-logo.js
function onGLC(glc) {
	glc.loop();
	glc.size( 500, 300 );
	glc.setDuration( 3 );
	glc.setFPS( 30 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 255, 255, 255, 1 );

	var strs = [ 'GIF', 'LOOP', 'CODER' ];
	var counter = 0;
	var letters = 12; // calculate this to make it more flexible?
	var spacing = 100;

	for( var s=0; s<strs.length; s++ ){

		var nr = strs[s].length;

		for( var i=0; i<nr; i++ ){

			list.addRect({
				x: i * spacing + spacing/2,
				y: s * spacing + spacing/2,
				w: spacing,
				h: spacing,
				stroke: false,
				fill: true,
				fillStyle: color.hsv( 180+(counter/letters)*120, 1, 0.75 ),
			});

			list.addText({
				text: strs[s].charAt( i % nr ),
				x: i * spacing + spacing/2,
				y: s * spacing + spacing/2 - spacing/25,
				stroke: false,
				fill: true,
				fillStyle: function( t ){
					return color.rgba( 255, 255, 255, ( Math.sin( t*2*Math.PI ) * 0.2 ) + 0.8 );
				},
				shadowColor: function( t ){
					return color.rgba( 255, 255, 255, ( Math.sin( t*2*Math.PI ) * 0.4 ) + 0.4 );
				},
				shadowOffsetX: 0,
				shadowOffsetY: 0,
				shadowBlur: 16,
				fontSize: 70,
				fontWeight: 'bold',
				fontFamily: 'Roboto Condensed',
				fontStyle: 'normal',
				phase: 1 - ( counter / letters ),
				nr: counter
			});

			counter++;

		}

	}


}<file_sep>/code/roy-tablecloth.js
function onGLC(glc) {
	glc.loop();
	glc.size(480, 480);
	glc.setDuration( 3.5 );
	glc.setFPS(25);
	glc.setMode('single');
	glc.setEasing(false);
	glc.setMaxColors( 32 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.hsv( 200, 1, 0.25 );
	var r = 80;
	var dist = r * 1.2;
	var disty = dist * Math.sin( (Math.PI*2)/3 );
	
	for( var x=-1; x<8; x++ ){
		for( var y=-1; y<8; y++ ){
			
			var oddeven = y % 2;

			list.addPoly({
				x: x * dist + oddeven * (dist/2),
				y: y * disty,
				radius: r,
				sides: 6,
				stroke: false,
				strokeStyle: color.hsva( 0, 1, 0, 0.25 ),
				lineWidth: 2,
				fill: true,
				fillStyle: color.hsva( ( oddeven ? 200 : 140 ), 0.5, 1, 0.4 ),
				blendMode: 'screen',
				rotation: [ 0, 60 ],
			});
			
		}
	}
}
<file_sep>/code/roy-squaredance.js
function onGLC(glc) {
    glc.loop();
    glc.size( 450, 450 );
    glc.setDuration( 1 );
    glc.setFPS( 25 );
    glc.setMode( 'single' );
    glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#135';
    var nr = 17;
    var nr2 = 7;
    var size = 160;
    
    for( var r=0; r<nr2; r++ ){
        
        var rsize = size - r * ( size/nr2 );
        var nrofDots = Math.round( nr * ( rsize / size ) );
        var offset = Math.random();

        list.addRect({
            x: width/2,
            y: height/2,
            w: rsize * 2,
            h: rsize * 2,
            fill: false,
            fillStyle: color.rgba( 0, 0, 0, 0.3 ),
            stroke: true,
            strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
            lineWidth: 1,
        });

        for( var i=0; i<nrofDots; i++ ){

            var container = list.addContainer({
                x: width / 2,
                y: height / 2,
                rotation: ( r%2 == 0) ? [ 0, 360 ] : [ 360, 0 ],
                phase: i/nrofDots + offset,
                speedMult: 1/nrofDots,
            });

            list.addCircle({
                x: function( t ){
                    var a = ( t*2*Math.PI ) % (Math.PI/2);
                    if( a > Math.PI/4 ){ a = (Math.PI/2) - a; }
                    var l = this.rsize / Math.cos( a );
                    return l;
                },
                y: 0,
                radius: 5,
                stroke: false,
                fillStyle: ( r%2 == 0 ) ? color.rgba( 255, 255, 255, 1 ) : color.rgba( 155, 200, 255, 1 ),
                parent: container,
                phase: i/nrofDots + offset,
                speedMult: 1/nrofDots,
                rsize: rsize,
            });
        }
    }    
}<file_sep>/code/roy-biscuit.js
function onGLC(glc) {
    glc.loop();
    glc.size(480, 480);
    glc.setDuration( 4 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing(false);
    glc.setMaxColors( 256 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#333';
    var dist = 50;
    var nr = 5;
    var size = dist*2;
    
    var container = list.addContainer({
		x: width / 2,
		y: height / 2,
        rotation: -45,
	});
	
    for( var x=0; x<nr; x++ ){
        for( var y=0; y<nr; y++ ){

            var xpos = x * dist - ((nr-1)/2) * dist;
            var ypos = y * dist - ((nr-1)/2) * dist;
            var maxDist = Math.sqrt( Math.pow( ((nr-1)/2)*dist,2 ) + Math.pow( ((nr-1)/2)*dist,2 ) );
            var dfc = Math.sqrt( Math.pow( xpos, 2 ) + Math.pow( ypos, 2 ) )  / maxDist;
            
            list.addCircle({
                x: xpos,
                y: ypos,
                radius: function( t ){
                    return ( 1 + Math.sin( t*2*Math.PI ) ) * ( ( size/2 ) * (1-this.dfc/2) );
                },
                fill: true,
                fillStyle: ( ((x*nr)+y) % 2 ) ? color.hsva( 190, 0.75, 1, 0.7 ) : color.hsva( 220, 0.75, 1, 0.7 ),
                blendMode: 'screen',
                globalAlpha: function( t ){
					return ( 1 + Math.sin( t*2*Math.PI ) ) * 0.5;
                },
                stroke: false,
                parent: container,
                phase: -( x/nr + y/nr ) / 15,
                dfc: dfc,
            });

        }
    }
}<file_sep>/code/iris-hartster.js
function onGLC(glc) {
    glc.loop();
    glc.size( 500, 500 );
    glc.setDuration( 5 );
    glc.setFPS( 25 );
    glc.setMode('single');
    glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = color.rgb( 150, 150, 255);
    
	list.addStar({
		x: width / 2,
		y: height / 2,
		outerRadius: 200,
		innerRadius: 150,
		points: 30,
        //fillStyle: color.rgb(150,55,250 ),
        rotation: [ 0, 360/6 ],
        fillStyle: function( t ){
            return color.hsv( 280 + Math.sin(t*2*Math.PI)*30, 0.4, 0.7 );
        },
        phase: 0.5,
	});
	list.addHeart({
		x: width / 2,
		y: height / 2,
		//w: [180,-180],
        w: function( t ){
            return 90 + Math.sin(t*2*Math.PI) * 90;
        },
		h: 180,
        //fillStyle: color.rgb(250,100,150),
        //rotation: [ 0, 360 ],
        //fillStyle: ['pink','yellow','pink']
        fillStyle: function( t ){
            return color.hsv( 300 + Math.sin(t*2*Math.PI)*30, 0.4, 1 );
        },
	});
	


}
<file_sep>/code/roy-walkcycle.js
function onGLC(glc) {
	//glc.loop();
    glc.size(400, 400);
    glc.setDuration(4.0);
    glc.setFPS(25);
    //glc.setMode('single');
    //glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = '#444';
    
    var body = list.addRay({
        x: width/2,
        y: 250,
        length: 80,
        strokeStyle: 'white',
        angle: -80
    });
    
    var upperLeg = list.addRay({
        x: 0,//width/2,
        y: 0,//[ 260, 250 ],
        angle: [ 130, 200 ],//[ 70, 110 ],
        length: 50,
        parent: body,
        phase: 0,
        strokeStyle: 'white'
    });

    var lowerLeg = list.addRay({
        x: 50,
        y: 0,
        angle: [ 0, 30 ],
        length: 50,
        parent: upperLeg,
        phase: 0,
        strokeStyle: 'white'
    });

    var upperLeg = list.addRay({
        x: 0,//width/2,
        y: 0,//[ 260, 250 ],
        angle: [ 130, 200 ],//[ 70, 110 ],
        length: 50,
        parent: body,
        phase: 0.5,
        strokeStyle: 'white'
    });

    var lowerLeg = list.addRay({
        x: 50,
        y: 0,
        angle: [ 0, 30 ],
        length: 50,
        parent: upperLeg,
        phase: 0.5,
        strokeStyle: 'white'
    });

    var upperArm = list.addRay({
        x: 80,
        y: 0,
        angle: [ 130, 210 ],
        length: 45,
        parent: body,
        phase: 0,
        strokeStyle: 'white'
    });

    var lowerArm = list.addRay({
        x: 45,
        y: 0,
        angle: [ -40, 0 ],
        length: 45,
        parent: upperArm,
        phase: 0,
        strokeStyle: 'white'
    });

}<file_sep>/code/iris-shapes2.js
function onGLC(glc) {

     glc.loop();
     glc.size(400, 400);
     glc.setDuration(2.0);
     glc.setFPS(25);
     //glc.setMode('single');
     //glc.setEasing(false);
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
    glc.styles.backgroundColor = 'DeepSkyBlue';
	
	list.addCircle({
        x:[ 100,300 ],
        y: 100,
        fillStyle:[ 'red','blue'],
        radius:[20, 50 ],
        
    });
    
    list.addStar({
        x: 300 ,
        y:[100,300],
        fillStyle:['blue','yellow'],
        innerRadius:[20,40 ],
        outerRadius:[20,60],
        rotation:[90,0],
    });

    list.addHeart({
        x:[300,100],
        y:300,
        fillStyle:['purple','pink' ],
        w: [50,100], // breedte
        h: [50,100], // hoogte
        rotation:[0,180 ],
    });
    
    list.addRect({
        x:100,
    	y:[300,100],
        w:[50,100],
        h:[50,100],
        fillStyle:['orange','green'],
        rotation:[0,90],
    });
     
 
}<file_sep>/code/roy-velvet.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 2.5 );
	glc.setFPS( 25 );
	glc.setMaxColors( 16 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );

	var nr = 100;
	
	for( var i=0; i<nr; i++ ){
		
		var path = [];
		var points = 200;
		var radius = i*1.2;
		var waves = 5;

		var c = list.addContainer({
			x: width/2,
			y: height/2,
			rotation: [ 0, 360/(waves/2) ],
			phase: i/nr,
			speedMult: -1
		});
		
		for( var p=0; p<points+1; p++ ){
			var angle = (p/points)*2*Math.PI;
			var tempRadius = radius + Math.sin( angle*waves ) * radius/3;
			var x = Math.sin( angle ) * tempRadius;
			var y = -Math.cos( angle ) * tempRadius;
			path.push( x ); 
			path.push( y ); 
		}

		list.addPath({
			x: 0,
			y: 0,
			strokeStyle: color.rgba( 255, 255, 200, 1 - ( 1 * ( i/nr ) ) ),
			lineWidth: 0.5,
			path: path,
			parent: c,
		});
		
	}

}<file_sep>/code/roy-hexagon2.js
function onGLC(glc) {
	glc.loop();
	glc.size( 600, 600 );
	glc.setDuration( 3.5 );
	glc.setFPS( 30 );
	glc.setMode('single');
	//glc.setEasing(false);
	glc.setMaxColors( 64 );
	glc.setQuality( 10 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = '#234';
	var nr = 6;
	var corners = [];
	var size = 15;
	var dist = 40;
		
	var c = list.addContainer({
		x: width / 2,
		y: height / 2,
	});

	for( var n=0; n<nr; n++ ){
		
		var rad = n * dist;
		var sideDots = Math.max( 0, n - 1 );
		var totalDots = ( n == 0 ) ? 1 : 6;
		totalDots += 6 * sideDots;

		for( var i=0; i<6; i++ ){
			corners[i] = {
				x: Math.sin( (i/6) * 2*Math.PI ) * rad,
				y: -Math.cos( (i/6) * 2*Math.PI ) * rad
			}
		}
		
		for( var d=0; d<totalDots; d++ ){
			
			var pos = getDotPosition( rad, sideDots, totalDots, d );
			var pos2 = getDotPosition( rad, sideDots, totalDots, d + 1 );
			
			list.addCircle({
				x: [ pos.x, pos2.x ],
				y: [ pos.y, pos2.y ],
				size: size,
				radius: function( t ){
					return this.size*0.6 + Math.cos( t*2*Math.PI ) * ( this.size * 0.4 );
				},
				stroke: false,
				fill: true,
				fillStyle: ( n % 2 ) ? '#9cf' : '#fff',
				parent: c,
				phase: (n/nr) / 2.5,
			});

		}
		
	}
	
	
	function getDotPosition( rad, sideDots, totalDots, d ){
		if( d < 0 ){ d = totalDots+d; }
		var sidePos = d / ( 1+sideDots );
		var c1 = corners[ Math.floor( sidePos ) % 6 ];
		var c2 = corners[ ( Math.floor( sidePos ) + 1 ) % 6 ];
		var relPos = sidePos % 1;
		var pos = {
			x: ( (1-relPos)  * c1.x ) + ( relPos * c2.x ),
			y: ( (1-relPos) * c1.y ) + ( relPos * c2.y ),
		};
		return pos;
	}

}
<file_sep>/code/roy-linecircle.js
function onGLC(glc) {
	glc.loop();
	glc.size( 400, 400 );
	glc.setDuration( 4 );
	glc.setFPS( 25 );
	glc.setMode( "single" );
	glc.setEasing( false );
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
	var list = glc.renderList,
		width = glc.w,
		height = glc.h,
		color = glc.color;

	// your code goes here:
	glc.styles.backgroundColor = color.rgba( 40, 70, 60, 1 );
	var nr = 9;
	var radius = 140;

	for( var i=0; i<nr; i++ ){

		var xpos = Math.sin( (i/nr) * Math.PI ) * radius;
		var ypos = -Math.cos( (i/nr) * Math.PI ) * radius;

		list.addLine({
			x0: width/2 + xpos,
			y0: height/2 + ypos,
			x1: width/2 - xpos,
			y1: height/2 - ypos,
			strokeStyle: color.rgba( 255, 255, 255, 0.1 ),
			lineWidth: 1.5
		});

		list.addCircle({
			x: function( t ){
				return width/2 + Math.sin( t*2*Math.PI ) * this.xpos;
			},
			y: function( t ){
				return height/2 + Math.sin( t*2*Math.PI ) * this.ypos;
			},
			radius: 8,
			stroke: false,
			fill: true,
			fillStyle: color.hsv( (i/nr)*360, 0.5, 1 ),
			phase: (i/2) / nr,
			xpos: xpos,
			ypos: ypos,
		});

	}

}<file_sep>/code/roy-electrons.js
function onGLC(glc) {
    glc.loop();
    glc.size(400, 400);
    glc.setDuration(3);
    glc.setFPS(25);
    glc.setMode('single');
    glc.setEasing(false);
	glc.setMaxColors( 256 );
	glc.setQuality( 1 );
    var list = glc.renderList,
        width = glc.w,
        height = glc.h,
        color = glc.color;

    // your code goes here:
	glc.styles.backgroundColor = '#333';
	var nr = 39;
    var cols = [ '#c00', '#0c0', '#00c' ];
    
    for( var i=0; i<nr; i++ ){
        
        var angle = Math.random() * 360;
        
        var c = list.addContainer({
			x: width / 2,
			y: height / 2,
            rotation: angle
		});
        
        list.addCircle({
            x: function( t ){
                return Math.sin( t*2*Math.PI ) * this._radius;
            },
            y: 0,
            radius: function( t ){
                return ( this._size * 1.5 ) + Math.cos( t*2*Math.PI ) * this._size;
            },
            parent: c,
            stroke: false,
            fillStyle: cols[ i%cols.length ], //color.rgba( 255, 255, 255, 0.7 ),
            blendMode: 'screen',
            phase: Math.random(),
            _radius: 40 + Math.random() * 100,
            _size: Math.random() * 30,
        });
        
    }

}
