├── README.md
├── .gitignore
├── docs
    ├── style.css
    ├── index.html
    └── script.js
├── src
    ├── style.scss
    ├── index.partial.html
    ├── index.template.html
    └── script.babel
├── backup
    ├── dist
    │   ├── style.css
    │   ├── index.html
    │   └── script.js
    └── src
    │   ├── style.scss
    │   ├── index.partial.html
    │   ├── index.template.html
    │   └── script.babel
├── README.markdown
├── license.txt
├── DOCUMENTATION.markdown
└── package.json


/README.md:
--------------------------------------------------------------------------------
1 | cut-paper
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 
3 | # Logs
4 | logs
5 | *.log
6 | npm-debug.log*
7 | yarn-debug.log*
8 | yarn-error.log*


--------------------------------------------------------------------------------
/docs/style.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 0;
4 |   background-color: #3c3c3f; }
5 | 
6 | .c-react-canvas {
7 |   display: block;
8 |   margin: 0 auto; }
9 | 


--------------------------------------------------------------------------------
/src/style.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   background-color: #3c3c3f;
 5 | }
 6 | 
 7 | .c-react-canvas {
 8 |   display: block;
 9 |   margin: 0 auto;
10 | }


--------------------------------------------------------------------------------
/backup/dist/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   background-color: #3c3c3f;
 5 | }
 6 | 
 7 | .c-react-canvas {
 8 |   display: block;
 9 |   margin: 0 auto;
10 | }


--------------------------------------------------------------------------------
/backup/src/style.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   background-color: #3c3c3f;
 5 | }
 6 | 
 7 | .c-react-canvas {
 8 |   display: block;
 9 |   margin: 0 auto;
10 | }


--------------------------------------------------------------------------------
/README.markdown:
--------------------------------------------------------------------------------
1 | # cut-paper-0.0.1
2 | 
3 | A Pen created on CodePen.io. Original URL: [https://codepen.io/clindsey/pen/oNxOOme](https://codepen.io/clindsey/pen/oNxOOme).
4 | 
5 | attempting to replicate [this cut paper background image](https://www.vectorstock.com/25049200) by artrise
6 | 
7 | i think the colors really make this, and i didn't pick them
8 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2020 by not important (https://codepen.io/clindsey/pen/oNxOOme)
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 
9 | 


--------------------------------------------------------------------------------
/DOCUMENTATION.markdown:
--------------------------------------------------------------------------------
 1 | # CodePen Export with Build Process
 2 | _Transform raw code into a browser-ready preview... offline_
 3 | 
 4 | This package contains all of the original code ([src/](./src/)), the original in-browser preview ([/backup/dist](./backup/dist)), and a custom build script with preprocessors. You'll be able to edit and build for a local CodePen-like experience.
 5 | 
 6 | ## Installation
 7 | 
 8 | Ensure you have a recent version of [node & npm](https://nodejs.org/en/download/) or [yarn](https://yarnpkg.com/en/docs/install) installed.
 9 | 
10 | All of the following steps run on the command line within this directory. You can substitute `npm` for `yarn` depending on your preferences.
11 | 
12 | Install all the necessary packages:
13 | 
14 | ```
15 | npm install
16 | ```
17 | 
18 | ## Build
19 | 
20 | To build for distribution:
21 | 
22 | ```
23 | npm run build
24 | ```
25 | 
26 | All of the final output will be dropped into the [/dist/](./dist) folder.
27 | 
28 | ## Server
29 | 
30 | Run a local server that will automatically compile your code & refresh when you save a change!
31 | 
32 | ```
33 | npm run serve
34 | ```
35 | 
36 | ---
37 | 
38 | ## Folder Structure
39 | 
40 | ```
41 | /exported-item/
42 | |-- /build/ - Build scripts
43 | |  |-- gulpfile.js - The tasks for the main build process
44 | |  |-- util.js - Utilities used by the tasks
45 | |
46 | |-- /src/ - Your code
47 | |  |-- index.template.html - The wrapper around your compiled HTML that includes any external stylesheets and scripts
48 | |  |-- index.partial.(html|pug|haml|...) - The raw HTML input or preprocessor equivalent
49 | |  |-- style.(css|scss|less|...) - The raw CSS input, or preprocessor equivalent
50 | |  |-- script.(js|ts|coffee|...) - The raw JavaScript input, or preprocessor equivalent
51 | |
52 | |-- /dist/ - The compiled output after running `npm run build`
53 | |  |-- index.html
54 | |  |-- script.js
55 | |  |-- style.css
56 | |
57 | |-- /backup/ - Backup copy of the original code and in-browser preview from CodePen
58 | |  |-- /dist/
59 | |  |-- /src/
60 | ```


--------------------------------------------------------------------------------
/src/index.partial.html:
--------------------------------------------------------------------------------
 1 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 2 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
 4 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
 5 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
 6 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
 7 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
 8 | 
 9 | <div id="js-app"></div>
10 | 
11 | <script type="shader/fragment" id="js-noise">
12 | //
13 | // Description : Array and textureless GLSL 2D simplex noise function.
14 | //      Author : Ian McEwan, Ashima Arts.
15 | //  Maintainer : stegu
16 | //     Lastmod : 20110822 (ijm)
17 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
18 | //               Distributed under the MIT License. See LICENSE file.
19 | //               https://github.com/ashima/webgl-noise
20 | //               https://github.com/stegu/webgl-noise
21 | // 
22 | 
23 | vec3 mod289(vec3 x) {
24 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
25 | }
26 | 
27 | vec2 mod289(vec2 x) {
28 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
29 | }
30 | 
31 | vec3 permute(vec3 x) {
32 |   return mod289(((x*34.0)+1.0)*x);
33 | }
34 | 
35 | float snoise(vec2 v)
36 |   {
37 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
38 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
39 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
40 |                       0.024390243902439); // 1.0 / 41.0
41 | // First corner
42 |   vec2 i  = floor(v + dot(v, C.yy) );
43 |   vec2 x0 = v -   i + dot(i, C.xx);
44 | 
45 | // Other corners
46 |   vec2 i1;
47 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
48 |   //i1.y = 1.0 - i1.x;
49 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
50 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
51 |   // x1 = x0 - i1 + 1.0 * C.xx ;
52 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
53 |   vec4 x12 = x0.xyxy + C.xxzz;
54 |   x12.xy -= i1;
55 | 
56 | // Permutations
57 |   i = mod289(i); // Avoid truncation effects in permutation
58 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
59 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
60 | 
61 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
62 |   m = m*m ;
63 |   m = m*m ;
64 | 
65 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
66 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
67 | 
68 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
69 |   vec3 h = abs(x) - 0.5;
70 |   vec3 ox = floor(x + 0.5);
71 |   vec3 a0 = x - ox;
72 | 
73 | // Normalise gradients implicitly by scaling m
74 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
75 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
76 | 
77 | // Compute final noise value at P
78 |   vec3 g;
79 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
80 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
81 |   return 130.0 * dot(m, g);
82 | }
83 | </script>


--------------------------------------------------------------------------------
/backup/src/index.partial.html:
--------------------------------------------------------------------------------
 1 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 2 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
 4 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
 5 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
 6 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
 7 | <script src="https://codepen.io/clindsey/pen/jowgPb.js"></script> <!-- profile-link-2.0.0 -->
 8 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
 9 | 
10 | <div id="js-app"></div>
11 | 
12 | <script type="shader/fragment" id="js-noise">
13 | //
14 | // Description : Array and textureless GLSL 2D simplex noise function.
15 | //      Author : Ian McEwan, Ashima Arts.
16 | //  Maintainer : stegu
17 | //     Lastmod : 20110822 (ijm)
18 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
19 | //               Distributed under the MIT License. See LICENSE file.
20 | //               https://github.com/ashima/webgl-noise
21 | //               https://github.com/stegu/webgl-noise
22 | // 
23 | 
24 | vec3 mod289(vec3 x) {
25 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
26 | }
27 | 
28 | vec2 mod289(vec2 x) {
29 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
30 | }
31 | 
32 | vec3 permute(vec3 x) {
33 |   return mod289(((x*34.0)+1.0)*x);
34 | }
35 | 
36 | float snoise(vec2 v)
37 |   {
38 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
39 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
40 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
41 |                       0.024390243902439); // 1.0 / 41.0
42 | // First corner
43 |   vec2 i  = floor(v + dot(v, C.yy) );
44 |   vec2 x0 = v -   i + dot(i, C.xx);
45 | 
46 | // Other corners
47 |   vec2 i1;
48 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
49 |   //i1.y = 1.0 - i1.x;
50 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
51 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
52 |   // x1 = x0 - i1 + 1.0 * C.xx ;
53 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
54 |   vec4 x12 = x0.xyxy + C.xxzz;
55 |   x12.xy -= i1;
56 | 
57 | // Permutations
58 |   i = mod289(i); // Avoid truncation effects in permutation
59 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
60 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
61 | 
62 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
63 |   m = m*m ;
64 |   m = m*m ;
65 | 
66 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
67 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
68 | 
69 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
70 |   vec3 h = abs(x) - 0.5;
71 |   vec3 ox = floor(x + 0.5);
72 |   vec3 a0 = x - ox;
73 | 
74 | // Normalise gradients implicitly by scaling m
75 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
76 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
77 | 
78 | // Compute final noise value at P
79 |   vec3 g;
80 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
81 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
82 |   return 130.0 * dot(m, g);
83 | }
84 | </script>


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>CodePen - cut-paper-0.0.1</title>
 6 |   <link rel="stylesheet" href="./style.css">
 7 | 
 8 | </head>
 9 | <body>
10 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
11 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
12 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
13 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
14 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
15 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
16 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
17 | 
18 | <div id="js-app"></div>
19 | 
20 | <script type="shader/fragment" id="js-noise">
21 | //
22 | // Description : Array and textureless GLSL 2D simplex noise function.
23 | //      Author : Ian McEwan, Ashima Arts.
24 | //  Maintainer : stegu
25 | //     Lastmod : 20110822 (ijm)
26 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
27 | //               Distributed under the MIT License. See LICENSE file.
28 | //               https://github.com/ashima/webgl-noise
29 | //               https://github.com/stegu/webgl-noise
30 | // 
31 | 
32 | vec3 mod289(vec3 x) {
33 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
34 | }
35 | 
36 | vec2 mod289(vec2 x) {
37 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
38 | }
39 | 
40 | vec3 permute(vec3 x) {
41 |   return mod289(((x*34.0)+1.0)*x);
42 | }
43 | 
44 | float snoise(vec2 v)
45 |   {
46 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
47 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
48 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
49 |                       0.024390243902439); // 1.0 / 41.0
50 | // First corner
51 |   vec2 i  = floor(v + dot(v, C.yy) );
52 |   vec2 x0 = v -   i + dot(i, C.xx);
53 | 
54 | // Other corners
55 |   vec2 i1;
56 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
57 |   //i1.y = 1.0 - i1.x;
58 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
59 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
60 |   // x1 = x0 - i1 + 1.0 * C.xx ;
61 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
62 |   vec4 x12 = x0.xyxy + C.xxzz;
63 |   x12.xy -= i1;
64 | 
65 | // Permutations
66 |   i = mod289(i); // Avoid truncation effects in permutation
67 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
68 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
69 | 
70 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
71 |   m = m*m ;
72 |   m = m*m ;
73 | 
74 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
75 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
76 | 
77 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
78 |   vec3 h = abs(x) - 0.5;
79 |   vec3 ox = floor(x + 0.5);
80 |   vec3 a0 = x - ox;
81 | 
82 | // Normalise gradients implicitly by scaling m
83 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
84 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
85 | 
86 | // Compute final noise value at P
87 |   vec3 g;
88 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
89 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
90 |   return 130.0 * dot(m, g);
91 | }
92 | </script>
93 |   <script  src="./script.js"></script>
94 | 
95 | </body>
96 | </html>
97 | 


--------------------------------------------------------------------------------
/backup/dist/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" >
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>CodePen - cut-paper-0.0.1</title>
  6 |   <link rel="stylesheet" href="./style.css">
  7 | 
  8 | </head>
  9 | <body>
 10 | <!-- partial:index.partial.html -->
 11 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 12 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 13 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
 14 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
 15 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
 16 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
 17 | <script src="https://codepen.io/clindsey/pen/jowgPb.js"></script> <!-- profile-link-2.0.0 -->
 18 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
 19 | 
 20 | <div id="js-app"></div>
 21 | 
 22 | <script type="shader/fragment" id="js-noise">
 23 | //
 24 | // Description : Array and textureless GLSL 2D simplex noise function.
 25 | //      Author : Ian McEwan, Ashima Arts.
 26 | //  Maintainer : stegu
 27 | //     Lastmod : 20110822 (ijm)
 28 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 29 | //               Distributed under the MIT License. See LICENSE file.
 30 | //               https://github.com/ashima/webgl-noise
 31 | //               https://github.com/stegu/webgl-noise
 32 | // 
 33 | 
 34 | vec3 mod289(vec3 x) {
 35 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 36 | }
 37 | 
 38 | vec2 mod289(vec2 x) {
 39 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 40 | }
 41 | 
 42 | vec3 permute(vec3 x) {
 43 |   return mod289(((x*34.0)+1.0)*x);
 44 | }
 45 | 
 46 | float snoise(vec2 v)
 47 |   {
 48 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
 49 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
 50 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
 51 |                       0.024390243902439); // 1.0 / 41.0
 52 | // First corner
 53 |   vec2 i  = floor(v + dot(v, C.yy) );
 54 |   vec2 x0 = v -   i + dot(i, C.xx);
 55 | 
 56 | // Other corners
 57 |   vec2 i1;
 58 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
 59 |   //i1.y = 1.0 - i1.x;
 60 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
 61 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
 62 |   // x1 = x0 - i1 + 1.0 * C.xx ;
 63 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
 64 |   vec4 x12 = x0.xyxy + C.xxzz;
 65 |   x12.xy -= i1;
 66 | 
 67 | // Permutations
 68 |   i = mod289(i); // Avoid truncation effects in permutation
 69 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
 70 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
 71 | 
 72 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
 73 |   m = m*m ;
 74 |   m = m*m ;
 75 | 
 76 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
 77 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
 78 | 
 79 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
 80 |   vec3 h = abs(x) - 0.5;
 81 |   vec3 ox = floor(x + 0.5);
 82 |   vec3 a0 = x - ox;
 83 | 
 84 | // Normalise gradients implicitly by scaling m
 85 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
 86 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
 87 | 
 88 | // Compute final noise value at P
 89 |   vec3 g;
 90 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
 91 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
 92 |   return 130.0 * dot(m, g);
 93 | }
 94 | </script>
 95 | <!-- partial -->
 96 |   <script  src="./script.js"></script>
 97 | 
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/src/index.template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" >
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>CodePen - cut-paper-0.0.1</title>
  6 |   <link rel="stylesheet" href="./style.css">
  7 | 
  8 | </head>
  9 | <body>
 10 | <!-- partial:index.partial.html -->
 11 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 12 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 13 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
 14 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
 15 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
 16 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
 17 | <script src="https://codepen.io/clindsey/pen/jowgPb.js"></script> <!-- profile-link-2.0.0 -->
 18 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
 19 | 
 20 | <div id="js-app"></div>
 21 | 
 22 | <script type="shader/fragment" id="js-noise">
 23 | //
 24 | // Description : Array and textureless GLSL 2D simplex noise function.
 25 | //      Author : Ian McEwan, Ashima Arts.
 26 | //  Maintainer : stegu
 27 | //     Lastmod : 20110822 (ijm)
 28 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 29 | //               Distributed under the MIT License. See LICENSE file.
 30 | //               https://github.com/ashima/webgl-noise
 31 | //               https://github.com/stegu/webgl-noise
 32 | // 
 33 | 
 34 | vec3 mod289(vec3 x) {
 35 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 36 | }
 37 | 
 38 | vec2 mod289(vec2 x) {
 39 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 40 | }
 41 | 
 42 | vec3 permute(vec3 x) {
 43 |   return mod289(((x*34.0)+1.0)*x);
 44 | }
 45 | 
 46 | float snoise(vec2 v)
 47 |   {
 48 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
 49 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
 50 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
 51 |                       0.024390243902439); // 1.0 / 41.0
 52 | // First corner
 53 |   vec2 i  = floor(v + dot(v, C.yy) );
 54 |   vec2 x0 = v -   i + dot(i, C.xx);
 55 | 
 56 | // Other corners
 57 |   vec2 i1;
 58 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
 59 |   //i1.y = 1.0 - i1.x;
 60 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
 61 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
 62 |   // x1 = x0 - i1 + 1.0 * C.xx ;
 63 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
 64 |   vec4 x12 = x0.xyxy + C.xxzz;
 65 |   x12.xy -= i1;
 66 | 
 67 | // Permutations
 68 |   i = mod289(i); // Avoid truncation effects in permutation
 69 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
 70 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
 71 | 
 72 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
 73 |   m = m*m ;
 74 |   m = m*m ;
 75 | 
 76 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
 77 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
 78 | 
 79 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
 80 |   vec3 h = abs(x) - 0.5;
 81 |   vec3 ox = floor(x + 0.5);
 82 |   vec3 a0 = x - ox;
 83 | 
 84 | // Normalise gradients implicitly by scaling m
 85 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
 86 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
 87 | 
 88 | // Compute final noise value at P
 89 |   vec3 g;
 90 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
 91 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
 92 |   return 130.0 * dot(m, g);
 93 | }
 94 | </script>
 95 | <!-- partial -->
 96 |   <script  src="./script.js"></script>
 97 | 
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/backup/src/index.template.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" >
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>CodePen - cut-paper-0.0.1</title>
  6 |   <link rel="stylesheet" href="./style.css">
  7 | 
  8 | </head>
  9 | <body>
 10 | <!-- partial:index.partial.html -->
 11 | <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 12 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 13 | <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.js"></script>
 14 | <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/292951/OrbitControls_copy.js"></script>
 15 | <script src="https://cdn.jsdelivr.net/npm/three-bas@2.12.0/dist/bas.min.js"></script>
 16 | <script src="https://codepen.io/clindsey/pen/poyBmov.js"></script> <!-- threelium-0.0.8 -->
 17 | <script src="https://codepen.io/clindsey/pen/jowgPb.js"></script> <!-- profile-link-2.0.0 -->
 18 | <!-- <script>(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script> -->
 19 | 
 20 | <div id="js-app"></div>
 21 | 
 22 | <script type="shader/fragment" id="js-noise">
 23 | //
 24 | // Description : Array and textureless GLSL 2D simplex noise function.
 25 | //      Author : Ian McEwan, Ashima Arts.
 26 | //  Maintainer : stegu
 27 | //     Lastmod : 20110822 (ijm)
 28 | //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
 29 | //               Distributed under the MIT License. See LICENSE file.
 30 | //               https://github.com/ashima/webgl-noise
 31 | //               https://github.com/stegu/webgl-noise
 32 | // 
 33 | 
 34 | vec3 mod289(vec3 x) {
 35 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 36 | }
 37 | 
 38 | vec2 mod289(vec2 x) {
 39 |   return x - floor(x * (1.0 / 289.0)) * 289.0;
 40 | }
 41 | 
 42 | vec3 permute(vec3 x) {
 43 |   return mod289(((x*34.0)+1.0)*x);
 44 | }
 45 | 
 46 | float snoise(vec2 v)
 47 |   {
 48 |   const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
 49 |                       0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
 50 |                      -0.577350269189626,  // -1.0 + 2.0 * C.x
 51 |                       0.024390243902439); // 1.0 / 41.0
 52 | // First corner
 53 |   vec2 i  = floor(v + dot(v, C.yy) );
 54 |   vec2 x0 = v -   i + dot(i, C.xx);
 55 | 
 56 | // Other corners
 57 |   vec2 i1;
 58 |   //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
 59 |   //i1.y = 1.0 - i1.x;
 60 |   i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
 61 |   // x0 = x0 - 0.0 + 0.0 * C.xx ;
 62 |   // x1 = x0 - i1 + 1.0 * C.xx ;
 63 |   // x2 = x0 - 1.0 + 2.0 * C.xx ;
 64 |   vec4 x12 = x0.xyxy + C.xxzz;
 65 |   x12.xy -= i1;
 66 | 
 67 | // Permutations
 68 |   i = mod289(i); // Avoid truncation effects in permutation
 69 |   vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
 70 | 		+ i.x + vec3(0.0, i1.x, 1.0 ));
 71 | 
 72 |   vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
 73 |   m = m*m ;
 74 |   m = m*m ;
 75 | 
 76 | // Gradients: 41 points uniformly over a line, mapped onto a diamond.
 77 | // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)
 78 | 
 79 |   vec3 x = 2.0 * fract(p * C.www) - 1.0;
 80 |   vec3 h = abs(x) - 0.5;
 81 |   vec3 ox = floor(x + 0.5);
 82 |   vec3 a0 = x - ox;
 83 | 
 84 | // Normalise gradients implicitly by scaling m
 85 | // Approximation of: m *= inversesqrt( a0*a0 + h*h );
 86 |   m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
 87 | 
 88 | // Compute final noise value at P
 89 |   vec3 g;
 90 |   g.x  = a0.x  * x0.x  + h.x  * x0.y;
 91 |   g.yz = a0.yz * x12.xz + h.yz * x12.yw;
 92 |   return 130.0 * dot(m, g);
 93 | }
 94 | </script>
 95 | <!-- partial -->
 96 |   <script  src="./script.js"></script>
 97 | 
 98 | </body>
 99 | </html>
100 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "cut-paper-0-0-1",
  3 |   "version": "2020.8.3-4.10.43",
  4 |   "private": false,
  5 |   "license": "MIT",
  6 |   "homepage": "https://codepen.io/clindsey/pen/oNxOOme",
  7 |   "scripts": {
  8 |     "build": "gulp -f ./build/gulpfile.js --cwd ./ --continue",
  9 |     "serve": "gulp serve -f ./build/gulpfile.js --cwd ./ --continue",
 10 |     "task": "gulp -f ./build/gulpfile.js --cwd ./ --continue",
 11 |     "tasks": "gulp --tasks-simple -f ./build/gulpfile.js --cwd ./ --continue"
 12 |   },
 13 |   "config": {
 14 |     "srcDir": "src/",
 15 |     "distDir": "docs/"
 16 |   },
 17 |   "devDependencies": {
 18 |     "browser-sync": "^2.26.7",
 19 |     "del": "^4.1.1",
 20 |     "glob": "^7.1.4",
 21 |     "gulp": "^4.0.2",
 22 |     "gulp-rename": "^1.4.0",
 23 |     "webpack": "^4.29.6",
 24 |     "webpack-cli": "^3.2.3",
 25 |     "webpack-dev-server": "^3.2.1",
 26 |     "gulp-inject-partials": "^1.0.5",
 27 |     "gulp-sass": "^4.0.2",
 28 |     "node-sass": "^4.12.0",
 29 |     "gulp-babel": "^8.0.0",
 30 |     "@babel/core": "^7.4.5",
 31 |     "@babel/plugin-proposal-class-properties": "^7.4.4",
 32 |     "@babel/plugin-proposal-decorators": "^7.4.4",
 33 |     "@babel/plugin-proposal-do-expressions": "^7.2.0",
 34 |     "@babel/plugin-proposal-function-bind": "^7.2.0",
 35 |     "@babel/plugin-proposal-function-sent": "^7.2.0",
 36 |     "@babel/plugin-proposal-json-strings": "^7.2.0",
 37 |     "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
 38 |     "@babel/plugin-transform-modules-commonjs": "^7.4.4",
 39 |     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
 40 |     "@babel/plugin-proposal-numeric-separator": "^7.2.0",
 41 |     "@babel/plugin-proposal-optional-chaining": "^7.2.0",
 42 |     "@babel/plugin-proposal-pipeline-operator": "^7.3.2",
 43 |     "@babel/plugin-proposal-throw-expressions": "^7.2.0",
 44 |     "@babel/plugin-syntax-jsx": "^7.2.0",
 45 |     "@babel/plugin-transform-react-display-name": "^7.2.0",
 46 |     "@babel/plugin-transform-react-jsx": "^7.3.0"
 47 |   },
 48 |   "tasks": {
 49 |     "partials": {
 50 |       "order": 999,
 51 |       "src": [
 52 |         "**/*.template.html"
 53 |       ],
 54 |       "pipe": [
 55 |         {
 56 |           "require": "gulp-inject-partials",
 57 |           "args": [
 58 |             {
 59 |               "removeTags": true,
 60 |               "quiet": true,
 61 |               "ignoreError": true
 62 |             }
 63 |           ]
 64 |         }
 65 |       ],
 66 |       "rename": {
 67 |         "find": ".template",
 68 |         "replace": ""
 69 |       },
 70 |       "cleanup": [
 71 |         "**/*.partial.html",
 72 |         "**/*.template.html"
 73 |       ]
 74 |     },
 75 |     "sass": {
 76 |       "src": [
 77 |         "**/*.sass",
 78 |         "**/*.scss"
 79 |       ],
 80 |       "pipe": [
 81 |         {
 82 |           "require": "gulp-sass"
 83 |         }
 84 |       ],
 85 |       "cleanup": true
 86 |     },
 87 |     "babel": {
 88 |       "src": [
 89 |         "**/*.js",
 90 |         "**/*.babel"
 91 |       ],
 92 |       "pipe": [
 93 |         {
 94 |           "require": "gulp-babel"
 95 |         }
 96 |       ],
 97 |       "cleanup": [
 98 |         "**/*.babel"
 99 |       ]
100 |     }
101 |   },
102 |   "babel": {
103 |     "plugins": [
104 |       "@babel/plugin-proposal-class-properties",
105 |       [
106 |         "@babel/plugin-proposal-decorators",
107 |         {
108 |           "decoratorsBeforeExport": true
109 |         }
110 |       ],
111 |       "@babel/plugin-proposal-do-expressions",
112 |       "@babel/plugin-proposal-function-bind",
113 |       "@babel/plugin-proposal-function-sent",
114 |       "@babel/plugin-proposal-json-strings",
115 |       "@babel/plugin-proposal-logical-assignment-operators",
116 |       [
117 |         "@babel/plugin-transform-modules-commonjs",
118 |         {
119 |           "strictMode": false
120 |         }
121 |       ],
122 |       "@babel/plugin-proposal-nullish-coalescing-operator",
123 |       "@babel/plugin-proposal-numeric-separator",
124 |       "@babel/plugin-proposal-optional-chaining",
125 |       [
126 |         "@babel/plugin-proposal-pipeline-operator",
127 |         {
128 |           "proposal": "smart"
129 |         }
130 |       ],
131 |       "@babel/plugin-proposal-throw-expressions",
132 |       "@babel/plugin-syntax-jsx",
133 |       "@babel/plugin-transform-react-display-name",
134 |       "@babel/plugin-transform-react-jsx"
135 |     ]
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/backup/dist/script.js:
--------------------------------------------------------------------------------
  1 | setTimeout(async () => {
  2 |   console.clear();
  3 |   ReactDOM.render(
  4 |   React.createElement(Threelium.SceneView, {
  5 |     antialias: true,
  6 |     camera:
  7 |     React.createElement(Threelium.Camera, {
  8 |       position: new THREE.Vector3(0, 0, 1) }) },
  9 | 
 10 | 
 11 | 
 12 |   React.createElement(MainScene, null)),
 13 | 
 14 |   document.getElementById('js-app'));
 15 | }, 0);
 16 | 
 17 | class MainScene extends Threelium.Scene {
 18 |   initialize({})
 19 |   {
 20 |     return (
 21 |       React.createElement(React.Fragment, null,
 22 |       React.createElement(Threelium.AmbientLight, { color: 0xffffff }),
 23 |       React.createElement(CutPaper, {
 24 |         useColor: true,
 25 |         useShadow: true,
 26 |         useRelief: true })));
 27 | 
 28 | 
 29 | 
 30 |   }}
 31 | 
 32 | 
 33 | class CutPaper extends THREE.Mesh {
 34 |   static createGeometry(
 35 |   width,
 36 |   height)
 37 |   {
 38 |     const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
 39 |     return geometry;
 40 |   }
 41 | 
 42 |   static createMaterial(
 43 |   useColor,
 44 |   useShadow,
 45 |   useRelief)
 46 |   {
 47 |     return new Threelium.EnhancedMaterial({
 48 |       flatShading: false,
 49 |       uniforms: {
 50 |         uTime: { value: 0 },
 51 |         uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight).multiplyScalar(window.devicePixelRatio) },
 52 |         uColor0: { value: colorThreshold(13, 9, 96, 0.0) },
 53 |         uColor1: { value: colorThreshold(105, 64, 182, 0.16) },
 54 |         uColor2: { value: colorThreshold(181, 61, 210, 0.32) },
 55 |         uColor3: { value: colorThreshold(250, 90, 186, 0.48) },
 56 |         uColor4: { value: colorThreshold(51, 207, 206, 0.64) },
 57 |         uColor5: { value: colorThreshold(254, 230, 122, 0.8) } },
 58 | 
 59 |       varyingParameters: [`
 60 |         varying vec2 vUv;
 61 |       `],
 62 |       vertexPosition: [`
 63 |         vUv = uv;
 64 |       `],
 65 |       fragmentParameters: [`
 66 |         uniform float uTime;
 67 |         uniform vec2 uResolution;
 68 |         uniform vec4 uColor0;
 69 |         uniform vec4 uColor1;
 70 |         uniform vec4 uColor2;
 71 |         uniform vec4 uColor3;
 72 |         uniform vec4 uColor4;
 73 |         uniform vec4 uColor5;
 74 |       `],
 75 |       fragmentFunctions: [`
 76 |         ${document.getElementById('js-noise').textContent}
 77 | 
 78 |         float getSample (vec2 point, float theta, float time, float scale, vec2 offset) {
 79 |           return snoise((point * scale + offset) + vec2(
 80 |             cos(theta),
 81 |             sin(theta)
 82 |           ) * time) / 2.0 + 0.5;
 83 |         }
 84 | 
 85 |         vec3 getColor (float height) {
 86 |           if (height > uColor5.a) {
 87 |             return uColor5.rgb;
 88 |           }
 89 |           if (height > uColor4.a) {
 90 |             return uColor4.rgb;
 91 |           }
 92 |           if (height > uColor3.a) {
 93 |             return uColor3.rgb;
 94 |           }
 95 |           if (height > uColor2.a) {
 96 |             return uColor2.rgb;
 97 |           }
 98 |           if (height > uColor1.a) {
 99 |             return uColor1.rgb;
100 |           }
101 |           return uColor0.rgb;
102 |         }
103 | 
104 |         float getHeight (vec2 point, vec2 offset) {
105 |           float theta = PI * 1.0;
106 |           float time = uTime * 0.1;
107 |           float scale = 2.0;
108 |           float height = 0.0;
109 |           height += getSample(point, theta, time, scale, offset);
110 |           theta += PI;
111 |           scale = 1.8;
112 |           time = uTime * 0.02;
113 |           height += getSample(point, theta, time, scale, offset);
114 |           height /= 2.0;
115 |           float topLayerHeight = 0.0;
116 |           theta = PI * 2.0;
117 |           time = uTime * 0.125;
118 |           scale = 1.8;
119 |           topLayerHeight += getSample(point, theta, time, scale, offset);
120 |           theta += PI;
121 |           scale = 1.4;
122 |           time = uTime * 0.03;
123 |           topLayerHeight += getSample(point, theta, time, scale, offset);
124 |           topLayerHeight /= 2.0;
125 |           return height + step(uColor5.a, topLayerHeight);
126 |         }
127 | 
128 |         vec3 getRelief (vec2 point, float thickness, float bumpScale) {
129 |           float h00 = getHeight(point, vec2(0.0, 0.0));
130 |           float h11 = getHeight(point, vec2(-thickness, thickness));
131 |           float h = 0.0;
132 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
133 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
134 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
135 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
136 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
137 |           return vec3(max(h, 0.0) * bumpScale);
138 |         }
139 | 
140 |         vec3 getShadow (vec2 point, float thickness, float bumpScale) {
141 |           float h00 = getHeight(point, vec2(0.0, 0.0));
142 |           float h11 = getHeight(point, vec2(-thickness, thickness));
143 |           float h = 0.0;
144 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
145 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
146 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
147 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
148 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
149 |           return -vec3(min(h, 0.0) * bumpScale);
150 |         }
151 |       `],
152 |       fragmentDiffuse: [`
153 |         vec2 point = gl_FragCoord.xy / uResolution;
154 |         point.x *= uResolution.x / uResolution.y;
155 |         diffuseColor.rgb = vec3(0.5);
156 |         ${useColor ? `
157 |           float height = getHeight(point, vec2(0.00, 0.00));
158 |           diffuseColor.rgb = getColor(height);
159 |         ` : ''}
160 |         ${useRelief ? `
161 |           diffuseColor.rgb += getRelief(point, 0.01, 0.125);
162 |         ` : ''}
163 |         ${useShadow ? `
164 |           diffuseColor.rgb -= getShadow(point, 0.025, 0.08);
165 |         ` : ''}
166 |       `] });
167 | 
168 |   }
169 | 
170 |   constructor({
171 |     width = 2,
172 |     height = 2,
173 |     useColor = true,
174 |     useShadow = true,
175 |     useRelief = true })
176 |   {
177 |     const geometry = CutPaper.createGeometry(
178 |     width,
179 |     height);
180 | 
181 |     const material = CutPaper.createMaterial(
182 |     useColor,
183 |     useShadow,
184 |     useRelief);
185 | 
186 |     super(geometry, material);
187 |   }
188 | 
189 |   update() {
190 |     this.material.uniforms.uResolution.value.x = window.innerWidth * window.devicePixelRatio;
191 |     this.material.uniforms.uResolution.value.y = window.innerHeight * window.devicePixelRatio;
192 |   }
193 | 
194 |   get time() {
195 |     return this.material.uniforms.uTime.value;
196 |   }
197 | 
198 |   set time(newTime) {
199 |     this.material.uniforms.uTime.value = newTime;
200 |   }}
201 | 
202 | 
203 | function colorThreshold(r, g, b, threshold) {
204 |   return [
205 |   ...[r, g, b].map(i => i / 255),
206 |   threshold];
207 | 
208 | }


--------------------------------------------------------------------------------
/src/script.babel:
--------------------------------------------------------------------------------
  1 | setTimeout(async () => {
  2 |   console.clear()
  3 |   ReactDOM.render((
  4 |     <Threelium.SceneView
  5 |         antialias={true}
  6 |         camera={(
  7 |           <Threelium.Camera
  8 |               position={new THREE.Vector3(0, 0, 1)}
  9 |           />
 10 |         )}
 11 |     >
 12 |       <MainScene />
 13 |     </Threelium.SceneView>
 14 |   ), document.getElementById('js-app'))
 15 | }, 0)
 16 | 
 17 | class MainScene extends Threelium.Scene {
 18 |   initialize ({
 19 |   }) {
 20 |     return (
 21 |       <React.Fragment>
 22 |         <Threelium.AmbientLight color={0xffffff} />
 23 |         <CutPaper
 24 |             useColor={true}
 25 |             useShadow={true}
 26 |             useRelief={true}
 27 |         />
 28 |       </React.Fragment>
 29 |     )
 30 |   }
 31 | }
 32 | 
 33 | class CutPaper extends THREE.Mesh {
 34 |   static createGeometry (
 35 |     width,
 36 |     height,
 37 |   ) {
 38 |     const geometry = new THREE.PlaneGeometry(width, height, 1, 1)
 39 |     return geometry
 40 |   }
 41 | 
 42 |   static createMaterial (
 43 |     useColor,
 44 |     useShadow,
 45 |     useRelief,
 46 |   ) {
 47 |     return new Threelium.EnhancedMaterial({
 48 |       flatShading: false,
 49 |       uniforms: {
 50 |         uTime: { value: 0 },
 51 |         uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight).multiplyScalar(window.devicePixelRatio) },
 52 |         uColor0: { value: colorThreshold(13, 9, 96, 0.0) },
 53 |         uColor1: { value: colorThreshold(105, 64, 182, 0.16) },
 54 |         uColor2: { value: colorThreshold(181, 61, 210, 0.32) },
 55 |         uColor3: { value: colorThreshold(250, 90, 186, 0.48) },
 56 |         uColor4: { value: colorThreshold(51, 207, 206, 0.64) },
 57 |         uColor5: { value: colorThreshold(254, 230, 122, 0.8) },
 58 |       },
 59 |       varyingParameters: [`
 60 |         varying vec2 vUv;
 61 |       `],
 62 |       vertexPosition: [`
 63 |         vUv = uv;
 64 |       `],
 65 |       fragmentParameters: [`
 66 |         uniform float uTime;
 67 |         uniform vec2 uResolution;
 68 |         uniform vec4 uColor0;
 69 |         uniform vec4 uColor1;
 70 |         uniform vec4 uColor2;
 71 |         uniform vec4 uColor3;
 72 |         uniform vec4 uColor4;
 73 |         uniform vec4 uColor5;
 74 |       `],
 75 |       fragmentFunctions: [`
 76 |         ${document.getElementById('js-noise').textContent}
 77 | 
 78 |         float getSample (vec2 point, float theta, float time, float scale, vec2 offset) {
 79 |           return snoise((point * scale + offset) + vec2(
 80 |             cos(theta),
 81 |             sin(theta)
 82 |           ) * time) / 2.0 + 0.5;
 83 |         }
 84 | 
 85 |         vec3 getColor (float height) {
 86 |           if (height > uColor5.a) {
 87 |             return uColor5.rgb;
 88 |           }
 89 |           if (height > uColor4.a) {
 90 |             return uColor4.rgb;
 91 |           }
 92 |           if (height > uColor3.a) {
 93 |             return uColor3.rgb;
 94 |           }
 95 |           if (height > uColor2.a) {
 96 |             return uColor2.rgb;
 97 |           }
 98 |           if (height > uColor1.a) {
 99 |             return uColor1.rgb;
100 |           }
101 |           return uColor0.rgb;
102 |         }
103 | 
104 |         float getHeight (vec2 point, vec2 offset) {
105 |           float theta = PI * 1.0;
106 |           float time = uTime * 0.1;
107 |           float scale = 2.0;
108 |           float height = 0.0;
109 |           height += getSample(point, theta, time, scale, offset);
110 |           theta += PI;
111 |           scale = 1.8;
112 |           time = uTime * 0.02;
113 |           height += getSample(point, theta, time, scale, offset);
114 |           height /= 2.0;
115 |           float topLayerHeight = 0.0;
116 |           theta = PI * 2.0;
117 |           time = uTime * 0.125;
118 |           scale = 1.8;
119 |           topLayerHeight += getSample(point, theta, time, scale, offset);
120 |           theta += PI;
121 |           scale = 1.4;
122 |           time = uTime * 0.03;
123 |           topLayerHeight += getSample(point, theta, time, scale, offset);
124 |           topLayerHeight /= 2.0;
125 |           return height + step(uColor5.a, topLayerHeight);
126 |         }
127 | 
128 |         vec3 getRelief (vec2 point, float thickness, float bumpScale) {
129 |           float h00 = getHeight(point, vec2(0.0, 0.0));
130 |           float h11 = getHeight(point, vec2(-thickness, thickness));
131 |           float h = 0.0;
132 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
133 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
134 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
135 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
136 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
137 |           return vec3(max(h, 0.0) * bumpScale);
138 |         }
139 | 
140 |         vec3 getShadow (vec2 point, float thickness, float bumpScale) {
141 |           float h00 = getHeight(point, vec2(0.0, 0.0));
142 |           float h11 = getHeight(point, vec2(-thickness, thickness));
143 |           float h = 0.0;
144 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
145 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
146 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
147 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
148 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
149 |           return -vec3(min(h, 0.0) * bumpScale);
150 |         }
151 |       `],
152 |       fragmentDiffuse: [`
153 |         vec2 point = gl_FragCoord.xy / uResolution;
154 |         point.x *= uResolution.x / uResolution.y;
155 |         diffuseColor.rgb = vec3(0.5);
156 |         ${useColor ? (`
157 |           float height = getHeight(point, vec2(0.00, 0.00));
158 |           diffuseColor.rgb = getColor(height);
159 |         `) : ''}
160 |         ${useRelief ? (`
161 |           diffuseColor.rgb += getRelief(point, 0.01, 0.125);
162 |         `) : ''}
163 |         ${useShadow ? (`
164 |           diffuseColor.rgb -= getShadow(point, 0.025, 0.08);
165 |         `) : ''}
166 |       `],
167 |     })
168 |   }
169 | 
170 |   constructor ({
171 |     width = 2,
172 |     height = 2,
173 |     useColor = true,
174 |     useShadow = true,
175 |     useRelief = true,
176 |   }) {
177 |     const geometry = CutPaper.createGeometry(
178 |       width,
179 |       height,
180 |     )
181 |     const material = CutPaper.createMaterial(
182 |       useColor,
183 |       useShadow,
184 |       useRelief,
185 |     )
186 |     super(geometry, material)
187 |   }
188 | 
189 |   update () {
190 |     this.material.uniforms.uResolution.value.x = window.innerWidth * window.devicePixelRatio
191 |     this.material.uniforms.uResolution.value.y = window.innerHeight * window.devicePixelRatio
192 |   }
193 | 
194 |   get time () {
195 |     return this.material.uniforms.uTime.value
196 |   }
197 | 
198 |   set time (newTime) {
199 |     this.material.uniforms.uTime.value = newTime
200 |   }
201 | }
202 | 
203 | function colorThreshold (r, g, b, threshold) {
204 |   return [
205 |     ...[r, g, b].map(i => i / 255),
206 |     threshold,
207 |   ]
208 | }


--------------------------------------------------------------------------------
/backup/src/script.babel:
--------------------------------------------------------------------------------
  1 | setTimeout(async () => {
  2 |   console.clear()
  3 |   ReactDOM.render((
  4 |     <Threelium.SceneView
  5 |         antialias={true}
  6 |         camera={(
  7 |           <Threelium.Camera
  8 |               position={new THREE.Vector3(0, 0, 1)}
  9 |           />
 10 |         )}
 11 |     >
 12 |       <MainScene />
 13 |     </Threelium.SceneView>
 14 |   ), document.getElementById('js-app'))
 15 | }, 0)
 16 | 
 17 | class MainScene extends Threelium.Scene {
 18 |   initialize ({
 19 |   }) {
 20 |     return (
 21 |       <React.Fragment>
 22 |         <Threelium.AmbientLight color={0xffffff} />
 23 |         <CutPaper
 24 |             useColor={true}
 25 |             useShadow={true}
 26 |             useRelief={true}
 27 |         />
 28 |       </React.Fragment>
 29 |     )
 30 |   }
 31 | }
 32 | 
 33 | class CutPaper extends THREE.Mesh {
 34 |   static createGeometry (
 35 |     width,
 36 |     height,
 37 |   ) {
 38 |     const geometry = new THREE.PlaneGeometry(width, height, 1, 1)
 39 |     return geometry
 40 |   }
 41 | 
 42 |   static createMaterial (
 43 |     useColor,
 44 |     useShadow,
 45 |     useRelief,
 46 |   ) {
 47 |     return new Threelium.EnhancedMaterial({
 48 |       flatShading: false,
 49 |       uniforms: {
 50 |         uTime: { value: 0 },
 51 |         uResolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight).multiplyScalar(window.devicePixelRatio) },
 52 |         uColor0: { value: colorThreshold(13, 9, 96, 0.0) },
 53 |         uColor1: { value: colorThreshold(105, 64, 182, 0.16) },
 54 |         uColor2: { value: colorThreshold(181, 61, 210, 0.32) },
 55 |         uColor3: { value: colorThreshold(250, 90, 186, 0.48) },
 56 |         uColor4: { value: colorThreshold(51, 207, 206, 0.64) },
 57 |         uColor5: { value: colorThreshold(254, 230, 122, 0.8) },
 58 |       },
 59 |       varyingParameters: [`
 60 |         varying vec2 vUv;
 61 |       `],
 62 |       vertexPosition: [`
 63 |         vUv = uv;
 64 |       `],
 65 |       fragmentParameters: [`
 66 |         uniform float uTime;
 67 |         uniform vec2 uResolution;
 68 |         uniform vec4 uColor0;
 69 |         uniform vec4 uColor1;
 70 |         uniform vec4 uColor2;
 71 |         uniform vec4 uColor3;
 72 |         uniform vec4 uColor4;
 73 |         uniform vec4 uColor5;
 74 |       `],
 75 |       fragmentFunctions: [`
 76 |         ${document.getElementById('js-noise').textContent}
 77 | 
 78 |         float getSample (vec2 point, float theta, float time, float scale, vec2 offset) {
 79 |           return snoise((point * scale + offset) + vec2(
 80 |             cos(theta),
 81 |             sin(theta)
 82 |           ) * time) / 2.0 + 0.5;
 83 |         }
 84 | 
 85 |         vec3 getColor (float height) {
 86 |           if (height > uColor5.a) {
 87 |             return uColor5.rgb;
 88 |           }
 89 |           if (height > uColor4.a) {
 90 |             return uColor4.rgb;
 91 |           }
 92 |           if (height > uColor3.a) {
 93 |             return uColor3.rgb;
 94 |           }
 95 |           if (height > uColor2.a) {
 96 |             return uColor2.rgb;
 97 |           }
 98 |           if (height > uColor1.a) {
 99 |             return uColor1.rgb;
100 |           }
101 |           return uColor0.rgb;
102 |         }
103 | 
104 |         float getHeight (vec2 point, vec2 offset) {
105 |           float theta = PI * 1.0;
106 |           float time = uTime * 0.1;
107 |           float scale = 2.0;
108 |           float height = 0.0;
109 |           height += getSample(point, theta, time, scale, offset);
110 |           theta += PI;
111 |           scale = 1.8;
112 |           time = uTime * 0.02;
113 |           height += getSample(point, theta, time, scale, offset);
114 |           height /= 2.0;
115 |           float topLayerHeight = 0.0;
116 |           theta = PI * 2.0;
117 |           time = uTime * 0.125;
118 |           scale = 1.8;
119 |           topLayerHeight += getSample(point, theta, time, scale, offset);
120 |           theta += PI;
121 |           scale = 1.4;
122 |           time = uTime * 0.03;
123 |           topLayerHeight += getSample(point, theta, time, scale, offset);
124 |           topLayerHeight /= 2.0;
125 |           return height + step(uColor5.a, topLayerHeight);
126 |         }
127 | 
128 |         vec3 getRelief (vec2 point, float thickness, float bumpScale) {
129 |           float h00 = getHeight(point, vec2(0.0, 0.0));
130 |           float h11 = getHeight(point, vec2(-thickness, thickness));
131 |           float h = 0.0;
132 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
133 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
134 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
135 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
136 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
137 |           return vec3(max(h, 0.0) * bumpScale);
138 |         }
139 | 
140 |         vec3 getShadow (vec2 point, float thickness, float bumpScale) {
141 |           float h00 = getHeight(point, vec2(0.0, 0.0));
142 |           float h11 = getHeight(point, vec2(-thickness, thickness));
143 |           float h = 0.0;
144 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
145 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
146 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
147 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
148 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
149 |           return -vec3(min(h, 0.0) * bumpScale);
150 |         }
151 |       `],
152 |       fragmentDiffuse: [`
153 |         vec2 point = gl_FragCoord.xy / uResolution;
154 |         point.x *= uResolution.x / uResolution.y;
155 |         diffuseColor.rgb = vec3(0.5);
156 |         ${useColor ? (`
157 |           float height = getHeight(point, vec2(0.00, 0.00));
158 |           diffuseColor.rgb = getColor(height);
159 |         `) : ''}
160 |         ${useRelief ? (`
161 |           diffuseColor.rgb += getRelief(point, 0.01, 0.125);
162 |         `) : ''}
163 |         ${useShadow ? (`
164 |           diffuseColor.rgb -= getShadow(point, 0.025, 0.08);
165 |         `) : ''}
166 |       `],
167 |     })
168 |   }
169 | 
170 |   constructor ({
171 |     width = 2,
172 |     height = 2,
173 |     useColor = true,
174 |     useShadow = true,
175 |     useRelief = true,
176 |   }) {
177 |     const geometry = CutPaper.createGeometry(
178 |       width,
179 |       height,
180 |     )
181 |     const material = CutPaper.createMaterial(
182 |       useColor,
183 |       useShadow,
184 |       useRelief,
185 |     )
186 |     super(geometry, material)
187 |   }
188 | 
189 |   update () {
190 |     this.material.uniforms.uResolution.value.x = window.innerWidth * window.devicePixelRatio
191 |     this.material.uniforms.uResolution.value.y = window.innerHeight * window.devicePixelRatio
192 |   }
193 | 
194 |   get time () {
195 |     return this.material.uniforms.uTime.value
196 |   }
197 | 
198 |   set time (newTime) {
199 |     this.material.uniforms.uTime.value = newTime
200 |   }
201 | }
202 | 
203 | function colorThreshold (r, g, b, threshold) {
204 |   return [
205 |     ...[r, g, b].map(i => i / 255),
206 |     threshold,
207 |   ]
208 | }


--------------------------------------------------------------------------------
/docs/script.js:
--------------------------------------------------------------------------------
  1 | setTimeout(async () => {
  2 |   console.clear();
  3 |   ReactDOM.render( /*#__PURE__*/React.createElement(Threelium.SceneView, {
  4 |     antialias: true,
  5 |     camera: /*#__PURE__*/React.createElement(Threelium.Camera, {
  6 |       position: new THREE.Vector3(0, 0, 1)
  7 |     })
  8 |   }, /*#__PURE__*/React.createElement(MainScene, null)), document.getElementById('js-app'));
  9 | }, 0);
 10 | 
 11 | class MainScene extends Threelium.Scene {
 12 |   initialize({}) {
 13 |     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Threelium.AmbientLight, {
 14 |       color: 0xffffff
 15 |     }), /*#__PURE__*/React.createElement(CutPaper, {
 16 |       useColor: true,
 17 |       useShadow: true,
 18 |       useRelief: true
 19 |     }));
 20 |   }
 21 | 
 22 | }
 23 | 
 24 | class CutPaper extends THREE.Mesh {
 25 |   static createGeometry(width, height) {
 26 |     const geometry = new THREE.PlaneGeometry(width, height, 1, 1);
 27 |     return geometry;
 28 |   }
 29 | 
 30 |   static createMaterial(useColor, useShadow, useRelief) {
 31 |     return new Threelium.EnhancedMaterial({
 32 |       flatShading: false,
 33 |       uniforms: {
 34 |         uTime: {
 35 |           value: 0
 36 |         },
 37 |         uResolution: {
 38 |           value: new THREE.Vector2(window.innerWidth, window.innerHeight).multiplyScalar(window.devicePixelRatio)
 39 |         },
 40 |         uColor0: {
 41 |           value: colorThreshold(13, 9, 96, 0.0)
 42 |         },
 43 |         uColor1: {
 44 |           value: colorThreshold(105, 64, 182, 0.16)
 45 |         },
 46 |         uColor2: {
 47 |           value: colorThreshold(181, 61, 210, 0.32)
 48 |         },
 49 |         uColor3: {
 50 |           value: colorThreshold(250, 90, 186, 0.48)
 51 |         },
 52 |         uColor4: {
 53 |           value: colorThreshold(51, 207, 206, 0.64)
 54 |         },
 55 |         uColor5: {
 56 |           value: colorThreshold(254, 230, 122, 0.8)
 57 |         }
 58 |       },
 59 |       varyingParameters: [`
 60 |         varying vec2 vUv;
 61 |       `],
 62 |       vertexPosition: [`
 63 |         vUv = uv;
 64 |       `],
 65 |       fragmentParameters: [`
 66 |         uniform float uTime;
 67 |         uniform vec2 uResolution;
 68 |         uniform vec4 uColor0;
 69 |         uniform vec4 uColor1;
 70 |         uniform vec4 uColor2;
 71 |         uniform vec4 uColor3;
 72 |         uniform vec4 uColor4;
 73 |         uniform vec4 uColor5;
 74 |       `],
 75 |       fragmentFunctions: [`
 76 |         ${document.getElementById('js-noise').textContent}
 77 | 
 78 |         float getSample (vec2 point, float theta, float time, float scale, vec2 offset) {
 79 |           return snoise((point * scale + offset) + vec2(
 80 |             cos(theta),
 81 |             sin(theta)
 82 |           ) * time) / 2.0 + 0.5;
 83 |         }
 84 | 
 85 |         vec3 getColor (float height) {
 86 |           if (height > uColor5.a) {
 87 |             return uColor5.rgb;
 88 |           }
 89 |           if (height > uColor4.a) {
 90 |             return uColor4.rgb;
 91 |           }
 92 |           if (height > uColor3.a) {
 93 |             return uColor3.rgb;
 94 |           }
 95 |           if (height > uColor2.a) {
 96 |             return uColor2.rgb;
 97 |           }
 98 |           if (height > uColor1.a) {
 99 |             return uColor1.rgb;
100 |           }
101 |           return uColor0.rgb;
102 |         }
103 | 
104 |         float getHeight (vec2 point, vec2 offset) {
105 |           float theta = PI * 1.0;
106 |           float time = uTime * 0.1;
107 |           float scale = 2.0;
108 |           float height = 0.0;
109 |           height += getSample(point, theta, time, scale, offset);
110 |           theta += PI;
111 |           scale = 1.8;
112 |           time = uTime * 0.02;
113 |           height += getSample(point, theta, time, scale, offset);
114 |           height /= 2.0;
115 |           float topLayerHeight = 0.0;
116 |           theta = PI * 2.0;
117 |           time = uTime * 0.125;
118 |           scale = 1.8;
119 |           topLayerHeight += getSample(point, theta, time, scale, offset);
120 |           theta += PI;
121 |           scale = 1.4;
122 |           time = uTime * 0.03;
123 |           topLayerHeight += getSample(point, theta, time, scale, offset);
124 |           topLayerHeight /= 2.0;
125 |           return height + step(uColor5.a, topLayerHeight);
126 |         }
127 | 
128 |         vec3 getRelief (vec2 point, float thickness, float bumpScale) {
129 |           float h00 = getHeight(point, vec2(0.0, 0.0));
130 |           float h11 = getHeight(point, vec2(-thickness, thickness));
131 |           float h = 0.0;
132 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
133 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
134 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
135 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
136 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
137 |           return vec3(max(h, 0.0) * bumpScale);
138 |         }
139 | 
140 |         vec3 getShadow (vec2 point, float thickness, float bumpScale) {
141 |           float h00 = getHeight(point, vec2(0.0, 0.0));
142 |           float h11 = getHeight(point, vec2(-thickness, thickness));
143 |           float h = 0.0;
144 |           h += step(uColor5.a, h00) - step(uColor5.a, h11);
145 |           h += step(uColor4.a, h00) - step(uColor4.a, h11);
146 |           h += step(uColor3.a, h00) - step(uColor3.a, h11);
147 |           h += step(uColor2.a, h00) - step(uColor2.a, h11);
148 |           h += step(uColor1.a, h00) - step(uColor1.a, h11);
149 |           return -vec3(min(h, 0.0) * bumpScale);
150 |         }
151 |       `],
152 |       fragmentDiffuse: [`
153 |         vec2 point = gl_FragCoord.xy / uResolution;
154 |         point.x *= uResolution.x / uResolution.y;
155 |         diffuseColor.rgb = vec3(0.5);
156 |         ${useColor ? `
157 |           float height = getHeight(point, vec2(0.00, 0.00));
158 |           diffuseColor.rgb = getColor(height);
159 |         ` : ''}
160 |         ${useRelief ? `
161 |           diffuseColor.rgb += getRelief(point, 0.01, 0.125);
162 |         ` : ''}
163 |         ${useShadow ? `
164 |           diffuseColor.rgb -= getShadow(point, 0.025, 0.08);
165 |         ` : ''}
166 |       `]
167 |     });
168 |   }
169 | 
170 |   constructor({
171 |     width = 2,
172 |     height = 2,
173 |     useColor = true,
174 |     useShadow = true,
175 |     useRelief = true
176 |   }) {
177 |     const geometry = CutPaper.createGeometry(width, height);
178 |     const material = CutPaper.createMaterial(useColor, useShadow, useRelief);
179 |     super(geometry, material);
180 |   }
181 | 
182 |   update() {
183 |     this.material.uniforms.uResolution.value.x = window.innerWidth * window.devicePixelRatio;
184 |     this.material.uniforms.uResolution.value.y = window.innerHeight * window.devicePixelRatio;
185 |   }
186 | 
187 |   get time() {
188 |     return this.material.uniforms.uTime.value;
189 |   }
190 | 
191 |   set time(newTime) {
192 |     this.material.uniforms.uTime.value = newTime;
193 |   }
194 | 
195 | }
196 | 
197 | function colorThreshold(r, g, b, threshold) {
198 |   return [...[r, g, b].map(i => i / 255), threshold];
199 | }


--------------------------------------------------------------------------------