diff --git a/index.html b/index.html index 06e45d5..ba737e5 100644 --- a/index.html +++ b/index.html @@ -16,162 +16,238 @@ limitations under the License. --> - - Noise Maker - - - - - - - -
-

Perlin Noise Maker

-

Create your own images of Perlin noise! This app will generate tileable Perlin noise textures which is a useful raw material for may image processing applications.

- -

Adjust the values below to change the proerties of the image.

-

To save the image, click on the Download Image link below. Alternately, you can right click the image and use your web browser's menu to save it to disk.

- - noise.png - - - - - + + Noise Maker + + + + + + + + +
+ Perlin Noise Maker +

Create your own images of Perlin noise! This app will generate tileable Perlin noise textures which is a + useful raw material for may image processing applications.

+ +

Adjust the values below to change the proerties of the image.

+

To save the image, click on the Download Image link below. Alternately, you can right click the image + and use your web browser's menu to save it to disk.

+ +

Generator

+
- - - - - - - - - - - +
- Random Seed: -
- Width: -
- Height: -
- Cell Size: -
- Levels: -
- Attenuation: -
- Groovy: -
- Color: -
- Alpha: -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
- -

Download Image

-
- -

How it works

- -

Width and Height determine the width and height of the final image in pixels.

- -

Cell size determines the coarseness of the image. Perlin noise is made by blending together gradients that are evenly spaced apart in a grid. By adjusting the spacing, you can change the coarseness of the generated texture. The final image will tile seamlessly if the width and height of the image are whole multiples of the cell spacing. For best results, use numbers that are powers of 2 for the image width, height and cell spacing.

-

Levels will blend extra levels of noise into your texture, with each additional level half the resolution of the previous one. Blending several layers of noise can produce a cloudy effect.

- -

Attenuation controls how multiple levels are mixed. Less attenuation will make the coarser levels more prominent, giving you a rougher look.

- -

Color and Alpha determine which channels in the final image have unique noise generated. 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). By checking 'color', you will write different noise textures into each of the red, green and blue channels. By checking 'alpha' you will write noise into the alpha channel.

+ -

Groovy will rectify the noise. That is, all values in the noise that are mid grey or darker will be inverted and then the entire texture is resampled to fill the full black-to-white range. This creates a groove-like effect in the final texture which can be useful for some applications.

+ noise.png -

Randseed determines the starting state of the random number generator. By changing it, you can create a different pattern of randomness in your image.

+ + -
+ Download Image + +
+
+

How it works

+ +

Width and Height determine the width and height of + the final image in pixels.

+ +

Cell size determines the coarseness of the image. Perlin + noise is made by + blending together gradients that are evenly spaced apart in a grid. By adjusting the spacing, you can change + the coarseness of the generated texture. The final image will tile seamlessly if the width and height of the + image are whole multiples of the cell spacing. For best results, use numbers that are powers of 2 for the + image width, height and cell spacing.

+ +

Levels will blend extra levels of noise into your + texture, with each additional + level half the resolution of the previous one. Blending several layers of noise can produce a cloudy effect. +

+ +

Attenuation controls how multiple levels are mixed. Less + attenuation will make + the coarser levels more prominent, giving you a rougher look.

+ +

Color and Alpha determine which channels in the + final image have unique noise generated. 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). By + checking 'color', you will write different noise textures into each of the red, green and blue channels. By + checking 'alpha' you will write noise into the alpha channel.

+ +

Groovy will rectify the noise. That is, all values in + the noise that are mid + grey or darker will be inverted and then the entire texture is resampled to fill the full black-to-white + range. This creates a groove-like effect in the final texture which can be useful for some applications.

+ +

Random Seed determines the starting state of the random + number generator. By + changing it, you can create a different pattern of randomness in your image.

+ + +
+ +
- - + +
+ + + + + + \ No newline at end of file diff --git a/noiseMaker.css b/noiseMaker.css index 6225c04..e027e14 100644 --- a/noiseMaker.css +++ b/noiseMaker.css @@ -1,18 +1,94 @@ +body { + font-family: 'Arial', sans-serif; +} + +title { + display: block; + font-size: 2.75rem; + font-weight: bold; + text-decoration: underline; +} + +p { + max-width: 75ch; +} + +a { + text-decoration: none; +} + +.button { + border-style: solid; + border-radius: 0.5rem; + + background-color: rgb(210, 210, 210); + width: fit-content; + margin: auto; + padding: 0.4rem 0.6rem; + border-color:black; + + color: black; + text-decoration: none; + font-weight: 600; +} + +.button:hover { + cursor: pointer; + background-color: rgb(200, 200, 200); +} + div.mainBody { - width: 800px; + max-width: 75ch; margin:auto; } +.generator { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + gap: 1rem; + + background-color: rgb(230, 230, 230); + padding: 1rem; + border-radius: 0.5rem; +} + +#displayImage { + grid-row: 1 / 3; + grid-column: 2 / 3; +} + +@media (max-width: 75ch) { + .generator { + grid-template-columns: 1fr; + } + + #displayImage { + margin: auto; + grid-row: unset; + grid-column: unset; + } +} + .keyword { font-weight:bold; color:blue; } -.button { - border-style: solid; - border-radius: 5px; +#legals-and-links { + display: grid; + grid-template-columns: 1fr 1fr; +} - background-color: lightGray; - padding: 5px; - border-color:black; +#legals-and-links p:nth-child(even) { + text-align: right; +} + +#legals-and-links p a { + color: blue; + text-decoration: underline; +} + +ion-icon { + transform: translateX(-0.2rem) translateY(0.1rem) scale(1.15); } \ No newline at end of file