Added "Dyson sphere"

boytchev · Jul 27, 2024 · d942641 · d942641
1 parent d55f7e5
commit d942641
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # TSL Textures
 
 
+## 0.14.0
+* Added "Dyson sphere" in *dyson-sphere.js*
+
 ## 0.13.0
 * Added "Cork" in *cork.js*
 

diff --git a/docs/dyson-sphere.md b/docs/dyson-sphere.md
@@ -0,0 +1,69 @@
+<img class="logo" src="../assets/logo/logo.png">
+
+
+# TSL Textures
+
+
+## Dyson sphere
+
+This texture generates a possible fractal interpretation of a
+[Dyson sphere](https://en.wikipedia.org/wiki/Dyson_sphere) &ndash;
+an artificial megastracture around a star, porposed by
+[Freeman Dyson](https://en.wikipedia.org/wiki/Freeman_Dyson).
+Click on a snapshot to open it online.
+
+<p class="gallery">
+
+	<a class="style-block nocaption" href="../online/dyson-sphere.html?scale=2&complexity=2&variation=0&color=14542335&background=0&seed=0">
+		<img src="images/dyson-sphere-1.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/dyson-sphere.html?scale=0&complexity=1&variation=0&color=42555&background=15400938&seed=0">
+		<img src="images/dyson-sphere-2.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/dyson-sphere.html?scale=0&complexity=6&variation=0&color=13489576&background=9437297&seed=0">
+		<img src="images/dyson-sphere-3.png">
+	</a>
+
+</p>
+
+
+### Code template
+
+```js
+import { dysonSphere } from "tsl-textures/dyson-sphere.js";
+
+model.material.colorNode = dysonSphere ( {
+	scale: 2,
+	complexity: 2,
+	variation: 0,
+	color: new THREE.Color(12636415),
+	background: new THREE.Color(0),
+	seed: 0
+} );
+```
+
+
+### Parameters
+
+* `scale` &ndash; level of details of the pattern, higher value generates smaller Dyson sphere details, [0, 4]
+* `complexity` &ndash; number of levels of details, [0, 4]
+* `color` &ndash; foreground color of the dyson-sphere
+* `background` &ndash; background color of the dyson-sphere
+* `seed` &ndash; number for the random generator, each value generates specific pattern
+
+
+### Online generator
+
+[online/dyson-sphere.html](../online/dyson-sphere.html)
+
+
+### Source
+
+[src/dyson-sphere.js](https://github.com/boytchev/tsl-textures/blob/main/src/dyson-sphere.js)
+
+		
+<div class="footnote">
+	<a href="../">Home</a>
+</div>
diff --git a/docs/images/dyson-sphere-1.png b/docs/images/dyson-sphere-1.png
diff --git a/docs/images/dyson-sphere-2.png b/docs/images/dyson-sphere-2.png
diff --git a/docs/images/dyson-sphere-3.png b/docs/images/dyson-sphere-3.png
diff --git a/docs/images/dyson-sphere.png b/docs/images/dyson-sphere.png
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -16,7 +16,12 @@ export default [
 
 		files: ["**/*.html", "**/*.js"],
 		plugins: {html},
-
+"settings": {
+        "html/indent": "0",   // code should start at the beginning of the line (no initial indentation).
+ //       "html/indent": "+2",  // indentation is the <script> indentation plus two spaces.
+ //       "html/indent": "tab", // indentation is one tab at the beginning of the line.
+    },
+
 		"rules": {
 			"array-bracket-spacing": ["error", "always", { "singleValue": true, "arraysInArrays": false }],
 			"block-spacing": ["error", "always"],

diff --git a/index.html b/index.html
@@ -54,6 +54,11 @@ <h3>Welcome. Pick a texture!</h3>
 			<img src="./docs/images/cork.png">
 		</a>
 
+		<a class="style-block" href="./online/dyson-sphere.html">
+			<div class="title">Dyson sphere</div>
+			<img src="./docs/images/dyson-sphere.png">
+		</a>
+
 		<a class="style-block" href="./online/entangled.html">
 			<div class="title">Entangled</div>
 			<img src="./docs/images/entangled.png">

diff --git a/online/dyson-sphere.html b/online/dyson-sphere.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+
+
+<html>
+
+
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+	<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
+	<link rel="stylesheet" href="styles.css">
+
+	<script type="importmap">
+	  {
+		"imports": {
+			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
+			"three/nodes": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/nodes/Nodes.js",
+			"tsl-textures/": "../src/"
+		}
+	  }
+	</script>
+</head>
+
+
+<body>
+
+	<script type="module">
+
+		import { install, params } from "./online.js";
+		import { dysonSphere } from "tsl-textures/dyson-sphere.js";
+
+
+		var gui = install( dysonSphere );
+
+		gui.add( params, 'scale' )
+			.min( 0 ).max( 4 )
+			.name( 'Scale' );
+
+		gui.add( params, 'complexity' )
+			.min( 1 ).max( 6 ).step(1)
+			.name( 'Complexity' );
+
+		gui.addColor( params, 'color' )
+			.name( 'Color <right>main</right>' )
+			.$text.classList.add( 'top' );
+
+		gui.addColor( params, 'background' )
+			.name( '<right>background</right>' )
+			.$text.classList.add( 'bottom' );
+
+	</script>
+</body>
+</html>
diff --git a/src/dyson-sphere.js b/src/dyson-sphere.js
@@ -0,0 +1,89 @@
+
+//	TSL-Textures: Dyson sphere
+
+
+
+import { Color } from 'three';
+import { exp, float, loop, mix, positionLocal, tslFn, vec3 } from 'three/nodes';
+
+
+
+var noisea = tslFn( ([ pos ])=>{
+
+	var p = pos.mul( 5**0.5 ).fract().toVar();
+	p.addAssign( p.dot( p.add( vec3( 31.4159, 27.1828, 14.142 ) ) ) );
+	return p.z.mul( p.x.add( p.y ) ).fract().mul( 2 ).sub( 1 );
+
+} );
+
+var noiseg = tslFn( ([ pos ])=>{
+
+	var minx = pos.x.floor().toVar();
+	var maxx = minx.add( 1 ).toVar();
+
+	var miny = pos.y.floor().toVar();
+	var maxy = miny.add( 1 ).toVar();
+
+	var minz = pos.z.floor().toVar();
+	var maxz = minz.add( 1 ).toVar();
+
+	var dx = pos.x.fract().smoothstep( 1, 0 ).toVar();
+	var dy = pos.y.fract().smoothstep( 1, 0 ).toVar();
+	var dz = pos.z.fract().smoothstep( 1, 0 ).toVar();
+
+	var mx = dx.oneMinus().smoothstep( 1, 0 ).toVar();
+	var my = dy.oneMinus().smoothstep( 1, 0 ).toVar();
+	var mz = dz.oneMinus().smoothstep( 1, 0 ).toVar();
+
+	var n000 = noisea( vec3( minx, miny, minz ) ).mul( mx ).mul( my ).mul( mz ).toVar();
+	var n001 = noisea( vec3( minx, miny, maxz ) ).mul( mx ).mul( my ).mul( dz ).toVar();
+	var n010 = noisea( vec3( minx, maxy, minz ) ).mul( mx ).mul( dy ).mul( mz ).toVar();
+	var n011 = noisea( vec3( minx, maxy, maxz ) ).mul( mx ).mul( dy ).mul( dz ).toVar();
+	var n100 = noisea( vec3( maxx, miny, minz ) ).mul( dx ).mul( my ).mul( mz ).toVar();
+	var n101 = noisea( vec3( maxx, miny, maxz ) ).mul( dx ).mul( my ).mul( dz ).toVar();
+	var n110 = noisea( vec3( maxx, maxy, minz ) ).mul( dx ).mul( dy ).mul( mz ).toVar();
+	var n111 = noisea( vec3( maxx, maxy, maxz ) ).mul( dx ).mul( dy ).mul( dz ).toVar();
+
+	return n000.add( n001 ).add( n010 ).add( n011 ).add( n100 ).add( n101 ).add( n110 ).add( n111 );
+
+} );
+
+
+
+var dysonSphere = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale.div( 2 ).add( 0.5 ) ) ).add( params.seed ).toVar( );
+
+	var res = vec3().toVar();
+	var factor = float( 1 ).toVar();
+
+	loop( params.complexity.add( 4 ), ()=>{
+
+		res.addAssign( noiseg( pos.mul( factor ) ) );
+		factor.addAssign( factor );
+
+	} );
+
+	return mix( params.background, params.color, res.x.add( 1 ).div( 5 ) );
+
+} );
+
+
+
+dysonSphere.defaults = {
+	$name: 'Dyson sphere',
+
+	scale: 2,
+	complexity: 2,
+
+	variation: 0,
+
+	color: new Color( 0xc0d0ff ),
+	background: new Color( 0 ),
+
+	seed: 0,
+};
+
+
+
+export { dysonSphere };