Truchet Patterns: Code Your First Illustrator Script for Easy Generative Tile Art | Melissa Wiederrecht Generative Art | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Truchet Patterns: Code Your First Illustrator Script for Easy Generative Tile Art

teacher avatar Melissa Wiederrecht Generative Art, Generative Design, Creative Code

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

15 Lessons (51m)
    • 1. Introduction

      1:51
    • 2. Before We Begin

      1:24
    • 3. What Are Truchet Patterns?

      2:25
    • 4. What Makes A Good Truchet Tile?

      3:29
    • 5. First Tile

      1:11
    • 6. Script: Copy and Move

      8:33
    • 7. Script: Randomly Rotate

      3:37
    • 8. Script: One Full Row of Tiles

      4:01
    • 9. Script: Full Pattern

      4:43
    • 10. Classic Truchet Tiles

      5:41
    • 11. Merge The Pattern

      5:38
    • 12. Large vs. Small Repeat

      3:01
    • 13. Seamless Diagonal Line Pattern

      4:38
    • 14. Your Project

      0:28
    • 15. Thank you and Next Steps

      0:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

527

Students

23

Projects

About This Class

4f9ea151

Welcome to "Truchet Patterns: Code Your First Illustrator Script for Easy Generative Tile Art"!  Generative art, creative coding??? What's that?

WELL, have you ever wondered if there wasn't some little bit of magic that might make awesome patterns appear instantly in Adobe Illustrator?  Have you seen patterns like the ones decorating this description and thought... wow... how on earth are those made?

It turns out... these patterns are EASY... and can be made in mere seconds with a tiny bit of code.

Code?  What?  You?  Yes!!!  It's not as hard as you think and I am here to hold your hand on the way to writing you first Illustrator script.

f6ef45ec

In this class you will:

  • Gain confidence with simple code
  • Learn to appreciate the simple rules that make awesome Truchet patterns
  • Gain all the tools you need to make original Truchet patterns
  • Develop real (awesome) patterns for your portfolio (and quickly!)

ac6b21d8

We will cover:

  • What Truchet tiles are and how they work
  • How to design Truchet tiles in Adobe Illustrator
  • How to write a simple script for Adobe Illustrator to make a random Truchet pattern in seconds.  (And understand how the code actually works!)
  • Lots of ideas for making new original patterns

ceb09332

This class is for:

  • Intermediate to advanced Illustrator users (or the adventurous beginner)
  • Those who want to try simple Illustrator scripting
  • Those who wonder how such complicated looking patterns are made (they aren’t complicated)
  • Pattern designers who want a new and unique skill under their belt
  • OR the geeky at heart... like me ;)

26aa5496

If you are ready to dive into the world of Generative Art and Creative Coding with a simple script to make Truchet Patterns in Adobe Illustrator, then let's get started right now!


Meet Your Teacher

Teacher Profile Image

Melissa Wiederrecht Generative Art

Generative Design, Creative Code

Teacher

 


 

Have you ever thought generative art and creative coding looked like a fascinating thing to try, but you wanted someone to explain it in an easy way for absolute beginners?

I’m here to help. Nice to meet you! I am Melissa Wiederrecht. I am obsessed with art, mathematics, computer science and most especially anything that combines the three together.

My online graphic design classes will take you step by step through the process of how to make art with code, how to use the Processing language, and how to easily make beautiful digital pattern designs.

Interested to see more of my personal generative art work, progress shots, and pattern design collections?  I post regularly on https://www.instagram.com/melissawiederrecht... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Welcome to this class. I'm so excited to dive into the world of Truchet patterns with you. I'm [inaudible] , generative artist, and surface pattern designer, with almost 20 years of experience with writing code, and I am your cheerleader in this class. Truchet patterns are patterns that look very complex and are infinitely various, but each hide a very simple secret, one tile. When you take one true Truchet tile, rotated around randomly and repeated all over, you get Truchet pattern. In this class we'll discuss what Truchet tiles are and how they work. We will learn how to build some classic Truchet tiles in Adobe Illustrator, and finally, the fun part, we will write our very own simple script to make a random Truchet pattern, in seconds from a square tile. Now, don't freak out and run the other direction. I know writing a script sounds scary, but I've got your back. If you can get past your fear and do this with me, you will gain a step of confidence towards coding in general, and scripting in illustrator. You will gain an appreciation for Truchet tiles and the simple rules that make them. You'll gain the tools, to make infinitely various patterns, and you will make real patterns that you can add to your portfolio. I don't expect that you've ever written code or a script before this class. This class is for intermediate, to advanced Adobe Illustrator users, or adventurous beginners. It's for anyone who ever thought they would someday like to try writing an illustrator script, but didn't know where to start. It's for those who wonder how complicated looking patterns like these are made. It's for pattern designers who want a new and unique skill under their belt and finally, it's also for the geeky at heart, like me. You don't need anything to get started except Adobe Illustrator, and the willingness to try something new and awesome. You're still with me? Let's do this. 2. Before We Begin: In my more recent classes, I've started taking a few minutes at the beginning of my class to attempt to ease the anxiety that new students have towards writing code. If you've been through several of my classes, forgive my rambling, and go ahead and skip on to the next video. On the other hand, if you've ever written a code before and have landed right here with me, then welcome, I'm glad to see you here. It's my goal to help people take those first baby steps toward writing code themselves. I know that for some people, the scariest part about writing code is to find the willingness to try and even believe they can do it. I'm here to say you can do it and it's going to be fun, trust me. I also want to say that, at times during this class, you may very feel that what I'm saying is going right over your head, if that happens, it's okay, don't worry. Just keep plugging away and you are learning even if you think you're lost. Even if all you understand is to take what I type in, then that will be a major win, because if you simply type what I type and run it and it works, you just wrote code and ran it and that is a big deal. On the other hand, if you do understand anything I say on top of that, then, wow, you've learned invaluable skills and you are taking huge leaps and bounds towards understanding code. Either way, I'm proud of you for sticking with me through this rambling about code this far. This tells me you've got this. 3. What Are Truchet Patterns?: First let's try to understand exactly what our truchet patterns. Truchet patterns are named after Sebastian Truchet, who first described these patterns in 1704. Since then, a lot of people have found these patterns really fascinating and done a lot more work with them until they really become a staple of generative art. Pretty much anyone who plays a generative art at some point or another probably makes a truchet pattern because they're just so cool. If you did a quick Google search of truchet patterns like this one I've done right here. You will very quickly notice that truchet patterns are indeed the domain of coders. The way you can tell that is because everything is black and white. My designer friends, it is time to change this. There is no reason that designers should not be making these patterns. They are not that complicated actually when you know how so, let's figure out how they work. I have here a little piece of a very, very famous truchet pattern that you've likely seen. Now you may not have realized this is a truchet pattern. Of course, actually you might not even tell right now know what a truchet pattern is. Let me explain to you. These patterns are made up of a bunch of little tiles that are all exactly the same. It looks really hard to believe right now, but it's true. You look at these lines that wonder across the screen and you think that they're all aligned. Well, actually it's a bunch of little square tiles next to each other. This is what the tile looks like. Every little square of this thing is made up of the same tile or at the same time rotated 90 degrees do you see it. What this means is that to make a truchet pattern, all we have to do is design one little square tile and then rotate it and throw it, integrate randomly on the screen. Great, you may think, but how on earth do you design a tile that makes a cool pattern like that? Well, that's what this class is about. The important things to remember from this video, are that truchet patterns are much more simple than they look. They're composed of square tiles arranged in a grid and rotated randomly in multiples of 90 degrees. The tiles themselves are specially designed to hide themselves so that it doesn't look like it's made out of tiles. The next video we'll talk about truchet tiles themselves and how they are put together. 4. What Makes A Good Truchet Tile?: Now that we understand what a truchet pattern is, let's take a minute to talk about truchet tiles themselves. What is a truchet tiles made out of? Or how was it put together? I'm going to go over these in more detail, but just briefly. Truchet patterns are made out of square tiles that are rotationally asymmetric. They connected themselves in interesting ways. Then of course you take those tiles and rotate them randomly and place them in a grid to get a truchet pattern. What does all that mean? Don't worry, we're going to talk about it. We're going to discuss it right now. First of all, obviously, truchet tiles are square in this class. They can technically be triangles or hexagons but in this class, all the tiles that we're going to be doing with our perfect squares. Always make sure to make perfect squares when you try to make these tiles. They're also rotationally asymmetric. All that means is that if you take the tile and rotate it 90 degrees or 180 degrees or 270 degrees, it looks different than the original. If you look at my examples of tiles on the left, if you see the first tile in each row, it's been rotated 90 degrees and 180 degrees and 270 degrees in the remaining tiles, and you see different things. But if you look at my examples on the right, it doesn't matter how many times you rotate them. They always look the same. The examples on the left make good truchet tiles and the examples on the right don't. Another important thing about truchet tiles is that we want them to not appear anymore. Once you stick the pattern together, you don't want to see that it's made up of a bunch of square tiles. In order to make this work, the tiles had been designed in a very special way so that they fit together with themselves nicely. If you notice in the example on the left, we have already shown you this pattern, but let's look at it again. Once the pattern is put together, you no longer see the tiles. The tiles had been designed such that when they're put together, you can't see them anymore. Verses the tail on the right was not designed to be a truchet tile, and so it doesn't connect with itself nicely and it doesn't make a nice pattern. Don't get worried about how to make these tiles yourself at this point. In this class, we're just going to be building the classic tiles. I might in the future hopefully make a class to teach you how to design your own true truchet tiles. But for now, you don't need to worry too much about this because I'm going to show you exactly how to put these tiles together, the classic ones. Now that is actually it. If you have a tile that follows those rules, that it's perfectly square, it's rotationally asymmetric and it fits together nicely with itself, like the tiles were going to make in this class, that's all you need. You can then rotate them randomly in multiples of 90 degrees and place them on a grid and you'll get a really cool pattern. The script that we're going to write on this class will do that for us. From this video, the important things to remember are that truchet patterns are patterns composed of square tiles that are rotationally asymmetric and connect with themselves in interesting ways. Then the tiles are rotated randomly and placed in a grid. In the next video, let's jump straight into Illustrator and get started making our first simple tile. 5. First Tile: Let's design our first tile. This one is going to be really, really simple. I'm going to make a new document, don't care what size or any of that stuff, just hit Create. Now, of course, we need to start with a square, so you can either use the rectangle tool over here on the Toolbar or just hit M on the keyboard, and if you hold down Shift, you can drag out a perfect square. Again, size doesn't matter, any square will do. Now, give it no stroke, but do give it some nice fill color. Now, we're going to draw a triangle over half of this, so if you hit P on the keyboard, you'll get the Pen tool and you can click the top-left corner, and then, the top-right corner, bottom-right corner, and then, back straight up to the top-left corner. This has made a triangle which you can now fill with a different color, and that's our first tile. If you drag over both of these and hit Command G or Control G on the keyboard, you can group them together and your first tile is done. Save this file somewhere, and then, we're going to go ahead and get started writing some simple code. 6. Script: Copy and Move: Now that we have our first tile ready, it's time to start writing some code, which is completely the fun part, believe me, it really is. Let's do this. Wait a second, what is script and what is code? They're both just two words that mean the same thing. They're instructions that you type in for the computer to follow. What is our goal that we need to accomplish with the code exactly? Let's get that clear first. We have our tile and all this code is going to do is copy in a grid like this in rows and in columns, and then it's going to randomly rotate these. We could technically do this by hand too. But why? Why would you do this by hand when you could do this by code? That's how I think all the time. If code can do it, let's make code do it, because it's so much faster and it can do randomness way better than we can. Look at me, I'm trying to do randomness here and nothing can come out random. It keeps being not random. We're just going to write a simple script that's going to randomly rotate these things 90 degrees and put them in a grid. Now you need to open up a text editor and I literally mean the simplest text editor you can find. So if you're on Windows, open up Notepad and I'm not kidding, open up Notepad and if you're on a Mac, open up TextEdit. Never heard of Notepad or TextEdit before, that's okay. They're just the simplest text editor that comes with your computer. If you don't know where to find them, just search for them on your computer. It's actually got to be these simple text editors. Word won't work, Pages won't work, anything that adds formatting won't work. So even in TextEdit here, we're going go up to format and say Make Plain Text. In Notepad on Windows, you should already be fine. There shouldn't be any rich text formatting going on. But in TextEdit you need to do that. Plain text just means that it's just text without any formatting and rich text means formatted text. When you have rich text, it has code hidden that you can't see behind it that defines the formatting. In order to write code, we need plain text. As soon as you get a Notepad or TextEdit and if you're in TextEdit, you have changed it to plain text, then you need to go save your file right away. I will call mine true shape pattern script. Now, the little bit of magic, the tiny little bit of magic that is going to make this be script instead of just a text file, is that we're going to type.js on the end. Those three little characters tell the computer that this is code, JavaScript code and not just text..js and.jsx are both file extensions that mean this file is a JavaScript file..jsx actually means a JavaScript file specifically for Adobe programs. Illustrator can use either one. I will be using.js, but you could use.jsx and either one works just fine. With that, we'll be able to run it as a script in Illustrator. It's as simple as that. We just have to read the right code now, of course. We're going to start this simply, we're going to read a couple of lines and try it out and then adjust as we go on. That's how I always work and how probably most coders usually work. We just, little bit by little bit, build it up. First we need to be able to access our object in code. What we'll do is we will always select our tile and then run our script and the script will check what is selected and then do stuff with it. How do we get our selected object in code? Well, we'll make a variable code object and we'll set it equal to the app.activeDocument.selection[0]. What does that mean? Two words you're going to hear me throwing out a lot are the word variable and the word function. Variable, you can think of it like a box. It's a place for holding a value. They have names like object or i, and they have values like 10 or a tile in Illustrator. Also, a function is a command that you give to the computer to do something like rotate this object or move this object. It's okay if that's not clear yet, we're going to have lots of examples. Object is just a name that I invented right now that is going to hold what I put in it. It could've been J, it could've been anything. I'm just calling it object and I'm getting the selection on the right here. How am I doing that? App is Illustrator, activeDocument is the document that I have open here, this tile is document, selection is a list of all the selected items because you could have more than one, and then in the square brackets I put zero, that means the first object that's selected. I'm assuming here that there will only be one thing selected. If you have more than one thing selected and you run this script, who knows what'll happen. After this line, now we can use object in our code and do stuff to our object. In particular, what I would like to do is copy it. I'd like to make a duplicate. I'll make another variable called new object and set it equal to object.duplicate. Object.duplicate literally just makes a copy of the object and then now we can refer to that copy as new object in our code. Now, those two lines are actually enough that I can run this script now and see something happen. I saved it and now I'm going to say File, Scripts, Other Script, and I'm going to go find my script that I just saved and I'll hit "Open". Now, it doesn't look like anything happened, but check that out. There's two of them now. So let's adjust our script to make it move the new object over so we can actually see it. Now after we duplicated it, let's say new object.translate and what translate means is move. It's as simple as that and you need to give it how far to move horizontally and how far to move vertically. Well, how far do we want to move it horizontally? Actually, just the width of it. We want to move it just exactly as wide as it is, no matter how wide it is, I don't know how wide it is and I want to have to care how wide it is. I'll say I want to go in the horizontal direction, object.width. I don't want to move at all vertically, so in the second option here, I'll put zero. Let's try it and see if it worked. I saved my script and I'm going to select my object and run it again. Files, Scripts, Other Script, select my script and say Open. That's perfect. If it didn't work exactly like mine for you, go check your code, make sure you typed in everything exactly the way I did. Every single semicolon, every single capital or lowercase letter is important. A couple of things to remember when you're copying code, make sure to copy it exactly. Don't add any spaces where I didn't type any in and don't delete spaces where I left them. Don't make anything that was lowercase capital or anything that was capital lowercase. Don't forget semicolons or other punctuation marks. Just be very meticulous and make sure you get everything exactly the way I did and you'll be just fine. If you didn't get it, check it, make sure it looks the same and try again. If it did work for you, awesome job. You are well on your way to being a coding ninja, and I'm so proud of you, and let's continue in the next video. The important things to remember from this lesson are make sure you're using a plain text editor to write your code. When you save the file as.js or.jsx, you're telling the computer that this is JavaScript code and it can run it as such. To run the script in Illustrator, you go File, Scripts, Other Script, and go find your script. Within the script, what we did is we made a new variable to refer to the selected object. We used.duplicate to make a copy, and we used.translate to move the object. In the next video, we will learn to rotate our tiles and how to do that randomly. 7. Script: Randomly Rotate: In this lesson, let's adjust our script so that our new object is rotated in a random direction. In the spirit of building things up slowly. Let's start by rotating this 90 degrees every time, and then we'll try random after that. New object dot rotate 90, it's as simple as that. Ninety for 90 degrees. Let's save that and run it. Select your objects, save file, scripts, other script, grab your script, there you go. It was rotated by 90 degrees, just like we told it. Now let's make it do random. Now the way I'm going to do this may look a little bit complicated. Let me go ahead and type in the whole thing first, and then I'll explain to you piece by piece how this works. I forgot to mention what we're trying to accomplish here is we want our object to rotate by any random multiple of 90. It could be 90, or 180, or 270, or 360. 360 being the same as zero, of course. How does this code work? In the middle here, the part that says math dot random. What that does is it picks a random number anywhere between zero and one, not including one. This will be a decimal number, something like 0.37543, something like that. Anything between zero and one. Now, if you see aftermath dot random, I'm multiplying times four. Now the number will be anywhere between zero and four, not including four. For example, it might be 3.265. All right? All of that is enclosed in this function called Math dot floor, and Math dot floor just chops off the decimal point off of any number. If it was 3.8, now it's three. If it was 2.1, now it's two. It doesn't round up or down. It just chops off the decimal points. Finally, at the end here, I'm multiplying times 90. That's where I'm going to get my angles. If Math dot floor ended up with zero, I'm going to get the angle zero. If Math dot floor got one, I'm going to get the angle 90. If Math dot floor got two, I'll get 180. If Math dot floor got three, I will get 270. In that way I'm getting a random multiple of 90 as my angle. Now if that math or that explanation was a little bit too much for you, I'm really sorry. It's okay. Just type it in the exact way that I typed it and understand that this is giving us 0, 90, 180 or 270 so that we can rotate by that, randomly. Cool?, All right, so let's save it and go run the script again. We got it rotated in a different direction than before it and nothing blew up. We didn't get any errors. We are doing good. We are on a roll. I'm just going to run mine one more time really fast. You can see that it's going to rotate in a different direction again, and there you go. In this video, we learned that math dot random gives a number between zero and one, a decimal number, not including one. If we multiply that times four, we get a number between zero and four. If we use Math dot floor on that number, it will chop off any decimal places. Finally, if we multiply the result of that times 90, we get the multiples of 90, 0, 90, 180 or 270. Finally, if we use dot rotate on our new object, we'll rotate the object by that number of degrees. In the next video, we'll start building up the grade. 8. Script: One Full Row of Tiles: In this video, let's randomly generate a whole row of our pattern. I'm going to make my title a little bit smaller just to give myself more room. Then let's open our code backup. Now, to make a row of tiles, what we need to do is these three lines where we duplicate, and move, and rotate. We need to do that a bunch of times. The first row, we only need to do once where we get our selected object, but the rest of it, we want to do it a bunch of times. Now, there's a way in code that we can do the same code over and over. Let's call a for loop. Here yet again, I'm going to type the whole thing and then I'll explain to you how it works. Bear with me for a second. All this means is that we want to do the stuff that's within the curly braces here, we want to do it 10 times. The way this works is that inside the parentheses here, there's three things you need to tell it. First, you give it a variable. I'm calling mine i, and I'm starting it out at 0. Then over here on the right where it says i++, what that means is every time this code in the middle runs, i is going to be bigger by 1. First is 0, and then this is 1, and then it's 2, and so on. Now, I'm here in the middle where it says i is less than 10. That means that the code should keep repeating as long as i is less than 10, as soon as i equals ten, it'll stop and keep going whatever is after the loop. Now, there's one more thing we need to change. If I was to run this right now, I would get all of my new objects right on top of each other, off to the right of my first tile here. Actually, let me run that to show you what I mean. I got 10 tiles and they're randomly rotated in and all that, but they're all sitting on top of each other here. I need to have each one move a little bit farther than the last one. Right here inside transit, where we said object.width, that's where we were telling it how far to move. We need to have each object move by width times what number of object it is, and what number it is, is i. The first one won't move at all. The second one will move by the width times 1. The third one by width times 2, etc. Let's save and run that version and see what happens. Cool. That is very close to what I want. The only thing is that this first one ended up on top of my first tile. We can adjust the code a little bit. Instead of just multiplying times i, we'll multiply times i+1. In that way, the first object will be moved by the width. The second object by 2 times the width. The third object times 3 times width etc. I just want to end up with one on top of my original time. Let's try that again. Great. That's awesome. I don't have one on top of my original tile. Cool. We have randomly generated a whole row of our pattern. All we have to do now is make a bunch of rows and we'll be done with our script. In this video, we learned that we can use a for loop to do something a bunch of times in code. I equal 0 means that we're making a new variable that'll start at 0, and it will be the number that we count in our loop with, i less than 10 tells it to keep going as long as i is less than 10, i++ makes i bigger than 1 every time the loop runs. You can use i inside the loop to do things differently each time it's run. Just like we did when we multiplied the width times i to make it each object move a little bit farther than the last one. In the next video, we will finish up our script and we will be able to start making tons of awesome true shape patterns. 9. Script: Full Pattern: All right guys. We're almost done with our script. Last little bit, let's make a bunch of rows, and then we'll have a complete pattern. Now, in the last video, we made this for loop to make one full row. I'm going to put a little line up here. When I put these two forward slashes in front of it, this is a comment, and I can type whatever I want and the code will ignore it. A comment is just basically a note to yourself that Illustrator will ignore, and it's anything you type after the two forward slashes. You can put absolutely anything you want after those two forward slashes that helps you think or helps you remember what's going on, Illustrator will completely ignore it. This part right here makes a row. Now, I want to make a row a bunch of times, and we learned a way to do something a bunch of times that was with a for loop. We're going to make another for loop around our first for loop. If you notice, in this for loop, I'm using j instead of i. I could be using any variable name here. I'm just choosing j this time. The important thing is that it's not i again. It needs to be a different variable, so I chose to use j. If you notice, I made it look pretty much exactly like the first one. I've got the for with the parenthesis and the curly braces around the stuff that I want to do a bunch of times. Wait, what's up with all these i and j crap? What are i and j? They're just really simple short names for the variables that we're using to count in a for loop. You could have technically named them anything like Bob or pizza, but almost all programmers use i, and j, and k, and really short names that are easy to type. Also, it's just good practice to use the same thing every time you make a loop, then it's really easy to remember that, "Oh yeah, i is the thing that I'm using to count in my loop and not something else." This for loop means do the stuff inside it 10 times, so make a row 10 times. Now, we actually do want our rows to move vertically. Before, we had them not moving at all, but we want each row to be a little bit farther down than the last one, so we're going to move it by the object's height times j plus 1, j being the counter of which row we're on. It's the counter for that outer for loop. Let's save that and try it. Select our tile and save files script, so this script, final script. Again, and wow. I did not see that coming. I did not expect it to go up. All there enough, I think in Illustrator, higher numbers mean up. Go figure. We can adjust our scope a little bit to make it go down. Now, if we just put minus in front of how far we're moving vertically, it will move in the other direction, so that should solve our problem. Let's try it. We got a full true shape pattern with one click. What we've generated here is actually a complete seamless pattern. If I select all of this generated part down here and drag it up under the swatches, I could use it to fill an object. I'm just making a new very large circle and clicking on this watch that I dragged up here, and it fills it in seamlessly. Awesome job if you made your script and it's working. Now, we need to move on to playing with different tiles. Every true shape had in is built an exact same way with the exact same script, so we really don't need to adjust our script anymore. We can just play around with different tiles and see what kind of patterns they make. In this video, we learned that we can make another loop around the first loop to make a bunch of rows, and the important thing to remember is to use a different variable name. We use j in the second loop, and we can change our y-value by using the height of the object times j. Also, I didn't show you this, but you could change the number of times that the loops run. We had i going to less than 10 and j going to less than 10. You could change 10 to some other number and make a bigger or smaller pattern. As your instructor, I declare that that is your homework. Go try changing those two numbers to make a two-by-two, and how about a 12-by-12 pattern? Should be simple enough. I'll see you in the next video. 10. Classic Truchet Tiles: In this video, I'm going to walk you through how to build the most famous and common Truchet tiles. As always, we're going to start with a perfect square, so you can get the rectangle tool by hitting M on the keyboard and then hold down Shift, while you drag out a perfect square. Give it a fill color but no stroke color. Now hit L on the keyboard to get the ellipse tool and what we need to do is draw a circle the exact same size as our square. So I wait til it clicks into the corner and hold down Shift, and then click in another corner down here as well. Now for the circle, we actually want no fill, but we want a stroke color. We're even going to go make that stroke with the wide. I made mine a hundred points. Now I'm going to grab the center of the circle and pull it up, to snap into the exact top-right corner of my square. Then I'll hold down Option, so that it makes a copy, and I'll drag the copy down to the bottom left corner. Now I'm actually going to copy what I've made so far, so that I can use it again for another design. I'm going to select all of this and just group it with Command G and then Option click it to make a copy, and drag it down out of the way. Then I'll just lock it and hide it so I can work with what I'm working with. Now I need to convert these strokes and the circles to fills. The way you do that is select the circles, and then go Option, Expand and select Expand Stroke. That has now converted my strokes to fills. I'm going to select everything, and hit Shift M to get the shape builder tool. Then I hold down Alt while I select these parts of the circle that are outside the square to delete them. Finally, if I select everything and hit Command G and group it, this tile is ready. If I shrink it up, I can run my script on it. Let's build another one. Let's open up that artwork that we copied over and hid before. We'll ungroup it, Command Shift G to ungroup. Now we can select these circles and instead of putting a stroke, we will take off the stroke and put a fill on them. Then we can select all of that again, and hit Shift M for the shape builder and delete the parts of circle that are outside. Here we have another tile we can try. Select it all and hit Command G to group it. Make it a lot smaller, and try your script on this one. I'm going to group all this one together and shrink it and move it out to the side, so I can see what I've made so far. While I'm at it, I'll remake the first pattern again, so I can do the same. I'll group it, and make it smaller and move it off to the side. Let's try another one. I'll make another square. Now this time, I'm going to make a circle that is twice as big as my square. I'll start in a corner, and I'll hold down both Alt and Shift and drag out the circle, until my mass hits the complete opposite corner. I will fill this circle with a different color and select both the circle and a square and hit Shift M on the keyboard, and while I hold down Alt, click this part of the circle that's outside the square, just re-coloring mine really fast, and then I'll select it all and hit Command G, and now we have another tile to try. Make it smaller and go run your script. Love this one personally, I think it looks really cool. The last tile I'm going to show you how to make is actually just a line. I know I told you they're all in squares and this technically is in a square, we're not just actually drawing the square. If you go to the line tool and hold down Shift while you drag the line in roughly a diagonal direction, it'll hold it to 45 degrees. You're going to want to give this line a stroke and a quite thick one, so you can see it really well. Then give it round cap and corner and then shrink it up quite a bit, then with just that line selected, go run your script. With that, I hope you're starting to see the realm of awesome possibility that can be accomplished with this script. It's definitely your turn to go play now. In this video, we have seen how to put together four classic Truchet tiles in Illustrator. We're actually getting close to being done. I have a few more things to show you, but you can also go ahead and start playing by yourself, to see what you can come up with. 11. Merge The Pattern: In this video, we're going to learn how to merge all the separate tiles of your pattern altogether into one pattern. Now, our script, of course, outputs all these separate squares and even though our pattern looks like it all fits together, like these blue lines look like they all go together technically they are separate objects. We would like to be able to merge them together. Now, the way we have this script written right now, it's actually quite difficult to close these lines. I mean sure it could be done, but actually if we just make a tiny little adjustment to our script, it's going to make it very easy to do this. Let me first show you what would happen if I tried to merge this the way I like to do it without adjusting my script. What I like to do is ungroup all of these tiles, so I'll select them all and hit Command Shift G and then I'll select just this light blue background color and hit Select, Same, Fill Color. So what that has done is selected all of the light blue part, the background, but not the foreground and I don't want to select this tile over here. Now, if I go to the Pathfinder and hit Merge, merge is supposed to stick everything that's next to each other that's the same color together. But look at these blank lines it has left out. It hasn't caught everything that's supposed to be overlapping and I don't know why and it's really annoying, but it's okay, we can fix this. Also, the same thing will happen if I select all of the lines in the front and try to hit merge right now, it just wouldn't do a very good. So we can fix this by changing our script just ever so slightly. What we're going to do is have all the separate tiles overlap each other by just one point. It will be small enough that we won't notice it with our eye but big enough that Illustrator can see that these things overlap and therefore it can merge them together. Now do watch this carefully because it's a little bit subtle. I'm putting a left parenthesis before object.width and then I'm going to put a right parentheses after it and inside the parentheses I'm going to change it to object.width minus one same thing for object.height. I'm putting the whole thing in parentheses and putting minus one with it. It's hard to explain with words, so just make sure you look at the code very carefully for all the parentheses and everything in the right spot. All that I've done is told the script when it moves each tile towards place, instead of moving it by the width and the height times whatever, I'm going to move it by the width minus one times whatever and the height minus 1 times whatever. So this will end up causing our tiles to be overlapped by one point which will allow us to merge them easily. So carefully make these changes to your script and let's go back and try it on some tiles. So go ahead and run your modified version of this script on a tile and if you select all your tiles now and zoom in really close to these lines. If you zoom in close enough, you'll see that they are overlapping by one point which is perfect. Now let's merge the pattern together. The way we do this carefully, let's move this original tile out of the way, select everything and ungroup it with Command Shift G and then select the background and go Select, Same, Fill Color. If you hit Shift and hit the fill color for the original tile, it'll unselect it. Now go to the Pathfinder and hit Merge and you'll see that now we have a nice solid background. If you hit Command Shift B, it'll send it all the way to the back and if you open up your Layers, you can lock that background now. While I'm at it, I'm going to lock my original tiles so I don't mess it up. Now I can hit Command 8 to select everything that's not locked, which would be just my lines on top and now if I go hit Merge in the Pathfinder on those, it has now merged all those lines that should be connected to themselves together. Now it made a group, so if I just ungroup it now Command Shift G, I can get all these separate lines individually. Now I'm going to undo to stick them all back where they go and finally, I'm going to unlock my background layer and it select all the lines and the background together and group them up and now that is a c mos pattern tile that I am proud of. It connects to itself in a way that makes sense. In this video, we have learned how to adjust our script to make our tiles overlap just slightly so that we can merge them together and the way to do that is to ungroup everything and select each color, everything of each color individually, and then hitting Merge in the Pathfinder. In the next video, we'll discuss the different effects you can get by making a large repeat versus a small repeat. 12. Large vs. Small Repeat: In this video, I'm going to show you the effect of using a large repeat versus a small repeat. What I mean by a large or a small repeat is just the number of Trisha tiles that are stuck together. In this example here, like in all of them we've done so far, we've generated 10 tiles wide and 10 tiles tall, and it looks highly random. Within those 10 tiles, you don't see anything repeat. As I've shown you before, you can take that 10 by 10 block and drag it up into the swatches and fill some object with it. When you do that, it's hard to see the repeat at all. Which is great. That may be exactly what you're going for, but you do have another option that I'd like to show you here. If you were to take a very small number of these tiles, for example, this two by two right here, and make a swatch out of them and fill another shape with that swatch, you can notice a much smaller and more regular type of pattern. I could've just generated two by two, or I could generate this big 10 by 10 and then grab small sections out of it like this. I'm grabbing small rectangular sections and dragging them up into the swatches and filling things with them. You'll notice that these patterns are way more regular but they're also completely infinitely various. You could make so many different patterns just by choosing different small sections of a big pattern like this, or generating small sections. Also, while I'm not going to show you how to do this in this class, there's nothing stopping you from taking your tile and sticking interesting swatches together by hand. For example, you could take that tile and stick two of it next to each other that look a certain way that you like and turn it into a swatch as well. You could do that as well. But in this class, we're focusing on what gets generated automatically by our script. So play with this, generate a pattern and go grab small sections of it, rectangular sections, and drag them up into those swatches and fill shapes with them and see what kind of interesting patterns emerge. Don't forget, if what you're after is something that looks very random, you can always generate a big 10 by 10 or even larger, and use that as your swatch as well. Don't go too big. Anything larger than say, 15 by 15 or 20 by 20, it might freeze up your computer, so don't do that. In this video, we've learned about the effect of using a large repeat, for example 20 by 20, versus a small repeat, for example two by three. A large repeat will look very random and it'll be hard to pick out the repeat, and then a small pattern, it'll be very regular, but also very interesting. Both are interesting and valuable, so go ahead and play with both. 13. Seamless Diagonal Line Pattern: Let's return to that diagonal line pattern I showed you how to make a couple of videos ago to address a little issue you might run into. Now remember, I've shown you lots of times so far that you can take any one of these generated patterns and just drag it into the pattern swatches, and you'll have a seamless pattern, yeah? I'll do it again really quick in case you have not gotten tired of seeing that yet. I'll drag out a shape and fill it. Oops, not at stroke. Fill it with the pattern, and you have a lovely, seamless pattern that you cannot see the edges of, yes? Okay. Now this other pattern I showed you how to make with the diagonal line, you can also kind of do that. But if you do that, you'll see something a little funny going on in the pattern that fills your object. So let me show you. If you select all of this pattern and drag it into the pattern swatches, and I'm going to just move it out of the way here, and make a circle, and now I'm going to fill it with my pattern, you'll notice along the edges of my tile, things aren't lining up quite like I expected. You can see the edges of the tile because the strokes are not coming together on the edge. I'm actually going to zoom out on this pattern a little bit to make that even clearer. If you hit S for the scale tool and then hit Tilde and Shift, you can drag it as well, and you can see the edges of this swatch. It looks like little squares. Okay, so the way to fix this, I'm going to delete everything except just my little line here for a minute. In order to make this work, I actually need to make sure that this line is some size that I know what it is. I'm going to make mine 50 by 50 because I need to do just a tiny bit of math to know the size of my swatch later. So I make mine 50 by 50, and then I'll go run my script on this line again. Okay, so now I'm going to move this original line out of the way and select everything and drag it up into the pattern swatches and I'm going to fill an object with it. Actually, I'm going to group it, move it out of my way, and now I'm going to fill an object with the pattern, and I can still see those lines. But now, what I can do, double-click on this swatch and it'll open it up in the Illustrator Pattern Maker. Now that we're in here, if you go look at the edges of this tile here, you can see what happened, the reason we're seeing these lines. Illustrator chose the edge of the stroke of our line to be the edge of our pattern and not these endpoints. If I had chosen the endpoints, this would have tiled seamlessly. The endpoints would align with each other across the edge of the tile. But it chose the edge of the stroke. So all we need to do though to make this seamless is adjust the size of our tile to match those endpoints. Now, let's think about this for a second. Our line was 50 by 50, and we generated 10 of them. So a good first guess for a good tile size would be 500 by 500. So if we try that, it's closer but it's not quite there. The reason being, remember a few videos ago, we actually adjusted our script to make our tiles overlap by one point. So we made our line 50 by 50, but after they overlap, basically, it's 49 by 49. So 49 by 49 times 10 of these things across, and ten down, that makes for 490 by 490. So if you adjust over here, the tile to be 490 by 490, now you can no longer see those lines in between the squares. Now I can close the Pattern Maker by hitting Done at the top of the View Window here. The fill in our shape will have automatically been updated and we no longer see our line. You can zoom out on your pattern by using the Scale Tool and then holding Tilde and Shift and see your beautiful seamlessly repeating diagonal pattern. In this video, we learned that to make the diagonal line pattern be seamless, you just need to adjust the size of the pattern swatch to be a little bit smaller in the Illustrator Pattern Maker. For a 10 by 10 pattern with 50 by 50 lines and a one-point overlap, the swatch should be 490 by 490. 14. Your Project: It's time for you to make your project now. Hopefully, you've been following along in class to write the script and make you tiles. If you haven't, go back and do that now. Try out some of the classic truchet tiles like I showed, but also try to be a little creative and see what you can come up with as a square tile to try your script on. Don't forget to post the project for me and everyone else to see and then optionally, you could also post it on Instagram and tag me so I can see it there as well. 15. Thank you and Next Steps: If you've made it this far through the class, thank you so much for watching and I hope you've learned a lot and enjoyed it. If you did, go ahead and go check out my other classes on Skillshare where I teach lots of other aspects of generative art and pattern design and also be sure to follow me on Skillshare to be notified when I publish new classes. If you enjoyed this class, please consider leaving a review and a project. It really helps my classes and me get found on Skillshare and that's it. Thank you very, very, very much.