Tex the Texture Editing Machine

Overview

Sketches

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.

In-Progress

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.