Written by Remy Nixon of @quilt.mockup.tool
Listen, I love quilting – but that shit makes me ANXIOUS. Art you can snuggle with? Yes! Incredible! Sign me up! Beautiful fabrics that are only printed once, so if you mess up they’ll be wasted and you’ll never get them back? Fuuuuuuuuuuck…
This is the story of how I learned to accept that you don’t have to be good at something to enjoy doing it, and that when you lean into the things that bring you joy you sometimes end up on a journey you never expected.
I haven’t always been the type of quilter who’s nervous about cutting into fabric. I remember being new to quilting, being excited to make something beautiful after admiring all the beautiful quilts we had in our house, only to have it turn out… bad. The fabrics I chose looked pretty when I was choosing them - they even looked nice together all stacked up as bolts on the JoAnn’s cutting table! I thought I would create a masterpiece, but instead I got… chaos. Discouraging!
Then I discovered Pinterest and modern quilting and designer quilt fabric. Oh, the new realms of possibilities! I bought fabric from a local quilt shop to make a quilt for myself. It would be scrappy! It would be meticulously planned! I had my pattern drawn out on graph paper, and knew what colors would go where, but since it was scrappy I wasn’t sure yet what specific prints would go in which places. So, I decided to buy a medium amount of each fabric and lay all my cut pieces out before sewing a single seam to make sure I loved it. And you know what? It was turning out great! Until. UNTIL! I ran out of one fabric. Unexpected sure, but an easy fix. “I’ll just go back to that cute little quilt shop and get some more!” I thought “No big deal.” Well, that was the day I learned that nice quilt fabric only gets printed once and then… it’s gone. Forever. For-ev-er.
I was in shock. I was frustrated. I was mad! I couldn’t just use another fabric. I had a PLAN. I… I had a SPREADSHEET!
Any artist will tell you that creating art will teach you about yourself. That day, I learned that for the act of creating to feel joyful and fulfilling, I need more control over the final outcome.
It took me a while to realize that everyone’s creative process is different. While it’s tempting to assume that pairing the colors and patterns of different fabrics comes easily to anyone posting quilt photos on Instagram, the reality is more complex. I’ve also learned that it’s okay to not enjoy certain parts of the process, and that it’s also okay if one of your favorite parts is… making a spreadsheet.
The Quilt Mockup Tool was born not just from my desire to have more control over my final quilt layout, but also from the enjoyment I find in the process of planning a new project. It was born from my love of art and geometry. From my appreciation of color, pattern, texture and math.
Creating the Quilt Mockup Tool
I started writing little computer programs to help me plan quilts long before I’d ever heard of Wyldwood Creative. But if it weren’t for Wyldwood, the Quilt Mockup Tool would never have been created.
Early on in my quilting journey, I started using Microsoft Paint to help me figure out how to arrange my quilt layouts before I ever cut into my fabric. But there is only so much you can do when you’re using free paint programs. What I really needed was something that I could use images of my fabrics at the right scale, so I could see how different patterns would work together. Nothing really fit the bill, and I didn’t want to spend money on Adobe or other quilting software because I was still feeling like if I was a “real quilter,” I shouldn’t even HAVE to use any of these “cheats”. So! I put my Computer Science degree to work and started writing little computer programs every time I started a new quilt.
They were clunky little things that barely worked but helped me decide how I was going to lay out one quilt or another, and soon coding these little geometry puzzles became just as fun for me as making the actual quilt.
At first, I was writing these programs as a part of my own creative process, but when I started working for Wyldwood in 2021, I started writing them because I was CURIOUS.
I had never been a quilt kit person before, but I soon fell in love with the kits Tawnee put together. I would add images of fabric bundles to the quilt kit product listings and drool over the beautiful colorways and cool patterns. I had only ever seen quilt kits put together in solid colors to match a pattern’s cover quilt, and I NEEDED to know what Tawnee’s kits would look like after they were sewn together! So, to sate my own curiosity, I started writing more little computer programs.
Soon, we were adding my mockup renderings to the quilt kit product listings, and people started to notice and appreciate them and ask for more! I started taking requests from our Wyldwood maker community and sending people mockups of the quilts they were planning. It was really fun, and to my surprise, people started asking if I could share the programs I was making so they could use them too! I really wanted to share my project with others, but I just couldn’t figure out how.
Nerdy Coding Details
Allow me to get a bit technical here. The Quilt Mockup Tool is written in JavaScript and uses the HTML <canvas> element to draw the mockups. The <canvas> element has functions that let you define shapes and then fill them either with a solid color or with an image from an <image> element loaded on the page. (If you’re really curious, all my code is right there to see in your browser’s developer tools – I haven’t obfuscated any of it because I’m laaaaazy. Just don’t tell my CS101 professor that I hardly put comments on any of my functions.)
The main problem I had at the beginning was the fabric images themselves and all the pre-processing I needed to do to them. Each fabric image would usually come in a different pixels-per-inch ratio, so my first step would be to re-size them all to use the same ratio that my program would render the final quilt mockup. I would also have to crop out any ruler that might be at the bottom of the image, so that wouldn’t show up in the rendering as well.
Without pre-processing:
(Why is this bad? Well, the most obvious thing is the stripes of the black ruler, which clearly wouldn’t be in your final quilt, but the less obvious thing, and the thing I was most interested in getting right, is the relative scale of the prints in the final mockup. Each of those fabric squares are supposed to be the same width in real life, but in this mockup, the strawberries are way bigger than what the stripes or the pink dots will be in the final piece.
After pre-processing:
(Why is this better? Well, obviously the ruler lines are gone, that’d be good, but notice the relative scales of he prints. This gives a much better indication of how these patterns will work together in an actual quilt.)
The image editing step in the process was my Achilles’ heel. The images all needed to be the same pixels-per-inch for the mockups to show an accurate depiction of how a certain scale of print will look in the final quilt, and editing the images by hand was the only way I knew how to do it. The problem here being that there is no way to make an online tool that can grab images off your local machine and load them into a webpage (and that’s good for internet safety). You could load images grabbed from elsewhere online, but not from your computer. So, I put any thoughts of sharing my tool aside.
The breakthrough came after about a year of happily making mockups for Wyldwood, and like all good breakthroughs, I stumbled upon it while trying to do something else.
I don’t even know what I was looking for at the time, but I read a code snippet online where someone used an image rendered in one <canvas> as the fill pattern in another <canvas> and boom. There it was. The solution.
Please, try to imagine being my non-coding but very sweet and supportive partner, at 10 pm, listening to my excited high-speed word-avalanche as I simultaneously danced around the kitchen and tried to explain the implications of what I had just figured out. (Truly a keeper.)
What I had figured out was that if I took an un-edited image from an <image> element on the page and drew it in its own <canvas>, I could render it by itself at whatever pixel/inch ratio I wanted AND resize the canvas so it cropped off the bottom inch or so to remove the ruler! THEN I could use THAT <canvas> drawing to do a repeat-fill on the shapes in the main quilt <canvas>. WHICH MEANT I could now use images directly from the internet without having to edit them by hand first. WHICH MEANT that I could put the tool online so other people could use it too!
I could make… I could make a… I could make a WEBSITE!
So, I took the plunge and spent real money on a URL and web hosting. I came up with the super creative name of “QuiltMockup.com”, took all my little programs, put them all into one tool (insert sexy coding montage here) and put it online. Finally, other people could use what I made! There were only 9 quilt patterns, but it was out there! I posted it on Instagram, and Tawnee talked about it on Wyldwood’s social media and PEOPLE STARTED USING IT. Can I tell you… It’s a truly wild experience to have people I don’t even know using this thing that I made.
Now my little pet project has taken on a life of its own. I have over 100 patterns in addition to a couple of different tools for mocking up your own quilt patterns. I’ve been adding new features as I get feedback and use the tool myself. I love getting requests for new features and patterns – so please don’t ever hesitate to DM me on Instagram! (No, for reals, please tell me what pattern to add next – I get overwhelmed easily and overthink things and generally have trouble choosing a pattern out of all the cool ones out there to add next, so your requests are super motivational. Also, the current state of the world has me really down in the dumps, and making something for someone else makes me happy.)
So anyways, I’m really happy that my for-funsies project that I poke at when I just need a little puzzle-solving dopamine hit has been so well received. I love hearing from people who are like me and need that extra bit of confidence that a quilt is going to turn out well before cutting into precious fabric. It’s so great to know that I’m not alone!
If you use the tool, let me know! I love seeing your mockups! Tag me or use the #quiltmockuptool hashtag if you post something on Instagram, or if you don’t post it, send me a DM! My IG handle is @quilt.mockup.tool. Did I mention I’m insatiably curious? What are you making? I want to get excited about your fabric choices along with you!
In conclusion: keep being creative, do what makes you happy, be excellent to each other and I’ll see you around the quilting sphere!
