Tiles and Mosaics

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

Further Reading

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

Further Reading

Code Lecture

4. Mosaics

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

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

Discussion Questions

  • tk
  • tk

10. Adornment