Tex the Texture Editing Machine

Web Design
Adobe Photoshop | Adobe Illustrator
HTML | CSS | Vanilla Javascript | GLFX.js
https://sites.millersville.edu/heblaine/0000_SelfAuth_Experiment/Screenshot of Tex the Texture Machine Website over a Factory background


The goal of this project was to create a website that would allow the user to interact with and manipulate a variety of offered textures. This is a continuation in a way of my Texture Factory website which outlined my texture making process. This site allows a user to start with a texture I made and scanned in and manipulate it to create a texture of their own that they can then save.


No items found.


I knew that I wanted to make this website as a continuation or based on my texture factory website so the aesthetics and main concept were already laid out for me so I went straight into planning out the website. Below is the initial sketch for my robot as well as the wireframe/sketch for how the user would move through the website.

No items found.


From the start, I knew that this project was going to be a challenge for me in terms of the technical aspect and functionality. The biggest challenge for this project by far was the "how" I had never attempted anything like this before and as such, it took a lot of trial and error. I tried a variety of different Javascript libraries in order to handle the image manipulation each with varying levels of success. This was until I found the GLFX.js library. Prior to this javascript library, I was finding myself having to pull the brightness/contrast from one library and a halftone effect from another. The GLFX.js library however had both brightness/contrast and a dot pattern which ultimately made things a lot easier. Once I overcame the hurdle of the "how", I thought I was in the clear but as it happens in coding right as I thought I was complete I ran into a few issues. The screenshot below is the same version of the website but one is opened in Safari and one is opened in Google Chrome. This project taught me to ensure that any CSS animations I use work in all browsers including Safari. I had to spend a bit of time reworking my animations so that they worked in Safari, Chrome, and Firefox which was an unexpected challenge with this project.

No items found.

Final Piece

Below is the final version of Tex the Texture Editing Machine. There is a link to the live site as well as some screenshots of the website on various viewports.

Screenshot of Tex the Texture Machine Website Laptop Size
Screenshot of Tex the Texture Machine Website Tablet Size
Screenshot of Tex the Texture Machine Website Mobile Size