Noise Texture Generator

Inspiration

The inspiration came from doing market research by asking a Canva designer what were the difficulties with using Canva for his projects and the reason for not using Canva for specific use-cases, so I would not be building an app that nobody would use. The Canva designer is Landon, founder and head of marketing at Fuse; after checking out the Noise and Texture plugin Landon talked about on Figma, it turns out the plugin has over 500k downloads and is one of the most used plugins on Figma. Seeing both the frustration from Landon in creating advertising assets, which Canva specialises in and as well as the popularity of such a tool like a noise and texture generator, I thought this would be the perfect app to build in Canva.

What it does

There are four different types of noise/texture you can generate; Perlin-noise, Perlin-contour, Voronoi-Flat and Wave-Pattern. Each of these can either be added by themselves, update an image or have an image be overlayed on top of the already generated noise texture. The overlayed image can then be changed using the noise texture attributes, so that you can see your image modifications in real time. Each noise has different attributes such as zoom or shapes, that can be changed for the noise to look different and it has a colour selector to also affect the resultant noise texture.

How I built it

I built it using React and typescript, utilising hooks and Canva's asset/app-ui-kit/design libraries. I started with a simple noise texture generator then progressed with the other more difficult patterns such as voronoi and contour. I used separate hooks for the functionality of the maths and image processing of the canvas that I used.

Challenges I ran into

One of the challenges was with the shapes attribute where you can change the shapes of the pixels themselves to be in the shape you want. The most difficult was the triangle as when defining the triangle vertices you had to incorporate the zoom attribute and then do a point-in-triangle test based on barycentric coordinates which took forever to figure out.

Another one of the challenges was with the overlaying of the images, as a new temporary canvas had to be created so that the image that was chosen to be superimposed onto the noise, could be drawn onto this original canvas through the temporary one just created.

Accomplishments that I'm proud of

Getting all four noise textures finished with all necessary attributes added for each one. Getting the overlaying image functionality working within the preview of the canvas app so the user can decide whether or not to add the image to his/her design. Making sure the image api works as intended when adding/updating or overlaying images.

What I learned

Learnt about the usefulness and drawbacks of the Canva app sdk functionality. Learnt about pixels and how to create images from a canvas. Learnt about how to use hooks effectively to make the code more readable and operational.

What's next for Noise Texture Generator

Next is to implement a marble texture to the noise, however it wasn't important as overlaying the image wouldn't result in much of a result due to limited whitespace.

Built With

• canva
• react
• typescript