Sorcerer's IsleCode Scatter / files 

  1<!-- Scatter v0.1 | (c) Peter Boughton | License: LGPLv3 | https://www.sorcerersisle.com/software/scatter -->
  2<!doctype html><meta charset=utf-8 />
  3<title>Stars Scatter Demo</title>
  4
  5<h1>Stars Scatter Demo</h1>
  6<p>Defaults to random mode, but uses fixed mode to display stars in specific positions.
  7<p>Each constellation button calls configure to change the FixedPositions option, then arrange to move into place.
  8<p>The Shuffle option can still be used with fixed mode - apply the same constellation multiple times and see the stars re-organise.
  9
 10<p><i>(View source to see markup, script and CSS used.)</i>
 11<script src="../scatter.js"></script>
 12
 13
 14<style>
 15	body
 16	{
 17		font-family:sans-serif;
 18		background:#CCC;
 19	}
 20
 21	#Sky
 22	{
 23		display:block;
 24		background:black;
 25		color:white;
 26		width:700px;
 27		height:600px;
 28	}
 29
 30	#Sky>.star
 31	{
 32		transition: 0.3s;
 33		color:white;
 34	}
 35	
 36	#StarControls button
 37	{
 38		border-width: 2px;
 39		padding: 0.25em 0.5em;
 40		cursor:pointer;
 41	}
 42</style>
 43
 44
 45<div id="StarControls">
 46	<button>Random</button>
 47	<button>Gemini</button>
 48	<button>Leo</button>
 49	<button>Orion</button>
 50	<button>Ursa Major</button>
 51</div>
 52
 53<br/>
 54
 55<div id="Sky"></div>
 56
 57
 58<script>
 59	var Sky = document.getElementById('Sky');
 60
 61	for ( var i=0 ; i<25 ; ++i )
 62		Sky.innerHTML += '<div class="star">*</div>';
 63
 64	var Constellations =
 65		{ "Ursa Major":
 66			[[50,141],[119,106],[169,116],[232,123],[346,84],[470,50],[560,42]
 67			,[259,169],[348,146],[455,103],[507,178],[576,210],[680,197]
 68			,[261,239],[305,416],[305,435],[331,284],[434,314],[443,296]
 69			]
 70		, "Leo":
 71			[[512,302],[84,250],[462,166],[236,152],[602,92],[474,105],[233,242]
 72			,[188,326],[685,47],[660,105],[571,56],[515,219]
 73			]
 74		, "Gemini":
 75			[[154,87],[109,151],[376,363],[201,263],[347,211],[266,290],[344,425]
 76			,[313,56],[184,161],[106,214],[205,359],[433,254],[466,253],[507,237]
 77			,[242,120],[410,295],[143,174]
 78			]
 79		, "Orion":
 80			[[149,240],[327,512],[279,258],[248,375],[230,390],[211,403],[233,477]
 81			,[179,538],[236,197],[118,200],[281,412],[85,117],[154,15],[113,18]
 82			,[366,100],[401,132],[409,191],[428,214],[433,247],[426,270],[414,327],[395,339]
 83			]
 84		};
 85
 86	document.getElementById('StarControls').addEventListener('click',showConstellation);
 87
 88	function showConstellation(event)
 89	{
 90		if ( event.target.innerText == "Random" )
 91		{
 92			StarScatter.arrange("random");
 93			return;
 94		}
 95
 96		var Constellation = Constellations[event.target.innerText];
 97
 98		// all children need a position - so add extra off-screen positions to smaller constellations
 99		while( Constellation.length < Sky.children.length )
100			Constellation.push([-100,-100]);
101
102		StarScatter.configure({Mode:"fixed",FixedPositions:Constellation});
103		StarScatter.arrange();
104	}
105
106	var Options =
107		{ InitialMode     : "random"
108		, Mode            : "fixed"
109		, FixedPositions  : Constellations.Orion
110		, FixedRelativeTo : 'corner'
111		, Scale           : 0.5
112		, Shuffle         : true
113		, ChildEvents     : {click:void 0}
114		, ContainerEvents : {click:void 0}
115		};
116
117	var StarScatter = new Scatter(Sky,Options);
118
119</script>