re-init

index.html

@@ -0,0 +1,6 @@
+<link rel='stylesheet' href='./style.css'>
+
+<canvas width='1000' height='1000'></canvas>
+
+<script src='./vendor/zdog.js'></script>
+<script defer src='./script.js'></script>

meta.kdl

@@ -0,0 +1,15 @@
+title        "rainbow-star-cluster"
+description  "random distribution of colored dots in 3D"
+media-type   "webview"
+tags         "visualization"  "colors"
+license      "AGPL"
+homepage     "https://dym.sh/rainbow-star-cluster/"
+source       "https://source.garden/vis/rainbow-star-cluster/"
+
+mirrors {
+  codepen  "https://codepen.io/dym-sh/pen/abmovpP"
+}
+
+log {
+  init  2019
+}

readme.md

@@ -0,0 +1,10 @@
+# rainbow-star-cluster
+
+> random distribution of colored dots in 3D
+
+
+## preview
+- https://codepen.io/dym-sh/pen/abmovpP/left/?editors=0010
+- https://dym.sh/rainbow-star-cluster/
+
+![thumbnail](./th.png)

script.js

@@ -0,0 +1,50 @@
+const rand = ( min, max ) =>
+  ( undefined == max )
+  ? ( Math.random() * min )
+  : ( Math.random() * (max - min) + min )
+
+
+const starCount = 2400
+    , maxRaduis = 500
+
+let canvas = document.querySelector('canvas')
+  , starGroup
+  , stars = [ ]
+
+ill = new Zdog.Illustration
+  ({ element: canvas
+   , dragRotate: true
+   })
+
+starGroup = new Zdog.Group({ addTo: ill })
+
+for( let i = 1; i < starCount; i++ )
+  { const R = rand( maxRaduis )
+        , F = rand( 2 * Math.PI )
+        , T = rand( Math.PI )
+        , x = R * Math.sin( F ) * Math.cos( T )
+        , y = R * Math.sin( F ) * Math.sin( T )
+        , z = R * Math.cos( F )
+        , stroke = ( maxRaduis - R ) / 25 + 5
+        , Hue = R * 360 / maxRaduis - 60
+        , color = `hsl(${Hue}, 100%, 50%)`
+
+    stars.push({ shape: new Zdog.Shape(
+      { addTo: starGroup
+      , translate: { x, y, z }
+      , stroke
+      , color
+      })
+    })
+  }
+
+
+const animate = ( ) =>
+  { starGroup.rotate.y += 0.001
+    starGroup.rotate.x -= 0.001
+    starGroup.rotate.z -= 0.001
+
+    ill.updateRenderGraph( )
+    window.requestAnimationFrame( animate )
+  }
+animate( )

style.css

@@ -0,0 +1,23 @@
+html
+, body
+  { height : 100%
+  ; display : block
+  }
+
+body
+  { align-items : center
+  ; background : black
+  ; display : flex
+  ; overflow : hidden
+  ; justify-content : center
+  ; padding : 1rem
+  }
+
+canvas
+  { background : black
+  ; cursor : grab
+  ; display : block
+  }
+
+canvas:active
+  { cursor : grabbing }