RSS feed for Algorithmic Design

Introduction

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Unleash your creativity and discover the fun of designing with code in this free OpenLearn course, Algorithmic Design.

In this hands-on course, you’ll learn to think algorithmically and explore the aesthetics of code through playful experimentation with JavaScript and the p5.js library. You’ll engage with design ideas such as repetition, modularity, and serendipity to generate unique, personalised wallpaper patterns.

By the end of the course, you’ll have created beautiful, algorithmically generated wallpaper that showcases your new design skills – and adds a personal touch to your home.

It will be useful if you have some graph paper for drawing your tiles and access to an A4 printer (black and white or colour) to print out your wallpaper design.

This OpenLearn course is an adapted extract from the Open University module T190 Design practices. If you enjoy this introduction, consider enrolling in the full BDes qualification. It’s designed to nurture your creativity, develop your problem-solving abilities, and help you turn ideas into action. You’ll graduate with a respected degree, a professional portfolio, and the technical and creative confidence to launch your design career.

Learning outcomes

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

After studying this course, you should be able to:

learn core design skills that allow you to experiment and play with algorithms
learn how algorithms can be used to create visually compelling outcomes
develop your creative judgement regarding the use of repetition, serendipity and modularity as part of your design process.

1 Introduction to algorithmic design

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Figure 1

Show description|Hide description

Three graphic images of a pattern of dots, one in white, one black and white, and one in colour.

Figure 1

In the emerging, highly programmed landscape ahead, you will either create the software or you will be the software. It’s really that simple: Program, or be programmed. Choose the former, and you gain access to the control panel of civilization. Choose the latter, and it could be the last real choice you get to make.
(Rushkoff, 2010, pp. 7–8)

This course explores how you can use computers and algorithms to design in a creative way.

Let’s be clear, we are not just talking about using computers for familiar tasks like editing photos. In this course, you will be going deeper into the logic of computation and getting your hands dirty by tweaking and experimenting with algorithms to create designs.

But what is an algorithm? An algorithm is just a set of instructions on how to carry out a task. For example, a recipe is an algorithm with a sequence of steps:

Mix butter with sugar.
Add vanilla extract.
Add eggs (one at a time).
Add flour with the baking powder and milk.
Preheat oven to 175 °C.
Add the batter into the cupcake liners.
Bake the cupcakes for 15-20 minutes.
Let them cool, add icing, and serve.

When a computer encounters an algorithm, it progresses through a sequence of instructions to generate an output, such as the cupcake recipe above.

In the present day, algorithms have become ubiquitous, seamlessly integrated into every aspect of our recreational and professional lives, whether or not we directly engage with them. Algorithms run cars, traffic lights, and monitor air quality. Algorithms power the banking system and keep dialysis machines running. When we are online, the algorithms from companies such as Google, Amazon, and Facebook/Meta let us find information, recommend products and provide news based on what we like and who we are.

But why should designers care about algorithms? Well, today design can’t be separated from computation. Algorithms can be used creatively to generate new ideas, shapes, and patterns. In today’s design industry, computers are an essential tool for almost every designer, regardless of whether they are creating buildings, computer games, or working on tapestries and theatre lighting.

In this course, you will be using computation and algorithms not just as tools, but as a way to think about design. The logic of algorithms is different from human logic and processes. Thinking with algorithms changes how designers work. Algorithmic ways of thinking have spawned algorithmic art as well as computer games and provide new ways for people to interact. They have transformed traditional analogue forms of art and design, such as painting, sculpture, and drawing, to introduce new kinds of visual complexity and textures. By thinking and designing with algorithms, this project will give you a glimpse of the underlying mechanism of the world, and propel you to the cutting edge of where the design discipline is heading.

Figure 2 Algorithmically generated wallpaper pattern

Show description|Hide description

The image is divided into two halves. The upper portion features an algorithmically generated wallpaper of angular red, green, yellow, and blue geometric shapes that are interlocked to create a sequence of repeating patterns on the wall. The lower half of the image shows a domestic setting, including children’s toys and a shelving unit.

Figure 2 Algorithmically generated wallpaper pattern

At the start of the course in Section 3: Playing with Code, you will learn some of the basic principles and skills of algorithmic design such as how to draw shapes and control colour by tweaking some code examples.

In Section 4: Making Tiles and Section 5: Making Patterns, the skills will take you deeper into programming by giving you opportunities to design your own algorithmic tiles and then arrange them into a pattern. As you work through the skills, you will generate ideas that will contribute to your final wallpaper design.

In Section 6: Identify a place for your wallpaper design, you will concentrate on creating an algorithmic wallpaper design for your own home.

Across all sections, you should:

keep a codesnippet text file where you will collect the code for your tiles

2 Algorithmic Design

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Why learn algorithmic design?

What kind of design most interests you? It may be that you have never thought that algorithms could have any part to play in design. However, these ways of making and thinking about design are becoming increasingly important in the design world.

Watch the following interview with Aleksandra Jovanić to get a sense of how a contemporary artist and designer works with algorithms.

Download this video clip.Video player: Video 1

Video 1 Design practioner interview: Aleksandra Jovanić talks about working with algorithms

Show transcript|Hide transcript

Transcript: Video 1 Design practioner interview: Aleksandra Jovanić talks about working with algorithms

[MUSIC PLAYING]

ALEKSANDRA JOVANIĆ

My name is Aleksandra Jovanić. I’m Associate Professor at the Faculty of Fine Arts in Belgrade, Serbia. I teach at New Media department. And actually, my set of subjects is called Technology of New Media.

[MUSIC PLAYING]

On a day-to-day basis, I’m working as a professor in the faculty, but also I’m working on my art practice. I see myself recently as mostly doing generative art. That means I’m, in part, coding systems that, when put in motion, give us various interesting and exciting results. In other words, I’m writing code. And code can be executed. And most of the time, code is making some kind of visual output. Sometimes, it’s not only visual output, it can be also audio or the combination of audio-visual output.

[MUSIC PLAYING]

My most recent project, actually, the project I’m still working on, is an exploration of old apparatus or device called phenakistoscope. And it’s considered one of the first devices that allowed us to see moving images. And now I’m exploring how new media can work with old traditional devices.

So I’m making through code phenakistoscopes. I’m making colourful discs that when put on record player through a camera with a fixed frame rate can be seen as continuous looping animations. It has a history of traditional media in it. And it can be done by hand, like with traditional animation when you’re drawing each frame.

Here is the same process, but with using code, I can generate really fast different variations of the same concept. I’m adding a lot of randomness inside of these phenakistoscopes. So with each reload, I’m getting a different disc, different animation. So it would be labour hard to draw each disc by hand. It could be done. But this system, generative systems, give us a lot of exciting results. By incorporating randomness, we’re always getting different results and, sometimes, we get unexpected results depending on the constraints we are putting inside of the system.

[MUSIC PLAYING]

So for years, it was influenced by technology or the devices, machines, artists used. And for years, abstract geometry was dominant type of visualisations. So now I see people are more exploring figurative, tactile designs, designs that have-- that simulate more nature or more traditional mediums. So maybe this field is becoming more recognisable or more dominant inside of generative art, but I don’t see that abstract or geometric style is going out of style. So basically, it will stay. So this might be something for the future.

End transcript: Video 1 Design practioner interview: Aleksandra Jovanić talks about working with algorithms

Download

Video 1 Design practioner interview: Aleksandra Jovanić talks about working with algorithms

Interactive feature not available in single page view (see it in standard view).

Highlights from the interview

Here are a few points from Aleksandra’s interview to consider.

Aleksandra uses computer code to create systems that produce visual and audio outputs.
Her work combines historical influences with modern programming techniques. She draws inspiration from old media devices, such as the phenakistoscope, to reinterpret them via code. In this course, you will adopt a similar approach, using the history of computing and patterns to inspire your creation of modern algorithmic wallpaper.
Aleksandra’s creative process involves using randomness within defined constraints. This allows her to generate many variations of a design, resulting in outcomes that are exciting and surprising even to her. This algorithmic way of designing with variability and randomness is something you will explore throughout this course.
Aleksandra observes that algorithmic design is starting to include natural, tactile, and figurative designs as well as abstract geometric patterns.

This course involves learning to play with algorithms by tweaking code. But it will not attempt to teach you to program! That is too big a task for this short course, but if you are interested in further developing this skill, links will be provided to appropriate resources.

In this course, you will learn how to tweak code to make it do what you want. You won’t necessarily understand all the code you will be working with, but, along the way, you will get a feeling for the potential of algorithmic design and learn some of the fundamental principles of algorithmic design.

This course should help you to look at all kinds of design in a new way, and might help you with many design problems and interventions. While people sometimes claim that computers take control away from us, computation actually opens up many new possibilities. Working with algorithms means that designers have to make more – not fewer – choices!

Figure 3 The complex curves of Zaha Hadid Architects’ Heydar Aliyev Center in Azerbaijan were only possible using algorithmic tools

Show description|Hide description

The image shows an external view of a building which has an intricately curved roof that could only be designed using algorithmic tools.

Figure 3 The complex curves of Zaha Hadid Architects’ Heydar Aliyev Center in Azerbaijan were only possible using algorithmic tools...

A major part of algorithmic design involves developing judgement and learning how to make aesthetic and pragmatic decisions as a designer. So, learning about algorithmic design will help you to develop your personal judgement about what are good and bad uses of algorithms – what works, and what doesn’t.

Since 2022, the appearance of AI tools has radically transformed graphic design, illustration, and architecture through the use of automatically generated images and layouts. Figure 4 looks like it was drawn by hand, but it was actually generated by artificial intelligence (AI) via the software tool Adobe Firefly. It was created using the text prompt: ‘What does algorithmic design look like?’. Acquiring an understanding of the logics and principles of algorithms will equip you to navigate the practical and ethical design challenges that AI tools will bring. Crucially, you will begin to understand some of what goes on behind the scenes when designers use ready-made design tools.

Figure 4 An AI-generated idea of what algorithmic design looks like

Show description|Hide description

This computer-generated image shows a person standing in a room surrounded by colourful red, blue, and yellow rectangular shapes that cover all the surfaces. At the end of the room is a glowing white circular light.

Figure 4 An AI-generated idea of what algorithmic design looks like

Even if, in the future, you don’t intend to work with computers in such an in-depth way, having knowledge of these skills is still useful when working with other professionals, such as programmers and engineers, who you are likely to work with when collaborating on large design projects. Understanding how algorithms work gives you an appreciation for the technical aspects and roles in design, and the labour that takes place behind the scenes in complex design projects.

3 Playing with code

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

The aim of this course is to Design algorithmic wallpaper for a place in your home. You will be playing with code to make algorithmic tiles and then arrange those tiles into a larger wallpaper pattern (see Figure 5).

Figure 5 Six algorithmically generated wallpaper designs created using code

Show description|Hide description

The image shows six algorithmically generated geometric wallpaper patterns.

Figure 5 Six algorithmically generated wallpaper designs created using code

In this project, you will be using p5.js, which is a programming library that uses the JavaScript programming language and syntax. There are many different programming languages available; for example, you may have heard of Python, Java, or C++. Every language has different strengths and limitations and they have a slightly different syntax – meaning the grammar of commands that they use.

Figure 6 The logo of the p5.js programming language

Show description|Hide description

The image shows the pink letters of the p5.js logo.

Figure 6 The logo of the p5.js programming language

We have chosen to use p5.js because it is based on Processing, an open-source software, which was developed for artists and designers for its ease of use and its ability to quickly get visual output onto the screen.

Here is a talk by Lauren McCarthy, one of the founders of p5.js, about the origins and spirit of the p5.js language. It is a lovely video, but you only need to watch the first 14 minutes or so.

Download this video clip.Video player: Video 2

Lauren McCarthy’s 2015 talk at the OpenVis Conference in Boston about her journey in developing p5.js and what she has learned from working in processing.

Video 2 Lauren McCarthy discusses the making of p5.js

Show transcript|Hide transcript

Transcript: Video 2 Lauren McCarthy discusses the making of p5.js

LAUREN MCCARTHY

What I want to talk about today is p5.js. So P5 is a project that I’ve been involved in for about the past two years. And I think when you see these tools that people make, or these libraries, I think there’s different reasons for doing them.

And sometimes it’s like, there’s something you think just needs to exist and it doesn’t, and it would make your life and everyone else’s lives so much better if it did, and so you just go and make it. Or maybe you’re just awesome at something and you’ve made something awesome and you want to share that wealth and that cool thing with everyone else so you make a tool kit. Or maybe it’s some part of your ongoing research.

And these are all great reasons to make toolkits, but it’s not really the reason that I got involved in this project. And, in fact, I didn’t really ever mean to do this. I guess at some point I did maybe. But anyway. So what happened was, I was a couple of years out of grad school and I was working at Tulsa Limited, as Irene mentioned.

And I was making some of my own artwork. And I was using a lot of open-source tools. And it sort of occurred to me that I would kind of like to contribute and give back a little bit, and work on some of these tools. So I started trying to do that. I tried to join some mailing lists or figure out how I could help.

And the response I got a lot of times was kind of like, it’s too complicated to explain to you, or it’s too hard. Maybe, just, like, answer some questions on the forum. Which is a great thing to do, but it’s not what I wanted to do at that time.

So I kind of gave up. I thought, if I’m really going to get involved here, it seems like I’m going to have to really elbow my way in. And that’s not really my personality. I’m not – I don’t really force myself into things like that, at least not in social situations.

And so I kind let it go. And then a couple of months later I met Casey – or I ran into Casey Reese at a conference. And for those of you that don’t know, Casey, along with Ben Fry, created this tool called Processing, which they started working on in 2001.

And it’s a Java-based tool kit whose goal is to make coding accessible to artists and designers and educators and beginners, and also to start to introduce visual literacy to programmers. So this tool has been widely successful, and it’s been going on now for nearly 15 years, and is taught in academic programmes in terms of art and design, but also even in some engineering programmes today.

And so it looks kind of like this. So you’re dealing with Java, but you’re not immediately thrown into Eclipse and figuring all that out. And you can really quickly get something cool onto the screen without having to jump through all the hoops that you normally would with Java, just to get a rect to show up. So this was exciting and it was approachable.

And so anyway, I was talking to Casey and I was kind of mentioning my interest in getting involved somehow, but finding it difficult. And I was saying, I wish there was something I could do about this lack of diversity in these communities. But I don’t feel like I want to go start a woman coding meetup, although they’re great. It didn’t feel like my thing. And I didn’t feel like I wanted to – I didn’t feel like I was going to be an activist or an advocate or someone that’s speaking about these things. And I said, I don’t know what to do.

And he said, well, maybe you don’t need a big plan or a scheme. Maybe if the opportunity arises, you just take it to do something, contribute something. And you can just be one more woman that’s involved and go from there. So I thought, OK, yeah, if the opportunity arises.

And so of course, it did a few days later when he wrote me and said, so, do you want to work on processing? And I couldn’t really say no at that moment. So what we decided is that I would be a processing fellow, which meant, for three months I would work on something related to the project. And at that time, I was really excited about JavaScript, because I had just learned how to write my first JavaScript programme.

And so for some reason the Processing foundation thought I would be like the perfect person to re-imagine Processing for the web. And it was not meant to be a huge project. It was just three months, do some experimenting, make some little prototypes and it’ll be some research.

So this was cool. This was it. I finally had my chance. I was going to do something. And so I quickly got started spending the next three months doing absolutely nothing, because I didn’t know where to start and I was scared. And I barely knew JavaScript. I didn’t really know Processing that well, even. And I didn’t know how to think about making a tool or a library or how to bring two different languages together.

And so I mostly spent that time just sending emails, explaining that I needed more time and making excuses. And finally Casey said the same thing. You know, you don’t need a whole plan. Why don’t you just try and do something and do it by next week if you can.

[LAUGHS]

And so I did. And as soon as I just got down to it and stopped being so scared, thinking about the size of this imagined task, I found it was pretty easy, actually. If you don’t know very much about JavaScript, it’s not too hard to write some functions, because you’re not thinking about how to make it perform well or document it or fit together or be extensible.

So I just started implementing some of these first processing functions, like setting the background, drawing an image to the screen, setting the size of the canvas. And so this was exciting, and it was kind of fun, and it was an experiment.

And then I linked up with Evelyn Eastmond. And the two of us would sit around and drink champagne and work on this tool. And we were both going to teach a class at RISD, Intro to Programming. And so she said, why don’t we use this tool? And I thought, what could go wrong with that.

So it was very in progress. You know, that was like the alpha, alpha, alpha. And we just kind of went in there and wrote on the whiteboard, OK, instal Sublime. Go here. And we didn’t have all these things like books to teach with or online materials or forums or documentation or a working library. But I think that they understood the kind of spirit of it.

And so this was our syllabus, or similar to our syllabus. And we always included this disclaimer slash invitation, which I don’t know if anyone felt like it was a very cool invitation. But it basically said, like, this might not work, have fun, but get used to it. And once you get used to it, it will be even more fun.

But I think that they understood the spirit, that it was an experiment, and that it was exploratory. And the work that the students made with it really captured that. They really made things that showed that they were just as fearless, that they were OK with things not working, that they were willing to take risks. And this was exciting.

And so at the end of that semester, we realised that it was becoming maybe more than just a three-month experiment, and that maybe we could take this further. And we got some great help from some of the engineers at Boku, which was awesome. And one moment I remember, when we spent a couple of days there, just working with people, and we sat down with Ben Ullman, and he offered to do a code review for us. And I think if I knew then what I know now, I would have been, like, mortified to show this code. But I didn’t. So I was like, oh, here it is.

And he looked it over very seriously and then came back and said, so, you might not want to put all the source code for your library into one file. You might want to develop some guidelines around spacing and equal signs, et cetera. So we looked all these things up. I learned about Grunt. And we started, kind of this step forward from taking this from a prototype or a proof of concept to something that could be a little bit more.

And the whole time we were kind of like, what are getting into here? It wasn’t ever like, OK, we’re going for this, we’re doing this. But we started getting some support from ITP. Dan Shiffman was very excited about it. He’s another one of the professors there. And we got some students working with us last summer through Google Summer of Code. So this was Sam Levine working on the IDE. This is Scott Garner, who worked on some of the intro materials that I’ll show in a moment. And Jason Siegel, who has done a lot with the sound.

And I’d have these meetups at ITP every two weeks. And basically a group of people would assemble and then look at me as if I had some idea what was going on and I would pretend like I did. And it was terrifying. And I kept doing this. And then it started to get less terrifying and really cool. And now we have a group of about 20 people that get together every couple of weeks and are kind of working independently on this.

So that’s kind of the – that’s the origin. I think the cool thing was that we’re all learning together and we’re making together, and nobody in this room was a pro, but we were OK, kind of collectively getting on and saying we’re going to try to figure it out. And ITP was on that mission also.

So what is P5? I guess I wanted to show – so we launched it. We made this kind of really goofy thing, and I just thought I would show a little bit of it. Hopefully it’s not too silly.

LAUREN MCCARTHY

Hi. I’m Lauren, and today I’m excited to introduce p5.js.

P5 is a library that takes the core ideas of Processing and brings them to the web, so you can do everything you’ve done with Processing, but do it in JavaScript and some new stuff too. All the examples you see here were made with P5. And at the end, you’ll be able to see how they work. Here to show you some specifics is Dan Shiffman.

DAN SCHIFFMAN

Hi. Thanks, Lauren. Thanks for having me. My name is Dan and I’m really thrilled to be here to talk about some of the features of p5.js with you. So what is this P5 thing anyway, and what are the things you might do with it? Well, one of the core features of p5.js is drawing shapes. If you use Processing before, it’s really just the same. You might draw a circle or a square, a triangle, or a beautiful flower. Flowers are one of my favourite things to draw.

But let’s put the flower aside and let’s go back to that circle. It’s a nice, round circle. How did this circle appear here? A line of code. This line of code. This line of code made this circle appear. And this is the thing you’ll need to learn, this syntax, this way of writing code if you want to draw and design your own shapes.

But the thing is, this is real-time software. This is happening right now. This circle can be interactive. You could click on it, and it will change colour. Go ahead, click on it. Watch it change colour. This is the code that made that happen.

But here’s the thing. This is the thing I’m the most excited about in terms of P5. We are here. I’m here in this web browser. I’m not really here, but you know what I mean, right. So, the web, it’s a powerful medium of communication, and there’s all sorts of things you can do on the web. All the things you can do with the web, you can do with P5.

So we can start adding HTML elements to interact with, like a slider. We can put a slider here. You can slide it back and forth, and you can change this circle’s colour. How did this slider appear? A line of code, create slider. I just – I just really, really love this line of code. And –

[LAUGHS]

LAUREN MCCARTHY

I think we’ll stop there. So one of the lessons I learned is, if you want to do a project like this, it really helps to have someone that’s very excited on your team. So that’s great.

So anyway, that’s how we introduced it. And the idea is that you can use the tools you’re familiar with. So you could use your favourite code editor and your favourite browser and just start making stuff, kind of immediately. And if you’re coming from Processing, it’s very easy to port one to the other. So the language is very similar, although it diverges where necessary.

And we’re starting with the same drawing metaphor. And so this is an illustration by my friend Taewon Choi, who’s making the drawings for the upcoming, getting started with the p5.js book. So this is describing the Create Canvas function, which is kind of your starting place.

And the idea is that it’s not just the canvas. So it’s bringing together JavaScript and HTML5 and CSS and trying to make it so that you don’t have to learn everything about this whole stack when you get started. You can just start playing and then you can go deeper into all of those as you need or as you want.

And so we spent a long time working a lot on the documentation, so trying to make something that’s kind of interactive and self-explanatory so that you can start playing immediately and see how it works. And then also making a lot of examples that work. Just write in the page, and you can play with these things.

And let’s update and see your changes happen without having to download everything and set it all up yourself. And then if you’re kind of interested in it, then you can grab that code and drop it into your browser. So trying to make it so that you don’t have to wade through Stack Overflow or some very complicated reference or documentation.

And then there are new things we have to deal with, so asynchronicity and callbacks. And so there’s now a method – like, Load JSON from Processing has the ability to take a callback and to deal with that data. But then we also have other things like – there’s kind of two options. So you could use this preload function, that’s kind of like a promises solution that you can first just call Load JSON like you’re used to and then use the data later on in your setup and draw functions.

We felt like Touch should just work out of the box, because it’s so easy to get it onto mobile, and it’s one of the things we were excited about. And we are making a lot of examples, and really excited about the possibilities of working with WebSockets and connecting with a node server and having networked experiences. So this is a thing that’s not playing.

This is a project by Cavon Verde, where it’s an interactive soundscape, and you play with it on your phone, and then it aggregates everyone’s interactions into this digital mural.

And then the other thing is, it should work well with other libraries. So this is the face tracker library. And you can see, you can integrate it right in. And this is kind of like a basic mode. So you just start writing and everything is appended into the global namespace. But then if you want to get a little bit cleaner about it, you can wrap it up into what we call instance mode, so that all the variables are wrapped up in one namespace, and it plays even nicer with other libraries.

And then we’re building some libraries of our own, so ones I have to do with manipulating the dom or playing with sound, and we’re adding some new ones this summer as well.

OK. So I just wanted to try and do a quick live demo, because I thought that would be like the most potentially disastrous thing I could do.

[LAUGHS]

So I’m going to flip back and forth. I hope that’s OK. One of my students told me it gives her a headache when I flip. But I’m under a time crunch, so I apologise for the migraines.

OK. So this is what you would do if you were making P5. I’ve got a bunch of things linked in here. But you link in the library. Here’s my JavaScript file. And the basic metaphor with processing in with P5 is that you have this set up and draw. The things in setup happen once, and the things in draw loop over and over.

And so it’s procedural. It’s not a scene graph model. So you can – it works really well for drawing programmes and things like that. So that’s what I’m going to do today. So I’m just going to make a little canvas. And I’m going to just draw something based on my mouse position, and hopefully that works. OK. Cool. So we’ve got that.

I can make it look a little bit nicer. Switching the colour mode. I’ll set the fill colour to kind of loop around. And then maybe I’ll map the size, instead of just 50, here to the mouse, y. So. Something like that.

OK. So now I’ve got something that looks a little bit prettier. So that’s kind of your basic, Hello World! programme with P5. And then you could get a little bit more into it. So maybe I’ll add in, like an audio input. Let’s say mic equals new P5. And then, let’s see. We’ll just draw this to. And then here, instead of mapping mouse y, I’ll map the mic level. And I’ll also do the y position.

So the mic kind of goes from 0 to 1, but I’m just going to make sure we get all the way there. OK. So, if I did that right. Ah. Ah. Ah! Ah. OK. So, that was fun.

[APPLAUSE]

Oh, thanks. OK. So then let’s add the webcam. So, create capture. And we’ll just grab the video so you don’t hear the echo back. And I’ll set the size to be the same as the canvas. Oops. And I’ll set the position, zero, zero. I’ll make sure this one’s at zero, zero. And. OK.

So now we should have my face in there. Dah. Ah. OK, that’s cool. But it would be cooler if I could draw with my nose. So –

[LAUGHING]

I’ll add a tracker in their tracker. So this is from another library that’s based on Jason Sarri’s face tracker research. And it’s pretty easy to use and pretty cool. So I just pass in, basically, the capture element into this tracker and I initiate it with a model.

And then here I could get the position. So if you look at this library, you can see there’s actually numbers for all these different positions on the face. So I’m going to go with 62, which would be my nose. So something like, get action. And then here, we’ll keep the audio size mapping. But here, instead of this x and y, I could say something like, get the 62 point and get the x and y position. OK. Let’s see. Oh no. Oh, there we go. Hey. Dah.

[APPLAUSE]

OK. Now I feel like I should pass out, but I will just keep going. All right. So that’s the show me. And there’s a whole lot more that you can do. And it’s very fun and there’s lots of cool things. So I just wanted to share really quickly, some of the work that other people are making.

So I wish I could show you these all in the browser, because there’s something exciting about seeing that. But I just made a video, so I don’t have to worry about it all so much. So, just starting out.

This is some student work. So this is from our first Vis D class. And so these students have been programming basically one, two, maybe three weeks. And so they’re exploring transformations, working with different media. There’s artists and designers in the class, and architects. And you can see them each kind of bringing their own excitement to it.

This is a piece by Cavon Verdi, where he searches Instagram as a bot, searches Instagram, finds sunsets, uses P5 to pixel sort it, and then posts these prints online This is by Mark Abbey, playing with emoji.

VOICE

How do we show some enthusiasm?

[MUSIC PLAYING]

LAUREN MCCARTHY

This is a piece by Kate Visuth that was trying to make a more interactive way for people to explore the Cooper-Hewitt collection.

MAN: (SINGING)

What I want, you got. It might be hard to handle. But like a flame that burns the candle, the candle feeds the flame. Yeah. Yeah. What I got, full stop. I thought –

LAUREN MCCARTHY

This is another piece by Mark Abbey, exploring storytelling. So it’s a much longer interactive experience, but I’m going to show you some clips here.

[MUSIC PLAYING]

LAUREN MCCARTHY

And this is a piece by Jason Segel, Michelle Chandra, Pam Lew, and Shiv Schneider.

[MUSIC PLAYING]

LAUREN MCCARTHY

So, yeah. And I’m really excited about the diversity of things that you see. It’s not one particular type of aesthetic or goal or idea.

So what else? So I’m really excited this summer. We have some Google Summer of Code students joining us to work on things like adding WebGL and 3D and Shader support, finally, adding SVG support and export to PDF, better mobile integration with things like PhoneGap, exploring serial communication, OSC so that we can connect to things like Arduino or Connect, better documentation, and adding a gallery finally. So that should be cool.

The other thing we’re doing at the end of May is a one-week contributors conference hosted at the Studio for Creative Inquiry in Pittsburgh. So it’s going to be a one-week conference where we work on all aspects of P5, not just – or including fixing bugs, adding new features, adding documentation, but also things like thinking about outreach, community design, internationalisation, and diversity. And this is something that’s really important to us and really important to me, considering the place that we started with this project.

And so this is open to anyone. You know, we have limited funding to cover travel, accommodations, and food. So if you’re interested, go to this link and let us know in the form. And we’d love to have you join us. There’s no specific skill set that you need to have, just an excitement and interest in being involved.

We’re also looking for companies that might be interested in supporting the event through scholarships for people that want to come or supporting some of our diversity events that we’re planning for the week. So you can also get in touch if you’re interested in that.

So there’s all the technical things, but the thing that’s been really – and maybe this is clear from my talk – exciting to me about this project is the social aspect, and thinking about how to communicate online, how to have these conversations and how to set a tone for the community, how to be hyper aware on these GitHub threads, which is not too hard for me, because I’m very sensitive.

To language that might seem kind of aggressive and understanding that everyone has their own communication style, but together we have to find a way to make sure that everyone can express themselves and feel comfortable doing that.

So I’m really thankful for the opportunity that the Processing Foundation gave me two years ago. They took a chance on me. I didn’t know what I was doing, and they gave me the chance to learn. And I think this is what’s so meaningful to me about this project. And if anything carries on, I hope it’s that spirit that you don’t have to be an expert or a pro or know exactly what you’re doing or have a whole plan. That you could maybe just start doing something and learn along the way.

And so I know there’s still a lot to do for diversity, in terms of access to these tools or having the time to get involved at all. But I think as a first step, we can make sure that everyone that feels interested in being involved, doesn’t feel excluded or afraid or unqualified, but feels invited and welcome.

And it’s really important to me in this project, but I think, like, all of you today, sitting here, seeing all these different tools and frameworks, you know, if you are kind of wondering or thinking about getting into it somehow, that you feel willing to – like you maybe will take a chance. Because I can say that it’s worth it.

And like Casey told me, you don’t need a whole plan. You can just start and try something. And as a community, I hope that we can work together to open up this space so that anyone that wants to can have the opportunity to engage, to be a part of it, to make, to lead, and to learn. Thanks.

[APPLAUSE]

End transcript: Video 2 Lauren McCarthy discusses the making of p5.js

Download

Video 2 Lauren McCarthy discusses the making of p5.js

Show description|Hide description

Lauren McCarthy’s 2015 talk at the OpenVis Conference in Boston about her journey in developing p5.js and what she has learned from working in processing.

Video 2 Lauren McCarthy discusses the making of p5.js

Interactive feature not available in single page view (see it in standard view).

P5.js allows us to embed a code editor into the module website, so you don’t need to install any software on your computer to put your learning into practice. Any p5.js code you create can be embedded in any website, so anything you create in this topic can be shown on your personal website for the whole world to see.

There are many useful p5.js resources online, and the best place to start is the p5.js website. The website has many examples and tutorials, as well as a detailed reference section that lists all the syntax of the language.

There is also a very good p5.js web editor, which gives you lots of space to see and edit your code. You might find it useful to use this editor to work on the code that has been provided for you as part of the learning material, rather than using the embedded code editor.

Throughout this topic, there are some conventions used in the example code which aren’t strictly necessary, but are good coding practice and will help with translation into other coding languages. For example, you will notice that code is indented and that semicolons are frequently used at the end of a line of code, but there are only a few occasions where this is strictly necessary in JavaScript.

3.1 Principle 1: Tweaking code

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Code is just text. It is written in a strange language and grammar – its syntax – but it is still just text. The language and structure are strange because they need to be interpreted by a computer and, despite what you hear in the media, computers are very stupid and can only do what they are told.

As well as the code syntax, there are certain technical terms that you will come across, such as parameters and variables, that have specific meanings when talking about code. Unfortunately, this is unavoidable because there are technical concepts associated with programming that are very distinctive and don’t have common language alternatives. We will try to avoid jargon as much as possible and explain terms as you go through these principles, but you might find that there are some terms that are not explained in enough detail. A good place to start is by searching online, where you’ll find a wide range of tutorials. If you enrol as a student at the OU, you’ll also have access to tutors and subject specialists who can provide additional support.

Initially, you may find it daunting to read a piece of code, but just like any language, the more you look at it and the more you use it, the more familiar it will become. And, just like any other text, code can be edited. The kind of edits you will have to make are tweaks – small changes to the code that have big impacts on what is created.

As you work through the coding activities, you will be encouraged to tweak the text of code inside the p5.js editor frames. Try not to be nervous about doing this; you are in a safe environment, which has been designed to allow you to experiment with what is possible with code. You cannot break your computer, or your network, or the internet by editing the code in these exercises! The worst you can do is stop the program from running, and that can be easily fixed by undoing the changes you made or reverting to the provided code.

The following program is a p5.js editor frame. It doesn’t do anything right now. You will see many of these as you go through this course, but they will all be filled with example code that gets you started. The Play and Stop buttons make the code restart or stop. The canvas is the space to the right of the code that appears when you press Play.

You can undo any changes you make by using the Undo and Revert buttons that appear after a change has been made.

Active content not displayed. This content requires JavaScript to be enabled.

Program 1 An empty p5.js editor frame

Interactive feature not available in single page view (see it in standard view).

The words ‘programming’ and ‘coding’, and ‘program’ and ‘code’ are used interchangeably throughout this project. Yet an important distinction should be made between a program, which is fully functional and standalone, and a codesnippet, which is a chunk of code that does a small task as part of a larger program.

One of the main tasks you will be doing when tweaking code is moving little snippets of code around, sometimes to repeat a shape, or to take a codesnippet that you made previously and insert it into another program. Using codesnippets is a modular way of working with code, and it is a very important practical and conceptual skill to learn.

To help you with this, you need to create a codesnippet text file on your computer, where you will save any codesnippets that you are working with.

Don’t be precious about this file; it’s just a working place to store ideas, a bit like a sketchbook full of chunks of code. You will use this file for storing, copying, and pasting snippets into different programs.

Activity 1 Make a codesnippet text file

Timing: Allow 5 minutes to complete this activity

Follow the instructions in the following video to create a codesnippet text file on your computer where you will store little chunks of code.

Download this video clip.Video player: t190_2024j_vsc039_1280x720.mp4

Show transcript|Hide transcript

Transcript

CHRISTIAN NOLD

In this video, I want to show you how to create a codesnippets text file and paste something into it. I'll show you how to do this on a Macintosh with a programme called TextEdit, but the process will basically be the same on a Windows computer. On Windows, I recommend you use a programme called Notepad that comes installed on all Windows computers.

So on a Macintosh, the place to find it is in Applications, TextEdit. So when I open this, it makes a blank text file, like this. And what I'm going to do is I'm going to go to File, Save. And I'm just going to save it onto my desktop. And I'm going to call it Codesnippets, just like that. Save.

And you can see, at the top, the title is Codesnippets. Great. So I'll have a codesnippets file. So what I can use it for is by copying and pasting little pieces of programme code into it. So here, I'm just going to select this stroke colour value and I'm going to do Command-C on a Macintosh or Control-C on a PC, and I'm going to go back to the text file, and then I'm going to do Command-V or Control-V to paste it.

So you can see, there's a little piece of code just here. So I can use the codesnippets file to save a whole bunch of small little pieces of code that might be useful at a later stage.

End transcript

Download

Interactive feature not available in single page view (see it in standard view).

3.2 Principle 2: Hello World!

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In the following activity, you will run and tweak your first p5.js program.

Since the 1970s, ‘Hello, World!’ has been the name of the first program that every student learns when they encounter a new programming language.

The editor window below is running a program that draws circles as you move the mouse cursor around the canvas.

Try interacting with the program by moving your mouse cursor around within the grey canvas box area on the right side of the editor window.

Active content not displayed. This content requires JavaScript to be enabled.

Program 2 Hello World!

Interactive feature not available in single page view (see it in standard view).

You can stop the program by clicking the Stop button in the editor window and restart the program by clicking Play.

Fun, right? You just ran and played with your first p5.js program!

Let’s take a look at the code a bit more closely. The Hello World! program is made up of three different functions.

A function is a block of code that carries out a specific purpose. All of the code that makes up the function is contained inside curly brackets: { }. Notice how the code inside the curly brackets is indented to indicate that it belongs to the function. Functions are very useful programming structures because they are discrete chunks of code that you can reuse in a modular way.

setup() function

The first function is called setup and runs once when the program first starts playing and defines some parameters that won’t change.

function setup() {
createCanvas(300, 300);
background(100);
}

In this case, the setup function creates a canvas that is 300 × 300 pixels wide with this code:

createCanvas(300, 300)

Note, the comma between the two numbers is important or the program won’t run; however, the space after the comma is not important and will not affect the running of the program.

The function also sets the colour of the canvas to grey using this code:

background(100)

The value 100 is a mid grey that is roughly halfway between 0 (black) and 255 (white). Colour will be discussed in more detail in Principle 4.

draw() function

The second function is called draw, and it keeps looping over and over, repeating the code within it. In this case, it keeps drawing a new circle at the positions of the mouse cursor.

function draw() {
circle(mouseX, mouseY, 20);
}

The position of this circle is defined by the horizontal position of the mouse cursor, mouseX, and the vertical position of the mouse cursor, mouseY. The number 20 shows that the diameter of the circle is set to 20 pixels.

If you are ever confused about a piece of code, there is a reference for each command on the p5.js website, for example:

p5.js reference: circle

You will find links to other relevant p5.js references as you work through the following principles.

keyPressed() function

The third function is called keyPressed, which is waiting for any keyboard input. If it detects that the s key has been pressed, then it saves an image of the current canvas called hello.png to the computer.

In summary, while the program is running, it draws new circles at the cursor position every time the program loops. If you press the s key, it saves an image of the canvas.

In the next activity, you are going to make your first coding tweak! If you get stuck, the following video should help you out.

Download this video clip.Video player: Video 4

Video 4 Playing with the Hello World! code

Show transcript|Hide transcript

Transcript: Video 4 Playing with the Hello World! code

CHRISTIAN NOLD

This short video will introduce you to the code editor, show you how to make some coding tweaks, and save an image of your work to your computer. So, this box here, that’s the p5.js editor, running inside the Open University virtual learning environment. When you encounter an editor window, the code will already be playing and displaying a canvas on the right-hand side, this grey area here.

This is the Hello World example. When you move your cursor across the canvas like this, it draws these circles. If you press ‘Stop’, the code stops. If you press ‘Play’ again, the code plays again.

Notice there are these numbers here on the left-hand side. They’re called line numbers. And they can be useful for identifying bits of important code. So, the thing we care about here is in line seven, which is the circle function, this one here. And it has three parameters. And the thing we care about is the 20 at the end. That’s the diameter.

So, 20 creates these circles, like this. If I change this now to 40 and press ‘Play’, you can see we have a larger diameter circle. And I can just go and change this to 400 and press ‘Play’ again; and we have a huge circle. Now, that circle is too big. So, what I can do is I’m just going to revert. And that takes me back to the original code. And I just press ‘Play’ again, and there you go. The original code is playing again.

Notice when I was making these tweaks, all I was doing was changing these pink numbers and the code here. That’s the main thing you’ll be doing. You won’t have to do any code writing from scratch. So, what I’m going to do now is I’m just going to stop and start again, and I’m going to draw you an algorithmic quilt. And I’m just going to draw around the edges here. And I’m just playing around a little bit just to see what I can do with this example.

And I am drawing towards the middle. And when I get to the middle, what I’m going to do is I’m just going to save an image of what I’ve drawn. And there are two ways you can do this. You can press the ‘s’ key, and you can see that saved hello.png file to your computer. Or you can press the right mouse button and select ‘Save Image As’. And then this pop-up comes across. And it gives me a place to save it, currently in the Downloads folder. And I click ‘Save’. So, there you go. I’ve saved an image of my artwork.

End transcript: Video 4 Playing with the Hello World! code

Download

Video 4 Playing with the Hello World! code

Interactive feature not available in single page view (see it in standard view).

Activity 2 Change the size of the circle and save a small artwork

Timing: Allow 10 minutes to complete this activity

Scroll back up to Program 2 Hello World! and go to line 7 to find the circle diameter. Change the pink-coloured number 20 to a number between 1 and 200.

Once you have made the change, press the Play button and move the cursor over the canvas to see what effect this had. If you get lost and want to get back to the initial example code, press the Revert button.

Keep playing with this example until you have drawn something that you like. Use the right mouse button to save an image of the canvas onto your computer. You can also press the s key to save the image.

Well done! You made your own algorithmic artwork.

3.3 Principle 3: Shapes and Coordinates

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In this principle, you will learn how to draw some shapes and how to position them on the canvas using the coordinate system in p5.js. In all these examples, you will be using a square canvas size of 300 × 300 pixels, so all our shapes always need to fit into that space.

X and y-coordinates in p5.js

p5.js uses an x- and y-coordinate system to identify locations on the canvas and to position shapes.

The x/y-coordinate system

The origin point for the coordinates starts in the top left-hand corner of the canvas with 0,0.

The x-coordinate is the horizontal distance in pixels from the left edge, while the y-coordinate is the vertical distance from the top edge.

The x-axis is left to right. The y-axis is top to bottom.

In Figure 7, I have used some graph paper to draw a dot at the position x2 and y3 which is written as point(2, 3) in p5.js code. The x-coordinate always comes first, followed by a comma and then the y-coordinate.

If you forget the comma, you will get an error in your program. Note that the coordinate system starts in the top left-hand corner.

Figure 7 The x/y-coordinate system drawn on graph paper

Show description|Hide description

Image showing graph paper and a graph with the axes labelled ‘X’ and ‘Y’. The numbers 0–6 are marked along each axis. A dot is marked, located at X2 and Y3. Next to this dot, in parenthesis, the following is written: ‘(2,3)’.

Figure 7 The x/y-coordinate system drawn on graph paper

Point

Drawing a point is easy in p5.js. It has two parameters for the x- and y-coordinates, point(x, y):

x: the number that specifies the x-coordinate
y: the number that specifies the y-coordinate.

(p5.js reference: point)

Square

The square shape has three parameters, square(x, y, s):

x: the number that specifies the x-coordinate of the top left corner of the square
y: the number that specifies the y-coordinate of the top left corner of the square
s: the number that specifies the width and height of the square.

(p5.js reference: square)

Active content not displayed. This content requires JavaScript to be enabled.

Program 3 Draw squares

Interactive feature not available in single page view (see it in standard view).

Change the outline

Notice that the outline of the square in Program 3 is very thin. The way to control this is by using the strokeWeight() command – you can put any number you like inside the brackets. I recommend a number between 1 and 10.

(p5.js reference: strokeWeight)

Note that it matters where in the code you put the commands. The program runs the code sequentially, line by line from top to bottom. If you add strokeWeight(), then all the subsequent shapes will have that property applied. This property persists for all shapes on the next loop. If you want the shapes to have a different outline, then you need to add another strokeWeight() command so that any subsequent shapes receive that property.

Watch Video 5, which shows you how to use the coordinate system.

Download this video clip.Video player: Video 5

Video 5 Drawing squares using the coordinate system

Show transcript|Hide transcript

Transcript: Video 5 Drawing squares using the coordinate system

CHRISTIAN NOLD

In this video, I’m going to show you how the coordinate system works in p5.js by positioning some squares, and also changing the outline thickness of the squares. To start with, I’m going to go to line 15, and I’m going to copy the whole of the line here: the square function. So I’m going to use Cmd C, or Ctrl C on Windows. And now, I’m going to hit the Return key a few times to make myself some space. And I’m going to paste it underneath with Cmd V or Ctrl V.

There you go. So now, we have four squares. When I press ‘Play’, we can’t see them yet. That’s because they’re all on top of each other. What I have to do is I have to change the x-coordinate of the different squares. So, I’m just going to go here to the second square, and I’m going to change the x-coordinate to 100.

So, when I press that, we now can see two of the squares. I’m going to change this one to 150. Now, we can see three, and I’m going to change this to 200. And now, we can see all four of the squares. I’m going to try and arrange them in a diagonal going down here. In order to do that, I have to change the y-coordinate, i.e. the y-coordinate runs this way. So, I’m going to go here and I’m going to change this to 100. And that moves the square down. I’m going to change this to 150. There you go. The squares move down. And I’m going to change this to 200.

Nice. Now, all the squares are arranged in a diagonal. They all have different x-coordinates and different y-coordinates, arranged like this.

The final thing I’m going to show you is how to change the thickness of the lines. That’s controlled by the stroke weight, which is here in line 7. Currently, the stroke weight is 1, which is giving us a nice thin outline. If I change that stroke weight to 3 and press ‘Play’, we now have a thick outline both for the dots, the points, but also for the squares.

But if I copy that line and then move it here in between those squares, and then change it to 1, and press ‘Play’, what’s happening now is that all the shapes that follow that stroke weight command here are drawn with a thickness of 3. Then it changes to a stroke weight of 1, and the last two squares are drawn with a stroke weight of 1. Hence, we have thin lines. So, by varying the stroke weight, you can control the thickness of the lines.

End transcript: Video 5 Drawing squares using the coordinate system

Download

Video 5 Drawing squares using the coordinate system

Interactive feature not available in single page view (see it in standard view).

Activity 3 Draw your own squares and tweak the outline

Timing: Allow 15-20 minutes to complete this activity

Use Program 3 Draw squares to draw multiple squares at different locations. You need to copy and paste the square command to create some additional squares and change the x- and y-coordinates. Remember that the origin point is in the top left-hand corner.

Change the strokeWeight() to give the points and squares a thick outline.

Keep playing with this activity until you understand the x- and y-coordinate system. This concept is important to understand for section 4 ‘Making Tiles’, where you will be creating tiles and wallpaper.

3.4 Principle 4: Colour

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Knowing how to set colours is an important part of creative coding and will be crucial for your wallpaper project. On this page, you will learn how to use the fill and stroke commands to use the full colour spectrum.

By default, p5.js defines colour values using RGB (Red, Green, and Blue) as a value ranging from 0 to 255, where 0 signifies the absence of the colour and 255 represents the highest intensity of that colour. These three colours are the primary colours, from which additional colours can be created by blending these colours in varying ratios. For example, a yellow colour in RGB is created using a mix of red and green using the RGB values: 255,255,0.

Figure 8 How RGB colours mix; the maximum value of all three primary RGB colours creates a white colour: 255,255,255

Show description|Hide description

The image shows the RGB primary colours and how they overlap to create different colours. The top circle is labelled with an ‘R’ and the circle is coloured red. In the bottom right, a circle is coloured blue and labelled with a ‘B’. In the bottom left, a circle is coloured green and labelled with a ‘G’. These three circles overlap, creating new colours where one colour meets another. Where the red and blue circles overlap, the new shade is a light magenta. Where the red and green circles overlap, the overlapped colour is yellow. Where the green and blue circles overlap, this is denoted with a light teal blue. In the centre, where all three circles overlap, the colour is shown in white.

Figure 8 How RGB colours mix; the maximum value of all three primary RGB colours creates a white colour: 255,255,255

In Program 4 below, click on the small rectangular box on the canvas and you should see a colour picker appear. It allows you to pick different colours and see their RGB values at the same time.

Use the colour picker to change the colour of the square a few times. Notice how the numerical RGB values change as you select different colours.

Active content not displayed. This content requires JavaScript to be enabled.

Program 4 RGB colour picker

Interactive feature not available in single page view (see it in standard view).

Filled colour

The fill() command allows you to set the fill colour inside shapes. You are defining three values because you are mixing the three RGB colours together to create a single fill colour fill(R, G, B):

R = red value between 0 and 255
G = green value between 0 and 255
B = blue value between 0 and 255.

(p5.js reference: fill)

Outline colour

The stroke() command controls the outline colour of any shape, for example stroke(R, G, B) (p5.js reference: stroke).

Note that you can also use the noStroke() command to disable any stroke being drawn (p5.js reference: noStroke).

Active content not displayed. This content requires JavaScript to be enabled.

Program 5 Recolour the squares

Interactive feature not available in single page view (see it in standard view).

Download this video clip.Video player: Video 6

Video 6 Changing and playing with colour

Show transcript|Hide transcript

Transcript: Video 6 Changing and playing with colour

CHRISTIAN NOLD

In this video, I’m going to show you how to change the colour of the squares and play around with these colour values. I’m going to show you how to change the stroke colour, which is controlled here in line 8, But also the fill of the squares, which is controlled individually for each square here. So, because we change the fill four times, we can have four different colours of squares.

The stroke is only set at the beginning, so the stroke is the same for all of the squares. So if I change the stroke colour here to 255, it changes from a grey into an orange, and that goes across all the squares. So let me just revert that, and we’re back to a grey. Ok, I’m just going to change this first square, and I’m going to change it from a cyan into a red.

So, I’m going to go here to line 10 to the fill, and I’m going to change this to 255. And I’m going to change that to 0 and 0. So we have 255, 0, 0, and that is a red. For the second shape, I’m going to change that to be a green. So, I’m going to change that to be 0, 255, 0.

There you go. So, we have red, green, blue. So, we have 255 of the green. That’s why that’s green. So, for the third square, I’m going to change that to be a blue. So, 0, 0, 255. OK, that’s blue. For the final square, I’m going to change it from a black, which is 0, 0, 0 into a white by doing 255, 255, 255.

Now we have a white. That’s OK, but I think we can play around a little bit more. Why don’t I change the colour and control it with the mouse? So, I’m just going to go to the stroke colour, and I’m going to change that to mouseX. So now, as I move the cursor around, you can see the colour is controlled by the position of the cursor.

And I can do the same thing for the fill of the different squares. So I can have mouseX here, I can have mouseY here, mouseX here, for example, and maybe mouseY here. Ooh, now you can see all the colours are changing as I’m moving the cursor around. Both the x and the y-coordinates are controlling the colours.

That’s fine, but I can also do that to some of the other pink numbers. So, for example, this location of the square, I can change that to mouseX. Well, look. So basically, that square is following me around. I can change that to mouseY, mouseX, mouseY, and let’s just see what happens.

Whoa! Something crazy is happening. That’s pretty fun. The colours are changing, and the position of the squares are changing. And this way, you can play around with the colour values and even the positions. So why don’t you have a play around and see what you can come up with?

End transcript: Video 6 Changing and playing with colour

Download

Video 6 Changing and playing with colour

Interactive feature not available in single page view (see it in standard view).

Activity 4 Recolour the squares

Timing: Allow 20 minutes to complete this activity

Use Program 5 Recolour the squares to tweak the numerical RGB colour values for the fill and outline of the squares.

Experiment with inserting mouseX or mouseY in place of the numerical RGB values as well as parameters of the squares, as shown in Video 6.

4 Making Tiles

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In this section you will apply the algorithmic principles you have learned to create tiles and patterns using code.

In the first set of skills, you will learn how to create a single tile and tweak the design to create four individual tiles. In the second set, you will learn to arrange these tiles to create patterns and test them out.

Figure 9 shows the design process that you will be following.

Figure 9 Design process from single tile to pattern

Show description|Hide description

The image shows a step-by-step process from left to right:

‘Design a tile’: This shows a single geometric tile design. It’s an orange four-pointed star shape on a white background.

‘Design four tiles’: This expands on the first step, showing four similar coloured star tiles arranged in a 2 by 2 grid.

‘Create pattern’: Here, the tiles form a larger, repeating pattern.

‘Test pattern’: The final stage shows the pattern covering the wall as wallpaper in a domestic room.

Figure 9 Design process from single tile to pattern

A tile is a shape that can be repeated to form a larger pattern. Think of the tiles in your bathroom. Maybe they are just plain white tiles, but perhaps they have some decorative shapes that create an overall visual pattern. Designing tiles requires thinking in a modular way. You need to focus on an individual tile while also thinking about how multiple tiles will look next to each other (Figure 10).

In this introduction, you will learn about the historical and contemporary context of tile and pattern design. Don’t worry, in this course you won’t have to make anything as complex as these examples.

Figure 10 (a) This is a commercial ceramic tile design that uses geometric shapes. (b) When the tiles are arranged together, they form a repeating pattern that looks much more complex than the single tile.

Show description|Hide description

Figure 10a: the image shows a tile with grey, white, and blue diagonal stripes. Figure 10b: the image shows a bathroom with the tile decorations arranged to form a repeating diamond pattern.

Figure 10 (a) This is a commercial ceramic tile design that uses geometric shapes. (b) When the tiles are arranged together, they form a...

Tiles and mosaics are some of the oldest pieces of design, originating from ancient Babylon and Rome, and were used in many contexts, such as public outdoor spaces as well as private indoor dining areas. Mosaics are made by arranging coloured pieces of stone or glass to form patterns. Tiles and mosaics take many different shapes and forms but often include geometric patterns that repeat like an algorithm. It is fun to think about how you might recreate the black-and-white triangle pattern in Figure 11 using code.

Figure 11 A Roman floor mosaic with intricate geometric patterns and a figurative head of Medusa in the centre c.115–150 bce

Show description|Hide description

The image shows a black-and-white repeating geometric pattern in concentric circles.

Figure 11 A Roman floor mosaic with intricate geometric patterns and a figurative head of Medusa in the centre c.115–150 bce...

Contemporary tile design

Figure 12

Show description|Hide description

The image shows an outdoor wall decorated with large colourful geometric tile patterns. The wall features the word ‘Huguet’, and behind the wall a tall grey building can be seen, surrounded by trees.

Figure 12

People are still creating new tile designs today. Huguet is a family-owned Spanish tile manufacturer which has been making encaustic cement tiles since 1933. Their tiles integrate traditional tile-making techniques with creative designs by contemporary architects and designers from around the world.

The typeface tiles in the following image were crafted through a collaboration with the designer, Sascha Lobe, drawing inspiration from the modular typeface ‘Le Corbusier’. This design facilitates the rearrangement of tiles to form new words by aligning the tiles to create various letter shapes.

Figure 13

Show description|Hide description

The image shows black letters on a cream background. The alphabet of letters is made out of tiles that each have parts of different letters on them in a thick, curvy font. By rearranging the patterns of these tiles, different letters and words can be created.

Figure 13

4.1 Skill 1: Create a dot-to-dot tile

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In this skill, you will be creating your own tile design by drawing it on graph paper and then transferring it into p5.js code. If you don’t have any graph paper, you can just use a blank piece of paper and draw a small grid for this exercise.

Many of you may be familiar with dot-to-dot puzzles (Figure 14). The goal is to draw a line connecting the dots to reveal an image. You will be using a similar method to create your own decorative shapes, which will fit on a square tile.

Figure 14 A dot-to-dot drawing

Show description|Hide description

The image shows a child’s dot-to-dot puzzle. The numbers 1–24 are listed next to black dots and are laid out in what appears to be the shape of a fish. An eye and a smiling mouth are coloured in black where the fish’s head might be.

Figure 14 A dot-to-dot drawing

You are going to use the same principles as a dot-to-dot drawing to help you create unusual digital shapes.

It would be helpful if you start by drawing your shape on paper, and then you are going to transfer it into a dot-to-dot tile-maker program. Video 7 shows you how this works.

Download this video clip.Video player: Video 7

Video 7 Transferring a shape to the dot-to-dot tile maker

Show transcript|Hide transcript

Transcript: Video 7 Transferring a shape to the dot-to-dot tile maker

CHRISTIAN NOLD

In this video, I’m going to show you how to draw a shape on graph paper and then transfer it into the p5.js program. The first thing I’m going to do is draw a shape on this grid of 36 coordinates. So, what I’m going to do here is I’m going to draw a simple triangle, and I’m going to start at point number 10, and I’m going to connect that down here to point number 29. And then I’m going to connect that to point number 20 over here. And that’s going to connect back to point number 10.

So, together, those three form a triangle. So, in order to transcribe that into p5.js, I just need those three coordinates: 10, 29, and 20. So, here, in my program, there’s actually too many vertices. I don’t need all of these. So, I’m going to start by just deleting the ones I don’t need. I just need three because I have three points.

So, the first one I’m going to change to 10, and this one to 10 as well because I need to change both the x-coordinates and the y-coordinates. Then, for the next point, 29, I need to go here and change this to 29, 29, and finally, I need to change this to 20 and 20 and then I press Play.

And there we go. We have the same triangle. Currently, it’s filled in red because that’s controlled by this fill command here. But of course, we can change that. So, I’m just going to change that to 255 and change that to 0 and press Play. And now we have a luminous green triangle.

End transcript: Video 7 Transferring a shape to the dot-to-dot tile maker

Download

Video 7 Transferring a shape to the dot-to-dot tile maker

Interactive feature not available in single page view (see it in standard view).

Start by getting a piece of graph paper and creating a 5 × 5 grid. Next, number every intersection, where the horizontal and vertical lines cross, from 1 to 36, with the number sequences going from left to right. On a 5 × 5 grid, there will be six intersection points on each line.

It is easiest to explain this with an image. Figure 15 is a photograph of some graph paper on which I wrote 36 coordinate numbers on the intersections of the lines to represent the surface of a single square tile.

Figure 15 36 numbered intersections on graph paper

Show description|Hide description

The image shows graph paper with coordinate numbers written on the intersections of the horizontal and vertical grid lines. The numbers are in six rows of six numbers starting with 1–6 in the top row, 7–12 in the next, 13–18 in the next, 19–24 in the next, 25–30 in the next, and 31–36 in the bottom row.

Figure 15 36 numbered intersections on graph paper

Vertices in p5.js

Just like the dot-to-dot puzzle, you will define your shape using numbers – in this case, the numbers at each of the intersections that you have labelled on your graph paper. The formal term for one of the dots in a shape is a vertex – the plural is vertices.

The more vertices you have, the more complex the shapes you can create; they are much more versatile than the circles and squares you have used so far.

You will tell the p5.js program that you want to make a shape by giving the command beginShape() and then give the series of vertex points that need to be joined. The command to finish making the shape is endShape(CLOSE). You can use as many vertices as you want to make your shape.

Note, each vertex point has an x- and a y-coordinate. In this exercise, these two coordinates are always the same.

beginShape();
vertex(x-coordinate, y-coordinate); //one vertex point
vertex(x-coordinate, y-coordinate); //another vertex point
vertex(x-coordinate, y-coordinate); //another vertex point
endShape(CLOSE);

To draw a triangle you need three vertices, while a square has four vertices and a pentagon five. When using vertices, your shapes don’t have to be ordinary geometric shapes; you can create more complex and funky designs.

(p5.js reference: vertex)

Creating a tile design

To create a tile design, start with the graph paper and connect some of the numbered intersections. You don’t have to start in the corner with dot 1.

For Figure 16, I drew a tilted square with smoothed off corners on the graph paper. I used some yellow stickers to highlight the eight vertex coordinates that I need to write down to transcribe this shape into p5.js.

Figure 16 A tile design on graph paper

Show description|Hide description

The image shows graph paper with 36 intersections numbered. A tilted square with angled corners has been drawn on the paper. The eight vertices of the shape are highlighted with red dots. These are: 2, 3, 12, 18, 35, 34, 25 and 19.

Figure 16 A tile design on graph paper

In Figure 16, I drew a shape that connects the dots 2, 3, 12, 18, 35, 34, 25, and 19. To make this shape appear in p5.js, you have to use these coordinate numbers as vertex coordinates. I started in the top left-hand corner, going clockwise, but it doesn’t matter where you start, as long as you go through all the coordinates in a continuous sequence. This is the code for recreating the shape in p5.js:

fill(200, 0, 0); //This is the fill colour - a red
beginShape(); //This starts drawing the shape
vertex(v2.x, v2.y); //The first dot with x and y-coordinates
vertex(v3.x, v3.y);
vertex(v12.x, v12.y);
vertex(v18.x, v18.y);
vertex(v35.x, v35.y);
vertex(v34.x, v34.y);
vertex(v25.x, v25.y);
vertex(v19.x, v19.y); //The final dot in the shape
endShape(CLOSE); //This finishes drawing the shape

Each line of the vertex code represents a single coordinate point that is connected together to form the shape. You can add as many vertex points as you like by inserting new lines of code. You don’t have to return to your starting point because the shape will automatically be closed by the command endShape(Close).

The code uses variables starting with the letter v, followed by the number of the dot coordinate. So, dot 12 from the graph paper becomes v12 in the program. Each vertex needs both an x- and a y-coordinate. For this program, the numbers for the x- and y-coordinates are the same. The vertex for dot 12 would be written as vertex(v12.x, v12.y); The command ‘vertex’ tells the program you are giving information about a specific point and the information in brackets gives the detailed information. Note the full stops, commas, and the semicolon after the bracket:

vertex(v12.x, v12.y);

Look at Program 6 Dot-to-dot tile maker, below. There is a single function called tile() that starts in line 1 that you need to make changes to. The fill() command in line 3 controls the colour of the shape. The shape itself starts in line 4 with beginShape() and ends with endShape(Close) in line 13. In between are the vertex points. This is where you will substitute your own coordinates to create your own tile decorations.

There is a comment in line 17:

//--- Don’t change code below here ---

The code below this point makes the coordinate system easier to work with, but you don’t have to understand how this code works or make any changes here.

Active content not displayed. This content requires JavaScript to be enabled.

Program 6 Dot-to-dot tile maker

Show description|Hide description

The dot-to-dot tile-maker program allows you to enter the coordinates from the graph paper to create your own tiles in the p5.js code.

Program 6 Dot-to-dot tile maker

Interactive feature not available in single page view (see it in standard view).

In the next activity, you can use Program 6 to create your own tile design.

Activity 5 Create your tile design

Timing: Allow 15-20 minutes to complete this activity

Create your own tile design on graph paper and then transcribe it into code.

Write the numbers 1 to 36 on the intersections of a 5 × 5 grid on some graph paper.
Connect some of the intersections to create a shape for your tile design.
Transcribe these dot coordinates from the graph paper into Program 6 Dot-to-dot tile maker. Click on Play to rerun the program.
Choose the colour of your tile using the fill() command. You might find it useful to use the RGB colour selector which you used in Principle 4: Colour.

If the visual output is not what you expect, check that you are inserting both the x- and y-coordinates for each vertex, for example vertex(v12.x, v12.y). Reread the text above about vertices.

If the program doesn’t run, make sure that you haven’t written your coordinates in the wrong place. Look for the comments to help guide you to the place to change the code.

4.2 Skill 2: Multiple shapes on a tile

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

It is possible to draw multiple shapes on a single tile. This is not a necessary requirement for this wallpaper project, but it offers creative possibilities in terms of tile design and might be fun for you to experiment with.

To create multiple shapes, each shape requires its own beginShape() and endShape(Close) commands. Each shape can be assigned a different colour using the fill() command. Shapes can overlap, with the later ones in the code covering earlier ones, as shown in the example below.

Active content not displayed. This content requires JavaScript to be enabled.

Program 7 Creating multiple shapes on a tile

Show description|Hide description

Two differently coloured shapes on a single tile

Program 7 Creating multiple shapes on a tile

Interactive feature not available in single page view (see it in standard view).

4.3 Skill 3: Design 4 tiles

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Great job on mastering the creation of a single tile! Now, let’s make a few additional tiles so that you can create a larger pattern.

In this skill, you are going to create four tiles that you will use for your pattern design. Work iteratively and tweak the colours and/or coordinates for the tiles.

At the end, you will need to save your four tiles in your codesnippet text file. If you have not made that file yet, go back to Principle 1: Tweaking code and watch the video on how to do that.

I created some numerical tile designs using the dot-to-dot system. Take a look at the code for each tile to make sure you understand how the digits are drawn, and then use Programs 8-11 to create four tiles.

Active content not displayed. This content requires JavaScript to be enabled.

Program 8 Tile number 1

Interactive feature not available in single page view (see it in standard view).

Active content not displayed. This content requires JavaScript to be enabled.

Program 9 Tile number 2

Interactive feature not available in single page view (see it in standard view).

Active content not displayed. This content requires JavaScript to be enabled.

Program 10 Tile number 3

Interactive feature not available in single page view (see it in standard view).

Active content not displayed. This content requires JavaScript to be enabled.

Program 11 Tile number 4

Interactive feature not available in single page view (see it in standard view).

Now work through the following activity to create your own tile designs.

Activity 6 Design and save four different tiles

Timing: Allow 40 minutes to complete this activity

Your task is to create and save four separate tile designs.

Use the four tile editor windows (Programs 8–11) to make your tiles. Create your first design and then copy and paste your tile design into the next window to tweak the colours and coordinates for the next tile. Adding or removing a single vertex can create a very different design.
Scroll up and down this page to look at your four tiles together. Note that when your tiles are arranged into a pattern later, you won’t see the grey background and numbered coordinates.
When you are happy with your tile designs, copy and paste the codesnippet for each tile into your codesnippet text file and save the file. At the end of this exercise, you need to have the code for all four tiles within your text file. You should only copy the code that defines your tile design, not all the other miscellaneous code that makes the tile-maker program run.
Check that your codesnippet text file looks a bit like the following figure. You will need your four different tile designs later in the next skills session.

Figure 17 Screenshot of code snippets

Show description|Hide description

The image shows a text file with the concepts of the vertex data that describes the four tile designs.

Figure 17 Screenshot of code snippets

5 Making Patterns

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In these skills, you will be using the tiles you designed in Skill 3: Design 4 tiles to create, redesign, and test your own algorithmic tile patterns.

Figure 18 Creating and testing patterns

Show description|Hide description

The image shows a sequence of a graphical pattern on the left that is then tested by positioning it in the context of a house wall on the right.

Figure 18 Creating and testing patterns

This introduction will provide you with some historical context about pattern design before you get started on making your own patterns using p5.js.

Technically, patterns are known as ‘tessellations’ – flat surfaces composed of geometric shapes, referred to as tiles, without any overlaps or gaps.

Tessellations can be regular or irregular. Regular means that the surface is made from a single shape that is repeated so that all the edges align. There are three shapes that can form regular tessellations: squares, equilateral triangles, and hexagons. Any one of these can be repeated infinitely to create a surface with no gaps (see diagrams (a), (b), and (c) in Figure 19). Irregular tessellations can be made from almost any kind of geometric shape combined with a different shape or shapes (see diagrams (d), (e), and (f)).

Figure 19 (a)–(c) Regular tessellations; (d)–(f) irregular tessellations

Show description|Hide description

Figure 19a depicts a regular pattern made up of squares in a grid. Figure 19b depicts a regular pattern made up of triangles. Figure 19e depicts a regular pattern made up of hexagons. Figure 19d depicts an irregular pattern made up of offset squares. Figure 19e depicts a pattern made up of hexagons and squares, where small squares are placed in the centre of four larger hexagons. Figure 19f depicts an irregular pattern made up of triangles arranged within a larger set of hexagonal patterns.

Figure 19 (a)–(c) Regular tessellations; (d)–(f) irregular tessellations

The artist, Maurits Cornelis Escher, is famous for making tessellations with irregular tiles shaped like animals and other natural objects – notice how the horsemen are repeated in interlocking rows in Figure 20. Escher was a Dutch graphic artist (1898–1972) famous for using mathematics for visual effect. He created intricate drawings, lithographs, and woodcuts. Today, Escher’s prints are widely used in all forms of decorative design.

Figure 20 Horsemen drawing by Escher

Show description|Hide description

The image shows a drawing where white horsemen face the left and red horsemen interlock with this shape, facing the right.

Figure 20 Horsemen drawing by Escher

In these skills, you are only going to focus on regular tessellations of square tiles. Squares are easy to think about and code, and you can make some amazing patterns with them. This introduction draws inspiration from the aesthetics and structures of Truchet tiles, described below, which you will bring into the twenty-first century using p5.js code.

Truchet tiles

Figure 21

Show description|Hide description

The image shows a double-page spread of Truchet’s geometric black-and-white patterns.

Figure 21

These square tile patterns are named after Sebastien Truchet (1657–1729), a priest from France who was a polymath across art/design and the sciences. He created important inventions in mathematics, engineering, graphic design, and typography. Truchet is known for a book of intricate tile patterns that he published in Memoire sur les Combinaisons (1704). These patterns were popularised in 1987 and have become very influential in art and design as well as topology.

Truchet first got the idea for these patterns by looking at ceramic tiles that were piled up and ready to be used:

During the last trip that I took to the canal d’Orléans by order of His Royal Highness, in a château called Motte St. Lyt 4 leagues this side of Orléans, I found several ceramic tiles that were intended for tiling the floor of a chapel and several other apartments. They were of square shape, divided by a diagonal line into two colored parts. In order to be able to form pleasing designs and patterns by the arrangement of these tiles, I first examined the number of ways in which these tiles could be joined together in pairs, always in checkerboard array.

(Sebastien Truchet, translated by Pauline Boucher, from Smith and Boucher, 1987, p. 373–374)

The four rotations of the Truchet tile can be seen in the figure below.

Figure 22

Show description|Hide description

This image shows four squares of identical shape in a row. In the first square, the bottom left corner triangle is coloured in black. The second has the top left corner coloured in black. In the third, the top right corner is black. In the fourth, the bottom right corner is black.

Figure 22

All the Truchet patterns are made from a single square tile with a black-and-white triangle decoration that is rotated in four different orientations. Truchet found that he could create a vast range of visual patterns by arranging these simple tiles in different ways. To record the variations, Truchet created one of the earliest ways of encoding complex patterns, long before the invention of the computer.

Figure 23

Show description|Hide description

The image shows a page of diagrams and text, organised into rows and columns. Small black-and-white Truchet tiles are displayed in rows to show all the visual combinations of the tiles. Each row is numbered, and there is some text, though it is difficult to read, next to each tile combination.

Figure 23

The figure below shows some of Truchet’s more complex patterns, made with the same tiles. You will be able to recreate these using p5.js.

Figure 24

Show description|Hide description

The image shows a double-page spread with four different black-and-white Truchet tile patterns. The patterns are complicated, and look like decorative mosaic patterns.

Figure 24

5.1 Skill 4: The pattern maker

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In this skill, you will make patterns by controlling how tiles are positioned next to each other and playing with Truchet tiles. To do that, we have provided you with a p5.js pattern-maker program that makes it easier to control the arrangement of four individual tiles to make a repeating pattern.

This will be the longest program you have seen so far, but don’t worry, you don’t have to understand every single line of code. The goal of the course is to teach you to play with code, not learn programming.

All the parts of the program that you have to tweak are marked with comments. Specifically, there are a number of variables at the top of the code that control how the program works, as well as four separate tile functions. You shouldn’t have to scroll much to find all the relevant bits. In each tile function, there are comments that show you where the code for the tile design starts and ends.

Near the bottom of the code is a comment:

//--- Don’t change code below here –--

Please heed this warning. The setup and draw functions and the coordinate definitions are all located below that comment. There is no need for you to look at this code, understand it, or make any changes.

Since the programs in these skills are quite long, you might prefer to work in the external p5.js editor to be able see more of the code. To do that, copy and paste the example code there.

The pattern-maker program (Program 12) draws four tiles that we refer to as Tile1, Tile2, Tile3, and Tile4. These are the tiles I generated in Programs 8-11 (Skill 3: Design 4 tiles).

Active content not displayed. This content requires JavaScript to be enabled.

Program 12 Pattern maker

Interactive feature not available in single page view (see it in standard view).

The tiles are arranged in a rosette shape, which is repeated in a sequence until the width and height of the canvas is covered.

Figure 25 The rosette pattern which controls how the tiles are positioned on the canvas

Show description|Hide description

The image shows graph paper with a small grid of four squares outlined, with the numbers 1–4 labelled in each square. To the right of the four squares is a Z-like shape, with an arrow pointing to the right from the bottom stroke, denoting how the program draws the four tiles in a sequence: upper left square to upper right square, upper right square to lower left square, and lower left square to lower right square.

Figure 25 The rosette pattern which controls how the tiles are positioned on the canvas

The canvas is 300 pixels tall and wide, and each tile is 50 pixels square. So, the program keeps drawing these tile rosettes until it gets to the edge of the canvas and then starts again on the next line.

The result is that, with the default settings, the pattern maker will draw 3 × 3 rosettes on the screen to draw 36 individual tiles.

Try changing the value of the variable tileSize in Program 12 Pattern maker to see what happens.

Figure 26 How the program fills the canvas by repeating the tile rosettes

Show description|Hide description

The image shows graph paper with a large box outlined, containing nine smaller boxes within, which are not outlined. In each of the smaller boxes, nine Z-like shapes, with arrows leading from the final stroke, illustrate how the program fills the canvas: from the upper left-hand square to the upper right-hand square, the upper right-hand square to the lower left-hand square, and the lower left-hand square to the lower right-hand square. This continues into the next rosette in the row until the row is filled, before moving onto the second row, and so on.

Figure 26 How the program fills the canvas by repeating the tile rosettes

The part of the code that controls the way the tiles are arranged is called an array, which is a special kind of variable that can hold multiple bits of data. It looks like this:

tileSequence = [1,2,3,4]

You can make your own creative pattern by changing the sequence of the tiles in this array. Video 7 explains how to do this.

Download this video clip.Video player: Video 7

Video 7 Changing the sequence of tiles

Show transcript|Hide transcript

Transcript: Video 7 Changing the sequence of tiles

CHRISTIAN NOLD

This video will show you how to change the tile sequence in the pattern maker. Currently, the tile sequence is up here. It’s 1, 2, 3, 4. If I go and change this to 1, 2, 2, 4, suddenly it looks like this: 1, 2, 2, 4. And it repeats: 1, 2, 2, 4; 1, 2, 2, 4, et cetera. So, you can change this to be five-long, so we can have it 1, 2, 2, 4, 3. And let’s press Play.

So, suddenly we have quite an interesting sequence: 1, 2, 2, 4, 3; 1, 2, 2, 4, 3; 1, 2, 2, 4, 3. As you can see, this particular sequence actually extends across some of these rosettes and starts creating these quite interesting patterns. So, you can see, for example, the twos here are creating this diagonal pattern and the threes are creating this diagonal pattern.

So, by changing this tile sequence, you control which tiles are being displayed in the sequence, the order, but also how they’re displayed within the rosette. So, by playing with them, you can create some quite complicated patterns.

End transcript: Video 7 Changing the sequence of tiles

Download

Video 7 Changing the sequence of tiles

Interactive feature not available in single page view (see it in standard view).

Activity 7 Change the tile sequence

Timing: Allow 15-20 minutes to complete this activity

Use Program 12 Pattern maker to change the sequence in which the tiles repeat themselves.

Try changing the order of the tiles in the tileSequence array, for example 1,3,2,4.
Try repeating some of the tiles in the sequence, for example 1,2,2,4.
Try adding more than four tiles in to the sequence, for example 1,2,2,3,4.

Notice how the tiles sometimes shift and the overall pattern changes in surprising ways as the tiles create diagonal repetitions.

What is happening here? By increasing or decreasing the number of tiles in the sequence, you are shifting the sequence of the tiles to stretch across multiple rosettes. The effect is that not every rosette is the same anymore.

By adding or removing a single number in the tileSequence, you are creating an entirely different design and your own aesthetic judgement about these patterns becomes important.

If you add eight tiles into the tileSequence array, then you are defining two rosettes and will end up with something more controlled and regular. If you want to create something more unpredictable, then use more or fewer tiles to create shifting patterns that extend across multiple rosettes.

In the next activity, you will recreate the eighteenth-century tiles and patterns of Sebastien Truchet. The tiles are drawn using the dot-to-dot notation system, with three vertices to draw a series of black triangles. The four versions of the Truchet tile are numbered Tile1–Tile4 in Program 13.

Active content not displayed. This content requires JavaScript to be enabled.

Program 13 Truchet tiles

Interactive feature not available in single page view (see it in standard view).

Activity 8 Recreate the Truchet patterns

Timing: Allow 15-20 minutes to complete this activity

Here are the four rotations of the Truchet tiles, numbered 1–4.

Figure 27

Show description|Hide description

The image shows the four rotations of the Truchet tile with numbers above them. The first version is a square, cut diagonally in half into two triangles, with the bottom left corner triangle coloured in black. The second has the top left corner coloured in black. In the third, the top right corner is black. In the fourth, the bottom right corner is black.

Figure 27

Use Program 13 Truchet tiles to recreate the three Truchet patterns below by changing the numbers in the tileSequence array. Note, that the first pattern requires just a single tile. The second pattern requires four tiles. The third pattern requires eight tiles to make two rosettes.

Figure 28

Show description|Hide description

The image shows three different black-and-white Truchet checkerboard patterns.

On the left are ten rows of ten tiles. Each tile is square, cut diagonally in half into two triangles from top left to bottom right, with the bottom left corner triangle coloured in black.

In the middle, the pattern contains ten rows of ten tiles. In each row, two of the tiles are repeated five times. The first tile is square, cut diagonally in half into two triangles from bottom left to top right, with the top left corner triangle coloured in black. Next to this is a square, cut diagonally in half into two triangles from top left to bottom right, with the bottom left corner triangle coloured in black. These two tiles are repeated five times in alternate rows. In the inbetween rows, the two tiles are reversed, with the black section in the top right in the first, and in the bottom right in the second.

On the right, the pattern contains ten rows of ten tiles, with the black sections of the squares varying to form eight large squares in the centre. In the centre of the squares is a diamond which alternates from black to white, with the outside squares also alternating so that a black diamond has white outer squares and the white diamond has black outer squares.

Figure 28

If you find this tricky, don’t worry! Take a look at the discussion below and see if the solutions help you to understand how the patterns are made.

If you find this easy, recreate some of the other Truchet patterns illustrated in the Introduction, or create your own by playing with the code.

Discussion

Here are some solutions to recreate the Truchet tiles:

First pattern: tileSequence = [1]
Second pattern: tileSequence = [2,1,3,4]
Third pattern: tileSequence = [2,1,3,4,4,3,1,2]

5.2 Skill 5: Create your pattern

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

In this skill, you will create your own unique pattern using the tiles that you previously designed and saved in your codesnippet text file.

If you skipped ahead and don’t have those tiles, go back to Skill 3: Design 4 tiles to create the four tiles.

If you already tried to make the four tiles and found it difficult, don’t worry. You can work through this skill by tweaking the tiles provided in Program 14.

Active content not displayed. This content requires JavaScript to be enabled.

Program 14 Pattern maker

Interactive feature not available in single page view (see it in standard view).

Video 9 explains how to insert your codesnippets text into the pattern maker.

Download this video clip.Video player: Video 9

Video 9 Adding codesnippets to the pattern maker

Show transcript|Hide transcript

Transcript: Video 9 Adding codesnippets to the pattern maker

CHRISTIAN NOLD

In this video, I’m going to show you how to insert your own tile designs into the pattern maker. So, this is my codesnippets file, where I’ve saved four different tile designs that I’ve created previously. So, this is my first tile, this is the second tile, the third tile, and the fourth tile. And what I’m going to do is I’m just going to go to this program, the pattern maker, and I’m going to insert it inside the function. So, I find here the function for Tile1, and this is the code that describes Tile1.

And what I’m going to do is I’m just going to go and copy that code that I designed previously into the space of that tile. And I’m careful to stay within that space. So, you see that’s changed. And I’m just going to press Play here. So, there you go! Tile1 has changed. Instead of being the number 1 here, it’s become this kind of blue square.

I’m just going to go back and take the second tile design and go down to function 2. This one’s a bit longer here. And I’m just going to paste it on top of there. So, you can see, it’s a different length. That doesn’t matter. I’m just going to press Play. There you go. We’ve just replaced that number 2 with this kind of shape here. I’m going to get my third tile design, and I’m going to go down to function Tile3 and replace it into this space.

So, I paste it on top, press Play. There you go! We now have this kind of purple shape. And I’m going to get the fourth one. And I’m going to go down to function Tile4 and replace this code with my own tile design and press Play. There you go. So, what I’ve done here is I’ve replaced all the tile designs in the given example with my own tile design. So, we have 1, 2, 3, 4.

End transcript: Video 9 Adding codesnippets to the pattern maker

Download

Video 9 Adding codesnippets to the pattern maker

Interactive feature not available in single page view (see it in standard view).

Now try making a pattern using your tiles.

Activity 9 Insert your tiles to make a pattern

Timing: Allow 40 minutes to complete this activity

You are going to use the four tiles that you generated in Skill 3: Design 4 tiles to make a pattern using Program 14 Pattern maker. You will replace the existing code with the code that you saved into your codesnippet text file.

To generate your own pattern:

Copy the code for your first tile from your codesnippet text file and paste it into the function Tile1(), replacing the code that is there.
Repeat this action for your remaining tiles, pasting the respective code into Tile2(), Tile3(), and Tile4().
Your code will look similar to what was there before, but it may not be as neatly aligned. Don’t worry, that won’t affect anything as long as you have pasted the code within the curly brackets { } of the tile functions.
Press Play and you should see your own tiles arranged in a pattern. Hurray!
If you encounter a problem, simply press Revert and start again. The most likely cause is that you have accidentally pasted your code over some of the function code.
Play around with the arrangement of your tiles by tweaking the tileSequence array.

5.3 Skill 6: Redesign and test your pattern

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Take a moment to reflect. Do you like the pattern you created in Skill 5? If you’re anything like me, those tiles you put together didn’t quite make sense as a pattern. When I first gave it a go, I didn’t think about how the tiles would fit together or make an overall pattern.

In this skill, you will learn to design patterns in a modular way. So, you will redesign your pattern to improve it, try variations, and test it to think about your pattern in terms of its design qualities. Design judgement is a key skill to develop within algorithmic design.

Activity 10 Redesign your pattern

Timing: Allow 40 minutes to complete this activity

In the following figure, I used graph paper to draw four tiles, which I labelled Tile 1, 2, 3, and 4. These four tiles form a rosette shape. I also marked some of the coordinates to make it easier to transcribe all the vertices into my code.

Figure 29

Show description|Hide description

The image shows a drawing on graph paper. It shows four tiles placed next to each other to form a rosette pattern. In the middle of the images is a sketch of a flower shape that extends across the four tiles. Each tile is labelled: ‘Tile 1’, ‘Tile 2’, ‘Tile 3’, and ‘Tile 4’. In each tile, the vertices are marked. In Tile 1, these read: ‘18, 17, 27’. In Tile 2, these read: ‘14, 16, 28’. In Tile 3, these read: ‘10, 22, 20’. In Tile 4, these read: ‘23, 21, 9’.

Figure 29

Your aim in this activity is to redesign and improve your existing pattern.

Use a piece of graph paper and draw four blank tiles in a rosette shape, as in the figure above.
Pick one of your existing tiles that you like best and draw it into one of the four spaces of the rosette. Now create three new tiles that complement it within the rosette pattern.
Think about visually reflecting, rotating, or inverting your existing tile. Often creating some kind of symmetrical repetition of a single shape can work well as a pattern design.
Consider how the tiles join up when placed next to each other. Think about the rosettes that will be positioned above and below the current one you are designing. What shapes will they form when they fit together?
Use Program 15 Redesign your pattern below to insert your pattern design. When you are adding in and numbering your vertices’ dots, remember that the four tiles in the rosette are separate and each have coordinates that run from 1–36.
Consider changing the fill and stroke colours of your tiles. By selecting related complementary colours for the tiles, you can create more cohesive designs. Remember the visual effects that the Truchet patterns created using just black-and-white shapes.

Active content not displayed. This content requires JavaScript to be enabled.

Program 15 Redesign your pattern

Interactive feature not available in single page view (see it in standard view).

A useful way to rethink your pattern design and come up with some unexpected visual alternatives is to randomise it and use serendipity as a creative tool.

Activity 11 Try variations of your pattern

Timing: Allow 10-15 minutes to complete this activity

Use Program 15 Redesign your pattern to try variations of your pattern.

Randomise the order of tiles by changing the variable randomise in line 3. You can change its value from 0 to 1. When you press Play, this will randomise the order of the tiles in your tileSequence array within each rosette.
Keep pressing Play to generate new versions. Seeing some of these versions of your pattern might give you some ideas for how to improve your design.
Save images of some of the random variations of your tile designs by right-clicking and saving them as PNG files to your disk or by pressing the S key.

An important part of the design process is testing your design in various ways and contexts. The next video demonstrates how to see the pattern at different scales and how to print it onto paper.

Download this video clip.Video player: Video 10

Video 10 Saving and printing a pattern

Show transcript|Hide transcript

Transcript: Video 10 Saving and printing a pattern

CHRISTIAN NOLD

This is a quick video about saving and printing your pattern. Here’s a pattern I’ve made. To save it, I press the S key, or I do a right mouse button, Save Image As, and save it onto my computer like this. To print it, I need to go and find that image on my hard drive. This is the latest one. So, I open up like this, and to print it I need to go to File, Print.

And then this print dialogue box pops up. This will look different depending if you’re on a Macintosh or on a Windows machine and also on your printer. This is a colour printer, so the preview is in colour. If you select a black-and-white printer, the preview is in black and white, of course. But also some of these options will look different depending on the printer. I’m just going to go back to this one.

OK. What’s important to look at are some of these options around scale. Scale, Scale to Fit, Print Entire Image and Fill Entire Paper. Fill Entire Paper looks good, but actually, some of your pattern will be lost if you use that. So, I recommend using Print Entire Image or something similar like that on your computer. What you’re trying to do is make sure your square pattern is printed like this, and then you press Print simply to print it out.

You’ll notice when this is printed that you’ll have some of this white area which you need to cut off in order to trim down your pattern. But that’s fine. You can trim it off and then you can stick your patterns together to make a larger wallpaper area.

End transcript: Video 10 Saving and printing a pattern

Download

Video 10 Saving and printing a pattern

Interactive feature not available in single page view (see it in standard view).

The next activity suggests a variety of ways for you to test your pattern design.

Activity 12 Test your pattern design

Timing: Allow 40 minutes to complete this activity

You don’t have to do all these tests, but I recommend that you do at least two:

Test 1: try out how your pattern looks at different scales by changing the tileSize variable. The default is tileSize = 50, but you can try changing it to 10, 25, or 100 to see how your pattern looks at different scales. If you choose odd numbers, then the number of tiles per row will change and your pattern will look different.
Test 2: save your pattern design by right-clicking and saving it as a PNG file to your disk or by pressing the S key. Now you can upload it to this external wallpaper manufacturer’s website to see what your pattern will look like as wallpaper.
Test 4: print the PNG image of your pattern onto A4 paper. Follow the instructions in Video 10 above, and make sure you select Print Entire Image, and keep the image proportions the same so that your design does not get distorted. Hang your design on the wall and admire it.

6 Identify a place for your wallpaper design

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Now that you know how to technically create an algorithmic pattern, it's time to design a unique algorithmic wallpaper for your own home! I suggest you start by picking a specific place in your home where you will place your wallpaper. Identifying this site will help to inspire your design by giving it some context.

Go around your home and take a slow and deliberate look at all the spaces where a small piece of wallpaper might fit. You are not going to be able to fill a large area with your design, maybe just 50 cm × 50 cm. So, large walls are out of the question. But there might be some interesting nooks and crannies you can use.

Initially, when searching for a location for my wallpaper, I looked at a shelf which is right next to my work desk, where I reach over to grab things like batteries and cables (Figure 30). Once I clear it up a bit, it should be easier to see the back wall a bit more. I am the only person who sees this corner of my studio every day and it feels like a cosy little place to add my own wallpaper. Maybe the design could be something colourful and energetic with sharp, angular edges to help me work faster. This was one possible location I found for my wallpaper design, along with my family’s kitchen cabinet, and my son’s bedroom.

Figure 30 A potential place for this author’s wallpaper

Show description|Hide description

The image shows a messy shelf that is cluttered with cardboard boxes and cables. Only a small part of the white back wall is visible.

Figure 30 A potential place for this author’s wallpaper

Consider unusual places, such as drawers and cupboards. Small spaces will be easier to cover with wallpaper and your design might have more impact there. If you choose a self-contained space, then you might be able to visually ‘take it over’ with just a small piece of wallpaper. Ask yourself these questions:

How does this space make me and others feel?
What kind of an atmosphere would wallpaper create in this space?
What colours, shapes and patterns does this space make me think of?

To turn algorithmic pattern into wallpaper you will have to print it out onto at least two A4 sheets so that you can attach it temporarily to a surface in your home with masking tape or removable adhesive.

Activity 13 Pick a location

Timing: Spend no more than 20 minutes on this activity

If you found a few locations, make a choice and focus on just a single one. This will be the context for your wallpaper design.

Write down a couple of sentences about why you chose this place and the atmosphere you want to create with your wallpaper design.

7 Look for inspiration

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Now that you know the kinds of tiles and patterns you can design, it’s time to look for some inspiration from other historical tile and pattern designs.

A good place to look is the Victoria and Albert Museum (V&A), which has an online catalogue. You can search their catalogue for tiles or for fabrics. The V&A also has a good guide on creating Islamic tile patterns.

Figure 31 A nineteenth-century design for roofing tiles by designer Matthew Digby Wyatt, created by cutting coloured paper

Show description|Hide description

The image shows a pattern made up of horizontal lines of geometric shapes in muted red and ochre colours.

Figure 31 A nineteenth-century design for roofing tiles by designer Matthew Digby Wyatt, created by cutting coloured paper

When seeking inspiration like this, the goal is to pinpoint discrete elements that can be incorporated into your own wallpaper designs. You might come across intriguing shapes or a colour scheme suitable for your own pattern. Make some notes and sketch some tile and pattern ideas based on these inspirations.

You can install a colour picker extension for your browser that can show you the RGB values of anything on your screen. This free extension for the Chrome browser is one example of this.

In Figure 32 I used the colours of a fabric from the V&A collection, made in 1872 in Kanpur, India, by an unidentified artisan, to set the RGB values for two colours in my own tile design.

Figure 32 RGB values taken from an Indian fabric

Show description|Hide description

The image is split into two halves. The left half shows a piece of mustard yellow fabric with a floral pattern and a red-orange stripe. The right half shows the p5.js canvas with different colour segments that match the colours of the fabric.

Figure 32 RGB values taken from an Indian fabric

Take a moment to reflect that these designs are not just aesthetic objects but originate from specific historical and cultural contexts. Following the completion of this project, you can delve deeper into researching the context of the designs that have inspired your wallpaper pattern. Carrying out this kind of deeper research will strengthen your wallpaper design.

8 Develop and iterate your design

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Consider this section to be your wallpaper studio, where you will produce your final design concept. The studio brings together the tile and pattern maker programs on one page to make it easier to design in a modular way across the tile and pattern levels.

You should work by moving between the tile and pattern maker programs. When you have created a tile, copy and paste the tile code into the relevant tile function inside the pattern maker. Moving backwards and forwards between the two programs will help you to iterate your design concept.

Note: the tile maker is preloaded with a default tile code, allowing you to tweak the vertex values. The pattern maker is blank for you to paste the tile code for your designs.

Active content not displayed. This content requires JavaScript to be enabled.

Program 16 Tile maker

Interactive feature not available in single page view (see it in standard view).

Active content not displayed. This content requires JavaScript to be enabled.

Program 17 Pattern maker

Interactive feature not available in single page view (see it in standard view).

Design guidance

Here are a few things to think about as you experiment and iterate your wallpaper concept design:

Create alternative designs. This will give you a chance to experiment without being too precious about your ideas. It will help you to come up with a better final design than if you were to focus on a single design.
Make the wallpaper relate to its location. Remember that you are designing your pattern for a specific place in your home.
Consider symmetry. Think about reflecting, rotating, or inverting your tiles to create patterns.
Experiment with colour and line thickness. Controlling the fill(), stroke() and background colours as well as the strokeWeight() or noStroke() commands can have a dramatic impact on your design.
Use modularity. Think about both the design of the individual tiles and the overall pattern when connected together in the rosette shape.
Experiment with the tileSequence. Try changing the order of tiles as well as randomising the sequence when creating a pattern.
Pick which tileSize shows off your pattern in the best way. A large tileSize works best for bold patterns, while a small tileSize can help highlight random patterns.
Consider the printer that you will use to print the design. If you only have a black-and-white printer, it might be best to focus on a greyscale pattern design.

Activity 14 Design your wallpaper

Use the two programs on this page to make your wallpaper design.
Make use of the design guidance above.
Create several different designs so you can choose the one that works best when viewed in the context of your space.

9 Choose and Test your Design

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Remember that a pattern is either right or wrong. It cannot be forgiven for blundering, as a picture may be which has otherwise great qualities in it. It is with a pattern as with a fortress, it is no stronger than its weakest point.

(William Morris, quoted in V&A, 2024)

While you experiment with your tiles and patterns, it is important that you look at your work critically and choose which of your designs work better, and which ones don’t. Ideally, you will do this with several ideas to give you something to work with when choosing.

If you get stuck on making decisions about which concept design to take forward, put all the patterns next to each other and ask yourself:

Which of these do I like? Why?
Which of the patterns stands out the most? Why?
What does this pattern ‘say’?
Does this pattern fit into my chosen space in my home?

A useful technique is to print out your favourite designs and to test them by putting them in the space and asking yourself (and others):

Does this design work here?

One of the locations I decided to test for my algorithmic wallpaper was in the kitchen cupboard (Figure 33). I keep the plates in there and it creates a surprise for everyone in the family to see a random Truchet pattern when they open the cupboard to get ready for a meal.

Figure 33 Testing a Truchet pattern in a kitchen cupboard

Show description|Hide description

The image shows some black-and-white checkerboard patterns attached to the inside wall of a kitchen cabinet.

Figure 33 Testing a Truchet pattern in a kitchen cupboard

Another option I tried was an OU logo-inspired wallpaper design. It is made up of about six A4 sheets stuck together and trimmed to fit into the shelf space of the work area. I think this wallpaper design works really well in this space and defines a lovely area for the printer and OU text books (Figure 34).

Figure 34 OU logo inspired wallpaper created by one of the interns who tested this project

Show description|Hide description

The images show a workspace area with a printer and office tray in an alcove. In the back of the alcove is a black-and-white checkered wallpaper pattern that looks like it was inspired by the OU logo in the shape of a shield with a circle in the top left-hand corner.

Figure 34 OU logo inspired wallpaper created by one of the interns who tested this project

Below are several of my wallpaper designs paired with my reflections on each. The objective is to consider the characteristics of each design and its appropriateness for the designated space.

When compiling these designs, I ended up selecting my son’s bedroom as the setting for my wallpaper. He keeps his toys in drawers beneath his bed. The drawers’ interiors are currently plain white and could benefit from a splash of colourful wallpaper to add some fun.

Example pattern 1

Show description|Hide description

The image shows an angular black-and-white pattern.

This pattern uses a single tile with an angular black-and-white shape. The pattern looks crude and not very playful. Maybe I could make it more interesting with some other tile designs and softer colours.

Example pattern 2

Show description|Hide description

The image shows a range of red tilted squares arranged in a random pattern.

This pattern uses four tiles with tilted square decorations. The irregular sequence and colour variation makes the pattern look lively, as if the squares are vibrating. This pattern is better than the previous one, but looks industrial and not suitable for the bedroom drawers.

Example pattern 3

Show description|Hide description

The image shows ochre and brown shapes on a deep green background, forming a pattern.

The colours for this pattern were taken from the V&A fabric in Look for inspiration. It consists of three tiles with subtle shape differences, arranged in a random sequence that gives it an organic feel. While the pattern creates a cozy atmosphere, it feels a bit too dark and sombre for a child’s room.

Example pattern 4

Show description|Hide description

The image shows a purple background with green and blue angular shapes forming a pattern.

I like this pattern a lot. It uses two tiles, one green and one blue, which complement the background that I found by randomising RGB values. I think this could work well on a large show wall but is not really suitable for the drawers.

Example pattern 5

Show description|Hide description

The image shows a strongly repeating geometric pattern in primary colours.

This pattern is my favourite. The tiles are based on the Truchet tiles, and the colours and tile sequence seem to create an intriguing optical illusion of 3D shapes. The primary colours evoke a sense of nostalgia, reminiscent of children’s toys, making it a suitable choice for the drawers in my son’s room.

10 Conclusion

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Well done! You have created your own algorithmic tiles and wallpaper design for your own home! I hope you are proud of what you managed to achieve.

By using code to design patterns, you learnt to work with patterns algorithmically, not merely visually. By designing the individual tiles and then arranging them into a rosette, you used modularity to design elements for reuse across different scales. By experimenting with the order of the tileSequence, you experienced the power of algorithmic repetition. By randomising the tileSequence, you experienced how algorithms can generate alternative versions and use serendipity as a creative tool.

I hope this short course has made you enthusiastic about wanting to learn more about design. Come and join us at the OU to take your design further!

Continue your Design Journey

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

The project you just worked through is an adapted extract from the T190 Design Practices module which is a foundation in design practice that introduces topics from different creative and design disciplines. Each topic introduces design principles and practical skills that you’ll apply in a series of short design projects.

You will have a tutor that will support you throughout your project work, organising regular check-ins, discussion opportunities and project reviews. Your project work will contribute to your final design portfolio, a professional body of work that reflects your interests. By the end of the module, you’ll have started to explore where your emerging design identity could take you.

The module is part of a larger BDes course, which is a full undergraduate qualification in design. Design shapes our world. From the products and services we use to the systems that make up our society. Our design degree (BDes) will nurture your creativity, develop your problem-solving and help you turn ideas into action. You’ll learn through practical projects that introduce you to the world of professional design across industries – from designing a humble T-shirt to tackling real-world problems facing our future. By the end, you’ll have a respected degree, a professional portfolio and the technical and creative skills needed to launch you into your chosen career.

References

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

Cosmic Civilization Leader (2024) ‘Forcefully dismantling the secret manuscripts of French priest Truchet’, LaiTimes, 24 February. Available at: https://www.laitimes.com/en/article/363r2_3mt7e.html (Accessed: 18 April 2024).

Rushkoff, D. (2010) Program or be programmed: ten commands for the digital age. New York, NY: OR Books.

Smith, C.S. and Boucher, P. (1987) ‘The tiling patterns of Sebastien Truchet and the topology of structural hierarchy’, Leonardo, 20(4), pp. 373–385. Available at: https://doi.org/10.2307/1578535

Victoria and Albert Museum (V&A) (2024) William Morris and wallpaper design. Available at: https://www.vam.ac.uk/articles/william-morris-and-wallpaper-design (Accessed: 2 April 2024).

Acknowledgements

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

This free course was written by Dr. Christian Nold.

Except for third party materials and otherwise stated (see terms and conditions), this content is made available under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 Licence.

The material acknowledged below is Proprietary and used under licence (not subject to Creative Commons Licence). Grateful acknowledgement is made to the following sources for permission to reproduce material in this free course:

Figures

Figure 3 Piotr Gaborek / Alamy Stock Photo

Figure 4 Adobe Photoshop Firefly

Figure 6 P5.js / Lauren Lee McCarthy, https://p5js.org/, is under a Creative Commons (CC BY-NC-SA) Attribution-NonCommercial-ShareAlike 4.0 International license, https://creativecommons.org/licenses/by-nc-sa/4.0/

Figure 8 dezydezy / Vector stock

Figure 9 The Open University

Figure 11 Licensed under CC0 1.0 DEED CC0 1.0 Universal. https://www.getty.edu/art/collection/object/103SQK.

Figure 12 Huguet

Figure 13 Huguet

Figure 14 Image is in the Public Domain

Figure 15 The Open University

Figure 16 The Open University

Figure 17 The Open University

Figure 18 The Open University

Figure 19 The Open University

Figure 20 The M.C. Escher Company B.V.

Figure 21 https://babel.hathitrust.org/cgi/pt?id=gri.ark:/13960/t9n345272&seq=77

Figure 22 https://pelletierauger.com/en/projects/the-tilings-of-truchet.html

Figure 23 https://gallica.bnf.fr/ark:/12148/bpt6k5823204r?rk=21459;2

Figure 24 https://babel.hathitrust.org/cgi/pt?id=gri.ark:/13960/t9n345272&seq=77

Figure 25 The Open University

Figure 26 The Open University

Figure 27 https://pelletierauger.com/en/projects/the-tilings-of-truchet.html

Figure 28 https://en.m.wikipedia.org/wiki/File:Truchet_ordered_tiling.svg

Figure 29 The Open University

Figure 30 The Open University

Figure 33 The Open University

Figure 34 The Open University

Example pattern 1 The Open University

Example pattern 2 The Open University

Example pattern 3 The Open University

Example pattern 4 The Open University

Example pattern 5 The Open University

Videos

Video 1 The Open University

Video 2 Bocoup LLC / Software used p5.js/Lauren Lee McCarthy, https://p5js.org/

Video 3 The Open University

Video 4 The Open University

Video 5 The Open University

Video 6 The Open University

Video 7 The Open University

Video 8 The Open University

Video 9 The Open University

Video 10 The Open University

Every effort has been made to contact copyright owners. If any have been inadvertently overlooked, the publishers will be pleased to make the necessary arrangements at the first opportunity.

Don't miss out

If reading this text has inspired you to learn more, you may be interested in joining the millions of people who discover our free learning resources and qualifications by visiting The Open University – www.open.edu/ openlearn/ free-courses.

Glossary

The Open University — Tue, 22 Oct 2024 23:00:00 GMT

algorithm: An algorithm is a sequence of instructions on how to carry out a task. For example, a cooking recipe is an analogue algorithm.
algorithmic design: Design based on a defined and logical set of rules.
codesnippet: A small piece of computer code that you can reuse in multiple different programs.
encaustic cement tiles: Tiles made from different colours of clay, rather than different colour glazes.
function: In terms of computing, a function is a block of code that carries out a specific purpose. In terms of space, the function is the activity or operation that a space or object has.
parameters: In coding, a parameter is a variable listed inside parentheses in the function definition. See also function, variables.
program: In computing, an ordered sequence of instructions that instructs a computer in how to perform a specific task.
RGB: In screen-based technologies – red, green, blue colours can be combined to create many other colours.
stroke: In vector and raster drawing, stroke is the thickness of a drawn line that mimics the equivalent in the use of physical media, such as brushes and pens.
variables: A variable is a piece of data that code can store and change. Variables can hold different types of data, but in our examples, we are only using them to store numbers.
vertex: In vector drawing, the point at which a line changes direction.