Truchet Tiles

Truchet Tiles is a project that looks at decorated squares that can tile a plane to create a pattern. We created a sketch with a simple and playful twist on the design. Combining arrays and variables into the code positions the tiles at any random orientation to yield a pleasing and non-repeating design for users to interact through mouse and keyboard functions.

This final sketch is quite different from our initial idea and design. Aditi came up with the concept of truchet tiles, and was familiar with how arrays worked in code. The element of play and interactivity comes when users interact with the mouse to rotate the position and direction of the truchet tile to create their unique pattern and design. Users can also use the sliders to adjust their desired weight and size of the truchet tiles or toggle between eleven different patterns by pressing the left and right key functions.

Keywords

truchet tiles, playful, unique, interactive, colorful, aesthetic, patterns.

Issues encountered

After creating the truchet tiles pattern, we struggled with making the orientation constant after the mouse passes through each array while affecting the neighboring state. After consulting the lecturers, we solved the issue incorporating different classes and alternative variables to focus on each separate array and tactile tile. There were a few bugs when sharing the sketch on full screen, and the mouse positions were not accurate when interacting with the sketch. We also had a hard time figuring out how to convey and display the instructions for how the sketch works to our users. There was also ensuring an interactive and playful experience while making it user-friendly. Overall, we encountered alot of issues and had to compromise on a portion of the design and code unfortunately.

Achievements

The two of us worked well together to successfully create a unique sketch from scratch. We were open to different ideas but focused on making it user-friendly to provide a personalized interactive experience. We also split the workload by focusing on our strengths; Aditi works on the code sketch and Ying Jia updates the website. By focusing on making it user-friendly, we managed to provide a personalized interactive experience for all our users.

The sketch

The following sketch was created using the creative coding environment p5js and is called Truchet Tiles Generator, its original source can be found here. Users can choose between eleven truchet tiles designs to customise the position and orientation of the tile patterns. Afterward, they can adjust the sliders to change the size and stroke weight of the patterns.

Feedback we received

Initially, we forgot to add instructions and assumed people would find out what the sketch could do independently. After adding instructions, the feedback received was overwhelmingly positive, the instructions were clear and many people like the variety of interactive options, design, and colors of the sketch. One feedback that stuck with us was that our sketch looks like 'a study of pattern'.

Reflection

We are both very happy with the outcome. While many of our classmates used pre-existing codes and made it their own, we created ours completely from scratch. It took a lot of hard work, blood, sweat and tears to get here. We weren’t using any concepts that were exceptionally complex, and tried to make up for it by overcomplicating things. I underestimated the work I would take to get here and there were a few silly missteps I took. However, in the end, our code is interactive and visually interesting, and that meets the brief!

Future Applications

Since this is a customizable pattern generator, we could potentially use this for graphic design, product design, packaging, branding, print media, and even fashion and textile patterns. Coding a non-repeating design is more flexible than typical design applications like Adobe Illustrator as they are limited and repetitive. Nevertheless, coding helps to ease the overall process and creates fluid patterns for the designers' uses.