├── README.md
├── code
    ├── android-circles.js
    ├── gifissue.js
    ├── iris-bolgrootte.js
    ├── iris-hartster.js
    ├── iris-hearts.js
    ├── iris-shapes.js
    ├── iris-shapes2.js
    ├── iris-stars.js
    ├── roy-10kdotgrid.js
    ├── roy-10kdots.js
    ├── roy-balldance.js
    ├── roy-beziers.js
    ├── roy-beziersines-controlpoints.js
    ├── roy-beziersines.js
    ├── roy-birdcage.js
    ├── roy-biscuit.js
    ├── roy-blackstar.js
    ├── roy-blasters.js
    ├── roy-bokeh-video.js
    ├── roy-bokeh2-notext-video.js
    ├── roy-bokeh2-video.js
    ├── roy-bounce.js
    ├── roy-boxedrays.js
    ├── roy-bright.js
    ├── roy-chaos.js
    ├── roy-colorflower.js
    ├── roy-concentric-circles.js
    ├── roy-corner.js
    ├── roy-corona.js
    ├── roy-creature.js
    ├── roy-crescents.js
    ├── roy-crosswind.js
    ├── roy-cubes.js
    ├── roy-curvedlines.js
    ├── roy-diamonds.js
    ├── roy-disperse.js
    ├── roy-dotdance.js
    ├── roy-dotgrid.js
    ├── roy-dust.js
    ├── roy-electrons.js
    ├── roy-elegance.js
    ├── roy-fireflies.js
    ├── roy-flair.js
    ├── roy-flame.js
    ├── roy-groovy.js
    ├── roy-hearts.js
    ├── roy-hexagon.js
    ├── roy-hexagon2.js
    ├── roy-interference-video.js
    ├── roy-interference-video2.js
    ├── roy-interference.js
    ├── roy-interference2.js
    ├── roy-lego.js
    ├── roy-lego2.js
    ├── roy-linecircle.js
    ├── roy-logo-still.js
    ├── roy-logo.js
    ├── roy-mandala.js
    ├── roy-marquee.js
    ├── roy-memegen.js
    ├── roy-merrychristmas.js
    ├── roy-moire.js
    ├── roy-mosaic.js
    ├── roy-nova.js
    ├── roy-olympic.js
    ├── roy-packages.js
    ├── roy-paint.js
    ├── roy-parenting.js
    ├── roy-pattern.js
    ├── roy-pixels.js
    ├── roy-pixels2.js
    ├── roy-pixels3.js
    ├── roy-poly.js
    ├── roy-present.js
    ├── roy-pulsar.js
    ├── roy-radar.js
    ├── roy-rating.js
    ├── roy-rects.js
    ├── roy-segments.js
    ├── roy-segments2.js
    ├── roy-segments3.js
    ├── roy-semicircles.js
    ├── roy-shading.js
    ├── roy-shadowdots.js
    ├── roy-shapeshift.js
    ├── roy-silk.js
    ├── roy-singlestar.js
    ├── roy-snowflakes.js
    ├── roy-soap.js
    ├── roy-soap2.js
    ├── roy-soap3.js
    ├── roy-sprites.js
    ├── roy-sprites2.js
    ├── roy-squaredance.js
    ├── roy-stars.js
    ├── roy-starwave.js
    ├── roy-swarm.js
    ├── roy-tablecloth.js
    ├── roy-tablecloth2.js
    ├── roy-tablecloth3.js
    ├── roy-tentacles.js
    ├── roy-textspiral.js
    ├── roy-touchingballs.js
    ├── roy-touchingballs2.js
    ├── roy-tribble.js
    ├── roy-typo.js
    ├── roy-vault.js
    ├── roy-velvet.js
    ├── roy-walkcycle.js
    ├── roy-warp.js
    ├── roy-wavelines.js
    ├── roy-waves.js
    ├── roy.js
    └── unsuccessful
    │   ├── roy-lavalamp.js
    │   └── roy-weirdbubble.js
└── images
    ├── lianne-square.png
    ├── lianne-tiny.png
    ├── lianne.jpg
    ├── lianne.png
    ├── lianne2-square.png
    ├── lianne2-square2.png
    ├── lianne2-square3.png
    ├── lianne2-tiny.png
    ├── lianne2.jpg
    ├── lianne3-eyes.png
    ├── lianne3-square.png
    ├── lianne3-square80.png
    ├── lianne3.jpg
    ├── nike_swoosh.png
    ├── solo.png
    ├── solo.webp
    ├── solo80.png
    └── sprite.png


/README.md:
--------------------------------------------------------------------------------
 1 | # gifloopcoder-scripts
 2 | 
 3 | A collection of random experiments made with Bit101's gifloopcoder
 4 | 
 5 | See https://github.com/bit101/gifloopcoder
 6 | 
 7 | To run these:
 8 | 
 9 | * Copy the scripts to gifloopcoder's "sketches/code" folder, and open the index.html file in glc's folder.
10 | * 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.
11 | 
12 | Enjoy!
13 | 


--------------------------------------------------------------------------------
/code/android-circles.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 600 );
 4 |     glc.setDuration( 4 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing( false );
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#000';
15 | 	var colors = [
16 |         'magenta',
17 |         'yellow',
18 |         'cyan'
19 |     ];
20 |     
21 |     for( var i=0; i<colors.length; i++ ){
22 | 
23 |         var ir = 120 * i; //Math.random() * 360;
24 |         
25 | 		var container = list.addContainer({
26 | 			x: width / 2,
27 | 			y: height / 2,
28 |             rotation: [ ir, ir+360 ]
29 | 		});
30 | 		
31 |         list.addCircle({
32 | 			x: ( Math.random() * 10 ) - 5,
33 | 			y: ( Math.random() * 10 ) - 5,
34 | 			radius: 140,
35 |             lineWidth: 12,
36 |             strokeStyle: colors[i],
37 |             stroke: true,
38 |             fill: false,
39 |             parent: container,
40 |             blendMode: 'lighten'
41 | 		});
42 | 	
43 |     }
44 | }


--------------------------------------------------------------------------------
/code/gifissue.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(2);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(8);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var nr = 6;
17 | 
18 | 	for( var x=0; x<nr+2; x++ ){
19 | 		for( var y=0; y<nr+2; y++ ){
20 | 			var r = Math.min( 255, Math.floor( x * 32 ) );
21 | 			var g = Math.min( 255, Math.floor( y * 32 ) );
22 | 			var b = 0;
23 | 			list.addRect({
24 | 				x: x*(width/nr) - (width/nr)/2,
25 | 				y: y*(height/nr) - (height/nr)/2,
26 | 				w: 68,
27 | 				h: 68,
28 | 				rotation: [ 0, 90 ],
29 | 				fill: true,
30 | 				stroke: false,
31 | 				/*fillStyle: color.rgba( r, g, b, 1 ),*/
32 | 				fillStyle: 'rgba(' + r + ',' + g + ',' + b + ',1)',
33 | 			});
34 | 		}
35 | 	}
36 | 
37 | }


--------------------------------------------------------------------------------
/code/iris-bolgrootte.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/code/iris-bolgrootte.js


--------------------------------------------------------------------------------
/code/iris-hartster.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 5 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = color.rgb( 150, 150, 255);
15 |     
16 | 	list.addStar({
17 | 		x: width / 2,
18 | 		y: height / 2,
19 | 		outerRadius: 200,
20 | 		innerRadius: 150,
21 | 		points: 30,
22 |         //fillStyle: color.rgb(150,55,250 ),
23 |         rotation: [ 0, 360/6 ],
24 |         fillStyle: function( t ){
25 |             return color.hsv( 280 + Math.sin(t*2*Math.PI)*30, 0.4, 0.7 );
26 |         },
27 |         phase: 0.5,
28 | 	});
29 | 	list.addHeart({
30 | 		x: width / 2,
31 | 		y: height / 2,
32 | 		//w: [180,-180],
33 |         w: function( t ){
34 |             return 90 + Math.sin(t*2*Math.PI) * 90;
35 |         },
36 | 		h: 180,
37 |         //fillStyle: color.rgb(250,100,150),
38 |         //rotation: [ 0, 360 ],
39 |         //fillStyle: ['pink','yellow','pink']
40 |         fillStyle: function( t ){
41 |             return color.hsv( 300 + Math.sin(t*2*Math.PI)*30, 0.4, 1 );
42 |         },
43 | 	});
44 | 	
45 | 
46 | 
47 | }
48 | 


--------------------------------------------------------------------------------
/code/iris-hearts.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 1 );
 6 | 	glc.setFPS( 30 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 256 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#335599';
17 | 	var rings = 5;
18 | 	var size = 45;
19 | 	var mindist = 60;
20 | 
21 | 	for( var r=0; r<rings; r++){
22 | 
23 | 		var radius = 32 + r * mindist;
24 | 		var circlesize = 2 * Math.PI * radius;
25 | 		var nrofhearts = Math.max( Math.floor( circlesize / mindist ), 1 );
26 | 		var col = color.hsv( 180+(r/rings)*180, 0.25, 1 );
27 | 
28 | 		for( var i=0; i<nrofhearts; i++ ){
29 | 			list.addHeart({
30 | 				x: function( t ){
31 | 					return (width/2) + Math.sin( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofhearts ) ) * this.p_radius;
32 | 				},
33 | 				y: function( t ){
34 | 					return (height/2) + -Math.cos( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofhearts ) ) * this.p_radius;
35 | 				},
36 | 				rotation: function( t ){
37 | 					return ( ( t+this.p_nr ) / this.p_nrofhearts ) * 360;
38 | 				},
39 | 				w: size,
40 | 				h: size,
41 | 				stroke: false,
42 | 				fill: true,
43 | 				fillStyle: col,
44 | 				shadowColor: color.rgba( 0, 0, 0, 0.25 ),
45 | 				shadowOffsetX: 5,
46 | 				shadowOffsetY: 5,
47 | 				shadowBlur: 10,
48 | 				p_radius: radius,
49 | 				p_nr: i,
50 | 				p_nrofhearts: nrofhearts
51 | 			});
52 | 		}
53 | 	}
54 | 
55 | }


--------------------------------------------------------------------------------
/code/iris-shapes.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 
 3 |      glc.loop();
 4 |      glc.size(400, 400);
 5 |      glc.setDuration(2.0);
 6 |      glc.setFPS(25);
 7 |      //glc.setMode('single');
 8 |      //glc.setEasing(false);
 9 |     var list = glc.renderList,
10 |         width = glc.w,
11 |         height = glc.h,
12 |         color = glc.color;
13 | 
14 |     // your code goes here:
15 | 	
16 | 	list.addCircle({
17 |         x:[ 100,300 ],
18 |         y: 100,
19 |         fillStyle:[ 'red','blue'],
20 |         radius:[10, 50 ],
21 |     });
22 |     
23 |     list.addStar({
24 |         x: 300 ,
25 |         y:[100,300],
26 |         fillStyle:['blue','yellow'],
27 |         innerRadius:[20,40 ],
28 |         outerRadius:[20,60],
29 |     });
30 | 
31 |     list.addHeart({
32 |         x:[300,100],
33 |         y:300,
34 |         fillStyle:['purple','pink' ],
35 |         w: [50,100], // breedte
36 |         h: [50,100], // hoogte
37 |     });
38 |     
39 |     list.addRect({
40 |         x:100,
41 |     	y:[300,100],
42 |         w:[50,100],
43 |         h:[50,100],
44 |         fillStyle:['orange','green']
45 |     });
46 |      
47 |  
48 | }


--------------------------------------------------------------------------------
/code/iris-shapes2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 
 3 |      glc.loop();
 4 |      glc.size(400, 400);
 5 |      glc.setDuration(2.0);
 6 |      glc.setFPS(25);
 7 |      //glc.setMode('single');
 8 |      //glc.setEasing(false);
 9 |     var list = glc.renderList,
10 |         width = glc.w,
11 |         height = glc.h,
12 |         color = glc.color;
13 | 
14 |     // your code goes here:
15 |     glc.styles.backgroundColor = 'DeepSkyBlue';
16 | 	
17 | 	list.addCircle({
18 |         x:[ 100,300 ],
19 |         y: 100,
20 |         fillStyle:[ 'red','blue'],
21 |         radius:[20, 50 ],
22 |         
23 |     });
24 |     
25 |     list.addStar({
26 |         x: 300 ,
27 |         y:[100,300],
28 |         fillStyle:['blue','yellow'],
29 |         innerRadius:[20,40 ],
30 |         outerRadius:[20,60],
31 |         rotation:[90,0],
32 |     });
33 | 
34 |     list.addHeart({
35 |         x:[300,100],
36 |         y:300,
37 |         fillStyle:['purple','pink' ],
38 |         w: [50,100], // breedte
39 |         h: [50,100], // hoogte
40 |         rotation:[0,180 ],
41 |     });
42 |     
43 |     list.addRect({
44 |         x:100,
45 |     	y:[300,100],
46 |         w:[50,100],
47 |         h:[50,100],
48 |         fillStyle:['orange','green'],
49 |         rotation:[0,90],
50 |     });
51 |      
52 |  
53 | }


--------------------------------------------------------------------------------
/code/iris-stars.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | //     glc.loop();
 3 |     glc.size(400, 400);
 4 |     glc.setDuration(1.0);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = 'LightPink';
15 |     var punten = 6;
16 |     
17 |     list.addStar({
18 | 		x: width / 2,
19 |      	y: height / 2,
20 |         fillStyle: 'orange',
21 |         innerRadius: 50,
22 |         outerRadius: 100,
23 |         rotation: [ 0, 360/punten ],
24 |         points: punten,
25 |         stroke: true,
26 |         strokeStyle:'red',
27 |         lineWidth:20,
28 |         
29 |     });
30 | 
31 | 	list.addStar({
32 |         x:width/2,
33 |         y:height/2,
34 |         fillStyle: 'LightPink',
35 |         innerRadius: 15,
36 |         outerRadius: 30,
37 |         rotation: [ 0, -360/punten ],
38 |         points: punten,
39 |         stroke: true,
40 |         strokeStyle:'yellow',
41 |         lineWidth:10,        
42 |     });
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/code/roy-10kdotgrid.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration(2.5);
 5 | 	glc.setFPS(25);
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing(false);
 8 | 	glc.setMaxColors(24);
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#144';
17 | 
18 | 	var grid = 70;
19 | 	var extra = 50;
20 | 	var maxDist = Math.sqrt( Math.pow( width/2 + extra, 2 ), Math.pow( height/2 + extra, 2 ) );
21 | 	
22 | 	for( var x=0; x<grid; x++){
23 | 		for( var y=0; y<grid; y++){
24 | 		
25 | 			var xpos = x * ( width + 2*extra ) / grid - extra;
26 | 			var ypos = y * ( height + 2*extra ) / grid - extra;
27 | 			var xdist = xpos - width/2;
28 | 			var ydist = ypos - height/2;
29 | 			var dist = Math.sqrt( Math.pow( xdist, 2 ) + Math.pow( ydist, 2 ) );
30 | 
31 | 			list.addCircle({
32 | 				x: function( t ){
33 | 					return this.xpos + Math.sin( t*2*Math.PI ) * this.xdist/7;
34 | 				},
35 | 				y: function( t ){
36 | 					return this.ypos + Math.sin( t*2*Math.PI ) * this.ydist/7;
37 | 				},
38 | 				radius: 1.25,
39 | 				fill: true,
40 | 				fillStyle: '#fff',
41 | 				stroke: false,
42 | 				phase: dist / maxDist,
43 | 				xpos: xpos,
44 | 				ypos: ypos,
45 | 				xdist: xdist,
46 | 				ydist: ydist,
47 | 				speedMult: -1,
48 | 			});
49 | 		}
50 | 	}
51 | }


--------------------------------------------------------------------------------
/code/roy-10kdots.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration(2.5);
 5 | 	glc.setFPS(25);
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing(false);
 8 | 	glc.setMaxColors(8);
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#124';
17 | 
18 | 	var nr = 10000;
19 | 	var extra = 50;
20 | 	var maxDist = Math.sqrt( Math.pow( width/2 + extra, 2 ), Math.pow( height/2 + extra, 2 ) );
21 | 	
22 | 	for( var i=0; i<nr; i++){
23 | 		
24 | 		var xpos = Math.random() * ( width + 2*extra ) - extra;
25 | 		var ypos = Math.random() * ( height + 2*extra ) - extra;
26 | 		var xdist = xpos - width/2;
27 | 		var ydist = ypos - height/2;
28 | 		var dist = Math.sqrt( Math.pow( xdist, 2 ) + Math.pow( ydist, 2 ) );
29 | 		
30 | 		list.addCircle({
31 | 			x: function( t ){
32 | 				return this.xpos + Math.sin( t*2*Math.PI ) * this.xdist/10;
33 | 			},
34 | 			y: function( t ){
35 | 				return this.ypos + Math.sin( t*2*Math.PI ) * this.ydist/10;
36 | 			},
37 | 			radius: 1,
38 | 			fill: true,
39 | 			fillStyle: '#fff',
40 | 			stroke: false,
41 | 			phase: dist / maxDist,
42 | 			xpos: xpos,
43 | 			ypos: ypos,
44 | 			xdist: xdist,
45 | 			ydist: ydist,
46 | 			speedMult: -1,
47 | 		});
48 | 	}
49 | 
50 | }


--------------------------------------------------------------------------------
/code/roy-balldance.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 0.5 );
 6 | 	glc.setFPS( 30 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 32 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#bbddff';
17 | 	var rings = 5;
18 | 	var size = 20;
19 | 	var mindist = 60;
20 | 
21 | 	for( var r=0; r<rings; r++){
22 | 
23 | 		var radius = 40 + r * mindist;
24 | 		var circlesize = 2 * Math.PI * radius;
25 | 		var nrofdots = Math.max( Math.floor( circlesize / mindist ), 1 );
26 | 
27 | 		for( var i=0; i<nrofdots; i++ ){
28 | 
29 | 			var gradient = color.createRadialGradient( -6, -6, 0, -6, -6, 26 );
30 | 			gradient.addColorStop( 0, '#ffffff' );
31 |     		gradient.addColorStop( 0.8, '#667788' );
32 |     		gradient.addColorStop( 1, '#4466aa' );
33 | 
34 | 			list.addCircle({
35 | 				x: function( t ){
36 | 					return (width/2) + Math.sin( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
37 | 				},
38 | 				y: function( t ){
39 | 					return (height/2) + -Math.cos( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
40 | 				},
41 | 				radius: size,
42 | 				stroke: false,
43 | 				fill: true,
44 | 				fillStyle: gradient,//color.rgba( 255, 255, 255, 1 ),
45 | 				shadowColor: color.rgba( 0, 0, 0, 0.15 ),
46 | 				shadowOffsetX: 10,
47 | 				shadowOffsetY: 10,
48 | 				shadowBlur: 5,
49 | 				p_radius: radius,
50 | 				p_nr: i,
51 | 				p_nrofdots: nrofdots
52 | 			});
53 | 		}
54 | 	}
55 | 
56 | }


--------------------------------------------------------------------------------
/code/roy-beziers.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(3);
 6 | 	glc.setFPS(30);
 7 | 	//glc.setMode("single");
 8 | 	//glc.setEasing(false);
 9 | 	glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var nr = 5;
17 | 	var amp = 2;
18 | 	var counter = 0;
19 | 
20 | 	for( var i=0; i<nr; i++ ){
21 | 		list.addBezierCurve({
22 | 			x0: width/2,
23 | 			y0: height/2,
24 | 			x1: getInnerX,
25 | 			y1: getInnerY,
26 | 			x2: width/2 + Math.sin( i*(2*Math.PI)/nr ) * 200,
27 | 			y2: height/2 + -Math.cos( i*(2*Math.PI)/nr ) * 200,
28 | 			x3: getOuterX,
29 | 			y3: getOuterY,
30 | 			fill: false,
31 | 			lineWidth: 2,
32 | 			strokeStyle: '#000000'
33 | 		});
34 | 	}
35 | 
36 | 	function getInnerX( t ){
37 | 		var progress = counter + ( (t-0.5) * 2 ) * amp;
38 | 		return width/2 + Math.sin( progress*(2*Math.PI)/nr ) * 10;
39 | 	}
40 | 
41 | 	function getInnerY( t ){
42 | 		var progress = counter + ( (t-0.5) * 2 ) * amp;
43 | 		return width/2 + -Math.cos( progress*(2*Math.PI)/nr ) * 10;
44 | 	}
45 | 
46 | 	function getOuterX( t ){
47 | 		var progress = counter + ( (t-0.5) * 2 ) * amp;
48 | 		return width/2 + Math.sin( progress*(2*Math.PI)/nr ) * 300;
49 | 	}
50 | 
51 | 	function getOuterY( t ){
52 | 		var progress = counter + ( (t-0.5) * 2 ) * amp;
53 | 		var y = height/2 + -Math.cos( progress*(2*Math.PI)/nr ) * 300;
54 | 		counter++;
55 | 		counter = counter%nr;
56 | 		return y;
57 | 	}
58 | }


--------------------------------------------------------------------------------
/code/roy-beziersines-controlpoints.js:
--------------------------------------------------------------------------------
  1 | function onGLC(glc) {
  2 | 	glc.loop();
  3 | 	glc.size( 500, 300 );
  4 | 	glc.setDuration( 5 );
  5 | 	glc.setFPS( 25 );
  6 | 	glc.setMode( "single" );
  7 | 	glc.setEasing( false );
  8 | 	glc.setMaxColors( 64 );
  9 | 	glc.setQuality( 1 );
 10 | 	var list = glc.renderList,
 11 | 		width = glc.w,
 12 | 		height = glc.h,
 13 | 		color = glc.color;
 14 | 
 15 | 	// your code goes here:
 16 | 	glc.styles.backgroundColor = color.rgba( 30, 30, 30, 1 );
 17 | 
 18 | 	var waves = 3;
 19 | 	var nr = 9;
 20 | 
 21 | 	for( var w=0; w<waves; w++ ){
 22 | 
 23 | 		for( var i=0; i<nr; i++ ){
 24 | 
 25 | 			//if( i != 0 ){
 26 | 			
 27 | 				list.addCircle({
 28 | 					x: i * ( width/nr ),
 29 | 					y: function( t ){
 30 | 						return getY( t, this.nr, 0, false );
 31 | 					},
 32 | 					radius: 3,
 33 | 					stroke: false,
 34 | 					fill: true,
 35 | 					fillStyle: color.rgba( 255, 255, 255, 0.8 ),
 36 | 					nr: i,
 37 | 					phase: w / ( waves * 2.2 )
 38 | 				});
 39 | 
 40 | 				// first control point
 41 | 				list.addCircle({
 42 | 					x: function( t ){
 43 | 						return getX( t, this.nr, -1, true );
 44 | 					},
 45 | 					y: function( t ){
 46 | 						return getY( t, this.nr, -1, true );
 47 | 					},
 48 | 					radius: 3,
 49 | 					stroke: false,
 50 | 					fill: true,
 51 | 					fillStyle: color.rgba( 100, 150, 255, 0.8 ),
 52 | 					nr: i,
 53 | 					phase: w / ( waves * 2.2 )
 54 | 				});
 55 | 
 56 | 				// second control point
 57 | 				list.addCircle({
 58 | 					x: function( t ){
 59 | 						return getX( t, this.nr+1, 1, true );
 60 | 					},
 61 | 					y:function( t ){
 62 | 						return getY( t, this.nr+1, 1, true );
 63 | 					},
 64 | 					radius: 3,
 65 | 					stroke: false,
 66 | 					fill: true,
 67 | 					fillStyle: color.rgba( 255, 50, 50, 0.8 ),
 68 | 					nr: i,
 69 | 					phase: w / ( waves * 2.2 )
 70 | 				});
 71 | 			//}
 72 | 
 73 | 			list.addBezierCurve({
 74 | 				x0: function( t ){
 75 | 					return getX( t, this.nr, 0, true );
 76 | 				},
 77 | 				y0: function( t ){
 78 | 					return getY( t, this.nr, 0, false );
 79 | 				},
 80 | 				x1: function( t ){
 81 | 					return getX( t, this.nr, -1, true );
 82 | 				},
 83 | 				y1: function( t ){
 84 | 					return getY( t, this.nr, -1, true );
 85 | 				},
 86 | 				x2: function( t ){
 87 | 					return getX( t, this.nr+1, 1, true );
 88 | 				},
 89 | 				y2: function( t ){
 90 | 					return getY( t, this.nr+1, 1, true );
 91 | 				},
 92 | 				x3: function( t ){
 93 | 					return getX( t, this.nr, 1, false );
 94 | 				},
 95 | 				y3: function( t ){
 96 | 					return getY( t, this.nr, 1, false );
 97 | 				},
 98 | 				stroke: true,
 99 | 				strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
100 | 				lineWidth: 2,
101 | 				nr: i,
102 | 				phase: w / ( waves * 2.2 )
103 | 			});
104 | 		}
105 | 
106 | 	}
107 | 
108 | 
109 | 	function getX( t, i, offset, reverse ){
110 | 		var currentX = i * ( width / nr );
111 | 		var offsetX = ( i + offset ) * ( width / nr );
112 | 		if( reverse ){
113 | 			return currentX - ( offsetX - currentX )/5;
114 | 		}
115 | 		return offsetX;
116 | 	}
117 | 
118 | 	function getY( t, i, offset, reverse ){
119 | 		var currentY = height/2 + Math.sin( ( t + ( i / nr ) ) * 2 * Math.PI ) * 100;
120 | 		var offsetY = height/2 + Math.sin( ( t + ( (i + offset ) / nr ) ) * 2 * Math.PI ) * 100;
121 | 		if( reverse ){
122 | 			return currentY - ( offsetY - currentY )/5;
123 | 		}
124 | 		return offsetY;
125 | 	}
126 | 
127 | 
128 | }


--------------------------------------------------------------------------------
/code/roy-beziersines.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 500, 300 );
 4 | 	glc.setDuration( 5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 50, 50, 50, 1 );
17 | 
18 | 	var waves = 11;
19 | 	var nr = 9;
20 | 
21 | 	for( var w=0; w<waves; w++ ){
22 | 
23 | 		for( var i=0; i<nr; i++ ){
24 | 			if( i != 0 ){
25 | 				list.addCircle({
26 | 					x: i * ( width/nr ),
27 | 					y: function( t ){
28 | 						return getY( t, this.nr, 0, false );
29 | 					},
30 | 					radius: 2,
31 | 					stroke: false,
32 | 					fill: true,
33 | 					fillStyle: color.rgba( 255, 255, 255, 0.6 ),
34 | 					nr: i,
35 | 					phase: w / ( waves * 2.2 )
36 | 				});
37 | 			}
38 | 
39 | 			list.addBezierCurve({
40 | 				x0: function( t ){
41 | 					return getX( t, this.nr, 0, true );
42 | 				},
43 | 				y0: function( t ){
44 | 					return getY( t, this.nr, 0, false );
45 | 				},
46 | 				x1: function( t ){
47 | 					return getX( t, this.nr, -1, true );
48 | 				},
49 | 				y1: function( t ){
50 | 					return getY( t, this.nr, -1, true );
51 | 				},
52 | 				x2: function( t ){
53 | 					return getX( t, this.nr+1, 1, true );
54 | 				},
55 | 				y2: function( t ){
56 | 					return getY( t, this.nr+1, 1, true );
57 | 				},
58 | 				x3: function( t ){
59 | 					return getX( t, this.nr, 1, false );
60 | 				},
61 | 				y3: function( t ){
62 | 					return getY( t, this.nr, 1, false );
63 | 				},
64 | 				stroke: true,
65 | 				strokeStyle: color.rgba( 255, 220, 100, 0.6 ),
66 | 				lineWidth: 2,
67 | 				nr: i,
68 | 				phase: w / ( waves * 2.2 )
69 | 			});
70 | 		}
71 | 
72 | 	}
73 | 
74 | 
75 | 	function getX( t, i, offset, reverse ){
76 | 		var currentX = i * ( width / nr );
77 | 		var offsetX = ( i + offset ) * ( width / nr );
78 | 		if( reverse ){
79 | 			return currentX - ( offsetX - currentX )/5;
80 | 		}
81 | 		return offsetX;
82 | 	}
83 | 
84 | 	function getY( t, i, offset, reverse ){
85 | 		var currentY = height/2 + Math.sin( ( t + ( i / nr ) ) * 2 * Math.PI ) * 100;
86 | 		var offsetY = height/2 + Math.sin( ( t + ( (i + offset ) / nr ) ) * 2 * Math.PI ) * 100;
87 | 		if( reverse ){
88 | 			return currentY - ( offsetY - currentY )/5;
89 | 		}
90 | 		return offsetY;
91 | 	}
92 | 
93 | 
94 | }


--------------------------------------------------------------------------------
/code/roy-birdcage.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration(1);
 5 | 	glc.setFPS(30);
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing(false);
 8 | 	glc.setMaxColors(256);
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#144';
17 | 
18 | 	var nr = 15;
19 | 	var rad = 100;
20 | 	
21 | 	list.addCircle({
22 | 		x: width/2,
23 | 		y: height/2,
24 | 		radius: rad,
25 | 		fill: true,
26 | 		fillStyle: color.rgba( 0, 0, 0, 0.3 ),
27 | 		stroke: false,
28 | 	});
29 | 	
30 | 	for( var i=0; i<nr; i++ ){
31 | 		
32 | 		list.addOval({
33 | 			x: width/2,
34 | 			y: height/2,
35 | 			rx: function( t ){
36 | 				return Math.sin( t*2*Math.PI ) * rad + 0.001;
37 | 			},
38 | 			ry: rad,
39 | 			fill: false,
40 | 			stroke: true,
41 | 			lineWidth: function( t ){
42 | 				return 0.5 + Math.abs( t - 0.5 ) * 4;
43 | 			},
44 | 			strokeStyle: function( t ){
45 | 				var brightness = 0.25 + Math.abs( t - 0.5 ) * 1.5;
46 | 				return color.rgba( 255, 220, 100, brightness );
47 | 			},
48 | 			startAngle: function( t ){
49 | 				return ( t < 0.5 ) ? -90 : 90;
50 | 			},
51 | 			endAngle: function( t ){
52 | 				return ( t < 0.5 ) ? 90 : -90;
53 | 			},
54 | 			phase: i/nr,
55 | 			nr: i,
56 | 			speedMult: 1/nr
57 | 		});
58 | 
59 | 	}
60 | }


--------------------------------------------------------------------------------
/code/roy-biscuit.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(480, 480);
 4 |     glc.setDuration( 4 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#333';
17 |     var dist = 50;
18 |     var nr = 5;
19 |     var size = dist*2;
20 |     
21 |     var container = list.addContainer({
22 | 		x: width / 2,
23 | 		y: height / 2,
24 |         rotation: -45,
25 | 	});
26 | 	
27 |     for( var x=0; x<nr; x++ ){
28 |         for( var y=0; y<nr; y++ ){
29 | 
30 |             var xpos = x * dist - ((nr-1)/2) * dist;
31 |             var ypos = y * dist - ((nr-1)/2) * dist;
32 |             var maxDist = Math.sqrt( Math.pow( ((nr-1)/2)*dist,2 ) + Math.pow( ((nr-1)/2)*dist,2 ) );
33 |             var dfc = Math.sqrt( Math.pow( xpos, 2 ) + Math.pow( ypos, 2 ) )  / maxDist;
34 |             
35 |             list.addCircle({
36 |                 x: xpos,
37 |                 y: ypos,
38 |                 radius: function( t ){
39 |                     return ( 1 + Math.sin( t*2*Math.PI ) ) * ( ( size/2 ) * (1-this.dfc/2) );
40 |                 },
41 |                 fill: true,
42 |                 fillStyle: ( ((x*nr)+y) % 2 ) ? color.hsva( 190, 0.75, 1, 0.7 ) : color.hsva( 220, 0.75, 1, 0.7 ),
43 |                 blendMode: 'screen',
44 |                 globalAlpha: function( t ){
45 | 					return ( 1 + Math.sin( t*2*Math.PI ) ) * 0.5;
46 |                 },
47 |                 stroke: false,
48 |                 parent: container,
49 |                 phase: -( x/nr + y/nr ) / 15,
50 |                 dfc: dfc,
51 |             });
52 | 
53 |         }
54 |     }
55 | }


--------------------------------------------------------------------------------
/code/roy-blackstar.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration(3.5);
 5 | 	glc.setFPS(30);
 6 | 	glc.setMode('single');
 7 | 	//glc.setEasing(false);
 8 | 	glc.setMaxColors(256);
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#fff';
17 | 	var size = 140;
18 | 	var points = 5;
19 | 	var innerRatio = 0.5 * ( 3 - Math.sqrt( points ) ); // from http://www.jdawiseman.com/papers/easymath/surds_star_inner_radius.html
20 | 
21 | 	list.addStar({
22 | 		x: width / 2,
23 | 		y: height / 2,
24 | 		outerRadius: [ size, innerRatio * size ],
25 | 		innerRadius: [ innerRatio * size, size ],
26 | 		points: points,
27 | 		rotation: [ -90, (180/points)-90 ],
28 | 		stroke: false,
29 | 		fillStyle: '#000',
30 | 	});
31 | 
32 | }


--------------------------------------------------------------------------------
/code/roy-blasters.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(600, 400);
 4 | 	glc.setDuration(1.5);
 5 | 	glc.setFPS(25);
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing(false);
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 	glc.styles.backgroundColor = color.rgba( 40, 60, 80, 1 );
15 | 	var rebels = 35;
16 | 	var stormtroopers = 50;
17 | 	var battlefield = 900;
18 | 	
19 | 	for( var i=0; i<rebels; i++ ){
20 | 		
21 | 		var blasterAngle = Math.random() * Math.PI/4 - Math.PI*0.75;
22 | 		var blasterX = Math.sin( blasterAngle ) * battlefield;
23 | 		var blasterY = -Math.cos( blasterAngle ) * battlefield;
24 | 
25 | 		var targetAngle = Math.random() * Math.PI/4 - Math.PI*0.75;
26 | 		var targetX = Math.sin( targetAngle ) * battlefield;
27 | 		var targetY = -Math.cos( targetAngle ) * battlefield;
28 | 		
29 | 		list.addSegment({
30 | 			x0: width/2 + blasterX,
31 | 			y0: height/2 + blasterY,
32 | 			x1: width/2 - targetX,
33 | 			y1: height/2 - targetY,
34 | 			segmentLength: 80,
35 | 			strokeStyle: color.rgba( 0, 255, 0, 1 ),
36 | 			lineWidth: 5,
37 | 			blendMode: 'lighter',
38 | 			shadowColor: color.rgba( 50, 255, 50, 1 ),
39 | 			shadowOffsetX: 0,
40 | 			shadowOffsetY: 0,
41 | 			shadowBlur: 10,
42 | 			phase: Math.random()
43 | 		});
44 | 	}
45 | 	
46 | 	for( var i=0; i<stormtroopers; i++ ){
47 | 		
48 | 		var blasterAngle = Math.random() * Math.PI/4 + Math.PI*0.25;
49 | 		var blasterX = Math.sin( blasterAngle ) * battlefield;
50 | 		var blasterY = -Math.cos( blasterAngle ) * battlefield;
51 | 
52 | 		// reduce accuracy for stormtroopers
53 | 		var targetAngle = Math.random() * Math.PI/3 + Math.PI*0.25;
54 | 		var targetX = Math.sin( targetAngle ) * battlefield;
55 | 		var targetY = -Math.cos( targetAngle ) * battlefield;        
56 | 		
57 | 		list.addSegment({
58 | 			x0: width/2 + blasterX,
59 | 			y0: height/2 + blasterY,
60 | 			x1: width/2 - targetX,
61 | 			y1: height/2 - targetY,
62 | 			segmentLength: 80,
63 | 			strokeStyle: color.rgba( 255, 0, 0, 1 ),
64 | 			lineWidth: 5,
65 | 			blendMode: 'lighter',
66 | 			shadowColor: color.rgba( 255, 0, 0, 1 ),
67 | 			shadowOffsetX: 0,
68 | 			shadowOffsetY: 0,
69 | 			shadowBlur: 10,
70 | 			phase: Math.random()
71 | 		});
72 | 	}
73 | 
74 | }


--------------------------------------------------------------------------------
/code/roy-bokeh-video.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 1280, 720 );
 4 | 	glc.setDuration( 30 );
 5 | 	glc.setFPS( 60 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 256 );
 9 | 	//glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#236';
17 | 	
18 |     var nr = 450;
19 |     
20 |     for( var i=0; i<nr; i++ ){
21 |         
22 |         var col = 100 + Math.random() * 120;
23 |         var xpos = ( Math.random() * ( width * 5 ) ) - ( width * 2);
24 |         var zpos = Math.random() * 10;
25 |         var size = Math.random() * ( 30 * zpos ) + 10;
26 |         var trans = 0.3 + Math.random() * 0.3;
27 |         
28 |         var gradient = color.createRadialGradient( 0, 0, 0, 0, 0, size );
29 |  	   	gradient.addColorStop( 0, color.hsva( col, 1, 1, trans ) );
30 |     	gradient.addColorStop( 0.5, color.hsva( col, 1, 1, (trans*0.95) ) );
31 |     	gradient.addColorStop( 0.9, color.hsva( col, 1, 1, (trans*0.05) ) );
32 |     	gradient.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
33 |         
34 |         list.addCircle({
35 |             x: [ xpos + ( zpos * 300 ), xpos - ( zpos * 300 ) ],
36 |             y: Math.random() * height,
37 |             radius: size,
38 |             //fillStyle: color.hsva( 80+Math.random()*100, 1, 1, 0.6 ),
39 |             fillStyle: gradient,
40 |             blendMode: 'screen',
41 |         });
42 |     }
43 |     
44 | }
45 | 


--------------------------------------------------------------------------------
/code/roy-bokeh2-notext-video.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 1920, 1080 );
 4 | 	glc.setDuration( 30 );
 5 | 	glc.setFPS( 60 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 256 );
 9 | 	//glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     var baseColor = Math.random() * 360; // 160
17 |     var colorSpread = 60 + Math.random() * 100; // 120
18 |     var backColor = Math.round( baseColor + Math.random() * colorSpread ); // 200
19 |     var backBrightness = Math.random() * 0.25;
20 |     glc.styles.backgroundColor = color.hsv( backColor, 1, backBrightness );
21 | 	
22 |     var nr = 650;
23 |     
24 |     for( var i=0; i<nr; i++ ){
25 |         
26 |         var col = baseColor + Math.random() * colorSpread;
27 |         var size = Math.random() * 650 + 20;
28 |         var trans = 0.3 + Math.random() * 0.5;
29 |         
30 |         var gradient1 = color.createRadialGradient( 0, 0, 0, 0, 0, 0 );
31 |  	   	gradient1.addColorStop( 0, color.hsva( col, 1, 1, trans/2 ) );
32 |     	gradient1.addColorStop( 0.5, color.hsva( col, 1, 1, ( (trans/2) *0.95) ) );
33 |     	gradient1.addColorStop( 0.9, color.hsva( col, 1, 1, ( (trans/2) *0.05) ) );
34 |     	gradient1.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
35 | 
36 |         var gradient2 = color.createRadialGradient( 0, 0, 0, 0, 0, size );
37 |  	   	gradient2.addColorStop( 0, color.hsva( col, 1, 1, trans ) );
38 |     	gradient2.addColorStop( 0.5, color.hsva( col, 1, 1, (trans*0.95) ) );
39 |     	gradient2.addColorStop( 0.9, color.hsva( col, 1, 1, (trans*0.05) ) );
40 |     	gradient2.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
41 |         
42 |         
43 |         list.addCircle({
44 |             x: function( t ){
45 |                 return width/2 + Math.sin( ( t*2*Math.PI ) + this.offset ) * ( t * this.maxRadius );
46 |             },
47 |             y: function( t ){
48 |                 return height/2 - Math.cos( ( t*2*Math.PI ) + this.offset ) * ( t * this.maxRadius );
49 |             },
50 |             radius: [ 0, size ],
51 |             fillStyle: [ gradient1, gradient2 ],
52 |             blendMode: 'screen',
53 |             phase: Math.random(),
54 |             speedMult: Math.ceil( Math.random() * 5 ),
55 |             globalAlpha: [ 0, 1 ],
56 |             offset: Math.random() * 2 * Math.PI,
57 |             maxRadius: Math.sqrt( Math.pow( width/2, 2 ) + Math.pow( height/2, 2 ) ) + size,
58 |         });
59 | 
60 |     }
61 |     
62 | }
63 | 


--------------------------------------------------------------------------------
/code/roy-bokeh2-video.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 1920, 1080 );
 4 | 	glc.setDuration( 30 );
 5 | 	glc.setFPS( 60 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 256 );
 9 | 	//glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 1, 0.25 );
17 | 	
18 |     var nr = 650;
19 |     
20 |     for( var i=0; i<nr; i++ ){
21 |         
22 |         var col = 160 + Math.random() * 120;
23 |         var size = Math.random() * 650 + 20;
24 |         var trans = 0.3 + Math.random() * 0.5;
25 |         
26 |         var gradient1 = color.createRadialGradient( 0, 0, 0, 0, 0, 0 );
27 |  	   	gradient1.addColorStop( 0, color.hsva( col, 1, 1, trans/2 ) );
28 |     	gradient1.addColorStop( 0.5, color.hsva( col, 1, 1, ( (trans/2) *0.95) ) );
29 |     	gradient1.addColorStop( 0.9, color.hsva( col, 1, 1, ( (trans/2) *0.05) ) );
30 |     	gradient1.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
31 | 
32 |         var gradient2 = color.createRadialGradient( 0, 0, 0, 0, 0, size );
33 |  	   	gradient2.addColorStop( 0, color.hsva( col, 1, 1, trans ) );
34 |     	gradient2.addColorStop( 0.5, color.hsva( col, 1, 1, (trans*0.95) ) );
35 |     	gradient2.addColorStop( 0.9, color.hsva( col, 1, 1, (trans*0.05) ) );
36 |     	gradient2.addColorStop( 1, color.hsva( col, 1, 1, 0 ) );
37 |         
38 |         
39 |         list.addCircle({
40 |             x: function( t ){
41 |                 return width/2 + Math.sin( ( t*2*Math.PI ) + this.offset ) * ( t * this.maxRadius );
42 |             },
43 |             y: function( t ){
44 |                 return height/2 - Math.cos( ( t*2*Math.PI ) + this.offset ) * ( t * this.maxRadius );
45 |             },
46 |             radius: [ 0, size ],
47 |             //fillStyle: gradient,
48 |             fillStyle: [ gradient1, gradient2 ],
49 |             blendMode: 'screen',
50 |             phase: Math.random(),
51 |             speedMult: Math.ceil( Math.random() * 5 ),
52 |             globalAlpha: [ 0, 1 ],
53 |             offset: Math.random() * 2 * Math.PI,
54 |             maxRadius: Math.sqrt( Math.pow( width/2, 2 ) + Math.pow( height/2, 2 ) ) + size,
55 |         });
56 |         
57 |         list.addText({
58 | 			x: width / 2,
59 | 			y: height / 2.05,
60 |             text: 'T   E   N       E   I   G   H   T   Y       P',
61 |             fillStyle: 'white',
62 |             fontSize: 60,
63 |             fontFamily: 'Roboto',
64 |             shadowColor: color.rgba( 255, 255, 255, 0.05 ),
65 |         	shadowOffsetX: 0,
66 |         	shadowOffsetY: 0,
67 |         	shadowBlur: 5,
68 | 		});
69 |     }
70 |     
71 | }
72 | 


--------------------------------------------------------------------------------
/code/roy-bounce.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 600, 400 );
 4 | 	glc.setDuration( 1 );
 5 | 	glc.setFPS( 30 );
 6 | 	//glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var nr = 3;
17 | 	var startX = 150;
18 | 	var dist = 150;
19 | 
20 | 	var gradient = color.createLinearGradient( 0, -height/2, 0, height/2 );
21 | 	gradient.addColorStop( 0, '#224' );
22 | 	gradient.addColorStop( 0.5, '#66b' );
23 | 	gradient.addColorStop( 1, '#ddf' );
24 | 
25 | 	list.addRect({
26 | 		x: width/2,
27 | 		y: height/2,
28 | 		w: width,
29 | 		h: height,
30 | 		stroke: false,	
31 | 		fillStyle: gradient
32 | 	});
33 | 
34 | 
35 | 	for( var i=0; i<nr; i++ ){
36 | 
37 | 		var phase = Math.random();
38 | 
39 | 		var shadow = list.addOval({
40 | 			x: function( t ){
41 | 				return ( startX + this.nr*dist + 10 ) + Math.sin( t*Math.PI/2 ) * 120;
42 | 			},
43 | 			y: function( t ){
44 | 				return ( height*0.75 + 30 ) - Math.sin( t*Math.PI/2 ) * 50;
45 | 			},
46 | 			fill: true,
47 | 			fillStyle: function( t ){
48 | 				return color.rgba( 0, 0, 0, 0.2 - Math.sin( t*Math.PI/2 ) * 0.15 );
49 | 			},
50 | 			rx: function( t ){
51 | 				return 40 + Math.sin( t*Math.PI/2 ) * 15;
52 | 			},
53 | 			ry: function( t ){
54 | 				return 15 + Math.sin( t*Math.PI/2 ) * 5;
55 | 			},
56 | 			shadowColor: color.rgba( 0, 0, 0, 1 ),
57 | 			shadowOffsetX: 0,
58 | 			shadowOffsetY: 0,
59 | 			shadowBlur: 20,
60 | 			nr: i,
61 | 			phase: phase
62 | 		});
63 | 
64 | 		var gradient = color.createRadialGradient( -18, -22, 0, -36, -44, 85 );
65 | 		gradient.addColorStop( 0, 'white' );
66 | 		gradient.addColorStop( 0.6, '#66b' );
67 | 		gradient.addColorStop( 0.9, '#000' );
68 | 		gradient.addColorStop( 1, '#224' );
69 | 
70 | 		var ball = list.addCircle({
71 | 			x: startX + i * dist,
72 | 			y: function( t ){ return height*0.75 - Math.abs( Math.sin( t*Math.PI/2 ) * height/2 ); },
73 | 			radius: 40,
74 | 			stroke: false,
75 | 			fille: true,
76 | 			fillStyle: gradient,
77 | 			nr: i,
78 | 			phase: phase
79 | 		});
80 | 
81 | 	}
82 | 
83 | }


--------------------------------------------------------------------------------
/code/roy-boxedrays.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 320 );
 4 |     glc.setDuration( 1 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode( 'single' );
 7 |     glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#135';
17 |     var nr = 51;
18 |     var size = 120;
19 |     var dist = 135;
20 |     var diagSize = Math.sqrt( Math.pow( size, 2 ) + Math.pow( size, 2 ) );
21 | 
22 |     for( var j=0; j<2; j++ ){
23 |     
24 |         list.addRect({
25 |             x: j ? width/2 - dist : width/2 + dist,
26 |             y: height / 2,
27 |             w: size * 2,
28 |             h: size * 2,
29 |             fill: true,
30 |             fillStyle: color.rgba( 0, 0, 0, 0.3 ),
31 |             stroke: true,
32 |             strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
33 |             lineWidth: 1,
34 |         });
35 | 
36 |         for( var i=0; i<nr; i++ ){
37 | 
38 |             list.addRay({
39 |                 x: j ? width/2 - dist : width/2 + dist,
40 |                 y: height / 2,
41 |                 angle: j ? [ 360, 0 ] : [ 0, 360 ],
42 |                 strokeStyle: color.rgba( 255, 255, 255, 0.75 ),
43 |                 length: function( t ){
44 |                     var a = ( t*2*Math.PI ) % (Math.PI/2);
45 |                     if( a > Math.PI/4 ){ a = (Math.PI/2) - a; }
46 |                     var l = size / Math.cos( a );
47 |                     return l;
48 |                 },
49 |                 lineWidth: 2.25,
50 |                 phase: i/nr,
51 |                 speedMult: 1/nr,
52 |             });
53 |         }
54 | 
55 |     }
56 | 
57 | }


--------------------------------------------------------------------------------
/code/roy-bright.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(600, 400);
 4 |     glc.setDuration(2);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#333f49';
15 | 	var nr = 12500;
16 |     var size = 350;
17 |     var margin = 100;
18 |     
19 |     for( var i=0; i<nr; i++ ){
20 |         
21 |         var dist = ( Math.random() * Math.random() ) * size;
22 |         var angle = Math.random() * 2 * Math.PI;
23 |         var x = (width/2) + Math.sin( angle ) * dist;
24 |         var y = (height/2) - Math.cos( angle ) * dist;
25 | 
26 |         list.addLine({
27 |             x0: function( t ){
28 |             	return this._x + Math.sin( t*2*Math.PI ) * this._len;
29 |             },
30 |             y0: function( t ){
31 |             	return this._y - Math.cos( t*2*Math.PI ) * this._len;
32 |             },
33 |             x1: function( t ){
34 |             	return this._x - Math.sin( t*2*Math.PI ) * this._len;
35 |             },
36 |             y1: function( t ){
37 |             	return this._y + Math.cos( t*2*Math.PI ) * this._len;
38 |             },
39 |             _x: x,
40 |             _y: y,
41 |             _len: (size-dist)/8 + Math.random() * (size/10),
42 |             lineWidth: 1.75,
43 |             strokeStyle: color.rgba( 255, 255, 255, ( (size-dist)/size )*0.025 ),
44 |             blendMode: 'lighter',
45 |             speedMult: ( Math.random() < 0.5 ) ? 1 : -1,
46 |             phase: (i/nr),
47 |         });
48 |     }
49 | 
50 | 
51 | }
52 | 


--------------------------------------------------------------------------------
/code/roy-chaos.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 10 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 16 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#55665c';
18 | 
19 | 	// grid
20 | 	list.addGrid({
21 | 		x: 0,
22 | 		y: 0,
23 | 		w: width,
24 | 		h: height,
25 | 		gridSize: 20,
26 | 		lineWidth: 1,
27 | 		strokeStyle: color.rgba( 255, 255, 255, 0.3 )
28 | 	});
29 | 
30 | 	// axis lines
31 | 	for( var i=0; i<2; i++ ){
32 | 		list.addLine({
33 | 			x0: i ? 0 : width/2,
34 | 			y0: i ? height/2 : 0,
35 | 			x1: i ? width : width/2,
36 | 			y1: i ? height/2 : height,
37 | 			lineWidth: 1,
38 | 			strokeStyle: color.rgba( 255, 255, 255, 0.4 )
39 | 		});
40 | 	} 
41 | 
42 | 	// container
43 | 	var c = list.addContainer({
44 | 		x: width/2,
45 | 		y: height/2,
46 | 		rotation: [ 0, 360 ]
47 | 	});
48 | 	var prev = c;
49 | 	var segments = 13;
50 | 	var length = 27;
51 | 	var nr = 15;
52 | 
53 | 	for( var i=0; i<nr; i++ ){
54 | 		prev = c;
55 | 
56 | 		for( var a=0; a<segments; a++ ){
57 | 
58 | 			var angle = Math.random() * 2 * Math.PI;
59 | 			var len = length/2 + Math.random() * ( length / 2 );
60 | 			var lr = ( Math.random() < 0.5 );
61 | 
62 | 			var prev = list.addContainer({
63 | 				x: Math.sin( angle ) * len,
64 | 				y: -Math.cos( angle ) * len,
65 | 				rotation: lr ? [ 0, 360 ] : [ 360, 0 ],
66 | 				parent: prev,
67 | 				phase: Math.random()
68 | 			});
69 | 
70 | 		}
71 | 
72 | 		list.addCircle({
73 | 			x: 0,
74 | 			y: 0,
75 | 			radius: 5,
76 | 			fill: true,
77 | 			fillStyle: color.rgba( 255, 255, 255, 1 ),
78 | 			stroke: false,
79 | 			shadowColor: color.rgba( 0, 0, 0, 0.15 ),
80 | 			shadowOffsetX: 3,
81 | 			shadowOffsetY: 3,
82 | 			shadowBlur: 0,
83 | 			parent: prev
84 | 		});
85 | 
86 | 	}
87 | 
88 | }


--------------------------------------------------------------------------------
/code/roy-colorflower.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 	glc.styles.backgroundColor = '#125';
15 | 	var nr = 9;
16 | 	var radius = 80;
17 | 	
18 | 	for(var i=0; i<nr; i++ ){
19 | 		list.addCircle({
20 | 			x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
21 | 			y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
22 | 			radius: radius,
23 | 			fill: true,
24 | 			fillStyle: color.hsva( (i/nr)*360, 1, 1, 1 ),
25 | 			blendMode: 'screen',
26 | 			startAngle: -360/nr + 90,
27 | 			endAngle: 360/nr + 90,
28 | 			rotation: [ i * (360/nr), (i * (360/nr)) + 360 ],
29 | 		});
30 | 	}
31 | 
32 | }


--------------------------------------------------------------------------------
/code/roy-concentric-circles.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 8 );
 9 | 	glc.setQuality( 10 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#fff';
17 | 	var nr = 9;
18 | 	var sources = [];
19 | 	var baseSize = 200;
20 | 	var steps = 17;
21 | 	var sizeStep = 11.5;
22 | 	var cols = [ '#eef6ff', '#136' ];
23 | 
24 | 	for( var i=0; i<nr; i++ ){
25 | 		var src = [];
26 | 		src['x'] = 50 + i%3 * 150;
27 | 		src['y'] = 50 + Math.floor(i/3) * 150;
28 | 		src['r'] = 20 + Math.random() * 40;
29 | 		src['d'] = Math.random() < 0.5 ? 1 : -1;
30 | 		sources.push( src );
31 | 	}
32 | 	
33 | 	for( var i=0; i<steps; i++ ){
34 | 		for( var s=0; s<sources.length; s++ ){
35 | 			
36 | 			list.addCircle({
37 | 				x: function( t ){
38 | 					return this.xpos + this.dir * Math.sin( t*2*Math.PI ) * this.rad;
39 | 				},
40 | 				y: function( t ){
41 | 					return this.ypos - Math.cos( t*2*Math.PI ) * this.rad;
42 | 				},
43 | 				xpos: sources[s]['x'],
44 | 				ypos: sources[s]['y'],
45 | 				rad: sources[s]['r'],
46 | 				dir: sources[s]['d'],
47 | 				radius: baseSize - ( i * sizeStep ),
48 | 				stroke: false,
49 | 				fillStyle: cols[ i%cols.length ],
50 | 				phase: s/nr,
51 | 			});
52 | 	
53 | 		}
54 | 	}
55 | }


--------------------------------------------------------------------------------
/code/roy-corner.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 600, 400 );
 4 | 	glc.setDuration( 5 );
 5 | 	glc.setFPS( 25 );
 6 | 	//glc.setMode('single');
 7 | 	//glc.setEasing(false);
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 0, 0, 0, 1 );
17 | 	var nr = 31;
18 | 	var v1 = 50;
19 | 	var v2 = width - 50;
20 | 	var padding = 0.1
21 | 	var dist = ( height * (1-padding*2) ) / nr;
22 | 	
23 | 	for( var i=0; i<nr; i++ ){
24 | 
25 | 		list.addSegment({
26 | 			x0: v1,
27 | 			y0: height/2,
28 | 			x1: width/2,
29 | 			y1: height * padding + dist * i,
30 | 			segmentLength: 180,
31 | 			strokeStyle: color.hsva( 200, 1, 1, 1 ),
32 | 			lineWidth: [0,5],
33 | 			shadowColor: color.hsva( 200, 1, 1, 1 ),
34 | 			shadowOffsetX: 0,
35 | 			shadowOffsetY: 0,
36 | 			shadowBlur: 10,
37 | 			phase: (i/nr)/7,
38 | 			globalAlpha: [ 0, 1 ]
39 | 		});
40 | 
41 | 		list.addSegment({
42 | 			x0: v2,
43 | 			y0: height/2,
44 | 			x1: width/2,
45 | 			y1: height * padding + dist * i,
46 | 			segmentLength: 180,
47 | 			strokeStyle: color.hsva( 210, 1, 1, 1 ),
48 | 			lineWidth: [0,2.5],
49 | 			shadowColor: color.hsva( 210, 1, 1, 1 ),
50 | 			shadowOffsetX: 0,
51 | 			shadowOffsetY: 0,
52 | 			shadowBlur: 10,
53 | 			phase: (i/nr)/7,
54 | 			globalAlpha: [ 0, 1 ]
55 | 		});
56 | 		
57 | 	}
58 | 
59 | }


--------------------------------------------------------------------------------
/code/roy-corona.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     var bgcol = color.hsv( 200, 1, 0.2 );
17 | 	glc.styles.backgroundColor = bgcol;
18 |     var colors = [
19 |         color.hsv( 20, 1, 1 ),
20 |         bgcol,
21 |         color.hsv( 50, 1, 1 ),
22 |         bgcol,
23 |     ];
24 |     var layers = colors.length;
25 | 	var points = 13;
26 |     var segments = 150;
27 |     var wave = 0.04;
28 |     
29 |     for( var l=0; l<layers; l++ ){
30 | 
31 |         for( var p=0; p<points; p++ ){
32 | 
33 |             var segmentSize = 25;
34 |             var offset = (l/layers) * (1/points) * 2*Math.PI;
35 | 
36 |             for( var s=0; s<segments; s++ ){
37 | 
38 |                 var size = segmentSize * ((segments-s)/segments);
39 |                 var rad = s*1.1;
40 | 
41 |                 list.addCircle({
42 |                     x: function( t ){
43 |                         return width/2 + Math.sin( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI + this.offset ) * this.rad;
44 |                     },
45 |                     y: function( t ){
46 |                         return width/2 - Math.cos( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI + this.offset ) * this.rad;
47 |                     },
48 |                     radius: size,
49 |                     stroke: false,
50 |                     fillStyle: colors[l],
51 |                     point: p,
52 |                     segment: s,
53 |                     rad: rad,
54 |                     offset: offset,
55 |                     phase: 1 - s/segments + ( (l/layers) / 8 ),
56 |                 });
57 |            }
58 |         }
59 |     }
60 | }
61 | 


--------------------------------------------------------------------------------
/code/roy-creature.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 700, 700 );
 4 |     glc.setDuration( 4 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#345';
17 | 	var points = 9;
18 |     var segments = 120;
19 |     var wave = 0.03;
20 |     
21 |     for( var p=0; p<points; p++ ){
22 |         
23 |         var segmentSize = 35;
24 |         
25 |         for( var s=0; s<segments; s++ ){
26 |             
27 |             segmentSize = segmentSize * 0.98;
28 |             var rad = s*2;
29 |             
30 |             list.addCircle({
31 |                 x: function( t ){
32 |                     return width/2 + Math.sin( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI ) * this.rad;
33 |                 },
34 |                 y: function( t ){
35 |                     return width/2 - Math.cos( ( this.point/points + Math.sin( t*2*Math.PI )*wave )*2*Math.PI ) * this.rad;
36 |                 },
37 |                 radius: segmentSize,
38 |                 stroke: false,
39 |                 fillStyle: '#fff8cc',
40 |                 point: p,
41 |                 segment: s,
42 |                 rad: rad,
43 |                 phase: 1 - s/segments,
44 |             });
45 | 	
46 |         }
47 |         
48 |     }
49 | 
50 | }
51 | 


--------------------------------------------------------------------------------
/code/roy-crescents.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 5 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 5 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     var nr = 5;
17 |     var size = 90;
18 |     var rad = 55;
19 | 
20 |     for( var i=0; i<nr; i++ ){
21 | 
22 |         list.addCrescent({
23 |             x: width / 2 + Math.sin( (i/nr)*2*Math.PI ) * rad,
24 |             y: height / 2 - Math.cos( (i/nr)*2*Math.PI ) * rad,
25 |             radius: size,
26 |             percent: function( t ){
27 |                 return 0.5 + Math.cos( t*2*Math.PI ) * 0.5;
28 |             },
29 |             baseAngle: 360*(i/nr),
30 |             rotation: function( t ){
31 |                 return this.baseAngle + Math.cos( t*Math.PI ) * 180;
32 |             },
33 |             stroke: false,
34 |             fillStyle: color.hsva( 200, 1, 1, 0.225 ),
35 |         });
36 |         
37 |     }
38 | 
39 | }
40 | 


--------------------------------------------------------------------------------
/code/roy-crosswind.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(600, 600);
 4 |     glc.setDuration(2.5);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#333';
15 | 	var nr = 67;
16 |     var margin = 100;
17 |     var x0 = margin;
18 |     var x1 = width/2;
19 |     var x2 = width/2;
20 |     var x3 = width - margin;
21 |     var amplitude = 60;
22 | 	
23 |     for( var i=0; i<nr; i++ ){
24 | 
25 |         var baseY = margin + i * ( ( height - ( margin*2 ) ) / (nr-1) );
26 |         var stepX = ( (width)-(2*x0) )/(nr-1);
27 |         var amp = amplitude * ( Math.abs( baseY-(width/2) ) / Math.abs( (width/2)-margin ) );
28 |         
29 |         list.addBezierCurve({
30 |             x0: x0 + i * stepX,
31 |             y0: baseY,
32 |             x1: function(t){
33 |                 return x1 + Math.cos( t*2*Math.PI ) * this._ampl;
34 |             },
35 |             y1: function(t){
36 |                 return this._baseY + Math.sin( t*2*Math.PI ) * this._ampl;
37 |             },
38 |             x2: function(t){
39 |                 return x2 + Math.cos( t*2*Math.PI ) * this._ampl;
40 |             },
41 |             y2: function(t){
42 |                 return this._baseY + Math.sin( (t+0.37)*2*Math.PI ) * this._ampl;
43 |             },
44 |             x3: x3 - i * stepX,
45 |             y3: baseY,
46 |             strokeStyle: '#fff',
47 |             lineWidth: 1.5,
48 |             phase: i/(nr*3.73),
49 |             _baseY: baseY,
50 |             _ampl: amp
51 |         });
52 |         
53 |         list.addBezierCurve({
54 |             y0: x0 + i * stepX,
55 |             x0: baseY,
56 |             y1: function(t){
57 |                 return x1 + Math.cos( t*2*Math.PI ) * this._ampl;
58 |             },
59 |             x1: function(t){
60 |                 return this._baseY + Math.sin( (t+0.71)*2*Math.PI ) * this._ampl;
61 |             },
62 |             y2: function(t){
63 |                 return x2 + Math.cos( t*2*Math.PI ) * this._ampl;
64 |             },
65 |             x2: function(t){
66 |                 return this._baseY + Math.sin( (t+0.37)*2*Math.PI ) * this._ampl;
67 |             },
68 |             y3: x3 - i * stepX,
69 |             x3: baseY,
70 |             strokeStyle: '#fff',
71 |             lineWidth: 1.5,
72 |             phase: i/(nr*4.73),
73 |             _baseY: baseY,
74 |             _ampl: amp,//amplitude - i*stepAmp
75 |         });
76 |         
77 |     }
78 | }


--------------------------------------------------------------------------------
/code/roy-cubes.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h;
13 | 
14 | 	// your code goes here:
15 | 	var maxsize = 800;
16 | 	var nr = 31;
17 | 
18 | 	glc.styles.lineWidth = 4;
19 | 
20 | /*	list.addRect({
21 | 		x: width/2,
22 | 		y: height/2,
23 | 		w: width,
24 | 		h: height,
25 | 		fill: true,
26 | 		fillStyle: '#99aaee'
27 | 	});*/
28 | 
29 | 	for( var i = 0; i < nr; i++ ){
30 | 		var size = Math.sin( (i*2*Math.PI)/nr ) * maxsize;
31 | 		list.addCube({
32 | 			x: width/2,
33 | 			y: height/2,
34 | 			z: [0, 100],
35 | 			rotationX: [0, 180],
36 | 			rotationY: [0, 180],
37 | 			rotationZ: [0, 180],
38 | 			size: [ size, 0 ],
39 | 			strokeStyle: ['rgba(0,0,0,0)','rgba(0,0,0,1)'],
40 | 			phase: i/nr
41 | 		});
42 | 
43 | 	}
44 | 
45 | }


--------------------------------------------------------------------------------
/code/roy-curvedlines.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(700, 500);
 4 |     glc.setDuration(3.5);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#333';
15 | 	var nr = 27;
16 |     var margin = 100;
17 |     var x0 = margin;
18 |     var x1 = 300;
19 |     var x2 = 400;
20 |     var x3 = width - margin;
21 |     var amplitude = 80;
22 | 	
23 |     for( var i=0; i<nr; i++ ){
24 | 
25 |         var baseY = margin + i * ( ( height - ( margin*2 ) ) / (nr-1) );
26 |         
27 |         list.addBezierCurve({
28 |             x0: x0,
29 |             y0: baseY,
30 |             x1: function(t){
31 |                 return x1 + Math.cos( t*2*Math.PI ) * amplitude;
32 |             },
33 |             y1: function(t){
34 |                 return this._baseY + Math.sin( t*2*Math.PI ) * amplitude;
35 |             },
36 |             x2: function(t){
37 |                 return x2 + Math.cos( t*2*Math.PI ) * amplitude;
38 |             },
39 |             y2: function(t){
40 |                 return this._baseY + Math.sin( (t+0.5)*2*Math.PI ) * amplitude;
41 |             },
42 |             x3: x3,
43 |             y3: baseY,
44 |             strokeStyle: '#fff',
45 |             lineWidth: 1.5,
46 |             phase: i/(nr*2.73),
47 |             _baseY: baseY,
48 |         });
49 |         
50 |     }
51 | }


--------------------------------------------------------------------------------
/code/roy-diamonds.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( 'single' );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 
17 | 	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );
18 | 	var sizeX = 32;
19 | 	var sizeY = 48;
20 | 	var gutter = 2;
21 | 	var gridX = Math.ceil( width/(sizeX+gutter)/2 ) + 1;
22 | 	var gridY = Math.ceil( height/(sizeY+gutter)/2 ) + 1;
23 | 	
24 | 	for( var x=-gridX; x<gridX; x++ ){
25 | 		for( var y=-gridY; y<gridY; y++ ){
26 | 			
27 | 			var xpos = width/2 + x * ( sizeX*2 + gutter ) + ( ( y%2==0 ) ? -( sizeX + gutter/2 ) : 0 );
28 | 			var ypos = height/2 + y * ( sizeY + gutter );
29 | 			var dist = Math.sqrt( Math.pow( width/2-xpos, 2 ) + Math.pow( height/2-ypos, 2 ) );
30 | 			
31 | 			list.addStar({
32 | 				x: xpos,
33 | 				y: ypos,
34 | 				points: 2,
35 | 				innerRadius: function( t ){
36 | 					return Math.sin( t*Math.PI ) * sizeX;
37 | 				},
38 | 				outerRadius: sizeY,
39 | 				stroke: false,
40 | 				rotation: 22.5,
41 | 				fillStyle: function(t){
42 | 					if( t < 0.5 ){
43 | 						var sat = 0.75 + t/2;
44 | 						return color.hsv( this.frontColor, sat, 1 );
45 | 					} else {
46 | 						var val = 1 - (t-0.5);
47 | 						return color.hsv( this.frontColor, 1, val );
48 | 					}
49 | 				},
50 | 				phase: dist/600,
51 | 				frontColor: 200,
52 | 			});
53 | 			
54 | 		}
55 | 	}
56 | 
57 | }


--------------------------------------------------------------------------------
/code/roy-disperse.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500);
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     //glc.setEasing( false );
 8 |    	glc.setMaxColors( 48 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#233';
17 |     var nr = 247;
18 |     var maxRad = Math.sqrt( Math.pow( width/2, 2 ) + Math.pow( height/2, 2 ) );
19 |     var maxVariance = 0.3;
20 | 
21 | 	for( var i=0; i<nr; i++ ){
22 |         
23 |         var variance = Math.random() * maxVariance - maxVariance/2;
24 |         
25 |         list.addBezierSegment({
26 |             x0: width/2,
27 |             y0: height/2,
28 |             x1: width/2 + Math.sin( ( i/nr + variance )*2*Math.PI ) * (maxRad*0.33),
29 |             y1: height/2 - Math.cos( ( i/nr + variance )*2*Math.PI ) * (maxRad*0.33),
30 |             x2: width/2 + Math.sin( ( i/nr - variance )*2*Math.PI ) * (maxRad*0.66),
31 |             y2: height/2 - Math.cos( ( i/nr - variance )*2*Math.PI ) * (maxRad*0.66),
32 |             x3: width/2 + Math.sin( (i/nr)*2*Math.PI ) * maxRad,
33 |             y3: height/2 - Math.cos( (i/nr)*2*Math.PI ) * maxRad,
34 |             percent: Math.random() * 0.7,
35 |             phase: Math.random()/3,
36 |             lineWidth: 1.15,
37 |             strokeStyle: function( t ){
38 |                 var val = Math.cos( (t/2)*Math.PI ) / 3;
39 |                 return color.rgba( 255, 255, 255, val );
40 |             }
41 |         });
42 |         
43 |     }
44 | 
45 | }
46 | 


--------------------------------------------------------------------------------
/code/roy-dotdance.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 0.5 );
 6 | 	glc.setFPS( 30 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 32 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#ddeeff';
17 | 	var rings = 10;
18 | 	var size = 10;
19 | 	var mindist = 30;
20 | 
21 | 	for( var r=0; r<rings; r++){
22 | 
23 | 		var radius = 20 + r * mindist;
24 | 		var circlesize = 2 * Math.PI * radius;
25 | 		var nrofdots = Math.max( Math.floor( circlesize / mindist ), 1 );
26 | 		//if( nrofdots == 0 ){ nrofdots = 1; }
27 | 
28 | 		for( var i=0; i<nrofdots; i++ ){
29 | 			list.addCircle({
30 | 				/*x: [ ( (width/2) + Math.sin( (2*Math.PI) * (i/nrofdots) ) * radius ), ( (width/2) + Math.sin( (2*Math.PI) * ((i+1)/nrofdots) ) * radius ) ],
31 | 				y: [ ( (height/2) + -Math.cos( (2*Math.PI) * (i/nrofdots) ) * radius ), ( (height/2) + -Math.cos( (2*Math.PI) * ((i+1)/nrofdots) ) * radius ) ],*/
32 | 				x: function( t ){
33 | 					return (width/2) + Math.sin( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
34 | 				},
35 | 				y: function( t ){
36 | 					return (height/2) + -Math.cos( (2*Math.PI) * ( ( t+this.p_nr ) / this.p_nrofdots ) ) * this.p_radius;
37 | 				},
38 | 				radius: size,
39 | 				stroke: false,
40 | 				fill: true,
41 | 				fillStyle: color.rgba( 255, 255, 255, 1 ),
42 | 				shadowColor: color.rgba( 0, 0, 0, 0.25 ),
43 | 				shadowOffsetX: 5,
44 | 				shadowOffsetY: 5,
45 | 				shadowBlur: 10,
46 | 				p_radius: radius,
47 | 				p_nr: i,
48 | 				p_nrofdots: nrofdots
49 | 			});
50 | 		}
51 | 	}
52 | 
53 | }


--------------------------------------------------------------------------------
/code/roy-dotgrid.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	// glc.setMode("single");
 8 | 	// glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h;
13 | 
14 | 	// your code goes here:
15 | 	var x = 0;
16 | 	var y = 0;
17 | 	var grid = 8;
18 | 	var dist = 400 / grid;
19 | 	var maxradius = Math.sqrt( ( 0.5 * dist ) * ( 0.5 * dist ) + ( 0.5 * dist ) * ( 0.5 * dist ) );
20 | 
21 | 	for( x = 0; x < grid; x++ ){
22 | 		for( y = 0; y < grid; y++ ){
23 | 			list.addCircle({
24 | 				x: x*dist + ( 0.5 * dist ),
25 | 				y: y*dist + ( 0.5 * dist ),
26 | 				radius: [ 0, maxradius ]
27 | 			});
28 | 		}
29 | 	}
30 | 
31 | 	/*list.addCircle({
32 | 		x: [200,400],
33 | 		y: 200,
34 | 		radius: [20, 100],
35 | 		stroke: true,
36 | 		strokeStyle: "#ff0000",
37 | 		fillStyle: "yellow"
38 | 	});*/
39 | }		


--------------------------------------------------------------------------------
/code/roy-dust.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 600 );
 4 |     glc.setDuration( 4 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing( false );
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#333';
15 | 	var nr = 1000,
16 |         r = 140,
17 |         r2 = 450,
18 |         f = 2,
19 |         size= 6;
20 | 	
21 |     for( var i=0; i<nr; i++ ){
22 | 
23 |         var sx = Math.sin( (i/nr)*2*Math.PI ) * r;
24 |         var sy = Math.cos( (i/nr)*2*Math.PI ) * r
25 |         var dist = Math.random() * r2;
26 |         var angle = Math.random() * ( 2*Math.PI );
27 |         var tx = sx + Math.sin( angle ) * dist;
28 |         var ty = sy - Math.cos( angle ) * dist;
29 |         
30 |         list.addCircle({
31 |             x: [ (width/2)+(sx+(0.025*tx)), (width/2)+tx ],
32 |             y: [ (height/2)+(sy+(0.025*ty)), (height/2)+ty ],
33 |             radius: function(t){
34 |                 if( t <= (1/f) ){
35 |                     return size - (t*(size*f));
36 |                 } else {
37 |                     return 0;
38 |                 }
39 |             },
40 |             stroke: false,
41 |             fillStyle: color.rgba(255,200,100,0.65),
42 |             blendMode: 'lighter',
43 |             phase: i/nr,
44 |         });
45 | 	
46 |         
47 |     }
48 | }


--------------------------------------------------------------------------------
/code/roy-electrons.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(400, 400);
 4 |     glc.setDuration(3);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#333';
17 | 	var nr = 39;
18 |     var cols = [ '#c00', '#0c0', '#00c' ];
19 |     
20 |     for( var i=0; i<nr; i++ ){
21 |         
22 |         var angle = Math.random() * 360;
23 |         
24 |         var c = list.addContainer({
25 | 			x: width / 2,
26 | 			y: height / 2,
27 |             rotation: angle
28 | 		});
29 |         
30 |         list.addCircle({
31 |             x: function( t ){
32 |                 return Math.sin( t*2*Math.PI ) * this._radius;
33 |             },
34 |             y: 0,
35 |             radius: function( t ){
36 |                 return ( this._size * 1.5 ) + Math.cos( t*2*Math.PI ) * this._size;
37 |             },
38 |             parent: c,
39 |             stroke: false,
40 |             fillStyle: cols[ i%cols.length ], //color.rgba( 255, 255, 255, 0.7 ),
41 |             blendMode: 'screen',
42 |             phase: Math.random(),
43 |             _radius: 40 + Math.random() * 100,
44 |             _size: Math.random() * 30,
45 |         });
46 |         
47 |     }
48 | 
49 | }
50 | 


--------------------------------------------------------------------------------
/code/roy-elegance.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 5 );
 6 | 	glc.setFPS( 25 );
 7 | 	//glc.setMode( "single" );
 8 | 	//glc.setEasing( false );
 9 | 	glc.setMaxColors( 16 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#335577';
18 | 
19 | 	var c = list.addContainer({
20 | 		x: width/2,
21 | 		y: height/2,
22 | 		rotation: [-20,20]
23 | 	});
24 | 	var prev = c;
25 | 	var nr = 6;
26 | 	var size = 6;
27 | 	var segments = 27;
28 | 
29 | 	for( var a=0; a<nr; a++ ){
30 | 
31 | 		for( var i=0; i<segments; i++ ){
32 | 
33 | 			var angle = ( i==0 ) ? a * 360/nr : 0;
34 | 
35 | 			var prev = list.addRay({
36 | 				x: size,
37 | 				y: 0,
38 | 				length: size,
39 | 				angle: [ angle-i*1.25, angle+i*1.25 ],
40 | 				lineWidth: 2,
41 | 				strokeStyle: 'white',
42 | 				parent: prev
43 | 			});
44 | 
45 | 			if( i == segments-1 ){
46 | 				prev = c;
47 | 			}
48 | 		}
49 | 
50 | 	}
51 | }


--------------------------------------------------------------------------------
/code/roy-fireflies.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 500, 500 );
 5 | 	glc.setDuration( 2.5 );
 6 | 	glc.setFPS(25);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(64);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#333';
17 | 	var nr = 500;
18 | 
19 | 	for( var i=0; i<nr; i++ ){
20 |         
21 |         var rad = 150 + Math.random() * 150;
22 |         var angle1 = Math.random();
23 |         var angle2 = angle1 + ( ( Math.random() * 0.5 ) - 0.25 );
24 |         var c1x = width/2 + Math.sin( angle1*2*Math.PI ) * rad;
25 |         var c1y = height/2 + -Math.cos( angle1*2*Math.PI ) * rad;
26 |         var c2x = width/2 + Math.sin( angle2*2*Math.PI ) * rad;
27 |         var c2y = height/2 + -Math.cos( angle2*2*Math.PI ) * rad;
28 | 
29 | 		list.addBezierSegment({
30 | 			x0: width/2,
31 | 			y0: height/2,
32 | 			x1: c1x,
33 | 			y1: c1y,
34 | 			x2: c2x,
35 | 			y2: c2y,
36 | 			x3: width/2,
37 | 			y3: height/2,
38 | 			lineWidth: function( t ){
39 | 				return Math.sin( t * Math.PI ) * 2;
40 | 			},
41 | 			strokeStyle: function( t ){
42 |                 var alpha = -1 + ( Math.sin( t * Math.PI ) * 2 );
43 |                 return color.rgba( 255, 255, 255, alpha );
44 |             },
45 | 			percent: 0.1,
46 | 			phase: ( i / nr )
47 | 		});
48 | 
49 | 	}
50 | }


--------------------------------------------------------------------------------
/code/roy-flair.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(500, 500);
 4 |     glc.setDuration(3.5);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors( 128 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#234';
17 | 
18 |     var nr = 21;
19 |     var rad = 100;
20 |     var size = 110;
21 |     var cols = [ '#f00', '#0f0', '#00f' ];
22 |     var phaseChange = 0.025;
23 |     
24 |     for( var c=0; c<cols.length; c++ ){
25 | 
26 |         for( var i=0; i<nr; i++ ){
27 | 
28 |             var container = list.addContainer({
29 |                 x: function( t ){
30 |                     var ti = this.i + Math.cos( t*2*Math.PI ) * (i/nr);
31 |                     return width/2 + Math.sin( (ti/nr)*2*Math.PI ) * rad;
32 |                 },
33 |                 y: function( t ){
34 |                     var ti = this.i + Math.cos( t*2*Math.PI ) * (i/nr);
35 |                     return height/2 - Math.cos( (ti/nr)*2*Math.PI ) * rad;
36 |                 },
37 |                 baseAngle: (i/nr) * 360 - 90,
38 |                 i: i,
39 |                 rotation: function( t ){
40 |                     return this.baseAngle + Math.sin( t*2*Math.PI ) * 30;
41 |                 },
42 |                 phase: c * phaseChange,
43 |             });
44 | 
45 |             list.addRay({
46 |                 x: 0,
47 |                 y: 0,
48 |                 length: size,
49 |                 parent: container,
50 |                 lineWidth: 10,
51 |                 strokeStyle: cols[c],
52 |                 blendMode: 'screen',
53 |             });
54 | 
55 |         }
56 |         
57 |     }
58 | 
59 | }


--------------------------------------------------------------------------------
/code/roy-flame.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 1.5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 70, 50, 30, 1 );
17 | 	var nr = 250;
18 | 	var r1 = 20;
19 | 	var r2 = 50;
20 | 
21 | 	var bgGradient = color.createRadialGradient( 0, 0, 0, 0, 0, 300 );
22 | 	bgGradient.addColorStop( 0, color.rgba( 255, 180, 0, 0.3 ) );
23 | 	bgGradient.addColorStop( 1, color.rgba( 255, 160, 0, 0 ) );
24 | 
25 | 	list.addCircle({
26 | 		x: width/2,
27 | 		y: 260,
28 | 		radius: 300,
29 | 		fillStyle: bgGradient,
30 | 		stroke: false
31 | 	});
32 | 	
33 | 	var gradient1 = color.createRadialGradient( 0, 0, 0, 0, 0, r1 );
34 | 	gradient1.addColorStop( 0, color.rgba( 255, 220, 0, 1 ) );
35 | 	gradient1.addColorStop( 1, color.rgba( 255, 200, 0, 0.25 ) );
36 | 
37 | 	var gradient2 = color.createRadialGradient( 0, 0, 0, 0, 0, r2 );
38 | 	gradient2.addColorStop( 0, color.rgba( 255, 180, 0, 0.65 ) );
39 | 	gradient2.addColorStop( 1, color.rgba( 255, 160, 0, 0 ) );
40 |  
41 | 	
42 | 	for( var i=0; i<nr; i++ ){
43 | 		list.addCircle({
44 | 			x: function( t ){
45 | 				return width/2 + Math.sin( t * Math.PI ) * this.amp;
46 | 			},
47 | 			y: [ 325, 200 - Math.random()*175 ],
48 | 			radius: [ r1, r2 ],
49 | 			stroke: false,
50 | 			fill: true,
51 | 			fillStyle: [ gradient1, gradient2 ],
52 | 			globalAlpha: [ 0.75, 0 ],
53 | 			phase: Math.random(),
54 | 			wl: -Math.random()*100 - 50,
55 | 			amp: ( Math.random() * 80 ) - 40,
56 | 			speedMult: Math.ceil( Math.random() * 2 )
57 | 		});
58 | 	}
59 | 
60 | }


--------------------------------------------------------------------------------
/code/roy-groovy.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 0, 0, 0, 1 );
17 | 
18 | 	var cols = [ '#f00', '#0f0', '#00f' ];
19 | 	var clusters = 5;
20 | 	var clusterRadius = 140;
21 | 	var nr = cols.length;
22 | 
23 | 	for( var c=0; c<clusters; c++ ){
24 | 		var bx = width/2 + Math.sin( (c/clusters)*2*Math.PI ) * clusterRadius;
25 | 		var by = height/2 - Math.cos( (c/clusters)*2*Math.PI ) * clusterRadius;
26 | 
27 | 		for( var i=0; i<nr; i++ ){
28 | 
29 | 			list.addCircle({
30 | 				x: function( t ){
31 | 					return this.bx + Math.sin( (t+this.nr/nr)*2*Math.PI ) * ( Math.sin(t*2*Math.PI) * this.r );
32 | 				},
33 | 				y: function( t ){
34 | 					return this.by - Math.cos( (t+this.nr/nr)*2*Math.PI ) * ( Math.sin(t*2*Math.PI) * this.r );
35 | 				},
36 | 				radius: 85,
37 | 				stroke: false,
38 | 				fill: true,
39 | 				fillStyle: cols[ i ],
40 | 				blendMode: 'lighter',
41 | 				nr: i,
42 | 				r: 60,
43 | 				bx: bx,
44 | 				by: by,
45 | 				phase: c/clusters
46 | 			});
47 | 
48 | 		}
49 | 
50 | 	}
51 | 
52 | }


--------------------------------------------------------------------------------
/code/roy-hearts.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	// glc.setMode("single");
 8 | 	// glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h;
13 | 
14 | 	// your code goes here:
15 | 	var x = 0;
16 | 	var y = 0;
17 | 	var grid = 6;
18 | 	var dist = 400 / grid;
19 | 	var maxsize = dist * 2;
20 | 
21 | 	glc.styles.lineWidth = 2;
22 | 
23 | 	for( x = 0; x < grid+2; x++ ){
24 | 		for( y = 0; y < grid+2; y++ ){
25 | 			list.addHeart({
26 | 				x: x*dist - ( 0.5 * dist ),
27 | 				y: y*dist - ( 0.5 * dist ),
28 | 				w: [ 0, maxsize ],
29 | 				h: [ 0, maxsize ],
30 | 				rotation: [ -Math.random()*360, Math.random()*360 ],
31 | 				stroke: false,
32 | 				fill: true,
33 | 				strokeStyle: '#aa2266',
34 | 				fillStyle: '#ff3399',
35 | 			});
36 | 		}
37 | 	}
38 | 
39 | }		


--------------------------------------------------------------------------------
/code/roy-hexagon.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 600 );
 4 |     glc.setDuration( 2.5 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     //glc.setEasing(false);
 8 |     glc.setMaxColors( 32 );
 9 |     glc.setQuality( 10 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#234';
17 |     var nr = 5;
18 |     var corners = [];
19 |     var size = 10;
20 |     var dist = 50;
21 |         
22 |     var c = list.addContainer({
23 |         x: width / 2,
24 |         y: height / 2,
25 |     });
26 | 
27 |     list.addCircle({
28 |         x: 0,
29 |         y: 0,
30 |         radius: size,
31 |         stroke: false,
32 |         fill: true,
33 |         fillStyle: 'white',
34 |         parent: c
35 |     });
36 |     
37 |     for( var n=1; n<nr; n++ ){
38 |         
39 |         var rad = n * dist;
40 |         var sideDots = Math.max( 0, n - 1 );
41 |         var totalDots = 6;
42 |         totalDots += 6 * sideDots;
43 | 
44 |         for( var i=0; i<6; i++ ){
45 |             corners[i] = {
46 |                 x: Math.sin( (i/6) * 2*Math.PI ) * rad,
47 |                 y: -Math.cos( (i/6) * 2*Math.PI ) * rad
48 |             }
49 |         }
50 |         
51 |         for( var d=0; d<totalDots; d++ ){
52 |             
53 |             var dir = ( n % 2 == 0 ) ? 1 : -1;
54 |             var pos = getDotPosition( rad, sideDots, totalDots, d );
55 |             var pos2 = getDotPosition( rad, sideDots, totalDots, d + dir );
56 |             
57 |             list.addCircle({
58 |                 x: [ pos.x, pos2.x ],
59 |                 y: [ pos.y, pos2.y ],
60 |                 radius: size,
61 |                 stroke: false,
62 |                 fill: true,
63 |                 fillStyle: 'white',
64 |                 parent: c
65 |             });
66 | 
67 |         }
68 |         
69 |     }
70 |     
71 |     
72 |     function getDotPosition( rad, sideDots, totalDots, d ){
73 |         if( d < 0 ){ d = totalDots+d; }
74 |         var sidePos = d / ( 1+sideDots );
75 |         var c1 = corners[ Math.floor( sidePos ) % 6 ];
76 |         var c2 = corners[ ( Math.floor( sidePos ) + 1 ) % 6 ];
77 |         var relPos = sidePos % 1;
78 |         var pos = {
79 |             x: ( (1-relPos)  * c1.x ) + ( relPos * c2.x ),
80 |             y: ( (1-relPos) * c1.y ) + ( relPos * c2.y ),
81 |         };
82 |         return pos;
83 |     }
84 | 
85 | }
86 | 


--------------------------------------------------------------------------------
/code/roy-hexagon2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 600, 600 );
 4 | 	glc.setDuration( 3.5 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	//glc.setEasing(false);
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 10 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#234';
17 | 	var nr = 6;
18 | 	var corners = [];
19 | 	var size = 15;
20 | 	var dist = 40;
21 | 		
22 | 	var c = list.addContainer({
23 | 		x: width / 2,
24 | 		y: height / 2,
25 | 	});
26 | 
27 | 	for( var n=0; n<nr; n++ ){
28 | 		
29 | 		var rad = n * dist;
30 | 		var sideDots = Math.max( 0, n - 1 );
31 | 		var totalDots = ( n == 0 ) ? 1 : 6;
32 | 		totalDots += 6 * sideDots;
33 | 
34 | 		for( var i=0; i<6; i++ ){
35 | 			corners[i] = {
36 | 				x: Math.sin( (i/6) * 2*Math.PI ) * rad,
37 | 				y: -Math.cos( (i/6) * 2*Math.PI ) * rad
38 | 			}
39 | 		}
40 | 		
41 | 		for( var d=0; d<totalDots; d++ ){
42 | 			
43 | 			var pos = getDotPosition( rad, sideDots, totalDots, d );
44 | 			var pos2 = getDotPosition( rad, sideDots, totalDots, d + 1 );
45 | 			
46 | 			list.addCircle({
47 | 				x: [ pos.x, pos2.x ],
48 | 				y: [ pos.y, pos2.y ],
49 | 				size: size,
50 | 				radius: function( t ){
51 | 					return this.size*0.6 + Math.cos( t*2*Math.PI ) * ( this.size * 0.4 );
52 | 				},
53 | 				stroke: false,
54 | 				fill: true,
55 | 				fillStyle: ( n % 2 ) ? '#9cf' : '#fff',
56 | 				parent: c,
57 | 				phase: (n/nr) / 2.5,
58 | 			});
59 | 
60 | 		}
61 | 		
62 | 	}
63 | 	
64 | 	
65 | 	function getDotPosition( rad, sideDots, totalDots, d ){
66 | 		if( d < 0 ){ d = totalDots+d; }
67 | 		var sidePos = d / ( 1+sideDots );
68 | 		var c1 = corners[ Math.floor( sidePos ) % 6 ];
69 | 		var c2 = corners[ ( Math.floor( sidePos ) + 1 ) % 6 ];
70 | 		var relPos = sidePos % 1;
71 | 		var pos = {
72 | 			x: ( (1-relPos)  * c1.x ) + ( relPos * c2.x ),
73 | 			y: ( (1-relPos) * c1.y ) + ( relPos * c2.y ),
74 | 		};
75 | 		return pos;
76 | 	}
77 | 
78 | }
79 | 


--------------------------------------------------------------------------------
/code/roy-interference-video.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 640, 480 );
 4 | 	glc.setDuration( 30 );
 5 | 	glc.setFPS( 60 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#235';
17 | 	var sources = [];
18 |     var nr = 6;
19 |     var gridx = 640/6 + 1;
20 |     var gridy = 480/6 + 1;
21 |     var margin = 0;
22 |     var dist = 6;
23 |     var size = 2.3;
24 |     var maxWavelength = 300;
25 |     
26 | 	for( var i=0; i<nr; i++ ){
27 |         sources.push({
28 |             x: Math.random() * width,
29 |             y: Math.random() * height,
30 |             wl: ( maxWavelength/2 ) + Math.random() * (maxWavelength/2),
31 |             speed: Math.ceil( Math.random()*33 ),
32 |         });
33 |     }
34 | 
35 |     for( var x=0; x<gridx; x++ ){
36 |         for( var y=0; y<gridy; y++ ){
37 |             
38 |             var c = list.addCircle({
39 |                 x: margin + x * dist,
40 |                 y: margin + y * dist,
41 |                 fillStyle: 'white',
42 |                 radius: function( t ){
43 |                     var s = 0;
44 |                     for( var i=0; i<sources.length; i++ ){
45 |                 		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
46 |                         var wavePos = ( ( t * sources[i].speed ) - ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
47 |                         s += ( size / sources.length ) + Math.sin( wavePos ) * ( size / sources.length );
48 |                     }
49 |                     return s;
50 |                 },
51 |             });
52 | 
53 |         }
54 |     }
55 |     
56 | }
57 | 


--------------------------------------------------------------------------------
/code/roy-interference-video2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 640, 480 );
 4 | 	glc.setDuration( 30 );
 5 | 	glc.setFPS( 60 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#235';
17 | 	var sources = [];
18 |     var nr = 6;
19 |     var dist = 12;
20 |     var gridx = 640/dist + 1;
21 |     var gridy = 480/dist + 1;
22 |     var margin = 0;
23 |     var size = 4.5;
24 |     var maxWavelength = 300;
25 |     
26 | 	for( var i=0; i<nr; i++ ){
27 |         sources.push({
28 |             x: Math.random() * width,
29 |             y: Math.random() * height,
30 |             wl: ( maxWavelength/2 ) + Math.random() * (maxWavelength/2),
31 |             speed: Math.ceil( Math.random()*33 ),
32 |             r: Math.ceil( 100 + Math.random() * 155 ),
33 |             g: Math.ceil( 100 + Math.random() * 155 ),
34 |             b: Math.ceil( 100 + Math.random() * 155 ),
35 |         });
36 |     }
37 | 
38 |     for( var x=0; x<gridx; x++ ){
39 |         for( var y=0; y<gridy; y++ ){
40 |             
41 |             var c = list.addCircle({
42 |                 x: margin + x * dist,
43 |                 y: margin + y * dist,
44 |                 //fillStyle: 'white',
45 |                 radius: function( t ){
46 |                     var s = 0;
47 |                     for( var i=0; i<sources.length; i++ ){
48 |                 		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
49 |                         var wavePos = ( ( t * sources[i].speed ) - ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
50 |                         s += ( size / sources.length ) + Math.sin( wavePos ) * ( size / sources.length );
51 |                     }
52 |                     return s;
53 |                 },
54 |                 fillStyle: function( t ){
55 |                     var r = 0;
56 |                     var g = 0;
57 |                     var b = 0;
58 |                     for( var i=0; i<sources.length; i++ ){
59 |                 		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
60 |                         var wavePos = ( ( t * sources[i].speed ) - ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
61 |                         r += ( sources[i].r / nr ) + Math.sin( wavePos ) * ( sources[i].r / nr );
62 |                         g += ( sources[i].g / nr ) + Math.sin( wavePos ) * ( sources[i].g / nr );
63 |                         b += ( sources[i].b / nr ) + Math.sin( wavePos ) * ( sources[i].b / nr );
64 |                     }
65 |                     return color.rgb( r, g, b );
66 |                 },
67 |                 //blendMode: 'screen',
68 |             });
69 | 
70 |         }
71 |     }
72 |     
73 | }
74 | 


--------------------------------------------------------------------------------
/code/roy-interference.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 460, 460 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 8 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#235';
17 | 	var sources = [];
18 |     var nr = 4;
19 |     var grid = 40;
20 |     var margin = 40;
21 |     var dist = ( width - (2*margin) ) / (grid - 1 );
22 |     var size = 3.5;
23 |     var maxWavelength = 360;
24 |     
25 | 	for( var i=0; i<nr; i++ ){
26 |         sources.push({
27 |             x: Math.random() * width,
28 |             y: Math.random() * height,
29 |             wl: ( maxWavelength/2 ) + Math.random() * (maxWavelength/2),
30 |         });
31 |     }
32 | 
33 |     for( var x=0; x<grid; x++ ){
34 |         for( var y=0; y<grid; y++ ){
35 |             
36 |             var c = list.addCircle({
37 |                 x: margin + x * dist,
38 |                 y: margin + y * dist,
39 |                 fillStyle: 'white',
40 |                 radius: function( t ){
41 |                     var s = 0;
42 |                     for( var i=0; i<sources.length; i++ ){
43 |                 		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
44 |                         var wavePos = ( t + ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
45 |                         s += ( size / sources.length ) + Math.sin( wavePos ) * ( size / sources.length );
46 |                     }
47 |                     return s;
48 |                 },
49 |             });
50 | 
51 |         }
52 |     }
53 |     
54 | }
55 | 


--------------------------------------------------------------------------------
/code/roy-interference2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 | 	glc.size( 640, 640 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 |     glc.setMaxColors( 128 );
 9 | 	//glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#000';
17 | 	var sources = [];
18 |     var nr = 5;
19 |     var grid = 17;
20 |     var dist = 32;
21 |     var margin = 48 + dist/2;
22 |     var maxWavelength = 800;
23 |     var colorOffset = 260;//Math.floor( 360 * Math.random() );
24 |     
25 | 	for( var i=0; i<nr; i++ ){
26 |         sources.push({
27 |             x: Math.random() * width,
28 |             y: Math.random() * height,
29 |             wl: ( maxWavelength * 0.25 ) + Math.random() * (maxWavelength * 0.75),
30 |         });
31 |     }
32 | 
33 |     for( var x=0; x<grid; x++ ){
34 |         for( var y=0; y<grid; y++ ){
35 |             
36 |             var c = list.addRect({
37 |                 x: margin + x * dist,
38 |                 y: margin + y * dist,
39 |                 w: dist,
40 |                 h: dist,
41 |                 fillStyle: function( t ){
42 |                     var a = 0;
43 |                     for( var i=0; i<sources.length; i++ ){
44 |                 		var sourceDist = Math.sqrt( Math.pow( Math.abs( sources[i].x - this.x ), 2 ) + Math.pow( Math.abs( sources[i].y - this.y ), 2 ) );
45 |                         var wavePos = ( t - ( sourceDist % sources[i].wl ) / sources[i].wl ) * ( 2 * Math.PI );
46 |                         a += (0.5/sources.length) * Math.sin( wavePos ) + (0.6/sources.length);
47 |                     }
48 |                     return color.hsva( colorOffset + a*140, 1, 1, a );
49 |                 },
50 |             });
51 | 
52 |         }
53 |     }
54 |     
55 | }
56 | 


--------------------------------------------------------------------------------
/code/roy-lego.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 450, 300 );
 4 |     glc.setDuration( 2 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode( 'single' );
 7 |     glc.setEasing( false );
 8 |     glc.setMaxColors(96);
 9 |     glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 1, 1 );
17 | 
18 |     var grid = 7;
19 |     var brickSize = 48;
20 |     
21 |     for( var x=-grid; x<=grid; x++ ){
22 | 	    for( var y=-grid; y<=grid; y++ ){
23 |             var xpos = width/2 + brickSize * x - brickSize * y;
24 |             var ypos = height/2 + (brickSize/2) * y + (brickSize/2) * x;
25 |             var col = 170 + Math.floor( Math.random() * 6 ) * 10;
26 |             drawBrick( xpos, ypos, col, y/16 + x/8 );
27 |  
28 |         }
29 |     }
30 |     
31 |     // draw a single brick
32 |     function drawBrick( xpos, ypos, col, phase ){
33 |         
34 |         var c = list.addContainer({
35 |             x: xpos,
36 |             y: function( t ){
37 |                 return this.ypos + Math.sin( (t+this.myphase)*2*Math.PI ) * 15;
38 |             },
39 |            	scaleX: 1 * ( brickSize/100 ),
40 |             scaleY: 1 * ( brickSize/100 ),
41 |             myphase: phase,
42 |             ypos: ypos,
43 |         });
44 |         
45 |         // base box
46 |         list.addIsobox({
47 |             x: 0,
48 |             y: 0,
49 |             size: 200,
50 |             h: 75,
51 |             colorTop: color.hsv( col, 1, 1 ),
52 |             colorRight: color.hsv( col, 1, 0.5 ),
53 |             colorLeft: color.hsv( col, 1, 0.75 ),
54 |             parent: c,
55 |         });
56 | 	
57 |         // studs
58 |         for( var i=0; i<4; i++ ){
59 |             list.addIsotube({
60 |                 x: Math.sin( (i/2)*Math.PI ) * 48,
61 |                 y: -75 - Math.cos( (i/2)*Math.PI ) * 24,
62 |                 radius: 24,
63 |                 h: 16,
64 |                 colorTop: color.hsv( col, 1, 1 ),
65 |                 colorRight: color.hsv( col, 1, 0.5 ),
66 |                 colorLeft: color.hsv( col, 1, 0.75 ),
67 |                 parent: c,
68 |             });
69 |         }
70 | 	
71 |     }
72 | 
73 | }
74 | 


--------------------------------------------------------------------------------
/code/roy-lego2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 400 );
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode( 'single' );
 7 |     glc.setEasing( false );
 8 |     glc.setMaxColors(96);
 9 |     glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 1, 1 );
17 | 
18 |     var grid = 7;
19 |     var brickSize = 58;
20 |     
21 |     for( var x=-grid; x<=grid; x++ ){
22 | 	    for( var y=-grid; y<=grid; y++ ){
23 |             var xpos = width/2 + brickSize * x - brickSize * y;
24 |             var ypos = height/2 + (brickSize/2) * y + (brickSize/2) * x;
25 |             var col = Math.floor( Math.random() * 6 ) * 60;
26 |             drawBrick( xpos, ypos, col, y/16 + x/8 );
27 |  
28 |         }
29 |     }
30 |     
31 |     // draw a single brick
32 |     function drawBrick( xpos, ypos, col, phase ){
33 |         
34 |         var c = list.addContainer({
35 |             x: xpos,
36 |             y: function( t ){
37 |                 return this.ypos + Math.sin( (t+this.myphase)*2*Math.PI ) * 15;
38 |             },
39 |            	scaleX: 1 * ( brickSize/100 ),
40 |             scaleY: 1 * ( brickSize/100 ),
41 |             myphase: phase,
42 |             ypos: ypos,
43 |         });
44 |         
45 |         // base box
46 |         list.addIsobox({
47 |             x: 0,
48 |             y: 0,
49 |             size: 200,
50 |             h: 75,
51 |             colorTop: color.hsv( col, 0.75, 1 ),
52 |             colorRight: color.hsv( col, 0.75, 0.5 ),
53 |             colorLeft: color.hsv( col, 0.75, 0.75 ),
54 |             parent: c,
55 |         });
56 | 	
57 |         // studs
58 |         for( var i=0; i<4; i++ ){
59 |             list.addIsotube({
60 |                 x: Math.sin( (i/2)*Math.PI ) * 48,
61 |                 y: -75 - Math.cos( (i/2)*Math.PI ) * 24,
62 |                 radius: 24,
63 |                 h: 16,
64 |                 colorTop: color.hsv( col, 0.75, 1 ),
65 |                 colorRight: color.hsv( col, 0.75, 0.5 ),
66 |                 colorLeft: color.hsv( col, 0.75, 0.75 ),
67 |                 parent: c,
68 |             });
69 |         }
70 | 	
71 |     }
72 | 
73 | }
74 | 


--------------------------------------------------------------------------------
/code/roy-linecircle.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 40, 70, 60, 1 );
17 | 	var nr = 9;
18 | 	var radius = 140;
19 | 
20 | 	for( var i=0; i<nr; i++ ){
21 | 
22 | 		var xpos = Math.sin( (i/nr) * Math.PI ) * radius;
23 | 		var ypos = -Math.cos( (i/nr) * Math.PI ) * radius;
24 | 
25 | 		list.addLine({
26 | 			x0: width/2 + xpos,
27 | 			y0: height/2 + ypos,
28 | 			x1: width/2 - xpos,
29 | 			y1: height/2 - ypos,
30 | 			strokeStyle: color.rgba( 255, 255, 255, 0.1 ),
31 | 			lineWidth: 1.5
32 | 		});
33 | 
34 | 		list.addCircle({
35 | 			x: function( t ){
36 | 				return width/2 + Math.sin( t*2*Math.PI ) * this.xpos;
37 | 			},
38 | 			y: function( t ){
39 | 				return height/2 + Math.sin( t*2*Math.PI ) * this.ypos;
40 | 			},
41 | 			radius: 8,
42 | 			stroke: false,
43 | 			fill: true,
44 | 			fillStyle: color.hsv( (i/nr)*360, 0.5, 1 ),
45 | 			phase: (i/2) / nr,
46 | 			xpos: xpos,
47 | 			ypos: ypos,
48 | 		});
49 | 
50 | 	}
51 | 
52 | }


--------------------------------------------------------------------------------
/code/roy-logo-still.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 1000, 600 );
 4 | 	glc.setDuration( 0.5 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 255, 255, 255, 1 );
17 | 
18 | 	var strs = [ 'GIF', 'LOOP', 'CODER' ];
19 | 	var counter = 0;
20 | 	var letters = 12; // calculate this to make it more flexible?
21 | 	var spacing = 200;
22 | 
23 | 	for( var s=0; s<strs.length; s++ ){
24 | 
25 | 		var nr = strs[s].length;
26 | 
27 | 		for( var i=0; i<nr; i++ ){
28 | 
29 | 			list.addRect({
30 | 				x: i * spacing + spacing/2,
31 | 				y: s * spacing + spacing/2,
32 | 				w: spacing,
33 | 				h: spacing,
34 | 				stroke: false,
35 | 				fill: true,
36 | 				fillStyle: color.hsv( 180+(counter/letters)*120, 1, 0.75 ),
37 | 			});
38 | 
39 | 			list.addText({
40 | 				text: strs[s].charAt( i % nr ),
41 | 				x: i * spacing + spacing/2,
42 | 				y: s * spacing + spacing/2 - spacing/30,
43 | 				stroke: false,
44 | 				fill: true,
45 | 				fillStyle: 'white',
46 | 				fontSize: 140,
47 | 				fontWeight: 'bold',
48 | 				fontFamily: 'Roboto Condensed',
49 | 				fontStyle: 'normal',
50 | 			});
51 | 
52 | 			counter++;
53 | 
54 | 		}
55 | 
56 | 	}
57 | 
58 | }


--------------------------------------------------------------------------------
/code/roy-logo.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 500, 300 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 255, 255, 255, 1 );
17 | 
18 | 	var strs = [ 'GIF', 'LOOP', 'CODER' ];
19 | 	var counter = 0;
20 | 	var letters = 12; // calculate this to make it more flexible?
21 | 	var spacing = 100;
22 | 
23 | 	for( var s=0; s<strs.length; s++ ){
24 | 
25 | 		var nr = strs[s].length;
26 | 
27 | 		for( var i=0; i<nr; i++ ){
28 | 
29 | 			list.addRect({
30 | 				x: i * spacing + spacing/2,
31 | 				y: s * spacing + spacing/2,
32 | 				w: spacing,
33 | 				h: spacing,
34 | 				stroke: false,
35 | 				fill: true,
36 | 				fillStyle: color.hsv( 180+(counter/letters)*120, 1, 0.75 ),
37 | 			});
38 | 
39 | 			list.addText({
40 | 				text: strs[s].charAt( i % nr ),
41 | 				x: i * spacing + spacing/2,
42 | 				y: s * spacing + spacing/2 - spacing/25,
43 | 				stroke: false,
44 | 				fill: true,
45 | 				fillStyle: function( t ){
46 | 					return color.rgba( 255, 255, 255, ( Math.sin( t*2*Math.PI ) * 0.2 ) + 0.8 );
47 | 				},
48 | 				shadowColor: function( t ){
49 | 					return color.rgba( 255, 255, 255, ( Math.sin( t*2*Math.PI ) * 0.4 ) + 0.4 );
50 | 				},
51 | 				shadowOffsetX: 0,
52 | 				shadowOffsetY: 0,
53 | 				shadowBlur: 16,
54 | 				fontSize: 70,
55 | 				fontWeight: 'bold',
56 | 				fontFamily: 'Roboto Condensed',
57 | 				fontStyle: 'normal',
58 | 				phase: 1 - ( counter / letters ),
59 | 				nr: counter
60 | 			});
61 | 
62 | 			counter++;
63 | 
64 | 		}
65 | 
66 | 	}
67 | 
68 | 
69 | }


--------------------------------------------------------------------------------
/code/roy-mandala.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(480, 480);
 4 |     glc.setDuration( 4 );
 5 |     glc.setFPS( 20 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#235';
17 |     var dist = 75;
18 |     var nr = 3;
19 |     var size = 75;
20 |     var nr2 = 9;
21 |     
22 |     var container = list.addContainer({
23 | 		x: width / 2,
24 | 		y: height / 2,
25 |         rotation: -45,
26 | 	});
27 | 	
28 |     
29 |     for( var x=0; x<nr; x++ ){
30 |         for( var y=0; y<nr; y++ ){
31 |             
32 |             for( var n=1; n<nr2+1; n++ ){
33 |             
34 |                 list.addCircle({
35 |                     x: x * dist - ((nr-1)/2) * dist,
36 |                     y: y * dist - ((nr-1)/2) * dist,
37 |                     radius: ( n / nr2 ) * size,
38 |                     fill: false,
39 |                     stroke: true,
40 |                     strokeStyle: '#fff',
41 |                     lineWidth: 0.6,
42 |                     startAngle: function( t ){
43 |                         return -( 1 + Math.cos( t*2*Math.PI + Math.PI ) ) * 100;
44 |                     },
45 |                     endAngle: function( t ){
46 |                         return ( 1 + Math.cos( t*2*Math.PI + Math.PI ) ) * 100;
47 |                     },
48 |                     globalAlpha: function( t ){
49 |                         return ( 1 + Math.cos( t*2*Math.PI + Math.PI ) ) * 0.5;
50 |                     },
51 |                     rotation: Math.random() * 360,
52 |                     parent: container,
53 |                     phase: -n/nr/12,
54 |                 });
55 | 
56 |             }
57 |         }
58 |     }
59 | 
60 | }
61 | 


--------------------------------------------------------------------------------
/code/roy-marquee.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 600, 300 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 15 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 30, 50, 70, 1 );
17 | 
18 | 	var marquee = [
19 | 		' ******   ***      ******       **   **      ',
20 | 		'***  ***  ***     ***  ***     **** ****     ',
21 | 		'***       ***     ***  ***     *********     ',
22 | 		'*** ****  ***     ***           *******      ',
23 | 		'***  ***  ***     ***  ***       *****       ',
24 | 		'***  ***  ***     ***  ***        ***        ',
25 | 		' ******   ******   ******          *         ',
26 | 	];
27 | 
28 | 	var dist = 12;
29 | 	var columns = Math.floor( width/dist );
30 | 	var nrofFrames = marquee[0].length;
31 | 	var paddingY = ( height - marquee.length * dist ) / 2;
32 | 
33 | 
34 | 	for( var x=0; x<columns; x++ ){
35 | 		for( var y=0; y<marquee.length; y++ ){
36 | 
37 | 			list.addCircle({
38 | 				x: dist/2 + x*dist,
39 | 				y: dist/2 + y*dist + paddingY,
40 | 				radius: dist * 0.35,
41 | 				stroke: false,
42 | 				fillStyle: 'white',
43 | 				shadowColor: function( t ){
44 | 					return getOnOff( t, this.column, this.row ) ? color.rgba( 255, 255, 150, 1 ) : color.rgba( 255, 255, 150, 0 );
45 | 				},
46 | 				shadowOffsetX: 0,
47 | 				shadowOffsetY: 0,
48 | 				shadowBlur: dist,
49 | 				globalAlpha: function( t ){
50 | 					return getOnOff( t, this.column, this.row ) ? 1 : 0.2;
51 | 				},
52 | 				column: x,
53 | 				row: y,
54 | 			});
55 | 
56 | 		}
57 | 	}
58 | 
59 | 	function getOnOff( t, x, y ){
60 | 		var frame = Math.round( t*nrofFrames );
61 | 		var char = marquee[ y ].charAt( ( x + frame ) % marquee[ y ].length );
62 | 		return ( char == '*' ) ? true : false;
63 | 	}
64 | 
65 | }


--------------------------------------------------------------------------------
/code/roy-memegen.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 600, 600 );
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode( 'single' );
 7 |     glc.setEasing( false );
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#333';
15 |     glc.context.imageSmoothingEnabled = true;
16 |     
17 |     parts = [
18 |         [ 'Just because', 'When', 'Sometimes', 'If', 'Whenever', 'In case' ],
19 |         [ 'life', 'your best friend', 'an orange', 'the police', 'the internet', 'your enemy', 'your family', 'your boss', 'someone', 'your mom' ],
20 |         [ 'looks like', 'hands you', 'isn\'t', 'needs', 'wants', 'makes you think of', 'asks you for' ],
21 |         [ 'a ride,', 'lemons,', 'monkeys,', 'something wonderful,', 'a banana,', 'happiness,', 'a kiss,', 'your help,', 'the space shuttle,', 'the remote,' ],
22 |         [ 'always', 'never', 'you should', 'remember to', 'you shouldn\'t', 'it\'s okay to' ],
23 |         [ 'cry.', 'party.', 'be happy.', 'say no.', 'kiss.', 'do nothing.', 'oblige.', 'give up', 'make lemonade.' ]
24 |     ];
25 |     
26 |     words = [];
27 |     for( var i=0; i<parts.length; i++ ){
28 |         words.push( parts[i][ Math.floor( Math.random() * parts[i].length ) ] );
29 |     }
30 |     
31 |     var lineHeight = 50;
32 |     var fontSize = 40;
33 |     var yOffset = ( height - ( ( words.length - 1 ) * lineHeight ) ) / 2;
34 |     
35 |     for( var i=0; i<words.length; i++ ){
36 |         
37 |         var container = list.addContainer({
38 |             //x: width/2,
39 |             y: yOffset + i*lineHeight,
40 |             x: function( t ){
41 |                 return ( width/2 ) + Math.cos( t*2*Math.PI ) * 20;
42 |             },
43 | //             scaleX : 1,
44 | //             scaleY: function( t ){
45 | //                 return Math.cos( t*2*Math.PI );
46 | //             },
47 |             phase: 1 - ( i / words.length )/5,
48 |         });
49 | 	
50 |         
51 |         list.addText({
52 |             x: 0,
53 |             y: 0,
54 |             text: words[i],
55 | 			fontSize: fontSize,
56 | 			fontWeight: "bold",
57 | 			fontFamily: '"Open Sans", sans-serif',
58 | 			fontStyle: 'normal',
59 |             fillStyle: 'white',
60 |             stroke: true,
61 |             strokeStyle: '#fff',
62 |             lineWidth: 1,
63 |             parent: container,
64 |         });
65 |         
66 |     }
67 | 
68 | }
69 | 


--------------------------------------------------------------------------------
/code/roy-merrychristmas.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 600, 400 );
 5 | 	glc.setDuration( 5 );
 6 | 	glc.setFPS( 30 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 256 );
10 | 	glc.setQuality( 10 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#339966';
18 | 	var shadowDist = 20;
19 | 	var shadowBlur = 20;
20 | 
21 | 	list.addText({
22 | 		x: width/2,
23 | 		y: height/2 - 60,
24 | 		text: 'Merry',
25 | 		/*fillStyle: gradient,*/
26 | 		fillStyle: function( t ){
27 | 			var gx0 = Math.round( Math.sin( t*2*Math.PI ) * 100 );
28 | 			var gy0 = Math.round( -Math.cos( t*2*Math.PI ) * 100 );
29 | 			var gx1 = -gx0;
30 | 			var gy1 = -gy0;
31 | 			var gradient = color.createLinearGradient( gx0, gy0, gx1, gy1 );
32 | 			gradient.addColorStop( 0, 'white' );
33 | 			gradient.addColorStop( 1, 'blue' );
34 | 			return gradient;
35 | 		},
36 | 		fontSize: 80,
37 | 		fontWeight: 'normal',
38 | 		fontFamily: 'Bigshot One',
39 | 		shadowColor: color.rgba( 0, 0, 0, 0.5 ),
40 | 		shadowOffsetX: function( t ){
41 | 			return Math.sin( t*2*Math.PI ) * shadowDist;
42 | 		},
43 | 		shadowOffsetY: function( t ){
44 | 			return -Math.cos( t*2*Math.PI ) * shadowDist;
45 | 		},
46 | 		shadowBlur: shadowBlur,
47 | 	});
48 | 
49 | 	list.addText({
50 | 		x: width/2,
51 | 		y: height/2 + 20,
52 | 		text: 'Christmas!',
53 | 		fillStyle: 'white',
54 | 		fontSize: 80,
55 | 		fontWeight: 'normal',
56 | 		fontFamily: 'Bigshot One',
57 | 		shadowColor: color.rgba( 0, 0, 0, 0.5 ),
58 | 		shadowOffsetX: function( t ){
59 | 			return Math.sin( t*2*Math.PI ) * shadowDist;
60 | 		},
61 | 		shadowOffsetY: function( t ){
62 | 			return -Math.cos( t*2*Math.PI ) * shadowDist;
63 | 		},
64 | 		shadowBlur: shadowBlur,
65 | 	});
66 | 
67 | }


--------------------------------------------------------------------------------
/code/roy-moire.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(550, 550);
 4 |     glc.setDuration(5);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setQuality(20);
 9 |     glc.setMaxColors(128);
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#123';
17 |     nr = 63
18 |     
19 |     for( var j=0; j<2; j++ ){
20 |         
21 |         var rot = Math.random() * Math.PI * 2;
22 | 
23 |         for( var i=0; i<nr; i++ ){
24 |             list.addCircle({
25 |                 x: function( t ){
26 |                     return width/2 + Math.sin( t*2*Math.PI ) * this._r;
27 |                 },
28 |                 y: function( t ){
29 |                     if( this._j % 2 == 0 ){
30 | 	                    return height/2 + Math.cos( t*2*Math.PI + this._rot ) * this._r;
31 |                     } else {
32 |                         return height/2 - Math.cos( t*2*Math.PI + this._rot ) * this._r;
33 |                     }
34 |                 },
35 |                 radius: i*3,
36 |                 stroke: true,
37 |                 strokeStyle: color.rgba( 255, 255, 255, (i/nr) ),//'#fff',
38 |                 fill: false,
39 |                 blendMode: 'lighter',
40 |                 lineWidth: 0.5,
41 |                 _r: (nr-i),
42 |                 _j: j,
43 |                 _rot: rot,
44 |                 phase: (i/nr)/3 + (j/2)
45 |             });
46 | 
47 |         }
48 |         
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/code/roy-mosaic.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration(3);
 5 | 	glc.setFPS(25);
 6 | 	glc.setMode('single');
 7 | 	//glc.setEasing(false);
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 	glc.styles.backgroundColor = color.rgba( 60, 60, 60, 1 );
15 | 	var nr = 10;
16 | 	var size = 40;
17 | 	var rings = 7;
18 | 	
19 | 	for( var r=0; r<rings; r++ ){
20 | 
21 | 		for( var i=0; i<nr; i++ ){
22 | 
23 | 			var rotStart = i*(360/nr);
24 | 			var rotOffset = r * ( ( 360/nr ) /2 ); 
25 | 			
26 | 			var c = list.addContainer({
27 | 				x: width/2,
28 | 				y: width/2,
29 | 				rotation: [ rotStart + rotOffset, rotStart + rotOffset + (360/(nr/2)) ],
30 | 			});
31 | 
32 | 			list.addStar({
33 | 				x: (size+5) * r,
34 | 				y: 0,
35 | 				points: 2,
36 | 				innerRadius: [ (size/3.1) * r, -(size/3.1) * r ],
37 | 				outerRadius: size,
38 | 				stroke: false,
39 | 				fillStyle: ( i % 2 ) ? color.rgba(255,240,0,1-r*0.15) : color.rgba(255,200,0,1-r*0.15),
40 | 				parent: c,
41 | 			});        
42 | 		}
43 | 		
44 | 	}
45 | 
46 | }


--------------------------------------------------------------------------------
/code/roy-nova.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(8);
10 | 	glc.styles.backgroundColor = '#ffee99';
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	var points = 6;
18 | 	var nr = 12;
19 | 	var circlesize = 275;
20 | 	var maxsize = 350;
21 | 
22 | 	for( var i=0; i<nr; i++ ){
23 | 		var factor = (i*2*Math.PI)/nr;
24 | 		list.addStar({
25 | 			points: points,
26 | 			x: width/2 + Math.sin( factor ) * circlesize,
27 | 			y: height/2 + -Math.cos( factor ) * circlesize,
28 | 			innerRadius: [ -maxsize, maxsize ],
29 | 			outerRadius: [ maxsize, -maxsize ],
30 | 			rotation: [ 0, 120 ],
31 | 			fill: true,
32 | 			stroke: false,
33 | 			fillStyle: 'rgba(0,50,102,1)',
34 | 		});
35 | 	}
36 | 
37 | }


--------------------------------------------------------------------------------
/code/roy-olympic.js:
--------------------------------------------------------------------------------
  1 | function onGLC(glc) {
  2 |     glc.loop();
  3 |     glc.size(600, 400);
  4 |     glc.setDuration(6.5);
  5 |     glc.setFPS(30);
  6 |     glc.setMode('single');
  7 |     glc.setEasing(false);
  8 |     var list = glc.renderList,
  9 |         width = glc.w,
 10 |         height = glc.h,
 11 |         color = glc.color;
 12 | 
 13 |     // your code goes here:
 14 |     var lw = function(t){
 15 |         return Math.sin( Math.PI*t ) * 10;
 16 |     };
 17 |     
 18 |     var rad = function(t){
 19 |         if( t< 0.25 || t>0.75 ){
 20 | 	        if( t > 0.75 ){ t = t -0.5; }
 21 |         	return 325 - Math.sin( Math.PI*t*2 ) * 275;
 22 |         } else {
 23 |             return 50;
 24 |         }
 25 |     };
 26 |     
 27 |     var ga = function(t){
 28 |         return 1;
 29 |     };
 30 |     
 31 |     var ss = function(t){
 32 |         var f = 1-Math.sin( Math.PI * t );
 33 |         var r = this._r + f * ( 255-this._r );
 34 |         var g = this._g + f * ( 255-this._g );
 35 |         var b = this._b + f * ( 255-this._b );
 36 |         return color.rgb( r, g, b );
 37 |     }
 38 |     
 39 |     var container = list.addContainer({
 40 | 		x: width / 2,
 41 | 		y: height / 2 - 10,
 42 |         globalAlpha: function(t){
 43 |         	return Math.sin( Math.PI*t );
 44 |     	}
 45 | 	});
 46 | 	
 47 | 	var blue1 = list.addCircle({
 48 | 		x: -120,
 49 | 		y: -25,
 50 | 		radius: rad,
 51 |         stroke: true,
 52 |         strokeStyle: ss,
 53 |         _r: 0,
 54 |         _g: 133,
 55 |         _b: 199,
 56 |         fill: false,
 57 |         lineWidth: lw,
 58 |         startAngle: 45,
 59 |         endAngle: 235,
 60 |         globalAlpha: ga,
 61 |         parent: container
 62 | 	});
 63 | 
 64 |     var yellow1 = list.addCircle({
 65 | 		x: -60,
 66 | 		y: 25,
 67 | 		radius: rad,
 68 |         stroke: true,
 69 |         strokeStyle: ss,
 70 |         _r: 244,
 71 |         _g: 195,
 72 |         _b: 0,
 73 |         fill: false,
 74 |         lineWidth: lw,
 75 |         startAngle: -45,
 76 |         endAngle: 135,
 77 |         globalAlpha: ga,
 78 |         parent: container
 79 | 	});
 80 | 
 81 |     var red1 = list.addCircle({
 82 | 		x: 120,
 83 | 		y: -25,
 84 | 		radius: rad,
 85 |         stroke: true,
 86 |         strokeStyle: ss,
 87 |         _r: 223,
 88 |         _g: 0,
 89 |         _b: 36,
 90 |         fill: false,
 91 |         lineWidth: lw,
 92 |         startAngle: 135,
 93 |         endAngle: 135+180,
 94 |         globalAlpha: ga,
 95 |         parent: container
 96 | 	});
 97 |     
 98 | 	var green1 = list.addCircle({
 99 | 		x: 60,
100 | 		y: 25,
101 | 		radius: rad,
102 |         stroke: true,
103 |         strokeStyle: ss,
104 |         _r: 0,
105 |         _g: 159,
106 |         _b: 61,
107 |         fill: false,
108 |         lineWidth: lw,
109 |         startAngle: -135,
110 |         endAngle: 45,
111 |         globalAlpha: ga,
112 |         parent: container
113 | 	});
114 |     
115 |     var black = list.addCircle({
116 | 		x: -0,
117 | 		y: -25,
118 | 		radius: rad,
119 |         stroke: true,
120 |         strokeStyle: ss,
121 | 		_r: 0,
122 |         _g: 0,
123 |         _b: 0,
124 |         fill: false,
125 |         lineWidth: lw,
126 |         globalAlpha: ga,
127 |         parent: container
128 | 	});
129 | 
130 |     var red2 = list.addCircle({
131 | 		x: 120,
132 | 		y: -25,
133 | 		radius: rad,
134 |         stroke: true,
135 |         strokeStyle: ss,
136 | 		_r: 223,
137 |         _g: 0,
138 |         _b: 36,
139 |         fill: false,
140 |         lineWidth: lw,
141 |         startAngle: -45,
142 |         endAngle: 135,
143 |         globalAlpha: ga,
144 |         parent: container
145 | 	});
146 |     
147 |     var yellow2 = list.addCircle({
148 | 		x: -60,
149 | 		y: 25,
150 | 		radius: rad,
151 |         stroke: true,
152 |         strokeStyle: ss,
153 |         _r: 244,
154 |         _g: 195,
155 |         _b: 0,
156 |         fill: false,
157 |         lineWidth: lw,
158 |         startAngle: 135,
159 |         endAngle: 135+180,
160 |         globalAlpha: ga,
161 |         parent: container
162 | 	});
163 | 
164 | 	var green3 = list.addCircle({
165 | 		x: 60,
166 | 		y: 25,
167 | 		radius: rad,
168 |         stroke: true,
169 |         strokeStyle: ss,
170 |         _r: 0,
171 |         _g: 159,
172 |         _b: 61,
173 |         fill: false,
174 |         lineWidth: lw,
175 |         startAngle: 45,
176 |         endAngle: 235,
177 |         globalAlpha: ga,
178 |         parent: container
179 | 	});
180 | 
181 | 	var blue2 = list.addCircle({
182 | 		x: -120,
183 | 		y: -25,
184 | 		radius: rad,
185 |         stroke: true,
186 |         strokeStyle: ss,
187 | 		_r: 0,
188 |         _g: 133,
189 |         _b: 199,
190 |         fill: false,
191 |         lineWidth: lw,
192 |         startAngle: 235,
193 |         endAngle: 235+180,
194 |         globalAlpha: ga,
195 |         parent: container
196 | 	});
197 | 
198 | }
199 | 
200 | 


--------------------------------------------------------------------------------
/code/roy-packages.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 2 );
 6 | 	glc.setFPS( 30 );
 7 | 	glc.setMode( "single" );
 8 | 	//glc.setEasing( false );
 9 | 	glc.setMaxColors( 32 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#446f88';
18 | 	var grid = 5;
19 | 	var size = width / grid;
20 | 	var points = 6;
21 | 	var angle = ( 120/360 ) * 2 * Math.PI;
22 | 	var dist = size;
23 | 	var transx = Math.sin( angle ) * dist;
24 | 	var transy = -Math.cos( angle ) * dist;
25 | 
26 | 	for( var x=-(grid+1); x<(grid+1); x++ ){
27 | 
28 | 		list.addLine({
29 | 			x0: width/2 + ( -grid * transx ) + ( x * transx ),
30 | 			y0: height/2 + ( x * transy ) - ( -grid * transy ) - Math.cos( angle ) * ( size/2.5 ),
31 | 			x1: width/2 + ( grid * transx ) + ( x * transx ),
32 | 			y1: height/2 + ( x * transy ) - ( grid * transy ) - Math.cos( angle ) * ( size/2.5 ),
33 | 			lineWidth: size/1.8,
34 | 			strokeStyle: color.rgba( 0, 0, 0, 0.3 ),
35 | 
36 | 		});
37 | 
38 | 		var linePhase = Math.random();
39 | 
40 | 		for( var y=-(grid+1); y<(grid+1); y++ ){
41 | 
42 | 			var xpos = width/2 + ( y * transx ) + ( x * transx );
43 | 			var ypos = height/2 + ( x * transy ) - ( y * transy );
44 | 			var nextxpos = width/2 + ( (y-1) * transx ) + ( x * transx );
45 | 			var nextypos = height/2 + ( x * transy ) - ( (y-1) * transy );
46 | 
47 | 			list.addPoly({
48 | 				x: [ xpos, nextxpos ],
49 | 				y: [ ypos, nextypos ],
50 | 				radius: size/2.5,
51 | 				sides: points,
52 | 				stroke: true,
53 | 				strokeStyle: color.rgba( 0, 0, 0, 0.4 ),
54 | 				lineWidth: 1.5,
55 | 				rotation: 180 / points,
56 | 				fill: true,
57 | 				fillStyle: '#eecc8f',
58 | 				phase: linePhase
59 | 			});
60 | 			
61 | 			list.addStar({
62 | 				x: [ xpos, nextxpos ],
63 | 				y: [ ypos, nextypos ],
64 | 				outerRadius: size/2.5,
65 | 				innerRadius: 0,
66 | 				points: points/2,
67 | 				stroke: true,
68 | 				strokeStyle: color.rgba( 0, 0, 0, 0.4 ),
69 | 				lineWidth: 1.5,
70 | 				rotation: -180 / points,
71 | 				fill: false,
72 | 				phase: linePhase
73 | 			});
74 | 
75 | 		}
76 | 	}
77 | 
78 | }


--------------------------------------------------------------------------------
/code/roy-paint.js:
--------------------------------------------------------------------------------
  1 | var pixels = [];
  2 | 
  3 | function onGLC(glc) {
  4 |     glc.loop();
  5 |     glc.size( 720, 720);
  6 |     glc.setDuration( 1 );
  7 |     glc.setFPS( 25 );
  8 |     glc.setMode('single');
  9 |     glc.setEasing(false);
 10 |     glc.setMaxColors( 256 );
 11 |     glc.setQuality( 1 );
 12 |     var list = glc.renderList,
 13 |         width = glc.w,
 14 |         height = glc.h,
 15 |         color = glc.color;
 16 | 
 17 |     // your code goes here:
 18 |     glc.styles.backgroundColor = color.rgb( 255, 255, 255 );
 19 |     var imgx = 80;
 20 |     var imgy = 80;
 21 |     var blocksize = 7.5;
 22 |     var margin = ( width - ( imgx * blocksize ) ) / 2;
 23 |     var hvar = 10;
 24 |     var svar = 0.1;
 25 |     var vvar = 0.1;
 26 | 
 27 | 	var img = list.addImage({
 28 | 		x: imgx/2,
 29 | 		y: imgy/2,
 30 | 		url: "file:///C:/Users/Roy/Desktop/glc-windows/lianne3-square80.png",
 31 |         globalAlpha: function( t ){
 32 |             return ( pixels.length == 0 ) ? 1 : 0;
 33 |         },
 34 | 	});
 35 | 	
 36 |     for( var x=0; x<imgx; x++ ){
 37 |         for( var y=0; y<imgy; y++ ){
 38 |             var angle = Math.random() * 70;
 39 |             if( Math.random() < 0.5 ){ angle += 180; }
 40 |             for( var i=0; i<5; i++ ){
 41 |                 var xoffset = Math.random()*blocksize*2 - blocksize;
 42 |                 var yoffset = Math.random()*blocksize*2 - blocksize;
 43 |                 list.addRay({
 44 |                     x: x * blocksize + (blocksize/2) + xoffset + margin,
 45 | 	                y: y * blocksize + (blocksize/2) + yoffset + margin,
 46 |                     stroke: true,
 47 |                     strokeStyle: function(t){
 48 |                     	if( pixels.length != 0 ){
 49 |                             var pixel = pixels[ this.xpos ][ this.ypos ];
 50 |                             return color.hsva( pixel[3], pixel[4], pixel[5], 0.25 );
 51 |                         } else {
 52 |                             return this.defaultColor;    
 53 |                         }
 54 |                     },
 55 |                     lineWidth: 8,
 56 |                     xpos: x,
 57 |                     ypos: y,
 58 |                     defaultColor: color.rgba( 0, 0, 0, 0 ),
 59 |                     angle: angle,
 60 |                     length: blocksize * 2,
 61 |                     //blendMode: 'darker',
 62 |                 });
 63 | 	
 64 |             }
 65 |         }
 66 |     }
 67 |     
 68 |     // harvest color info from the loaded image for use in the fillStyle function
 69 |     glc.onExitFrame = function(t) {
 70 |         if( t == 0 && pixels.length == 0 ){
 71 |             for( var x=0; x<imgx; x++ ){
 72 |                 pixels[x] = [];
 73 |                 for( var y=0; y<imgy; y++ ){
 74 |                     var pixel = glc.context.getImageData( x, y, 1, 1 ).data;
 75 |                     var hsv = rgb2hsv( pixel[0], pixel[1], pixel[2] );
 76 |                     pixels[x][y] = [ pixel[0], pixel[1], pixel[2], hsv.h, hsv.s, hsv.v ];
 77 |                 }
 78 |             }
 79 |         }
 80 |     }
 81 | }
 82 | 
 83 | 
 84 | /* slightly modified from: http://stackoverflow.com/a/8023734 */
 85 | 
 86 | function rgb2hsv () {
 87 |     var rr, gg, bb,
 88 |         r = arguments[0] / 255,
 89 |         g = arguments[1] / 255,
 90 |         b = arguments[2] / 255,
 91 |         h, s,
 92 |         v = Math.max(r, g, b),
 93 |         diff = v - Math.min(r, g, b),
 94 |         diffc = function(c){
 95 |             return (v - c) / 6 / diff + 1 / 2;
 96 |         };
 97 | 
 98 |     if (diff == 0) {
 99 |         h = s = 0;
100 |     } else {
101 |         s = diff / v;
102 |         rr = diffc(r);
103 |         gg = diffc(g);
104 |         bb = diffc(b);
105 | 
106 |         if (r === v) {
107 |             h = bb - gg;
108 |         }else if (g === v) {
109 |             h = (1 / 3) + rr - bb;
110 |         }else if (b === v) {
111 |             h = (2 / 3) + gg - rr;
112 |         }
113 |         if (h < 0) {
114 |             h += 1;
115 |         }else if (h > 1) {
116 |             h -= 1;
117 |         }
118 |     }
119 |     return {
120 |         h: Math.round(h * 360),
121 |         s: s,
122 |         v: v
123 |     };
124 | }


--------------------------------------------------------------------------------
/code/roy-parenting.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 360, 360 );
 5 | 	glc.setDuration( 5 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 12 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#335577';
18 | 
19 | 	var c = list.addContainer({
20 | 		x: width/2,
21 | 		y: height/2
22 | 	});
23 | 	var prev = c;
24 | 	var nr = 17;
25 | 	var size = 280;
26 | 	var sides = 7;
27 | 
28 | 	for( var i=0; i<nr; i++ ){
29 | 		prev = list.addPoly({
30 | 			x: 0,
31 | 			y: 0,
32 | 			radius: size - i * ( size / nr ),
33 | 			sides: sides,
34 | 			rotation: [ 0, 360 / sides ],
35 | 			fill: false,
36 | 			stroke: true,
37 | 			strokeStyle: 'white',
38 | 			lineWidth: 1.5,
39 | 			parent: prev
40 | 		});
41 | 	}
42 | 
43 | }


--------------------------------------------------------------------------------
/code/roy-pattern.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 480, 480 );
 4 |     glc.setDuration( 2.5 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode( 'single' );
 7 |     //glc.setEasing( false );
 8 | 	glc.setMaxColors( 16 );
 9 | 	glc.setQuality( 5 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 0, 1 );
17 |     var margin = 80;
18 | 	var grid = 10;
19 |     var dist = ( width - 2*margin ) / (grid-1);
20 |     var size = Math.sin( 0.25*Math.PI ) * (dist/2);
21 |     var dotSize = 2.5;
22 | 
23 |     var positions = [];
24 |     for( var d=0; d<4; d++ ){
25 |         positions[d] = {
26 |             x: Math.sin( ( (d/4) + 0.125 ) * 2*Math.PI ) * size,
27 |             y: -Math.cos( ( (d/4) + 0.125 ) * 2*Math.PI ) * size,
28 |         }
29 |     }    
30 | 
31 |     for( var x=0; x<(grid*2); x++ ){
32 |         list.addRay({
33 |             x: margin + x * dist/2 - dist/4,
34 |             y: 0,
35 |             angle: 90,
36 | 			length: height,
37 |             strokeStyle: 'black',
38 |             lineWidth: 0.15,
39 |         });
40 |     }
41 |     
42 |     for( var y=0; y<(grid*2); y++ ){
43 |         list.addRay({
44 |             x: 0,
45 |             y: margin + y * dist/2 - dist/4,
46 |             angle: 0,
47 | 			length: height,
48 |             strokeStyle: 'black',
49 |             lineWidth: 0.15,
50 |         });
51 |     }
52 |     
53 |     for( var x=0; x<grid; x++ ){
54 |         for( var y=0; y<grid; y++ ){
55 |             for( var d=0; d<4; d++ ){
56 |                 list.addCircle({
57 |                     x: [
58 |                         margin + x * dist + positions[d].x,
59 |                         margin + x * dist + positions[(d+1)%4].x,
60 |                     ],
61 |                     y: [
62 |                         margin + y * dist + positions[d].y,
63 |                    	    margin + y * dist + positions[(d+1)%4].y,
64 |                    	],
65 |                     radius: dotSize,
66 |                     fillStyle: 'black',
67 |                     phase: (y/grid)/2 + (x/grid)/5
68 |                 });
69 |             }
70 |         }
71 |     }
72 |     
73 | }


--------------------------------------------------------------------------------
/code/roy-pixels.js:
--------------------------------------------------------------------------------
  1 | var pixels = [];
  2 | var initDone = 0;
  3 | 
  4 | function onGLC(glc) {
  5 |     glc.loop();
  6 |     glc.size( 360, 360);
  7 |     glc.setDuration( 2 );
  8 |     glc.setFPS( 25 );
  9 |     glc.setMode('single');
 10 |     glc.setEasing(false);
 11 |     glc.setMaxColors( 256 );
 12 |     glc.setQuality( 1 );
 13 |     var list = glc.renderList,
 14 |         width = glc.w,
 15 |         height = glc.h,
 16 |         color = glc.color;
 17 | 
 18 |     // your code goes here:
 19 |     var imgx = 60;
 20 |     var imgy = 60;
 21 |     var blocksize = 6;
 22 |     var hvar = 15;
 23 |     var svar = 0.1;
 24 |     var vvar = 0.1;
 25 | 
 26 | 	var img = list.addImage({
 27 | 		x: imgx/2,
 28 | 		y: imgy/2,
 29 | 		url: "file:///C:/Users/Roy/Desktop/glc-windows/lianne2-square3.png"
 30 | 	});
 31 | 	
 32 |     for( var x=0; x<imgx; x++ ){
 33 |         for( var y=0; y<imgy; y++ ){
 34 |             list.addRect({
 35 |                 x: x * blocksize + (blocksize/2),
 36 |                 y: y * blocksize + (blocksize/2),
 37 |                 w: blocksize,
 38 |                 h: blocksize,
 39 |                 fillStyle: function( t ){
 40 |                     if( pixels.length != 0 ){
 41 | 	                    var pixel = pixels[ this.xpos ][ this.ypos ];
 42 |                         // calculate hue
 43 | 	                    var f1 = Math.sin( ( (t+this.rand1)%1 ) * Math.PI );
 44 |                         var hue = Math.round( f1 * ( pixel[3]-hvar ) + (1-f1) * ( pixel[3]+hvar ) );
 45 |                         hue = ( hue + 360 ) % 360;
 46 |                         // calculate sat
 47 |                         var f2 = Math.sin( ( (t+this.rand2)%1 ) * Math.PI );
 48 |                         var sat = ( f2 * ( pixel[4]-svar ) + (1-f2) * ( pixel[4]+svar ) );
 49 |                         // ... and val
 50 |                         var f3 = Math.sin( ( (t+this.rand3)%1 ) * Math.PI );
 51 |                         var val = ( f3 * ( pixel[5]-vvar ) + (1-f3) * ( pixel[5]+vvar ) );
 52 |                         // return the slightly modified color
 53 |                         return color.hsv( hue, sat, val );
 54 |                     } else {
 55 |                     	return this.defaultColor;    
 56 |                     }
 57 |                 },
 58 |                 xpos: x,
 59 |                 ypos: y,
 60 |                 defaultColor: color.rgba( 0, 0, 0, 0 ),
 61 |                 rand1: Math.random(),
 62 |                 rand2: Math.random(),
 63 |                 rand3: Math.random(),
 64 |             });
 65 |         }
 66 |     }
 67 |     
 68 |     // harvest color info from the loaded image for use in the fillStyle function
 69 |     glc.onExitFrame = function(t) {
 70 |         if( t == 0 && pixels.length == 0 && initDone == 0 ){
 71 |             for( var x=0; x<imgx; x++ ){
 72 |                 pixels[x] = [];
 73 |                 for( var y=0; y<imgy; y++ ){
 74 |                     var pixel = glc.context.getImageData( x, y, 1, 1 ).data;
 75 |                     r = pixel[0];
 76 |                     g = pixel[1];
 77 |                     b = pixel[2];
 78 |                     var hsv = rgb2hsv( r, g, b );
 79 |                     pixels[x][y] = [ r, g, b, hsv.h, hsv.s, hsv.v ];
 80 |                 }
 81 |             }
 82 |             initDone = 1;
 83 |         }
 84 |     }
 85 | }
 86 | 
 87 | 
 88 | /* slightly modified from: http://stackoverflow.com/a/8023734 */
 89 | 
 90 | function rgb2hsv () {
 91 |     var rr, gg, bb,
 92 |         r = arguments[0] / 255,
 93 |         g = arguments[1] / 255,
 94 |         b = arguments[2] / 255,
 95 |         h, s,
 96 |         v = Math.max(r, g, b),
 97 |         diff = v - Math.min(r, g, b),
 98 |         diffc = function(c){
 99 |             return (v - c) / 6 / diff + 1 / 2;
100 |         };
101 | 
102 |     if (diff == 0) {
103 |         h = s = 0;
104 |     } else {
105 |         s = diff / v;
106 |         rr = diffc(r);
107 |         gg = diffc(g);
108 |         bb = diffc(b);
109 | 
110 |         if (r === v) {
111 |             h = bb - gg;
112 |         }else if (g === v) {
113 |             h = (1 / 3) + rr - bb;
114 |         }else if (b === v) {
115 |             h = (2 / 3) + gg - rr;
116 |         }
117 |         if (h < 0) {
118 |             h += 1;
119 |         }else if (h > 1) {
120 |             h -= 1;
121 |         }
122 |     }
123 |     return {
124 |         h: Math.round(h * 360),
125 |         s: s,
126 |         v: v
127 |     };
128 | }


--------------------------------------------------------------------------------
/code/roy-pixels2.js:
--------------------------------------------------------------------------------
  1 | var pixels = [];
  2 | 
  3 | function onGLC(glc) {
  4 |     glc.loop();
  5 |     glc.size( 400, 400);
  6 |     glc.setDuration( 1 );
  7 |     glc.setFPS( 25 );
  8 |     glc.setMode('single');
  9 |     glc.setEasing(false);
 10 |     glc.setMaxColors( 256 );
 11 |     glc.setQuality( 1 );
 12 |     var list = glc.renderList,
 13 |         width = glc.w,
 14 |         height = glc.h,
 15 |         color = glc.color;
 16 | 
 17 |     // your code goes here:
 18 |     var imgx = 80;
 19 |     var imgy = 80;
 20 |     var blocksize = 5;
 21 |     var hvar = 10;
 22 |     var svar = 0.1;
 23 |     var vvar = 0.1;
 24 | 
 25 | 	var img = list.addImage({
 26 | 		x: imgx/2,
 27 | 		y: imgy/2,
 28 | 		url: "file:///C:/Users/Roy/Desktop/glc-windows/solo80.png"
 29 | 	});
 30 | 	
 31 |     for( var x=0; x<imgx; x++ ){
 32 |         for( var y=0; y<imgy; y++ ){
 33 |             list.addRect({
 34 |                 x: x * blocksize + (blocksize/2),
 35 |                 y: y * blocksize + (blocksize/2),
 36 |                 w: blocksize,
 37 |                 h: blocksize,
 38 |                 fillStyle: function( t ){
 39 |                     if( pixels.length != 0 ){
 40 | 	                    var pixel = pixels[ this.xpos ][ this.ypos ];
 41 |                         // calculate hue
 42 | 	                    var f1 = Math.sin( ( t+this.rand1 ) * 2*Math.PI );
 43 |                         var hue = Math.round( pixel[3] + f1*hvar );
 44 |                         hue = ( hue + 360 ) % 360;
 45 |                         // calculate sat
 46 |                         var f2 = Math.sin( ( t+this.rand2 ) * 2*Math.PI );
 47 |                         var sat = pixel[4] + f2*svar;
 48 |                         // ... and val
 49 |                         var f3 = Math.sin( ( t+this.rand3 ) * 2*Math.PI );
 50 |                         var val = pixel[5] + f3*vvar;
 51 |                         // return the slightly modified color
 52 |                         return color.hsv( hue, sat, val );
 53 |                     } else {
 54 |                     	return this.defaultColor;    
 55 |                     }
 56 |                 },
 57 |                 xpos: x,
 58 |                 ypos: y,
 59 |                 defaultColor: color.rgba( 0, 0, 0, 0 ),
 60 |                 rand1: Math.random(),
 61 |                 rand2: Math.random(),
 62 |                 rand3: Math.random(),
 63 |             });
 64 |         }
 65 |     }
 66 |     
 67 |     // harvest color info from the loaded image for use in the fillStyle function
 68 |     glc.onExitFrame = function(t) {
 69 |         if( t == 0 && pixels.length == 0 ){
 70 |             for( var x=0; x<imgx; x++ ){
 71 |                 pixels[x] = [];
 72 |                 for( var y=0; y<imgy; y++ ){
 73 |                     var pixel = glc.context.getImageData( x, y, 1, 1 ).data;
 74 |                     var hsv = rgb2hsv( pixel[0], pixel[1], pixel[2] );
 75 |                     pixels[x][y] = [ pixel[0], pixel[1], pixel[2], hsv.h, hsv.s, hsv.v ];
 76 |                 }
 77 |             }
 78 |         }
 79 |     }
 80 | }
 81 | 
 82 | 
 83 | /* slightly modified from: http://stackoverflow.com/a/8023734 */
 84 | 
 85 | function rgb2hsv () {
 86 |     var rr, gg, bb,
 87 |         r = arguments[0] / 255,
 88 |         g = arguments[1] / 255,
 89 |         b = arguments[2] / 255,
 90 |         h, s,
 91 |         v = Math.max(r, g, b),
 92 |         diff = v - Math.min(r, g, b),
 93 |         diffc = function(c){
 94 |             return (v - c) / 6 / diff + 1 / 2;
 95 |         };
 96 | 
 97 |     if (diff == 0) {
 98 |         h = s = 0;
 99 |     } else {
100 |         s = diff / v;
101 |         rr = diffc(r);
102 |         gg = diffc(g);
103 |         bb = diffc(b);
104 | 
105 |         if (r === v) {
106 |             h = bb - gg;
107 |         }else if (g === v) {
108 |             h = (1 / 3) + rr - bb;
109 |         }else if (b === v) {
110 |             h = (2 / 3) + gg - rr;
111 |         }
112 |         if (h < 0) {
113 |             h += 1;
114 |         }else if (h > 1) {
115 |             h -= 1;
116 |         }
117 |     }
118 |     return {
119 |         h: Math.round(h * 360),
120 |         s: s,
121 |         v: v
122 |     };
123 | }


--------------------------------------------------------------------------------
/code/roy-pixels3.js:
--------------------------------------------------------------------------------
  1 | var pixels = [];
  2 | 
  3 | function onGLC(glc) {
  4 |     glc.loop();
  5 |     glc.size( 360, 360);
  6 |     glc.setDuration( 1 );
  7 |     glc.setFPS( 25 );
  8 |     glc.setMode('single');
  9 |     glc.setEasing(false);
 10 |     glc.setMaxColors( 256 );
 11 |     glc.setQuality( 1 );
 12 |     var list = glc.renderList,
 13 |         width = glc.w,
 14 |         height = glc.h,
 15 |         color = glc.color;
 16 | 
 17 |     // your code goes here:
 18 |     glc.styles.backgroundColor = color.rgb( 0, 0, 0 );
 19 |     var imgx = 60;
 20 |     var imgy = 60;
 21 |     var blocksize = 6;
 22 |     var hvar = 10;
 23 |     var svar = 0.1;
 24 |     var vvar = 0.1;
 25 | 
 26 | 	var img = list.addImage({
 27 | 		x: imgx/2,
 28 | 		y: imgy/2,
 29 | 		url: "file:///C:/Users/Roy/Desktop/glc-windows/lianne3-square.png",
 30 |         globalAlpha: function( t ){
 31 |             return ( pixels.length == 0 ) ? 1 : 0;
 32 |         },
 33 | 	});
 34 | 	
 35 |     for( var x=0; x<imgx; x++ ){
 36 |         for( var y=0; y<imgy; y++ ){
 37 |             list.addCircle({
 38 |                 x: x * blocksize + (blocksize/2),
 39 |                 y: y * blocksize + (blocksize/2),
 40 |                 //radius: [ blocksize/2, blocksize ],
 41 |                 radius: function( t ){
 42 |                     return blocksize*0.85 + Math.sin( t*2*Math.PI ) * blocksize*0.25;
 43 |                 },
 44 |                 stroke: false,
 45 |                 fillStyle: function( t ){
 46 |                     if( pixels.length != 0 ){
 47 | 	                    var pixel = pixels[ this.xpos ][ this.ypos ];
 48 |                         // calculate hue
 49 | 	                    var f1 = Math.sin( ( t+this.rand1 ) * 2*Math.PI );
 50 |                         var hue = Math.round( pixel[3] + f1*hvar );
 51 |                         hue = ( hue + 360 ) % 360;
 52 |                         // calculate sat
 53 |                         var f2 = Math.sin( ( t+this.rand2 ) * 2*Math.PI );
 54 |                         var sat = pixel[4] + f2*svar;
 55 |                         // ... and val
 56 |                         var f3 = Math.sin( ( t+this.rand3 ) * 2*Math.PI );
 57 |                         var val = pixel[5] + f3*vvar;
 58 |                         // return the slightly modified color
 59 |                         return color.hsv( hue, sat, val );
 60 |                     } else {
 61 |                     	return this.defaultColor;    
 62 |                     }
 63 |                 },
 64 |                 xpos: x,
 65 |                 ypos: y,
 66 |                 defaultColor: color.rgba( 0, 0, 0, 0 ),
 67 |                 rand1: Math.random(),
 68 |                 rand2: Math.random(),
 69 |                 rand3: Math.random(),
 70 |                 phase: Math.random(),
 71 |             });
 72 |         }
 73 |     }
 74 |     
 75 |     // harvest color info from the loaded image for use in the fillStyle function
 76 |     glc.onExitFrame = function(t) {
 77 |         if( t == 0 && pixels.length == 0 ){
 78 |             for( var x=0; x<imgx; x++ ){
 79 |                 pixels[x] = [];
 80 |                 for( var y=0; y<imgy; y++ ){
 81 |                     var pixel = glc.context.getImageData( x, y, 1, 1 ).data;
 82 |                     var hsv = rgb2hsv( pixel[0], pixel[1], pixel[2] );
 83 |                     pixels[x][y] = [ pixel[0], pixel[1], pixel[2], hsv.h, hsv.s, hsv.v ];
 84 |                 }
 85 |             }
 86 |         }
 87 |     }
 88 | }
 89 | 
 90 | 
 91 | /* slightly modified from: http://stackoverflow.com/a/8023734 */
 92 | 
 93 | function rgb2hsv () {
 94 |     var rr, gg, bb,
 95 |         r = arguments[0] / 255,
 96 |         g = arguments[1] / 255,
 97 |         b = arguments[2] / 255,
 98 |         h, s,
 99 |         v = Math.max(r, g, b),
100 |         diff = v - Math.min(r, g, b),
101 |         diffc = function(c){
102 |             return (v - c) / 6 / diff + 1 / 2;
103 |         };
104 | 
105 |     if (diff == 0) {
106 |         h = s = 0;
107 |     } else {
108 |         s = diff / v;
109 |         rr = diffc(r);
110 |         gg = diffc(g);
111 |         bb = diffc(b);
112 | 
113 |         if (r === v) {
114 |             h = bb - gg;
115 |         }else if (g === v) {
116 |             h = (1 / 3) + rr - bb;
117 |         }else if (b === v) {
118 |             h = (2 / 3) + gg - rr;
119 |         }
120 |         if (h < 0) {
121 |             h += 1;
122 |         }else if (h > 1) {
123 |             h -= 1;
124 |         }
125 |     }
126 |     return {
127 |         h: Math.round(h * 360),
128 |         s: s,
129 |         v: v
130 |     };
131 | }


--------------------------------------------------------------------------------
/code/roy-poly.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(0.5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h;
13 | 
14 | 	// your code goes here:
15 | 	var maxsize = 300;
16 | 	var nr = 50;
17 | 	var points = 7;
18 | 
19 | 	glc.styles.lineWidth = 4;
20 | 
21 | 	list.addRect({
22 | 		x: width/2,
23 | 		y: height/2,
24 | 		w: width,
25 | 		h: height,
26 | 		fill: true,
27 | 		fillStyle: '#99aaee'
28 | 	});
29 | 
30 | 	for( var i = 0; i < nr; i++ ){
31 | /*		var radius = Math.sin( (i*2*Math.PI)/nr ) * nr;
32 | 		list.addStar({
33 | 			points: points,
34 | 			x: width/2,
35 | 			y: height/2,
36 | 			innerRadius: i*7,
37 | 			outerRadius: i*7,
38 | 			rotation: [ i * 5, i*5 + (360/points) ],
39 | 			fill: false,
40 | 			stroke: true,
41 | 			fillStyle: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0)' ],
42 | 			strokeStyle: 'rgba(0,0,100,1)',
43 | 			phase: 1-(i/nr)
44 | 		});*/
45 | 		list.addPoly({
46 | 			sides: points,
47 | 			x: width/2/* + ( Math.sin( (i*2*Math.PI)/nr ) * radius )*/,
48 | 			y: height/2/* + ( Math.sin( (i*2*Math.PI)/nr ) * radius )*/,
49 | 			radius: i*7,
50 | 			rotation: [ i * 5, i*5 + (360/points) ],
51 | 			fill: false,
52 | 			stroke: true,
53 | 			fillStyle: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0)' ],
54 | 			strokeStyle: 'rgba(30,50,100,0.75)',
55 | 			phase: 1-(i/nr)
56 | 		});
57 | 
58 | 	}
59 | 
60 | }


--------------------------------------------------------------------------------
/code/roy-present.js:
--------------------------------------------------------------------------------
  1 | function onGLC(glc) {
  2 | 	glc.loop();
  3 | 	glc.size( 400, 400 );
  4 | 	glc.setDuration( 5 );
  5 | 	glc.setFPS( 25 );
  6 | 	// glc.setMode('single');
  7 | 	// glc.setEasing(false);
  8 | 	glc.setMaxColors( 256 );
  9 | 	glc.setQuality( 1 );
 10 | 	var list = glc.renderList,
 11 | 		width = glc.w,
 12 | 		height = glc.h,
 13 | 		color = glc.color;
 14 | 
 15 | 	// your code goes here:
 16 | 	glc.styles.backgroundColor = color.rgba( 30, 50, 70, 1 );
 17 | 	var lw1 = 7;
 18 | 	var lw2 = 7;
 19 | 	var col1 = color.rgba( 40, 180, 60, 1 );
 20 | 	var col2 = color.rgba( 255, 60, 40, 1 );
 21 | 
 22 | 	var c = list.addContainer({
 23 | 		x: width/2,
 24 | 		y: height/2 + 10,
 25 | 	});
 26 | 	
 27 | 	// box outlines
 28 | 	var lines1 = [
 29 | 		[ -120, -80, -120, 80 ],
 30 | 		[ 120, 80, 120, -80 ],
 31 | 		[ -120, -80, 0, -120 ],
 32 | 		[ 120, -80, 0, -120 ],
 33 | 		[ -120, 80, 0, 120 ],
 34 | 		[ 120, 80, 0, 120 ],
 35 | 		[ -120, -80, 0, -40 ],
 36 | 		[ 120, -80, 0, -40 ],
 37 | 		[ 0, -40, 0, 120 ]
 38 | 	];
 39 | 
 40 | 	for( var i=0; i<lines1.length; i++ ){
 41 | 		list.addSegment({
 42 | 			x0: lines1[i][0],
 43 | 			y0: lines1[i][1],
 44 | 			x1: lines1[i][2],
 45 | 			y1: lines1[i][3],
 46 | 			lineWidth: lw1,
 47 | 			stroke: true,
 48 | 			strokeStyle: col1,
 49 | 			segmentLength: 160,
 50 | 			parent: c,
 51 | 			globalAlpha: getAlpha
 52 | 		});
 53 | 	}
 54 | 
 55 | 	// ribbon
 56 | 	var lines2 = [
 57 | 		[ 60, -60, -60, -100 ],
 58 | 		[ 60, -100, -60, -60 ],
 59 | 		[ -60, -60, -60, 100 ],
 60 | 		[ 60, 100, 60, -60 ]
 61 | 	];
 62 | 		
 63 | 	for( var i=0; i<lines2.length; i++ ){
 64 | 		list.addSegment({
 65 | 			x0: lines2[i][0],
 66 | 			y0: lines2[i][1],
 67 | 			x1: lines2[i][2],
 68 | 			y1: lines2[i][3],
 69 | 			lineWidth: lw2,
 70 | 			stroke: true,
 71 | 			strokeStyle: col2,
 72 | 			segmentLength: 160,
 73 | 			parent: c,
 74 | 			globalAlpha: getAlpha
 75 | 		});
 76 | 	}
 77 | 	
 78 | 	// knot
 79 | 	var arcs = [
 80 | 		[ 10, -116, 90 ],
 81 | 		[ -10, -110, -90 ]
 82 | 	];
 83 | 	
 84 | 	for( var i=0; i<arcs.length; i++ ){
 85 | 		list.addArcSegment({
 86 | 			x: arcs[i][0],
 87 | 			y: arcs[i][1],
 88 | 			radius: 30,
 89 | 			lineWidth: lw2,
 90 | 			stroke: true,
 91 | 			strokeStyle: col2,
 92 | 			rotation: arcs[i][2],
 93 | 			arc: [0,720],
 94 | 			parent: c,
 95 | 			globalAlpha: getAlpha
 96 | 		});        
 97 | 	}
 98 | 
 99 | 	function getAlpha( t ){
100 | 		return Math.min( 1, Math.sin( t*Math.PI )*2 );
101 | 	}
102 | 	
103 | }


--------------------------------------------------------------------------------
/code/roy-pulsar.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var points = 6;
17 | 	var nr = 12;
18 | 	var circlesize = 275;
19 | 	var maxsize = 600;
20 | 
21 | 	list.addRect({
22 | 		x: width/2,
23 | 		y: height/2,
24 | 		w: width,
25 | 		h: height,
26 | 		fill: true,
27 | 		fillStyle: '#ffcc11'
28 | 	});
29 | 
30 | 	for( var i=0; i<nr; i++ ){
31 | 		list.addStar({
32 | 			points: points,
33 | 			x: width/2 + Math.sin( (i*2*Math.PI)/nr ) * circlesize,
34 | 			y: height/2 + -Math.cos( (i*2*Math.PI)/nr ) * circlesize,
35 | 			innerRadius: [ -maxsize, maxsize ],
36 | 			outerRadius: [ maxsize, -maxsize ],
37 | 			rotation: [ 0, 120 ],
38 | 			fill: true,
39 | 			stroke: false,
40 | 			fillStyle: 'rgba(0,17,102,0.8)',
41 | 			strokeStyle: 'rgba(0,0,100,1)',
42 | 		});
43 | 	}
44 | 
45 | }


--------------------------------------------------------------------------------
/code/roy-radar.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 128 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 0, 40, 10, 1 );
17 | 	var lines = 50;
18 | 	var targets = 11;
19 | 	var rad = width/2 - 20;
20 | 
21 | 	// grid
22 | 	list.addGrid({
23 | 		x: 0,
24 | 		y: 0,
25 | 		w: width,
26 | 		h: height,
27 | 		gridSize: 20,
28 | 		lineWidth: 1,
29 | 		strokeStyle: color.rgba( 150, 255, 200, 0.3 )
30 | 	});
31 | 
32 | 	// axis lines
33 | 	for( var i=0; i<2; i++ ){
34 | 		list.addLine({
35 | 			x0: i ? 0 : width/2,
36 | 			y0: i ? height/2 : 0,
37 | 			x1: i ? width : width/2,
38 | 			y1: i ? height/2 : height,
39 | 			lineWidth: 1,
40 | 			strokeStyle: color.rgba( 150, 255, 200, 0.4 )
41 | 		});
42 | 	}
43 | 
44 | 	// outer circle
45 | 	list.addCircle({
46 | 		x: width/2,
47 | 		y: height/2,
48 | 		radius: rad,
49 | 		fill: false,
50 | 		stroke: true,
51 | 		strokeStyle: color.rgba( 150, 255, 200, 1 ),
52 | 		lineWidth: 1.5
53 | 	});
54 | 
55 | 	// bleep, bleep
56 | 	for( var i=0; i<lines; i++ ){
57 | 		list.addRay({
58 | 			x: width/2,
59 | 			y: height/2,
60 | 			length: rad,
61 | 			angle: [ 0, 360 ],
62 | 			lineWidth: 3,
63 | 			strokeStyle: color.rgba( 150, 255, 200, (1-(i/lines))*0.8 ),
64 | 			phase: 1 - i/360
65 | 		});
66 | 	}
67 | 
68 | 	// targets
69 | 	for( var i=0; i<targets; i++ ){
70 | 		var angle = Math.random() * ( 2 * Math.PI );
71 | 		var dist = 40 + Math.random() * ( rad - 60 );
72 | 		list.addCircle({
73 | 			x: width/2 + Math.sin( angle ) * dist,
74 | 			y: height/2 - Math.cos( angle ) * dist,
75 | 			radius: [ 6, 2 ],
76 | 			fill: true,
77 | 			fillStyle: [ color.rgba( 150, 255, 200, 1 ), color.rgba( 150, 255, 200, 0 ) ],
78 | 			stroke: false,
79 | 			shadowColor: [ color.rgba( 150, 255, 200, 1 ), color.rgba( 150, 255, 200, 0 ) ],
80 | 			shadowOffsetX: 0,
81 | 			shadowOffsetY: 0,
82 | 			shadowBlur: 10,
83 | 			phase: 1 - ( ( angle - Math.PI/2.05 )  / ( 2 * Math.PI ) ),
84 | 		});
85 | 	}
86 | 
87 | }


--------------------------------------------------------------------------------
/code/roy-rating.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(420, 100);
 5 | 	glc.setDuration(1.5);
 6 | 	glc.setFPS(20);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(8);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var points = 5;
17 | 	var nr = 5;
18 | 
19 | 	for( var i=0; i<nr; i++ ){
20 | 		list.addStar({
21 | 			points: points,
22 | 			x: i*80 + 50,
23 | 			y: height/2,
24 | 			innerRadius: 18	,
25 | 			outerRadius: 35,
26 | 			rotation: [ 0, 360/points ],
27 | 			fill: true,
28 | 			stroke: false,
29 | 			fillStyle: 'rgba(0,50,102,1)',
30 | 			/*phase: i/nr*/
31 | 		});
32 | 	}
33 | 
34 | }


--------------------------------------------------------------------------------
/code/roy-rects.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h;
13 | 
14 | 	// your code goes here:
15 | 	var maxsize = 500;
16 | 	var nr = 20;
17 | 
18 | 	glc.styles.lineWidth = 1;
19 | 
20 | 	for( var i = 0; i < nr; i++ ){
21 | 		var radius = Math.sin( (i*2*Math.PI)/nr * 200 ) + 50;
22 | 		list.addRect({
23 | 			x: width/2 + ( Math.sin( (i*2*Math.PI)/nr ) * radius ),
24 | 			y: height/2 + ( -Math.cos( (i*2*Math.PI)/nr ) * radius ),
25 | 			w: [0,maxsize],
26 | 			h: [0,maxsize],
27 | 			rotation: -(i/nr)*360,
28 | 			fill: false,
29 | 			stroke: true,
30 | 			strokeStyle: [ '#000000', 'rgba(0,0,0,0)' ],
31 | 			phase: i/nr
32 | 
33 | 			/*w: [ 0, maxsize ],
34 | 			h: [ 0, maxsize ],
35 | 			rotation: [ -360, 360 ],
36 | 			stroke: true,
37 | 			fill: false,
38 | 			strokeStyle: [ '#ff3399', '#ffffff' ],
39 | 			fillStyle: [ '#ff3399', '#ffffff' ],
40 | 			phase: 1-(i/nr)*/
41 | 		});
42 | 	}
43 | 
44 | }		


--------------------------------------------------------------------------------
/code/roy-segments.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	//glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#457';
17 | 	var nr = 7;
18 | 	var radius = 80;
19 | 	
20 | 	// draw the full circles in the background
21 | 	for(var i=0; i<nr; i++ ){
22 | 		list.addCircle({
23 | 			x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
24 | 			y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
25 | 			radius: radius,
26 | 			fill: false,
27 | 			stroke: true,
28 | 			strokeStyle: color.rgba( 0, 0, 0, 0.3 ),
29 | 			lineWidth: 1,
30 | 		});
31 | 	}
32 | 	
33 | 	// draw partial circles
34 | 	for(var i=0; i<nr; i++ ){
35 | 
36 | 		list.addCircle({
37 | 			x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
38 | 			y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
39 | 			radius: radius,
40 | 			fill: false,
41 | 			stroke: true,
42 | 			strokeStyle: '#fff',
43 | 			lineWidth: 2.25,
44 | 			startAngle: -360/nr,
45 | 			endAngle: 360/nr,
46 | 			rotation: [ i * (360/nr) -90, (i * (360/nr)) + 270 ],
47 | 		});
48 | 	}
49 | 
50 | }


--------------------------------------------------------------------------------
/code/roy-segments2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 16 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#253';
17 | 	var nr = 7;
18 | 	var radius = 80;
19 | 	
20 | 	// draw partial circles
21 | 	for(var i=0; i<nr; i++ ){
22 | 		
23 | 		for( var s=0; s<9; s++ ){
24 | 
25 | 			list.addCircle({
26 | 				x: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
27 | 				y: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
28 | 				radius: radius - s * 8,
29 | 				fill: false,
30 | 				stroke: true,
31 | 				strokeStyle: color.rgba( 255,255,150,1 ),
32 | 				lineWidth: 2.25,
33 | 				startAngle: -360/nr,
34 | 				endAngle: 360/nr,
35 | 				rotation: [ i * (360/nr) -90, (i * (360/nr)) + 270 ],
36 | 				nr: i,
37 | 				phase: s/19
38 | 			});
39 | 
40 | 			
41 | 		}
42 | 
43 | 	}
44 | 
45 | }


--------------------------------------------------------------------------------
/code/roy-segments3.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 4 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 16 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#235';
17 | 	var nr = 5;
18 | 	var nr2 = 21;
19 | 	var radius = 70;
20 | 	var radius2 = 17;
21 | 	
22 | 	// draw partial circles
23 | 	for(var i=0; i<nr; i++ ){
24 | 		
25 | 		for( var s=0; s<nr2; s++ ){
26 | 
27 | 			list.addCircle({
28 | 				xpos: width/2 + Math.sin( (i/nr)*2*Math.PI ) * radius,
29 | 				ypos: height/2 - Math.cos( (i/nr)*2*Math.PI ) * radius,
30 | 				x: function( t ){
31 | 					return this.xpos + Math.sin( ( t + this.nr/nr ) * 2*Math.PI ) * radius2;	
32 | 				},
33 | 				y: function( t ){
34 | 					return this.ypos - Math.cos( ( t + this.nr/nr ) * 2*Math.PI ) * radius2;	
35 | 				},
36 | 				radius: radius - s * 3,
37 | 				fill: false,
38 | 				stroke: true,
39 | 				strokeStyle: color.rgba( 255,255,255,0.5 ),
40 | 				blendMode: 'screen',
41 | 				lineWidth: 0.95,
42 | 				startAngle: -360/nr,
43 | 				endAngle: 360/nr,
44 | 				rotation: [ i * (360/nr) -90, (i * (360/nr)) + 270 ],
45 | 				nr: i,
46 | 				nr2: s,
47 | 				phase: s/(nr*4.5)
48 | 			});
49 | 
50 | 			
51 | 		}
52 | 
53 | 	}
54 | 
55 | }


--------------------------------------------------------------------------------
/code/roy-semicircles.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 10 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 51, 51, 51, 1 );
17 | 
18 | 	var grid = 4;
19 | 	var padding = 20;
20 | 	var gridSize = ( width - ( 2*padding ) ) /grid;
21 | 	var cols = [ '#c00', '#0c0', '#00c' ];
22 | 
23 | 	for( var x=0; x<grid; x++ ){
24 | 		for( var y=0; y<grid; y++ ){
25 | 
26 | 			var speeds = [1,2,3,4];
27 | 			speeds.sort( function(){ return 0.5 - Math.random(); } );
28 | 
29 | 			for( var c=0; c<cols.length; c++ ){
30 | 
31 | 				list.addCircle({
32 | 					x: padding + x * gridSize + gridSize/2,
33 | 					y: padding + y * gridSize + gridSize/2,
34 | 					radius: gridSize * 0.4,
35 | 					drawFromCenter: true,
36 | 					startAngle: 0,
37 | 					endAngle: 180,
38 | 					rotation: [ 0, 360 ],
39 | 					stroke: false,
40 | 					fill: true,
41 | 					fillStyle: cols[c],
42 | 					blendMode: 'lighter',
43 | 					speedMult: speeds[c]
44 | 				});
45 | 
46 | 			}
47 | 
48 | 		}
49 | 	}
50 | 
51 | }


--------------------------------------------------------------------------------
/code/roy-shading.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 2 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 	glc.styles.backgroundColor = '#125';
15 | 	var nr = 6;
16 | 	var radius = 70;
17 | 	
18 | 	for(var i=0; i<nr; i++ ){
19 | 		list.addPoly({
20 | 			x: function( t ){
21 | 				return width/2 + Math.sin( (t/nr)*2*Math.PI + this.offset ) * radius*1.1;
22 | 			},
23 | 			y: function( t ){
24 | 				return height/2 - Math.cos( (t/nr)*2*Math.PI + this.offset ) * radius*1.1;
25 | 			},
26 | 			radius: radius,
27 | 			sides: 3,
28 | 			fill: true,
29 | 			fillStyle: function( t ){
30 | 				var angle = this.nr/nr * 360 + ( t * ( 360/nr ) + 35 );
31 | 				var brightness = 0.2 + ( Math.abs( (angle%360) -180 ) / 180 ) * 0.8;
32 | 				return color.hsva( 200, 1, 1, brightness );
33 | 			},
34 | 			blendMode: 'screen',
35 | 			rotation: function( t ){
36 | 				return this.nr/nr * 360 + ( t * ( 360/nr ) + 90 );
37 | 			},
38 | 			nr: i,
39 | 			offset: (2*Math.PI) * (i/nr),
40 | 		});
41 | 	}
42 | 
43 | }


--------------------------------------------------------------------------------
/code/roy-shadowdots.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 420, 420 );
 5 | 	glc.setDuration(2);
 6 | 	glc.setFPS(30);
 7 | 	//glc.setMode("single");
 8 | 	//glc.setEasing(false);
 9 | 	glc.setMaxColors(16);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#ffffff';
17 | 	var grid = 5;
18 | 	var padding = 40;
19 | 	var gridsizeX = ( width - 2*padding ) / grid;
20 | 	var gridsizeY = ( height - 2*padding ) / grid;
21 | 
22 | 	for( var x=0; x<grid; x++){
23 | 		for( var y=0; y<grid; y++){
24 | 
25 | 			var basex = padding + ( x * gridsizeX + gridsizeX/2 );
26 | 			var basey = padding + ( y * gridsizeY + gridsizeY/2 );
27 | 			var topx = basex + ( basex - (width/2) ) / 15;
28 | 			var topy = basey + ( basey - (width/2) ) / 15;
29 | 			var fromcenter = Math.sqrt( Math.pow( ( basex - (width/2) ), 2 ) + Math.pow( ( basey - (height/2) ), 2 ) );
30 | 
31 | 			list.addCircle({
32 | 				x: [ basex, topx ],
33 | 				y: [ basey, topy ],
34 | 				radius: [ 25, 28 ],
35 | 				stroke: false,
36 | 				fill: true,
37 | 				fillStyle: color.rgba( 255, 255, 255, 1 ),
38 | 				shadowColor: [ color.rgba( 0, 0, 0, 0.4 ), color.rgba( 0, 0, 0, 0.25 ) ],
39 | 				shadowOffsetX: [ 0, 15 ],
40 | 				shadowOffsetY: [ 0, 15 ],
41 | 				shadowBlur: [ 0, 20 ],
42 | 				phase: -fromcenter  / 750
43 | 			});
44 | 
45 | 		}
46 | 	}
47 | 
48 | }


--------------------------------------------------------------------------------
/code/roy-shapeshift.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(540, 540);
 4 |     glc.setDuration( 4.5 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors( 16 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 1, 0.35 );
17 | 	var r = 100;
18 |     var r2 = r/2;
19 |     var a = r * Math.sqrt(3);
20 |     var h = r/2 + r2/2;
21 |     
22 |     for( var x=-1; x<8; x++ ){
23 |         
24 |         var ypos = -h;
25 |         
26 |         for( var y=-1; y<9; y++ ){
27 | 
28 |             var oddeven = y % 2;
29 |             ypos += oddeven ? r : r2;
30 | 
31 |  			list.addStar({
32 |                 x: x * a + ( Math.floor(y/2) % 2 ) * (a/2),
33 |                 y: ypos,
34 |                 //outerRadius: r,
35 |                 outerRadius: function( t ){
36 |                     return r + Math.abs( Math.sin( t*2*Math.PI ) * (r/6.66) );
37 |                 },
38 |                 innerRadius: 0,
39 |                 points: 3,
40 |                 stroke: true,
41 |                 strokeStyle: 'white',
42 |                 lineWidth: 2,
43 |                 fill: false,
44 |                 //blendMode: 'screen',
45 |                 rotation: oddeven ? [ 90, 210 ] : [ 270, 390 ],
46 |             });
47 |             
48 |         }
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/code/roy-silk.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(600, 400);
 4 |     glc.setDuration(4);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 | 	glc.styles.backgroundColor = '#333';
15 | 	var nr = 600;
16 |     var sides = 7;
17 |     var margin = -180;
18 |         
19 |     for( var i=0; i<nr; i++ ){
20 |         list.addPoly({
21 |             x: i * ( (width+2*margin)/nr ) - margin,
22 |             y: function(t) {
23 |                 return (height/2) + Math.cos( t*2*Math.PI ) * 10;
24 |             },
25 |             radius: function(t) {
26 |                 return 100 + Math.sin( t*2*Math.PI ) * 20;
27 |             },
28 |             sides: sides,
29 |             fill: false,
30 |             stroke: true,
31 |             strokeStyle: '#efc',
32 |             lineWidth: 0.125,
33 |             rotation: function(t) {
34 |                 return Math.cos( t*1*Math.PI ) * (180/sides);
35 |             },
36 |             phase: i/nr,
37 |         });
38 | 	
39 |     }
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/code/roy-singlestar.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var maxsize = 800;
17 | 	var points = 8;
18 | 
19 | 	list.addStar({
20 | 		points: points,
21 | 		x: width/2,
22 | 		y: height/2,
23 | 		innerRadius: [ 180, 0 ],
24 | 		outerRadius: [ 0, 180 ],
25 | 		rotation: [ 0, 360 ],
26 | 		fill: true,
27 | 		stroke: false,
28 | 		fillStyle: color.animHSV(0, 60, 1, 1, 0, 1),
29 | 		strokeStyle: 'rgba(0,0,100,1)',
30 | 	});
31 | 
32 | }


--------------------------------------------------------------------------------
/code/roy-snowflakes.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 2 );
 6 | 	glc.setFPS( 30 );
 7 | 	//glc.setMode( "single" );
 8 | 	//glc.setEasing( false );
 9 | 	glc.setMaxColors( 32 );
10 | 	glc.setQuality( 10 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#003366';
18 | 	var grid = 5;
19 | 	var padding = 30;
20 | 	var size = ( width - 2 * padding ) / grid; 
21 | 	var points = 6;
22 | 
23 | 	for( var x=0; x<grid; x++ ){
24 | 		for( var y=0; y<grid; y++ ){
25 | 
26 | 			for( var i=0; i<2; i++ ){
27 | 				list.addPoly({
28 | 					x: padding + ( x * size + size/2 ),
29 | 					y: padding + y * size + size/2,
30 | 					radius: [ size/8, size/3 ],
31 | 					sides: points,
32 | 					stroke: true,
33 | 					strokeStyle: 'white',
34 | 					lineWidth: 1.5,
35 | 					rotation: 180 / points,
36 | 					fill: false,
37 | 					phase: Math.random()
38 | 				});
39 | 			}
40 | 
41 | 			list.addStar({
42 | 				x: padding + x * size + size/2,
43 | 				y: padding + y * size + size/2,
44 | 				outerRadius: [ size/2.5, size/6 ],
45 | 				innerRadius: 0,
46 | 				points: points,
47 | 				stroke: true,
48 | 				strokeStyle: 'white',
49 | 				lineWidth: 1.5,
50 | 				rotation: 180 / points,
51 | 				fill: false,
52 | 				phase: Math.random()
53 | 			});
54 | 
55 | 		}
56 | 	}
57 | 
58 | }


--------------------------------------------------------------------------------
/code/roy-soap.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 2 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 256 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#114488';
17 | 	var nr = 60;
18 | 
19 | 	for( var i=0; i<nr; i++){
20 | 
21 | 		var size = 10 + Math.random() * 60;
22 | 		var wavelength = 50 + Math.random() * 100;
23 | 		var amplitude = 15 + Math.random() * 30;
24 | 		var xpos = Math.random() * width;
25 | 
26 | 		list.addCircle({
27 | 			x: function( t ){
28 | 				var ypos = ( height+size*2 ) - t * ( height - 4*size );
29 | 				return this.xpos + ( Math.sin( ypos/this.wl ) * this.amp );
30 | 			},
31 | 			y: [ height + size*2, -size*2 ],
32 | 			radius: size,
33 | 			stroke: true,
34 | 			lineWidth: 1,
35 | 			strokeStyle: color.rgba(255,255,255,0.5),
36 | 			fill: true,
37 | 			fillStyle: color.rgba(255,255,255,0.1),
38 | 			wl: wavelength,
39 | 			amp: amplitude,
40 | 			xpos: xpos,
41 | 			phase: Math.random()
42 | 		});
43 | 	}
44 | 
45 | }


--------------------------------------------------------------------------------
/code/roy-soap2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 320, 320 );
 5 | 	glc.setDuration( 3.5 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 64 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#114488';
18 | 	var nr = 60;
19 | 
20 | 	for( var i=0; i<nr; i++){
21 | 
22 | 		var size = 7 + Math.random() * 40;
23 | 		var wavelength = 35 + Math.random() * 65;
24 | 		var amplitude = 15 + Math.random() * 30;
25 | 		var xpos = Math.random() * width;
26 | 
27 | 		list.addCircle({
28 | 			x: function( t ){
29 | 				var ypos = ( height+size*2 ) - t * ( height - 4*size );
30 | 				return this.xpos + ( Math.sin( ypos/this.wl ) * this.amp );
31 | 			},
32 | 			y: [ height + size*2, -size*2 ],
33 | 			radius: size,
34 | 			stroke: true,
35 | 			lineWidth: 1,
36 | 			strokeStyle: color.rgba(255,255,255,0.5),
37 | 			fill: true,
38 | 			fillStyle: color.rgba(255,255,255,0.1),
39 | 			wl: wavelength,
40 | 			amp: amplitude,
41 | 			xpos: xpos,
42 | 			phase: Math.random()
43 | 		});
44 | 	}
45 | 
46 | }


--------------------------------------------------------------------------------
/code/roy-soap3.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 8 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 64 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = color.rgb( 60, 80, 120 );
18 | 	var segments = 3;
19 | 	var segmentLength = 50;
20 | 	var lastx1 = 0;
21 | 	var lasty1 = 0;
22 | 	var lastnr = 0;
23 | 	var arms = 17;
24 | 
25 | 	for( var arm = 0; arm < arms; arm++ ){
26 | 
27 | 		var seg = segmentLength/2 + Math.random() * ( segmentLength );
28 | 
29 | 		for( var i=0; i<segments; i++ ){
30 | 
31 | 			list.addLine({
32 | 				x0: function( t ){
33 | 					return ( this.nr == 0 ) ? width/2 : lastx1;
34 | 				},
35 | 				y0: function( t ){
36 | 					return ( this.nr == 0 ) ? height/2 : lasty1;
37 | 				},
38 | 				x1: function( t ){
39 | 					if( this.nr ==0 ){
40 | 						var newx1 = width/2 + Math.sin( ((this.arm/arms)+t)*2*Math.PI ) * this.seg;
41 | 					} else {
42 | 						var newx1 = lastx1 + Math.sin( (this.nr+1)*((this.arm/arms)+t)*2*Math.PI ) * this.seg;
43 | 					}
44 | 					lastx1 = newx1;
45 | 					return newx1;
46 | 				},
47 | 				y1: function( t ){
48 | 					if( this.nr == 0 ){
49 | 						var newy1 = height/2 + -Math.cos( ((this.arm/arms)+t)*2*Math.PI ) * this.seg;
50 | 					} else {
51 | 						var newy1 = lasty1 + -Math.cos( (this.nr+1)*((this.arm/arms)+t)*2*Math.PI ) * this.seg;
52 | 					}
53 | 					lasty1 = newy1;
54 | 					lastnr = this.nr;
55 | 					return newy1;
56 | 				},
57 | 				lineWidth: 1.5,
58 | 				strokeStyle: color.rgba( 255, 255, 255, 0 ),
59 | 				nr: i,
60 | 				arm: arm,
61 | 				seg: seg - ( (i/segments) * seg ) / 2,
62 | 				phase: Math.random()
63 | 			});
64 | 
65 | 			list.addCircle({
66 | 				x: function( t ){
67 | 					return lastx1;
68 | 				},
69 | 				y: function( t ){
70 | 					return lasty1;
71 | 				},
72 | 				radius: function( t ){
73 | 					return 3 + ( segments - lastnr ) * 8;
74 | 				},
75 | 				fillStyle: color.rgba( 220, 255, 255, 0.15 )
76 | 			});
77 | 
78 | 		}
79 | 
80 | 	}
81 | 
82 | }


--------------------------------------------------------------------------------
/code/roy-sprites.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 460, 460);
 4 |     glc.setDuration(2);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors(64);
 9 |     glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#df6';
17 | 	var nr = 11;
18 |     var rad = 110;
19 |     var sizeFactor = 0.55;
20 |     
21 |     for( var i=0; i<nr; i++ ){
22 |         list.addImage({
23 |             x: function( t ){
24 |                 return (width/2) + ( Math.sin( ( (this.i/nr) + (t/nr) )*2*Math.PI ) * rad );
25 |             },
26 |             y: function( t ){
27 |                 return (height/2) - ( Math.cos( ( (this.i/nr) + (t/nr) )*2*Math.PI ) * rad );
28 |             },
29 |             url: "file:///C:/Users/Roy/Desktop/glc-windows/sprite.png",
30 |             h: 208 * sizeFactor,
31 |             w: 183 * sizeFactor,
32 |             rotation: [ i*(360/nr), (i+1)*(360/nr) + 360],
33 |             shadowColor: "rgba(0, 0, 0, 0.3)",
34 |             shadowOffsetX: 5,
35 |             shadowOffsetY: 5,
36 |             shadowBlur: 10,
37 |             i: i,
38 |             blendMode: 'darken',
39 |         });
40 |         
41 |     }
42 | 	
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/code/roy-sprites2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 400, 400 );
 4 |     glc.setDuration(5);
 5 |     glc.setFPS(25);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     glc.setMaxColors(64);
 9 |     glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#122';
17 | 	var nr = 13;
18 |     var rad = 120;
19 |     var sizeFactor = 2;
20 |     
21 |     for( var i=0; i<nr; i++ ){
22 |         list.addImage({
23 |             x: function( t ){
24 |                 return (width/2) + ( Math.sin( ( (this.i/nr) + (t/nr) )*2*Math.PI ) * rad );
25 |             },
26 |             y: function( t ){
27 |                 return (height/2) - ( Math.cos( ( (this.i/nr) + (t/nr) )*2*Math.PI ) * rad );
28 |             },
29 |             url: "file:///C:/Users/Roy/Desktop/glc-windows/sprite.png",
30 |             h: 208 * sizeFactor,
31 |             w: 183 * sizeFactor,
32 |             rotation: [ i*(360/nr), (i+1)*(360/nr) + 360],
33 | //             shadowColor: "rgba(0, 0, 0, 0.3)",
34 | //             shadowOffsetX: 5,
35 | //             shadowOffsetY: 5,
36 | //             shadowBlur: 10,
37 |             i: i,
38 |             blendMode: 'lighten',
39 |         });
40 |         
41 |     }
42 | 	
43 | 
44 | }
45 | 


--------------------------------------------------------------------------------
/code/roy-squaredance.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 450, 450 );
 4 |     glc.setDuration( 1 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode( 'single' );
 7 |     glc.setEasing( false );
 8 | 	glc.setMaxColors( 256 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 | 	glc.styles.backgroundColor = '#135';
17 |     var nr = 17;
18 |     var nr2 = 7;
19 |     var size = 160;
20 |     
21 |     for( var r=0; r<nr2; r++ ){
22 |         
23 |         var rsize = size - r * ( size/nr2 );
24 |         var nrofDots = Math.round( nr * ( rsize / size ) );
25 |         var offset = Math.random();
26 | 
27 |         list.addRect({
28 |             x: width/2,
29 |             y: height/2,
30 |             w: rsize * 2,
31 |             h: rsize * 2,
32 |             fill: false,
33 |             fillStyle: color.rgba( 0, 0, 0, 0.3 ),
34 |             stroke: true,
35 |             strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
36 |             lineWidth: 1,
37 |         });
38 | 
39 |         for( var i=0; i<nrofDots; i++ ){
40 | 
41 |             var container = list.addContainer({
42 |                 x: width / 2,
43 |                 y: height / 2,
44 |                 rotation: ( r%2 == 0) ? [ 0, 360 ] : [ 360, 0 ],
45 |                 phase: i/nrofDots + offset,
46 |                 speedMult: 1/nrofDots,
47 |             });
48 | 
49 |             list.addCircle({
50 |                 x: function( t ){
51 |                     var a = ( t*2*Math.PI ) % (Math.PI/2);
52 |                     if( a > Math.PI/4 ){ a = (Math.PI/2) - a; }
53 |                     var l = this.rsize / Math.cos( a );
54 |                     return l;
55 |                 },
56 |                 y: 0,
57 |                 radius: 5,
58 |                 stroke: false,
59 |                 fillStyle: ( r%2 == 0 ) ? color.rgba( 255, 255, 255, 1 ) : color.rgba( 155, 200, 255, 1 ),
60 |                 parent: container,
61 |                 phase: i/nrofDots + offset,
62 |                 speedMult: 1/nrofDots,
63 |                 rsize: rsize,
64 |             });
65 |         }
66 |     }    
67 | }


--------------------------------------------------------------------------------
/code/roy-stars.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(2);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var nr = 7;
17 | 	var radius = 120;
18 | 	var count = 0;
19 | 
20 | 	function getXPos( t ){
21 | 		var x = Math.sin( ( (t+count)*2*Math.PI)/nr ) * radius;
22 | 		return width/2 + x;
23 | 	}
24 | 
25 | 	function getYPos( t ){
26 | 		var y = -Math.cos( ( (t+count)*2*Math.PI)/nr ) * radius;
27 | 		count++;
28 | 		count = count%nr;
29 | 		return height/2 + y;
30 | 	}
31 | 
32 | 	for( var i=0; i<nr; i++ ){
33 | 		list.addStar({
34 | 			x: getXPos,
35 | 			y: getYPos,
36 | 			points: 5,
37 | 			innerRadius: 20,
38 | 			outerRadius: 50,
39 | 			rotation: [ 0, 360/2.5 ],
40 | 			fill: true,
41 | 			stroke: false,
42 | 			fillStyle: [ color.hsv( Math.floor( i*(360/nr) ), 1, 1 ), color.hsv( Math.floor( (i+1)*(360/nr) ), 1, 1 ) ]
43 | 		});
44 | 	}
45 | }


--------------------------------------------------------------------------------
/code/roy-starwave.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 320, 320 );
 5 | 	glc.setDuration( 2 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 64 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	var nr = 30;
18 | 	var maxsize = 600;
19 | 	var points = 5;
20 | 	var rot = Math.random() * 360;
21 | 	var col = color.rgba( 100,160,120, 1 );
22 | 	glc.styles.backgroundColor = col;
23 | 
24 | 	for( var i=0; i<nr; i++){
25 | 
26 | 		var size = maxsize - ( (i/nr) * maxsize );
27 | 
28 | 		list.addStar({
29 | 			x: width/2,
30 | 			y: height/2,
31 | 			innerRadius: function( t ){
32 | 				return this.basesize/2 + Math.sin( t*2*Math.PI ) * (this.basesize/16);
33 | 			},
34 | 			outerRadius: function( t ){
35 | 				return this.basesize + Math.sin( t*2*Math.PI ) * this.basesize/8;
36 | 			},
37 | 			rotation: function( t ){
38 | 				return rot + Math.sin( t*2*Math.PI )*4;
39 | 			},
40 | 			points: points,
41 | 			stroke: true,
42 | 			lineWidth: 1,
43 | 			strokeStyle: color.rgba( 255, 255, 255, 0.7 ),
44 | 			fill: true,
45 | 			fillStyle: col,
46 | 			shadowColor: color.rgba( 0, 0, 0, 0.35 ),
47 | 			shadowOffsetX: 4,
48 | 			shadowOffsetY: 8,
49 | 			shadowBlur: 10,
50 | 			basesize: size,
51 | 			phase: i/nr
52 | 		});
53 | 	}
54 | 
55 | }


--------------------------------------------------------------------------------
/code/roy-swarm.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(600, 400);
 5 | 	glc.setDuration(2);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	//glc.setEasing(false);
 9 | 	glc.setMaxColors(16);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#002244';
17 | 	var nr = 500;
18 | 	var variance = 600;
19 | 
20 | 	for( var i=0; i<nr; i++ ){
21 | 
22 | 		list.addBezierSegment({
23 | 			x0: 100,
24 | 			y0: 200,
25 | 			x1: getVariance(100),
26 | 			y1: getVariance(200),
27 | 			x2: getVariance(500),
28 | 			y2: getVariance(200),
29 | 			x3: 500,
30 | 			y3: 200,
31 | 			lineWidth: function( t ){
32 | 				return 0.1 + ( Math.sin( t * Math.PI ) * 3 );
33 | 			},
34 | 			strokeStyle: color.randomRGB( 51, 255 ),
35 | 			percent: 0.1,
36 | 			phase: ( i / nr ) / 3
37 | 		});
38 | 
39 | 		function getVariance( offset ){
40 | 			var angle = Math.random() * (2*Math.PI);
41 | 			var dist = Math.random()*variance - (variance/2);
42 | 			return offset + ( Math.sin( angle ) * dist );
43 | 		}
44 | 
45 | 	}
46 | }


--------------------------------------------------------------------------------
/code/roy-tablecloth.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(480, 480);
 4 | 	glc.setDuration( 3.5 );
 5 | 	glc.setFPS(25);
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing(false);
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.hsv( 200, 1, 0.25 );
17 | 	var r = 80;
18 | 	var dist = r * 1.2;
19 | 	var disty = dist * Math.sin( (Math.PI*2)/3 );
20 | 	
21 | 	for( var x=-1; x<8; x++ ){
22 | 		for( var y=-1; y<8; y++ ){
23 | 			
24 | 			var oddeven = y % 2;
25 | 
26 | 			list.addPoly({
27 | 				x: x * dist + oddeven * (dist/2),
28 | 				y: y * disty,
29 | 				radius: r,
30 | 				sides: 6,
31 | 				stroke: false,
32 | 				strokeStyle: color.hsva( 0, 1, 0, 0.25 ),
33 | 				lineWidth: 2,
34 | 				fill: true,
35 | 				fillStyle: color.hsva( ( oddeven ? 200 : 140 ), 0.5, 1, 0.4 ),
36 | 				blendMode: 'screen',
37 | 				rotation: [ 0, 60 ],
38 | 			});
39 | 			
40 | 		}
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/code/roy-tablecloth2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(540, 540);
 4 | 	glc.setDuration( 3.5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode('single');
 7 | 	//glc.setEasing(false);
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.hsv( 200, 1, 0.35 );
17 | 	var r = 80;
18 | 	var r2 = r/2;
19 | 	var a = r * Math.sqrt(3);
20 | 	var h = r/2 + r2/2;
21 | 	
22 | 	for( var x=-1; x<8; x++ ){
23 | 		
24 | 		var ypos = -h;
25 | 		
26 | 		for( var y=-1; y<9; y++ ){
27 | 
28 | 			var oddeven = y % 2;
29 | 			ypos += oddeven ? r : r2;
30 | 
31 | 			list.addPoly({
32 | 				x: x * a + ( Math.floor(y/2) % 2 ) * (a/2),
33 | 				y: ypos,
34 | 				radius: r,
35 | 				sides: 3,
36 | 				stroke: false,
37 | 				strokeStyle: color.hsva( 0, 1, 0, 0.25 ),
38 | 				lineWidth: 2,
39 | 				fill: true,
40 | 				fillStyle: color.hsva( 200, 0.6, 1, 0.5 ),
41 | 				blendMode: 'screen',
42 | 				rotation: oddeven ? [ 270, 390 ] : [ 90, 210 ],
43 | 			});
44 | 			
45 | 		}
46 | 	}
47 | }
48 | 


--------------------------------------------------------------------------------
/code/roy-tablecloth3.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(540, 540);
 4 |     glc.setDuration( 2.5 );
 5 |     glc.setFPS( 30 );
 6 |     glc.setMode('single');
 7 |     //glc.setEasing(false);
 8 |     glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = color.hsv( 200, 1, 0.35 );
17 | 	var r = 80;
18 |     var r2 = r/2;
19 |     var a = r * Math.sqrt(3);
20 |     var h = r/2 + r2/2;
21 |     
22 |     for( var x=-1; x<8; x++ ){
23 |         
24 |         var ypos = -h;
25 |         
26 |         for( var y=-1; y<9; y++ ){
27 | 
28 |             var oddeven = y % 2;
29 |             ypos += oddeven ? r : r2;
30 | 
31 |  			list.addPoly({
32 |                 x: x * a + ( Math.floor(y/2) % 2 ) * (a/2),
33 |                 y: ypos,
34 |                 radius: function( t ){
35 |                     return ( r*0.75 + Math.cos( t*2*Math.PI ) * (r*0.25) ) - 3;
36 |                 },
37 |                 sides: 3,
38 |                 stroke: false,
39 |                 fill: true,
40 |                 fillStyle: color.hsva( 40, ( oddeven ? 0.75 : 0.5 ), 1, 1 ),
41 | 	            //blendMode: 'screen',
42 |                 rotation: oddeven ? [ 90, 210 ] : [ 270, 390 ],
43 |             });
44 |             
45 |         }
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/code/roy-tentacles.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 10 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 16 );
10 | 	glc.setQuality( 10 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = color.rgb( 0, 50, 100 );
18 | 	var segments = 5;
19 | 	var segmentLength = 40;
20 | 	var lastx0 = 0;
21 | 	var lasty0 = 0;
22 | 	var lastx1 = 0;
23 | 	var lasty1 = 0;
24 | 	var arms = 17;
25 | 
26 | 	for( var arm = 0; arm < arms; arm++ ){
27 | 
28 | 		var seg = segmentLength/2 + Math.random() * ( segmentLength );
29 | 
30 | 		for( var i=0; i<segments; i++ ){
31 | 
32 | 			list.addLine({
33 | 				x0: function( t ){
34 | 					if( this.nr == 0 ){
35 | 						newx0 = width/2;
36 | 					} else {
37 | 						newx0 = lastx1;
38 | 					}
39 | 					lastx0 = newx0;
40 | 					return newx0;
41 | 				},
42 | 				y0: function( t ){
43 | 					if( this.nr == 0 ){
44 | 						newy0 = width/2;
45 | 					} else {
46 | 						newy0 = lasty1;
47 | 					}
48 | 					lasty0 = newy0;
49 | 					return newy0;
50 | 				},
51 | 				x1: function( t ){
52 | 					if( this.nr ==0 ){
53 | 						var newx1 = width/2 + Math.sin( ((this.arm/arms)+t)*2*Math.PI ) * seg;
54 | 					} else {
55 | 						var newx1 = lastx1 + Math.sin( (this.nr+1)*((this.arm/arms)+t)*2*Math.PI ) * seg;
56 | 					}
57 | 					lastx1 = newx1;
58 | 					return newx1;
59 | 				},
60 | 				y1: function( t ){
61 | 					if( this.nr == 0 ){
62 | 						var newy1 = height/2 + -Math.cos( ((this.arm/arms)+t)*2*Math.PI ) * seg;
63 | 					} else {
64 | 						var newy1 = lasty1 + -Math.cos( (this.nr+1)*((this.arm/arms)+t)*2*Math.PI ) * seg;
65 | 					}
66 | 					lasty1 = newy1;
67 | 					return newy1;
68 | 				},
69 | 				lineWidth: 1.5,
70 | 				strokeStyle: color.rgba( 255, 255, 255, 0.3 ),
71 | 				nr: i,
72 | 				arm: arm,
73 | 				seg: seg,
74 | 				phase: Math.random()
75 | 			});
76 | 
77 | 		}
78 | 
79 | 		list.addCircle({
80 | 			x: function( t ){
81 | 				return lastx1;
82 | 			},
83 | 			y: function( t ){
84 | 				return lasty1;
85 | 			},
86 | 			radius: 4,
87 | 			fillStyle: color.rgba( 255, 255, 255, 1 )
88 | 		});
89 | 
90 | 	}
91 | 
92 | 	list.addCircle({
93 | 		x: width/2,
94 | 		y: height/2,
95 | 		radius: 4,
96 | 		fillStyle: color.rgba( 255, 255, 255, 1 )
97 | 	});
98 | 
99 | }


--------------------------------------------------------------------------------
/code/roy-textspiral.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 320, 320 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 50, 80, 110, 1 );
17 | 
18 | 	var nr = 200;
19 | 	var size = 330;
20 | 	var scale = 0.98;
21 | 	var str = 'GIFLOOPCODER';
22 | 	var letterAngle = 13;
23 | 
24 | 	for( var i=0; i<nr; i++ ){
25 | 		var c = list.addContainer({
26 | 			x: width/2,
27 | 			y: height/2,
28 | 			rotation: [ i * letterAngle, ( i + str.length ) * letterAngle ]
29 | 		});
30 | 
31 | 		var currentSize = getSize( i );
32 | 		var targetSize = getSize( i + str.length );
33 | 
34 | 		list.addText({
35 | 			text: str.charAt( i % str.length ),
36 | 			x: 0,
37 | 			y: [ -currentSize, -targetSize ],
38 | 			rotation: 4,
39 | 			fontSize: [ currentSize/3, targetSize/3 ],
40 | 			fontWeight: 'bold',
41 | 			fontFamily: 'Roboto Condensed',
42 | 			fontStyle: 'normal',
43 | 			fillStyle: 'white',
44 | 			parent: c
45 | 		});
46 | 
47 | 	}
48 | 
49 | 	var gradient = color.createRadialGradient( 0, 0, 0, 0, 0, width/2 );
50 | 	gradient.addColorStop( 0, color.rgba( 50, 80, 110, 1 ) );
51 | 	gradient.addColorStop( 1, color.rgba( 50, 80, 110, 0 ));
52 | 
53 | 	list.addCircle({
54 | 		x: width/2,
55 | 		y: height/2,
56 | 		radius: width/2,
57 | 		stroke: false,
58 | 		fill: true,
59 | 		fillStyle: gradient
60 | 	});
61 | 
62 | 	function getSize( i ){
63 | 		return size * Math.pow( scale, i );
64 | 	}
65 | }


--------------------------------------------------------------------------------
/code/roy-touchingballs.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#456';
17 | 
18 | 	var grid = 4;
19 |     var gridSize = 100;
20 | 	var maxSize = Math.sqrt( Math.pow( gridSize/2, 2 ) + Math.pow( gridSize/2, 2 ) );
21 | 	var sizeFactor = (gridSize/2) / maxSize;
22 |     
23 |     var container = list.addContainer({
24 | 		x: width / 2,
25 | 		y: height / 2,
26 |         rotation: 21, 
27 | 	});
28 | 	
29 |     
30 |     for( var x=-grid; x<=grid; x++ ){
31 |         for( var y=-2*grid; y<=2*grid; y++ ){
32 |             var oddeven = y % 2;
33 |             list.addCircle({
34 |                 x: x * gridSize + ( oddeven ? -gridSize/4 : gridSize/4 ),
35 |                 y: y * gridSize/2,
36 |                 stroke: false,
37 |                 fillStyle: oddeven ? '#6af' : '#fd6',
38 |                 radius: function( t ){
39 |                 	return ( maxSize * 0.5 ) + Math.sin( t*2*Math.PI ) * ( maxSize * (sizeFactor-0.5) );
40 |             	},
41 |                 parent: container,
42 |                 oddeven: oddeven,
43 |                 phase: oddeven * 0.5,
44 |             });
45 |         }
46 |     }
47 |     
48 | }
49 | 


--------------------------------------------------------------------------------
/code/roy-touchingballs2.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 3 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 |     var list = glc.renderList,
11 |         width = glc.w,
12 |         height = glc.h,
13 |         color = glc.color;
14 | 
15 |     // your code goes here:
16 |     glc.styles.backgroundColor = '#468';
17 | 
18 | 	var grid = 3;
19 |     var gridSize = 150;
20 | 	var maxSize = Math.sqrt( Math.pow( gridSize/2, 2 ) + Math.pow( gridSize/2, 2 ) );
21 | 	var sizeFactor = (gridSize/2) / maxSize;
22 |     
23 |     var container = list.addContainer({
24 | 		x: width / 2,
25 | 		y: height / 2,
26 |         rotation: 13, 
27 | 	});
28 | 	
29 |     
30 |     for( var x=-grid; x<=grid; x++ ){
31 |         for( var y=-2*grid; y<=2*grid; y++ ){
32 |             var oddeven = y % 2;
33 |             list.addCircle({
34 |                 x: x * gridSize + ( oddeven ? -gridSize/4 : gridSize/4 ),
35 |                 y: y * gridSize/2,
36 |                 stroke: true,
37 |                 strokeStyle: color.rgba( 255,255,255,0.25 ),
38 |                 blendMode: 'lighter',
39 |                 lineWidth: maxSize / 1.725,
40 |                 fill: false,
41 |                 radius: function( t ){
42 |                 	return ( maxSize * 0.5 ) + Math.sin( t*2*Math.PI ) * ( maxSize * (sizeFactor-0.5) );
43 |             	},
44 |                 parent: container,
45 |                 oddeven: oddeven,
46 |                 phase: oddeven * 0.5,
47 |             });
48 |         }
49 |     }
50 |     
51 | }
52 | 


--------------------------------------------------------------------------------
/code/roy-tribble.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(5);
 6 | 	glc.setFPS(30);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	// glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	var points = 8;
17 | 	var nr = 7;
18 | 	var circlesize = 60;
19 | 	var maxsize = 120;
20 | 
21 | 	for( var i=0; i<nr; i++ ){
22 | 		list.addStar({
23 | 			points: points,
24 | 			x: width/2 + Math.sin( (i*2*Math.PI)/nr ) * circlesize,
25 | 			y: height/2 + -Math.cos( (i*2*Math.PI)/nr ) * circlesize,
26 | 			innerRadius: [ maxsize, -maxsize ],
27 | 			outerRadius: [ -maxsize, maxsize ],
28 | 			rotation: [ 0, 360 ],
29 | 			fill: true,
30 | 			stroke: false,
31 | 			/*fillStyle: color.animHSV( i*(360/nr), ( i*(360/nr) )+60, 1, 1, 1, 1 ),*/
32 | 			fillStyle: 'rgba(0,60,20,0.65)',
33 | 			strokeStyle: 'rgba(0,0,100,1)',
34 | 			/*phase: (i/nr)*/
35 | 		});
36 | 	}
37 | 
38 | /*	list.addStar({
39 | 		points: points,
40 | 		x: width/2,
41 | 		y: height/2,
42 | 		innerRadius: [ 180, 0 ],
43 | 		outerRadius: [ 0, 180 ],
44 | 		rotation: [ 0, 360 ],
45 | 		fill: true,
46 | 		stroke: false,
47 | 		fillStyle: color.animHSV(0, 60, 1, 1, 0, 1),
48 | 		strokeStyle: 'rgba(0,0,100,1)',
49 | 	});*/
50 | 
51 | }


--------------------------------------------------------------------------------
/code/roy-typo.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size(400, 400);
 5 | 	glc.setDuration(3);
 6 | 	glc.setFPS(20);
 7 | 	glc.setMode("single");
 8 | 	glc.setEasing(false);
 9 | 	glc.setMaxColors(256);
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#fff8ee';
17 | 	var grid = 9;
18 | 	var length = Math.sqrt( Math.pow((width/grid),2) + Math.pow((width/grid),2) );
19 | 	var letters = 'abcdefghijklmnopqrstuvwxyz';
20 | 
21 | 	for( var x=0; x<grid+2; x++ ){
22 | 		for( var y=0; y<grid+2; y++ ){
23 | 			var letter = letters.charAt( Math.floor( Math.random() * letters.length ) );
24 | 			var offset = Math.random() * 360;
25 | 			list.addText({
26 | 				x: x * (width/grid) - (width/grid)/2,
27 | 				y: y * (height/grid) - (height/grid)/2,
28 | 				text: letter,
29 | 				fontSize: getSize,
30 | 				fontWeight: 'normal',
31 | 				fontFamily: 'sans-serif',
32 | 				fontStyle: 'normal',
33 | 				rotation: [ offset, offset + 360 ],
34 | 				fillStyle: color.rgba(0,0,0,0.7),
35 | 				phase: (x+y)/(grid+grid)
36 | 			});
37 | 		}
38 | 	}
39 | 
40 | 	function getSize( t ){
41 | 		return Math.sin( t*Math.PI ) * ( 2.5 * length );
42 | 	}
43 | 
44 | }


--------------------------------------------------------------------------------
/code/roy-vault.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 30 );
 6 | 	glc.setMode('single');
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 64 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = '#000';
17 | 	var nr = 20;
18 | 	var lw = 25;
19 | 	
20 | 	for( var i=0; i<nr; i++ ){
21 | 
22 | 		var rad = Math.floor(i/2)*lw + lw*1;
23 | 		var length = rad * 2 * Math.PI;
24 | 		var segments = 2 * Math.ceil( Math.random() * 4 );
25 | 		var segmentLength = length / segments;
26 | 		
27 | 		list.addCircle({
28 | 			x: width/2,
29 | 			y: height/2,
30 | 			radius: rad,
31 | 			stroke: true,
32 | 			strokeStyle: color.rgba( 50,100,255,0.5 ),
33 | 			blendMode: 'lighter',
34 | 			lineWidth: lw*2,
35 | 			lineDash: [ segmentLength, segmentLength ],
36 | 			lineCap: 'butt',
37 | 			fill: false,
38 | 			rotation: [ 0, 360/ (segments/2) ],
39 | 			phase: Math.random(),
40 | 			speedMult: ( Math.random() < 0.5 ) ? 1 : -1 
41 | 		});
42 | 
43 | 	}
44 | 	
45 | }


--------------------------------------------------------------------------------
/code/roy-velvet.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 400, 400 );
 4 | 	glc.setDuration( 2.5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMaxColors( 16 );
 7 | 	glc.setQuality( 1 );
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );
15 | 
16 | 	var nr = 100;
17 | 	
18 | 	for( var i=0; i<nr; i++ ){
19 | 		
20 | 		var path = [];
21 | 		var points = 200;
22 | 		var radius = i*1.2;
23 | 		var waves = 5;
24 | 
25 | 		var c = list.addContainer({
26 | 			x: width/2,
27 | 			y: height/2,
28 | 			rotation: [ 0, 360/(waves/2) ],
29 | 			phase: i/nr,
30 | 			speedMult: -1
31 | 		});
32 | 		
33 | 		for( var p=0; p<points+1; p++ ){
34 | 			var angle = (p/points)*2*Math.PI;
35 | 			var tempRadius = radius + Math.sin( angle*waves ) * radius/3;
36 | 			var x = Math.sin( angle ) * tempRadius;
37 | 			var y = -Math.cos( angle ) * tempRadius;
38 | 			path.push( x ); 
39 | 			path.push( y ); 
40 | 		}
41 | 
42 | 		list.addPath({
43 | 			x: 0,
44 | 			y: 0,
45 | 			strokeStyle: color.rgba( 255, 255, 200, 1 - ( 1 * ( i/nr ) ) ),
46 | 			lineWidth: 0.5,
47 | 			path: path,
48 | 			parent: c,
49 | 		});
50 | 		
51 | 	}
52 | 
53 | }


--------------------------------------------------------------------------------
/code/roy-walkcycle.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	//glc.loop();
 3 |     glc.size(400, 400);
 4 |     glc.setDuration(4.0);
 5 |     glc.setFPS(25);
 6 |     //glc.setMode('single');
 7 |     //glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 |     glc.styles.backgroundColor = '#444';
15 |     
16 |     var body = list.addRay({
17 |         x: width/2,
18 |         y: 250,
19 |         length: 80,
20 |         strokeStyle: 'white',
21 |         angle: -80
22 |     });
23 |     
24 |     var upperLeg = list.addRay({
25 |         x: 0,//width/2,
26 |         y: 0,//[ 260, 250 ],
27 |         angle: [ 130, 200 ],//[ 70, 110 ],
28 |         length: 50,
29 |         parent: body,
30 |         phase: 0,
31 |         strokeStyle: 'white'
32 |     });
33 | 
34 |     var lowerLeg = list.addRay({
35 |         x: 50,
36 |         y: 0,
37 |         angle: [ 0, 30 ],
38 |         length: 50,
39 |         parent: upperLeg,
40 |         phase: 0,
41 |         strokeStyle: 'white'
42 |     });
43 | 
44 |     var upperLeg = list.addRay({
45 |         x: 0,//width/2,
46 |         y: 0,//[ 260, 250 ],
47 |         angle: [ 130, 200 ],//[ 70, 110 ],
48 |         length: 50,
49 |         parent: body,
50 |         phase: 0.5,
51 |         strokeStyle: 'white'
52 |     });
53 | 
54 |     var lowerLeg = list.addRay({
55 |         x: 50,
56 |         y: 0,
57 |         angle: [ 0, 30 ],
58 |         length: 50,
59 |         parent: upperLeg,
60 |         phase: 0.5,
61 |         strokeStyle: 'white'
62 |     });
63 | 
64 |     var upperArm = list.addRay({
65 |         x: 80,
66 |         y: 0,
67 |         angle: [ 130, 210 ],
68 |         length: 45,
69 |         parent: body,
70 |         phase: 0,
71 |         strokeStyle: 'white'
72 |     });
73 | 
74 |     var lowerArm = list.addRay({
75 |         x: 45,
76 |         y: 0,
77 |         angle: [ -40, 0 ],
78 |         length: 45,
79 |         parent: upperArm,
80 |         phase: 0,
81 |         strokeStyle: 'white'
82 |     });
83 | 
84 | }


--------------------------------------------------------------------------------
/code/roy-warp.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	// glc.playOnce();
 4 | 	glc.size( 400, 400 );
 5 | 	glc.setDuration( 5 );
 6 | 	glc.setFPS( 25 );
 7 | 	glc.setMode( "single" );
 8 | 	glc.setEasing( false );
 9 | 	glc.setMaxColors( 8 );
10 | 	glc.setQuality( 1 );
11 | 	var list = glc.renderList,
12 | 		width = glc.w,
13 | 		height = glc.h,
14 | 		color = glc.color;
15 | 
16 | 	// your code goes here:
17 | 	glc.styles.backgroundColor = '#335599';
18 | 	var innerRadius = 40;
19 | 	var outerRadius = 480;
20 | 	var lines = 60;
21 | 
22 | 	for( var i=0; i<lines; i++ ){
23 | 
24 | 		list.addLine({
25 | 			x0: function( t ){
26 | 				return width/2 + Math.sin( ( Math.sin( t*2*Math.PI )/7 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * innerRadius;
27 | 			},
28 | 			y0: function( t ){
29 | 				return height/2 + -Math.cos( ( Math.sin( t*2*Math.PI )/3 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * innerRadius;
30 | 			},
31 | 			x1: function( t ){
32 | 				return width/2 + Math.sin( (  Math.sin( -t*2*Math.PI )/11 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * outerRadius;
33 | 			},
34 | 			y1: function( t ){
35 | 				return height/2 + -Math.cos( ( Math.sin( -t*2*Math.PI )/5 + (this.nr/lines) + t/lines ) * ( 2*Math.PI ) ) * outerRadius;
36 | 			},
37 | 			lineWidth: 1.5,
38 | 			strokeStyle: color.rgba( 255, 255, 255, 0.5 ),
39 | 			nr: i
40 | 		});
41 | 
42 | 	}
43 | 
44 | }


--------------------------------------------------------------------------------
/code/roy-wavelines.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 500, 300 );
 4 | 	glc.setDuration( 5 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 16 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 50, 40, 60, 1 );
17 | 
18 | 	var waves = 21;
19 | 	var nr = 7;
20 | 
21 | 	for( var w=0; w<waves; w++ ){
22 | 
23 | 		for( var i=0; i<nr; i++ ){
24 | 			if( i != 0 ){
25 | 				list.addLine({
26 | 					x0: i * ( width/nr ) - (width/nr)/3,
27 | 					y0: function( t ){
28 | 						return getY( t, this.nr-0.1 );
29 | 					},
30 | 					x1: i * ( width/nr ) + (width/nr)/3,
31 | 					y1: function( t ){
32 | 						return getY( t, this.nr+0.1 );
33 | 					},
34 | 					stroke: true,
35 | 					strokeStyle: color.rgba( 255, 255, 255, 0.6 ),
36 | 					lineWidth: 2,
37 | 					nr: i,
38 | 					phase: w / ( waves * 2.2 )
39 | 				});
40 | 			}
41 | 
42 | 		}
43 | 
44 | 	}
45 | 
46 | 	function getY( t, i ){
47 | 		var y = height/2 + Math.sin( ( t + ( i / nr ) ) * 2 * Math.PI ) * 100;
48 | 		return y;
49 | 	}
50 | 
51 | }


--------------------------------------------------------------------------------
/code/roy-waves.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size( 500, 300 );
 4 | 	glc.setDuration( 3 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( "single" );
 7 | 	glc.setEasing( false );
 8 | 	glc.setMaxColors( 32 );
 9 | 	glc.setQuality( 1 );
10 | 	var list = glc.renderList,
11 | 		width = glc.w,
12 | 		height = glc.h,
13 | 		color = glc.color;
14 | 
15 | 	// your code goes here:
16 | 	glc.styles.backgroundColor = color.rgba( 45, 50, 30, 1 );
17 | 
18 | 	var waves = 30;
19 | 	var ypos = 40;
20 | 
21 | 	for( var i=0; i<waves; i++ ){
22 | 
23 | 		var wl = 50 + i*10;
24 | 		var amp = 5 + i*1;
25 | 		var path = [];
26 | 
27 | 		for( var l=-( width/2 + wl*2 ); l<width/2 + wl*2; l+=wl/40 ){
28 | 			var x = l;
29 | 			var y = Math.sin( (l/wl)*2*Math.PI ) * amp;
30 | 			path.push( x );
31 | 			path.push( y );
32 | 		}
33 | 
34 | 		var c = list.addContainer({
35 | 			x: [ width/2, (width/2)-wl ],
36 | 			y: ypos,
37 | 			phase: ypos/225
38 | 		});
39 | 
40 | 		var w = list.addPath({
41 | 			x: 0,
42 | 			y: 0,
43 | 			strokeStyle: color.rgba( 255, 255, 255, i/waves ),
44 | 			lineWidth: 2,
45 | 			path: path,
46 | 			parent: c
47 | 		});
48 | 
49 | 		ypos = ypos * 1.073;
50 | 	}
51 | 
52 | }


--------------------------------------------------------------------------------
/code/roy.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size( 500, 500 );
 4 |     glc.setDuration( 5 );
 5 |     glc.setFPS( 25 );
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 | 	var grid = 5;
15 |     var gridSize = 40;
16 | 	var maxSize = Math.sqrt( Math.pow( gridSize/2, 2 ) + Math.pow( gridSize/2, 2 ) );
17 | 
18 |     var container = list.addContainer({
19 | 		x: width / 2,
20 | 		y: height / 2
21 | 	});
22 | 	
23 |     
24 |     for( var x=-grid; x<=grid; x++ ){
25 |         for( var y=-grid; y<=grid; y++ ){
26 |             list.addCircle({
27 |                 x: x * gridSize,
28 |                 y: y * gridSize,
29 |                 radius: 10,
30 |                 parent: container,
31 |             });
32 |         }
33 |     }
34 |     
35 | }
36 | 


--------------------------------------------------------------------------------
/code/unsuccessful/roy-lavalamp.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 | 	glc.loop();
 3 | 	glc.size(400, 400);
 4 | 	glc.setDuration( 10 );
 5 | 	glc.setFPS( 25 );
 6 | 	glc.setMode( 'single' );
 7 | 	glc.setEasing( false );
 8 | 	var list = glc.renderList,
 9 | 		width = glc.w,
10 | 		height = glc.h,
11 | 		color = glc.color;
12 | 
13 | 	// your code goes here:
14 | 
15 | 	glc.styles.backgroundColor = color.rgba( 50, 50, 50, 1 );
16 | 	var nr = 5;
17 | 	
18 | 	for( var n=0; n<nr; n++ ){
19 | 
20 | 		var maxwidth = 100 + Math.random() * 200;
21 | 		var xpos = 50 + Math.random()*(width-100);
22 | 		var amp = Math.random() * 150;
23 | 		var offset = Math.random();
24 | 		var speed = Math.ceil( Math.random() * 6 - 3 );
25 | 
26 | 		for( var i=0; i<height; i++ ){
27 | 
28 | 			list.addRect({
29 | 				x: function( t ){
30 | 				   return this.xpos + Math.sin( t*2*Math.PI ) * this.amp;
31 | 				},
32 | 				y: i,
33 | 				w: function( t ){
34 | 					return this.maxwidth + Math.sin( t*2*Math.PI ) * this.maxwidth/2;
35 | 				},
36 | 				h: 1,
37 | 				stroke: false,
38 | 				fillStyle: color.rgba( 255, 80, 0, 0.5 ),
39 | 				phase: i/height + offset,
40 | 				maxwidth: maxwidth,
41 | 				amp: amp,
42 | 				xpos: xpos,
43 | 				speedMult: speed
44 | 			});
45 | 		}
46 | 
47 | 	}
48 | 
49 | }


--------------------------------------------------------------------------------
/code/unsuccessful/roy-weirdbubble.js:
--------------------------------------------------------------------------------
 1 | function onGLC(glc) {
 2 |     glc.loop();
 3 |     glc.size(400, 400);
 4 |     glc.setDuration(2.5);
 5 |     glc.setFPS(20);
 6 |     glc.setMode('single');
 7 |     glc.setEasing(false);
 8 |     var list = glc.renderList,
 9 |         width = glc.w,
10 |         height = glc.h,
11 |         color = glc.color;
12 | 
13 |     // your code goes here:
14 | 
15 | 	glc.styles.backgroundColor = color.rgba( 40, 40, 40, 1 );
16 |     var nr = 300;
17 |     var wmax = 150;
18 |     
19 |     for( var i=0; i<nr; i++ ){
20 |         var wtotal = Math.sin( ( i/nr ) * Math.PI ) * wmax ;
21 |         
22 |         list.addRect({
23 |             x: width/2,
24 |             y: i + ( width-nr)/2,
25 |             w: wtotal,
26 |             h: 1,
27 |             stroke: false,
28 |             fillStyle: color.rgba( 80, 80, 80, 1 )
29 |         });
30 | 
31 |         list.addRect({
32 |             x: function( t ){
33 |                 var w1 = Math.sin(t*2*Math.PI) * this.wtotal;
34 |                 if( w1 > 0 ){
35 |                 	return width/2 - this.wtotal/2 + w1/2;    
36 |                 } else {
37 |                     return width/2 + this.wtotal/2 + w1/2;
38 |                 }
39 |             },
40 |             y: i + ( width-nr)/2,
41 |             w: function( t ){
42 |             	return Math.sin(t*2*Math.PI) * this.wtotal;
43 |             },
44 |             h: 1,
45 |             stroke: false,
46 |             fillStyle: 'green',
47 |             wtotal: wtotal,
48 |             phase: i/nr
49 |         });
50 |         
51 |         
52 |         list.addRect({
53 |             x: function( t ){
54 |                 var w1 = -Math.sin(t*2*Math.PI) * this.wtotal;
55 |                 if( w1 < 0 ){
56 |                 	return width/2 + this.wtotal/2 + w1/2;    
57 |                 } else {
58 |                     return width/2 - this.wtotal/2 + w1/2;
59 |                 }
60 |             },
61 |             y: i + ( width-nr)/2,
62 |             w: function( t ){
63 |             	return -Math.sin(t*2*Math.PI) * this.wtotal;
64 |             },
65 |             h: 1,
66 |             stroke: false,
67 |             fillStyle: 'blue',
68 |             wtotal: wtotal,
69 |             phase: i/nr
70 |         });
71 | 
72 | 
73 |     }
74 |     
75 | //     var gradient = color.createLinearGradient( 0, -height/2, 0, height/2 );
76 | //     gradient.addColorStop( 0, '#f00' );
77 | //     gradient.addColorStop( 1, '#00f' );
78 | 
79 | //     var gradient2 = color.createLinearGradient( 0, -height/2, 0, height/2 );
80 | //     gradient2.addColorStop( 0, '#224' );
81 | //     gradient2.addColorStop( 0.5, '#66b' );
82 | //     gradient2.addColorStop( 1, '#ddf' );
83 |     
84 | 
85 | }


--------------------------------------------------------------------------------
/images/lianne-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne-square.png


--------------------------------------------------------------------------------
/images/lianne-tiny.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne-tiny.png


--------------------------------------------------------------------------------
/images/lianne.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne.jpg


--------------------------------------------------------------------------------
/images/lianne.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne.png


--------------------------------------------------------------------------------
/images/lianne2-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne2-square.png


--------------------------------------------------------------------------------
/images/lianne2-square2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne2-square2.png


--------------------------------------------------------------------------------
/images/lianne2-square3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne2-square3.png


--------------------------------------------------------------------------------
/images/lianne2-tiny.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne2-tiny.png


--------------------------------------------------------------------------------
/images/lianne2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne2.jpg


--------------------------------------------------------------------------------
/images/lianne3-eyes.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne3-eyes.png


--------------------------------------------------------------------------------
/images/lianne3-square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne3-square.png


--------------------------------------------------------------------------------
/images/lianne3-square80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne3-square80.png


--------------------------------------------------------------------------------
/images/lianne3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/lianne3.jpg


--------------------------------------------------------------------------------
/images/nike_swoosh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/nike_swoosh.png


--------------------------------------------------------------------------------
/images/solo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/solo.png


--------------------------------------------------------------------------------
/images/solo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/solo.webp


--------------------------------------------------------------------------------
/images/solo80.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/solo80.png


--------------------------------------------------------------------------------
/images/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/roytanck/gifloopcoder-scripts/c32ff0fe5956d56a7736a33ff9fb5dba9f1bc6ec/images/sprite.png


--------------------------------------------------------------------------------