Tiles and Mosaics is an exploration of creative coding and generative art through the act of tile making. Tiles have a long history as an object of both handicraft and manufacturing. Through exploring this craft we will learn how to design with code and create visual systems inspired by our analog world.
In hands-on workshops, you will gain an understanding of JavaScript and the creative coding library p5.js. At the end of the course, students will walk away with the ability to create generative art and a new perspective on how programming is already present in their creative practices.
The course was created by Romello Goodman and offered via Index.
More
Schedule
| Week 1 May, 0th 2022 | Tiles |
| Week 2 May, 0th 2022 | Mosaics |
| Week 3 June, 0th 2022 | Masonry |
| Week 4 June, 0th 2022 | Polish |
Initial Agenda
| 4 - 5:15pm | Sketch, Present & Discuss |
| 15min | Break |
| 5:30 - 6:15pm | Code Along |
| 15min | Q&A |
Helpful links
Code of Conduct
Index is a community. That means that you’re in it, and we’re so glad you’re here. We encourage you to stay connected throughout your time enrolled in this course as well as afterwards. Your class will be using Discord for messaging (you’ll all receive an invite on Monday), and through Discord you’ll be part of our community discourse with all our past students, instructors and contributors to Index. It’s important to us to be explicit with our values and expectations within that discourse: Any harmful or hateful messaging will be treated without tolerance.
Tiles
Module 1: Making tiles by composing shapes and their attributes. Introduction to each other and p5.js.
More
Opening "Sketch"
Go to the coolors tool and create a 4-color palette. Screenshot your choice.
Weekly Prompt
Go on a walk and find a tile. Recreate it using basic shapes. If you can’t find one then search for one in your favorite app, like Instagram or Pinterest.
Reading
- Always Already Programming by Melanie Hoff
- The Importance of generative art by Tyler Hobbs
Further Reading
- First steps with p5.js by Allison Parrish
- Coordinate System and Shapes by p5js.org
- A Field Guide to Debugging by p5js.org
Code Lecture
0. Setup
1. Shapes
2. Tiles
3. Composition
Mosaics
Module 2: Using tiles to create mosaic patterns via loops and grids.
More
Opening Sketch
Recreate one of Piet Mondrian's geometric paintings, such as Composition No. III. Instead of the Bauhaus Color 5-color palette. Create yours using a 4-color palette from class.
Weekly Prompt
Create a mosaic sketch that works at two different dimensions: 2 by 2, 3 by 2, X by Y, etc. Save 2 photos.
Reading
- What is Formstorming? by Ellen Lupton
- Some thoughts on Generative Art by Anders Hoff
Further Reading
- Ten Questions Concerning Generative Computer Art by Jon McCormack, Oliver Bown, Alan Dorin, Jonathan McCabe, Gordon Monro, Mitchell Whitelaw
Code Lecture
4. Mosaics
- masonry-4a Loop Tile
- masonry-4b Basic Mosaic
- masonry-4c Conditional Mosaic
- masonry-4d Pattern Alternating Mosaic
5. Grids
6. Mosaic Tiles
Masonry
Module 3: Creating systems where small pieces of logic are turned into larger generatice pieces.
More
Opening Sketch
Create a 2x2 mosaic sketch using a two colors and the lerpColor() function.
Weekly Prompt
Prompt tk. Save 4 photos.
Reading
- What is Parametric Design? by Robazzo
- On meta-design and algorithmic design systems by Rune Madsen
Further Reading
- tk
Code Lecture
7. Color
8. Patterns
9. Random and Noise
Polish
Module 4: Presenting our final works and creating a class mosaic.
More
Class Mosaic
As a class we are going to create a mosaic, and each of us is going to create a tile for it. First step, what is our color palette going to be? Let's pick one.
Reading
- Always Already Programming by Melanie Hoff
Discussion Questions
- tk
- tk
10. Adornment