diff --git a/styleguide/demopage/index.html b/styleguide/demopage/index.html index c46cd4d..c005f6f 100644 --- a/styleguide/demopage/index.html +++ b/styleguide/demopage/index.html @@ -232,7 +232,7 @@
The same image as before, except with a glitchy filer applied. The first effect applies to bright edges, which get paintet pink and blue to their left and right hand side respectively. The second effect distorts the image by offsetting parts of the image horizontally by seemingly random yet somewhat osscilating amounts.
Example image with visual glitches applied.
diff --git a/styleguide/generator/index.html b/styleguide/generator/index.html index 8a77b7b..66f59dc 100644 --- a/styleguide/generator/index.html +++ b/styleguide/generator/index.html @@ -20,7 +20,7 @@ type="text/css" href="../assets/style/styleguide.css" /> - Document + Image Generator @@ -98,15 +98,24 @@
-
- -

- Work in progress - This style guide is still under development.
- Not all resources may be available yet, explanations and examples - may be missing and things may change without notice. -

-
+

Image Generator

+

+ We wanted images to (optionally) have a glitchy, distorted appearance. + To achieve this, we apply two effects to an image. Firstly, bright + vertical edges in an image are highlighted by adding a parallel line + in our primary color to their left and in our secondary color to their + right hand side. Secondly, the image gets distorted by offsetting + different parts of the image horizontally, seemingly by random + amounts, but it is actually somewhat osscilating. +

+

+ This page utilizes a small bit of Javascript to add an SVG filter to + an image of your choice. The resulting image will then be previewed + further below and can be downloaded using a button at the end of the + page. Not all browsers' canvas implementations generate the same + outcome, especially firefox tends to create wrong results, so we + recommend using a chromium based browser for creating these exports. +