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>
