Skip to content

Commit 2d74379

Browse files
boytchevboytchev
committed
Added "Dalmatian spots"
1 parent aca972c commit 2d74379

File tree

9 files changed

+181
-0
lines changed

9 files changed

+181
-0
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# TSL Textures
22

33

4+
## 0.21.0
5+
* Added "Dalmatian spots" in *dalmatian-spots.js*
6+
47
## 0.20.0
58
* Added "Karst rock" in *karst-rock.js*
69

‎docs/dalmatian-spots.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<img class="logo" src="../assets/logo/logo.png">
2+
3+
4+
# TSL Textures
5+
6+
7+
## Dalmatian spots
8+
9+
This texture generates dotted image which resenbles the spots of
10+
[Dalmatian dog](https://en.wikipedia.org/wiki/Dalmatian_dog) coat.
11+
Click on a snapshot to open it online.
12+
13+
<p class="gallery">
14+
15+
<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=2&density=0.6&color=16777215&background=0&seed=0">
16+
<img src="images/dalmatian-spots-1.png">
17+
</a>
18+
19+
<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=0.384&density=0.852&color=16777215&background=0&seed=1307">
20+
<img src="images/dalmatian-spots-2.png">
21+
</a>
22+
23+
<a class="style-block nocaption" href="../online/dalmatian-spots.html?scale=1.564&density=0.748&color=15129522&background=16777215&seed=1307">
24+
<img src="images/dalmatian-spots-3.png">
25+
</a>
26+
27+
</p>
28+
29+
30+
### Code example
31+
32+
```js
33+
import { dalmatianSpots } from "tsl-textures/dalmatian-spots.js";
34+
35+
model.material.colorNode = dalmatianSpots ( {
36+
scale: 2,
37+
density: 0.6,
38+
color: new THREE.Color(16777215),
39+
background: new THREE.Color(0),
40+
seed: 0
41+
} );
42+
```
43+
44+
45+
### Parameters
46+
47+
* `scale` &ndash; level of details of the pattern, higher value generates finer details, [0, 4]
48+
* `density` &ndash; density of spots, [0,1]
49+
* `color` &ndash; color of spots
50+
* `background` &ndash; color of background
51+
* `seed` &ndash; number for the random generator, each value generates specific pattern
52+
53+
54+
### Online generator
55+
56+
[online/dalmatian-spots.html](../online/dalmatian-spots.html)
57+
58+
59+
### Source
60+
61+
[src/dalmatian-spots.js](https://github.com/boytchev/tsl-textures/blob/main/src/dalmatian-spots.js)
62+
63+
64+
65+
<div class="footnote">
66+
<a href="../">Home</a>
67+
</div>

‎docs/images/dalmatian-spots-1.png‎

13.6 KB
Loading

‎docs/images/dalmatian-spots-2.png‎

13.7 KB
Loading

‎docs/images/dalmatian-spots-3.png‎

19.7 KB
Loading

‎docs/images/dalmatian-spots.png‎

21.5 KB
Loading

‎index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@ <h3>Welcome. Pick a texture!</h3>
5454
<img src="./docs/images/cork.png">
5555
</a>
5656

57+
<a class="style-block" href="./online/dalmatian-spots.html">
58+
<div class="title">Dalmatian spots</div>
59+
<img src="./docs/images/dalmatian-spots.png">
60+
</a>
61+
5762
<a class="style-block" href="./online/dyson-sphere.html">
5863
<div class="title">Dyson sphere</div>
5964
<img src="./docs/images/dyson-sphere.png">

‎online/dalmatian-spots.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
3+
4+
<html>
5+
6+
7+
<head>
8+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
9+
10+
<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
11+
<link rel="stylesheet" href="styles.css">
12+
13+
<script type="importmap">
14+
{
15+
"imports": {
16+
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
17+
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
18+
"three/nodes": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/nodes/Nodes.js",
19+
"tsl-textures/": "../src/"
20+
}
21+
}
22+
</script>
23+
</head>
24+
25+
26+
<body>
27+
28+
<script type="module">
29+
30+
import { install, params } from "../online/online.js";
31+
import { dalmatianSpots } from "tsl-textures/dalmatian-spots.js";
32+
33+
var gui = install( dalmatianSpots );
34+
35+
gui.add( params, 'scale' )
36+
.min( 0 ).max( 4 )
37+
.name( 'Spots <right>scale</right>' )
38+
.$input.classList.add( 'top' );
39+
40+
gui.add( params, 'density' )
41+
.min( 0 ).max( 1 )
42+
.name( '<right>density</right>' )
43+
.$input.classList.add( 'bottom' );
44+
45+
gui.addColor( params, 'color' )
46+
.name( 'Color <right>main</right>' )
47+
.$text.classList.add( 'top' );
48+
49+
gui.addColor( params, 'background' )
50+
.name( '<right>background</right>' )
51+
.$text.classList.add( 'bottom' );
52+
53+
</script>
54+
</body>
55+
</html>

‎src/dalmatian-spots.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+

2+
// TSL-Textures: Dalmatian coat
3+
4+
5+
6+
import { Color } from "three";
7+
import { exp, float, loop, mix, positionLocal, tslFn } from 'three/nodes';
8+
import { noise } from 'tsl-textures/tsl-utils.js';
9+
10+
11+
var dalmatianSpots = tslFn( ( params )=>{
12+
13+
var pos = positionLocal.mul( exp( params.scale ) ).add( params.seed ).sub( 1000 ).toVar( );
14+
15+
var k = float( 1 ).toVar();
16+
17+
var d = float( 1.5 ).sub( params.density ).mul( 2 ).toVar();
18+
var count = params.density.mul( 5 ).add( 5 ).toVar();
19+
20+
loop( count, ()=> {
21+
22+
k.mulAssign( noise( pos ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
23+
pos.assign( pos.mul( 1.01 ) );
24+
k.mulAssign( noise( pos.yzx ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
25+
pos.assign( pos.mul( 1.01 ) );
26+
k.mulAssign( noise( pos.zxy ).abs().pow( d ).mul( 100 ).sub( 50 ).clamp( 0, 1 ).oneMinus() );
27+
pos.assign( pos.mul( 1.01 ) );
28+
29+
} );
30+
31+
return mix( params.background, params.color, k.clamp( 0, 1 ) );
32+
33+
} );
34+
35+
36+
dalmatianSpots.defaults = {
37+
$name: 'Dalmatian spots',
38+
$width: 260,
39+
40+
scale: 2,
41+
density: 0.6,
42+
43+
color: new Color( 0xFFFFFF ),
44+
background: new Color( 0x000000 ),
45+
46+
seed: 0,
47+
};
48+
49+
50+
51+
export { dalmatianSpots };

0 commit comments

Comments
 (0)