Added "Dalmatian spots"

boytchev · Aug 15, 2024 · 2d74379 · 2d74379
1 parent aca972c
commit 2d74379
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,9 @@
 # TSL Textures
 
 
+## 0.21.0
+* Added "Dalmatian spots" in *dalmatian-spots.js*
+
 ## 0.20.0
 * Added "Karst rock" in *karst-rock.js*
 

diff --git a/docs/dalmatian-spots.md b/docs/dalmatian-spots.md
@@ -0,0 +1,67 @@
+<img class="logo" src="../assets/logo/logo.png">
+
+
+# TSL Textures
+
+
+## Dalmatian spots
+
+This texture generates dotted image which resenbles the spots of
+[Dalmatian dog](https://en.wikipedia.org/wiki/Dalmatian_dog) coat.
+Click on a snapshot to open it online.
+
+<p class="gallery">
+
+	<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=2&density=0.6&color=16777215&background=0&seed=0">
+		<img src="images/dalmatian-spots-1.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=0.384&density=0.852&color=16777215&background=0&seed=1307">
+		<img src="images/dalmatian-spots-2.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=1.564&density=0.748&color=15129522&background=16777215&seed=1307">
+		<img src="images/dalmatian-spots-3.png">
+	</a>
+
+</p>
+
+
+### Code example
+
+```js
+import { dalmatianSpots } from "tsl-textures/dalmatian-spots.js";
+
+model.material.colorNode = dalmatianSpots ( {
+	scale: 2,
+	density: 0.6,
+	color: new THREE.Color(16777215),
+	background: new THREE.Color(0),
+	seed: 0
+} );
+```
+
+
+### Parameters
+
+* `scale` &ndash; level of details of the pattern, higher value generates finer details, [0, 4]
+* `density` &ndash; density of spots, [0,1]
+* `color` &ndash; color of spots
+* `background` &ndash; color of background
+* `seed` &ndash; number for the random generator, each value generates specific pattern
+
+
+### Online generator
+
+[online/dalmatian-spots.html](../online/dalmatian-spots.html)
+
+
+### Source
+
+[src/dalmatian-spots.js](https://github.com/boytchev/tsl-textures/blob/main/src/dalmatian-spots.js)
+
+
+		
+<div class="footnote">
+	<a href="../">Home</a>
+</div>
diff --git a/docs/images/dalmatian-spots-1.png b/docs/images/dalmatian-spots-1.png
diff --git a/docs/images/dalmatian-spots-2.png b/docs/images/dalmatian-spots-2.png
diff --git a/docs/images/dalmatian-spots-3.png b/docs/images/dalmatian-spots-3.png
diff --git a/docs/images/dalmatian-spots.png b/docs/images/dalmatian-spots.png
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/dalmatian-spots.html">
+			<div class="title">Dalmatian spots</div>
+			<img src="./docs/images/dalmatian-spots.png">
+		</a>
+
 		<a class="style-block" href="./online/dyson-sphere.html">
 			<div class="title">Dyson sphere</div>
 			<img src="./docs/images/dyson-sphere.png">

diff --git a/online/dalmatian-spots.html b/online/dalmatian-spots.html
@@ -0,0 +1,55 @@
+<!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/online.js";
+		import { dalmatianSpots } from "tsl-textures/dalmatian-spots.js";
+
+		var gui = install( dalmatianSpots );
+
+		gui.add( params, 'scale' )
+			.min( 0 ).max( 4 )
+			.name( 'Spots <right>scale</right>' )
+			.$input.classList.add( 'top' );
+
+		gui.add( params, 'density' )
+			.min( 0 ).max( 1 )
+			.name( '<right>density</right>' )
+			.$input.classList.add( 'bottom' );
+
+		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/dalmatian-spots.js b/src/dalmatian-spots.js
@@ -0,0 +1,51 @@
+
+//	TSL-Textures: Dalmatian coat
+
+
+
+import { Color } from "three";
+import { exp, float, loop, mix, positionLocal, tslFn } from 'three/nodes';
+import { noise } from 'tsl-textures/tsl-utils.js';
+
+
+var dalmatianSpots = tslFn( ( params )=>{
+
+	var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).sub( 1000 ).toVar( );
+
+	var k = float( 1 ).toVar();
+
+	var d = float( 1.5 ).sub( params.density ).mul( 2 ).toVar();
+	var count = params.density.mul( 5 ).add( 5 ).toVar();
+
+	loop( count, ()=> {
+
+		k.mulAssign( noise( pos ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
+		pos.assign( pos.mul( 1.01 ) );
+		k.mulAssign( noise( pos.yzx ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
+		pos.assign( pos.mul( 1.01 ) );
+		k.mulAssign( noise( pos.zxy ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
+		pos.assign( pos.mul( 1.01 ) );
+
+	} );
+
+	return mix( params.background, params.color, k.clamp( 0, 1 ) );
+
+} );
+
+
+dalmatianSpots.defaults = {
+	$name: 'Dalmatian spots',
+	$width: 260,
+
+	scale: 2,
+	density: 0.6,
+
+	color: new Color( 0xFFFFFF ),
+	background: new Color( 0x000000 ),
+
+	seed: 0,
+};
+
+
+
+export { dalmatianSpots };