Added "Stars" pattern

boytchev · May 22, 2024 · 341716e · 341716e
1 parent e96fd8e
commit 341716e
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 0 deletions.
diff --git a/online/images/stars.png b/online/images/stars.png
diff --git a/online/index.html b/online/index.html
@@ -45,6 +45,11 @@ <h3></h3>
 			<img src="images/simplex-noise.png">
 		</a>
 
+		<a class="style-block" href="stars.html">
+			<div class="title">Stars</div>
+			<img src="images/stars.png">
+		</a>
+
 		<a class="style-block" href="zebra-lines.html">
 			<div class="title">Zebra lines</div>
 			<img src="images/zebra-lines.png">

diff --git a/online/stars.html b/online/stars.html
@@ -0,0 +1,85 @@
+<!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="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/"
+		}
+	  }
+	</script>
+</head>
+
+
+<body>
+
+	<script type="module">
+
+		import * as THREE from "three";
+		import { model, canvas, installGui, urlOptions } from "./online.js";
+		import { pattern, options, share, info } from "../src/patterns/stars.js";
+		import { equimaterial, equitexture, noise } from "../src/texture-generator.js";
+
+
+		var guiOptions = {
+				starsColor: urlOptions.c ?? 0xdFdFFF,
+				skyColor: urlOptions.k ?? 0x000045,
+				resolution: urlOptions.r ?? 9,
+				brightness: urlOptions.b ?? 2,
+				density: urlOptions.d ?? 15,
+			};
+
+		var gui = installGui( info, ()=>share(guiOptions), 'map' );
+
+		gui.add( guiOptions, 'resolution', {'256 x 128':8, '512 x 256':9, '1024 x 512':10, '2048 x 1024':11, '4096 x 2048':12, '8192 x 4096':13} )
+			.name( 'Resolution',  )
+			.onChange( onChange );
+
+		gui.add( guiOptions, 'density' )
+			.min(1).max(20).step(1)
+			.name( 'Stars <right>density</right>' )
+			.onChange( onChange );
+
+		gui.add( guiOptions, 'brightness' )
+			.min(0.5).max(4).step(0.01)
+			.name( '<right>brightness</right>' )
+			.onChange( onChange );
+
+		gui.addColor( guiOptions, 'starsColor' )
+			.name( 'Color <right>stars</right>' )
+			.onChange( onChange );
+
+		gui.addColor( guiOptions, 'skyColor' )
+			.name( '<right>sky</right>' )
+			.onChange( onChange )
+			.$text.classList.add('bottom');
+
+
+
+		function onChange( event )
+		{			
+			model.material.map = equimaterial( equitexture(
+					pattern,
+					2<<guiOptions.resolution,
+					canvas,
+					true,
+					options( guiOptions )
+			) );
+		}
+
+		onChange( );
+
+
+	</script>
+</body>
+</html>
diff --git a/src/patterns/stars.js b/src/patterns/stars.js
@@ -0,0 +1,71 @@
+
+
+import { Vector3, Color, MathUtils } from "three";
+import { noise, noiseSeed } from "../noise.js";
+
+
+
+function options( opt )
+{
+	var options = { };
+
+	options.brightness = opt.brightness ?? 2;
+	options.density = opt.density ?? 15;
+	options.starsColor = new Color( opt.starsColor ?? 0xdfdfff );
+	options.skyColor = new Color( opt.skyColor ?? 0x000045 );
+
+	return options;
+}
+
+
+
+function pattern( x, y, z, color, options, u, v, px, py, width, height )
+{
+	var s = 0,
+		eps = 0.2,
+		H = 0.2*width;
+
+	x *= H;
+	y *= H;
+	z *= H;
+
+	var k = noise( x, y, z );
+	if (k > noise( x+eps, y, z ))
+	if (k > noise( x-eps, y, z ))
+	if (k > noise( x, y+eps, z ))
+	if (k > noise( x, y-eps, z ))
+	if (k > noise( x, y, z+eps ))
+	if (k > noise( x, y, z-eps ))
+	{
+		s = options.brightness*(0.5+0.25*noise( y, z, x )+0.25*noise( z, x, y ))**(21-options.density);
+	}
+	color.lerpColors( options.skyColor, options.starsColor, s );
+	color.offsetHSL( 0.3*Math.random()-0.15, 0, 0 );
+}
+
+
+
+function share( options )
+{
+	var params = [];
+
+	params.push( `b=${options.brightness}` );
+	params.push( `c=${options.starsColor}` );
+	params.push( `d=${options.density}` );
+	params.push( `k=${options.skyColor}` );
+	params.push( `r=${options.resolution}` );
+
+	params = params.join( '&' );
+
+	return window.location.href.split('?')[0].split('#')[0] + '?' + params;
+}
+
+
+
+var info = {
+		name: 'Stars',
+		lightIntensity: 3,
+	};
+
+
+export { pattern, options, share, info };