Skip to content

Commit 0f30bd6

Browse files
blackearsblackears
committed
Improving docs.
1 parent 7bb2245 commit 0f30bd6

File tree

3 files changed

+59
-12
lines changed

3 files changed

+59
-12
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ This is an HTML5 app for creating Perlin noise images.
88

99
I created this as a means to provide more user control over generating Perlin noise than is typically found in most image editing software packages (such as Photoshop's Render Clouds feature). Perlin noise can also be used as a basis for textures in video games.
1010

11+
## Running
12+
13+
[Click here to run the app from your browser.](http://htmlpreview.github.io/?https://github.com/blackears/PerlinNoiseMaker/blob/master/index.html)
14+
1115
## License
1216

1317
This software is licensed under Apache 2. Images generated by this app are copyright of the user who generated them.

‎index.html

+47-12
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<title>Noise Maker</title>
2121
<meta charset="UTF-8">
2222
<meta name="viewport" content="width=device-width, initial-scale=1.0">
23+
<link rel="stylesheet" type="text/css" href="noiseMaker.css">
2324
<script src="noiseMaker.js"></script>
2425
<script>
2526
function refreshImage()
@@ -95,8 +96,9 @@
9596
</script>
9697
</head>
9798
<body>
98-
<h1>Noise maker</h1>
99-
<p>A Perlin noise generator</p>
99+
<h1>Perlin Noise Maker</h1>
100+
<p>Adjust the values below to change the proerties of the image.</p>
101+
<p>To save the image, click on the <i>Download Image</i> link below. Alternately, you can right click the image and use your web browser's menu to save it to disk.</p>
100102

101103
<img id="displayImage" style="border:1px solid #000000;"
102104
alt="noise.png"/>
@@ -109,7 +111,10 @@ <h1>Noise maker</h1>
109111
</script>
110112

111113
<form id="controlForm" action="">
112-
Random Seed: <input id="randseed" type="number" value="1"/><br/>
114+
<table border="0">
115+
<tr><td>
116+
Random Seed: <input id="randseed" type="number" value="1"/>
117+
</td></tr>
113118
<!--
114119
Width: <select id="imgWidth">
115120
<option>16</option>
@@ -121,25 +126,55 @@ <h1>Noise maker</h1>
121126
<option>1024</option>
122127
</select></br>
123128
-->
124-
Width: <input id="imgWidth" type="number" value="256"/><br/>
125-
Height: <input id="imgHeight" type="number" value="256"/><br/>
126-
Cell Width: <input id="period" type="number" value="16"/><br/>
127-
Levels: <input id="numLevels" type="number" value="1"/><br/>
128-
Groovy: <input id="absolute" type="checkbox"/><br/>
129-
Color: <input id="noiseColor" type="checkbox"/><br/>
130-
Alpha: <input id="noiseAlpha" type="checkbox"/><br/>
129+
<tr><td>
130+
Width: <input id="imgWidth" type="number" value="256"/>
131+
</td></tr>
132+
<tr><td>
133+
Height: <input id="imgHeight" type="number" value="256"/>
134+
</td></tr>
135+
<tr><td>
136+
Cell Width: <input id="period" type="number" value="16"/>
137+
</td></tr>
138+
<tr><td>
139+
Levels: <input id="numLevels" type="number" value="1"/>
140+
</td></tr>
141+
<tr><td>
142+
Groovy: <input id="absolute" type="checkbox"/>
143+
</td></tr>
144+
<tr><td>
145+
Color: <input id="noiseColor" type="checkbox"/>
146+
</td></tr>
147+
<tr><td>
148+
Alpha: <input id="noiseAlpha" type="checkbox"/>
149+
</td></tr>
150+
</table>
131151
</form>
132152

133-
<a id="dl" download="noiseTexture.png">Download Canvas</a><br/>
153+
<p><a id="dl" download="noiseTexture.png" class="button">Download Image</a></p>
154+
<br/>
134155
<!--
135156
<a id="copyClipboard">Copy to clipboard</a><br/>
136157
<br/>
137158
<img class="aligncenter" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM0AAADNCAMAAAAsYgRbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABJQTFRF3NSmzMewPxIG//ncJEJsldTou1jHgAAAARBJREFUeNrs2EEKgCAQBVDLuv+V20dENbMY831wKz4Y/VHb/5RGQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0PzMWtyaGhoaGhoaGhoaGhoaGhoxtb0QGhoaGhoaGhoaGhoaGhoaMbRLEvv50VTQ9OTQ5OpyZ01GpM2g0bfmDQaL7S+ofFC6xv3ZpxJiywakzbvd9r3RWPS9I2+MWk0+kbf0Hih9Y17U0nTHibrDDQ0NDQ0NDQ0NDQ0NDQ0NTXbRSL/AK72o6GhoaGhoRlL8951vwsNDQ0NDQ1NDc0WyHtDTEhDQ0NDQ0NTS5MdGhoaGhoaGhoaGhoaGhoaGhoaGhoaGposzSHAAErMwwQ2HwRQAAAAAElFTkSuQmCC" alt="beastie.png" />
138159
<br/>
139160
-->
161+
<h2>How it works</h2>
162+
<p>Perlin noise is is made by blending together gradients evenly spaced apart in a grid. By adjusting the spacing, you can change the coarseness of the generated texture. The 'cell width' option determines this coarsness. The resulting noise texture will tile seamlessly if the image width and height are whole multiples of the cell size. For best results, use numbers that are powers of 2 for the width, height and cell size.</p>
163+
164+
<p>Often several levels of noise are merged together to create a cloudy effect. This is done by creating several different noise images, with each half the coarsness of the previous one. The images are then blended together. The more levels, the more cloudy the final image will look. By using the 'levels' option, you can add extra layers of noise that are blended into your top level noise.</p>
165+
166+
<p>By default a black and white texture will be generated (ie, the red, green and blue channels are all set to the same value and the alpha channel is solid white). For some applications, you may wish to have different noise patterns in all of the channels. By checking 'color', you will write different noise textures into each of the red, green and blue channels, and by checking 'alpha' you will write noise into the alpha channel.</p>
167+
168+
<p>By checking 'groovy', you rectify the noise. That is, all values in the noise that are mid grey or darker are inverted and then the texture is resampled to fill the entire black-to-white range. This creates a groove-like effect in the final texture which can be useful for some applications.</p>
169+
170+
<p>The randseed determines the starting state of the random number generator. By changing it, you can create a different pattern of randomness in your image.</p>
171+
140172

141173
<hr/>
142-
<p>&copy; 2015 Mark McKay.</p>
174+
175+
<p>&copy; 2015 Mark McKay</p>
176+
<p><a href="http://www.kitfox.com">My homepage on kitfox.com</a></p>
177+
<p><a href="https://github.com/blackears/PerlinNoiseMaker">This project is now hosted on Github</a>.</p>
143178

144179
</body>
145180
</html>

‎noiseMaker.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.button {
2+
border-style: solid;
3+
border-radius: 5px;
4+
5+
background-color: lightGray;
6+
padding: 5px;
7+
border-color:black;
8+
}

0 commit comments

Comments
 (0)