1

INTRODUCTION

UNIT 6: ART (PROCEDURES)

LESSON

6.9

Generative Art

INTRODUCTION

UNIT 6: ART (PROCEDURES)

2

Lookback Lesson 6.8

UNIT 6: ART (PROCEDURES)

In our last lesson, we learned about drawing programs that users can interact with.

We added user input and draggability to our shape-making program to make it interactive.

LESSON 6.9: GENERATIVE ART

3

LAUNCH Lesson 6.9

UNIT 6: ART (PROCEDURES)

Today, we will learn about generative art, which is creative code that is programmed to make itself.

We will create our own generative art programs in Scratch.

LESSON 6.9: GENERATIVE ART

Do Now

5

DO NOW: REAL-WORLD CONNECTIONS

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's start by hearing from Casey Reas, an artist who is also one of the creators of the software called Processing.

6

DO NOW: REAL-WORLD CONNECTIONS

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

After watching this video, what do you think "generative art" might be?

What does Casey think is an �exciting way to work with computers and why?

What different kinds of art is Casey able to create using just code?

Was anything you saw in the �video unexpected? If so, what was �it and why?

Mini Lesson

8

WHAT IS GENERATIVE ART?

UNIT 6: ART (PROCEDURES)

Generative Art is a process �of algorithmically generating new ideas, forms, shapes, colors or patterns. First, you create �rules that provide boundaries �for the creation process. Then �a computer follows those rules �to produce new works on �your behalf.

Source: aiartists.org/generative-art-design

LESSON 6.9: GENERATIVE ART

In other words, the code allows the art to create, or generate, itself!

9

WHAT IS GENERATIVE ART?

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

These artworks from generative artist Katharina Brunner all use the same �basic procedures. What makes them all look different is that the code uses parameters �that are randomly generated. This creates a different result every time!

10

WHAT IS GENERATIVE ART?

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Generative art can produce sculptures as well. This column was created by artist Michael Hansmeyer using code. The parameters of the program can be changed to create an infinite number of different columns.

Amazing things can be created with code!

11

Generative ARt In Scratch

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Can you believe all three of these were made in Scratch using the exact same program? Just like the other art we just saw, it uses random values for some of the parameters so it makes different �art every time the program is run!

12

Generative art in scratch

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Here is another one that uses the stamp block instead with random values for different settings.

First, there are multiple costumes — half with colors that are changed with the color effect and half with shades of gray and black.

Can you figure out what kinds of Motion blocks were added to a forever loop to create this? Pay attention to how much or little the line sprite moves and rotates.

13

Pre-coding connection: Random Parameters

UNIT 6: ART (PROCEDURES)

Let's talk about those random parameters that help make generative art unique every time our program is run!

First, let's review the options we can use for the Pen extension. Then, we'll see how we can randomly set these options. Finally, we'll look at how procedures can help us with this in a couple of different ways.

LESSON 6.9: GENERATIVE ART

14

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

The options we can set for the Pen itself are:

• Size
• Color
• Saturation
• Brightness
• Transparency

We can use the blocks shown here to set or change these options.

15

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

We can use the pick random block in these Pen blocks to make our program pick a number at random from the range we enter.

Here's an example of the change pen size by block with a pick random block. This combination will tell our program to randomly pick the pen size from the numbers 1–10.

What other block category would this be useful with?

16

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

We can do this with Motion blocks �to tell our program to, for example, move a random amount of steps each time the sprite moves to draw.

Think about how much you want the size of your lines to vary each time. If you just want the to change a little, use a smaller range, like 50–70. If you want a bigger variety of sizes, use a larger range, like 50–100.

17

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's look at an example! This program runs a forever loop to:

• Go to a random location
• Change the color by a specific number
• Set the size to a random number within a range.
• Then, it puts the pen down and moves a random number of steps within a range.
• Finally, it picks the pen back up.

What would the script for this look like? What do you need to include to initialize this program?

18

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's change a couple of things and see what happens. This program runs a forever loop to:

• Go to a random location
• Set the size to a random number.
• Then, it puts the pen down and moves a specific number of steps.
• Finally, it picks the pen back up.

A parallel script in a forever loop tells it to wait 0.25 seconds and then change the color by a specific amount. That's right — we can run parallel scripts to generate other changes to our art as well! We also used show and hide to not show the sprite while it draws.

19

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

We can even randomly change the appearance of our stamp! In one or two other projects, we learned that the reporter blocks (the rounded ones) can also be used in place of dropdowns as long as the dropdown has the same rounded shape. We also know that costumes are numbered in the Costumes tab.

To change a stamp to a random costume, we can simply change the sprite's costume by inserting the pick random block into the dropdown of the switch costume to block.

20

Pre-coding connection: Random Parameters

UNIT 6: ART (PROCEDURES)

If we try to change the options �for the stamp using the Pen �blocks that control color, size, transparency, etc., it doesn't work! How can we change these effects for the stamp?

These have to be changed through the Looks blocks instead. We can add a pick random block to these blocks to change the size or graphic effects at random.

Let's see a few examples!

LESSON 6.9: GENERATIVE ART

21

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

This program runs a forever loop to:

• Go to a random location
• Set the mosaic effect to a random number
• Change the color by a random number
• Then, it uses the stamp!

What would the script for this look like? What do you need to include to initialize this program?

22

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

This program runs a forever loop to:

• Go to a random location
• Switches to a random costume
• Set the size to a random number
• Then, it uses the stamp!

What would the script for this look like? What do you need to include to initialize this program?

Let's see what happens when we apply one change to this program.

23

Pre-coding Connection: �Random Parameters

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

This program sets the ghost effect before it runs the forever loop, which gives the sprite transparency before it the stamp block is used. This captures a very different result because we can see all of the stamps layered one over the other.

24

Pre-coding Connection: Simplify the procedures

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

For this activity, we're going to use procedures to help us abstract our code to make it simpler to build the scripts that will generate our artworks.

Using the pick random block can make our code appear quite clunky and intimidating. Creating procedures helps us simplify things! Our goal in this project is to simply use procedures to make our code simpler to read.

Activity

26

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

Create generative art in Scratch using random parameters and procedures that simplify the program!

Today’s Mission

27

Scratch Project: Preview

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

We saw a lot of examples during this lesson. If you need inspiration, just refer back to the ones we saw earlier!

There is a lot of freedom in this project so have fun and stretch your creativity! Set up the code, let your program make the art for you, and then sit back and enjoy watching the art generate itself.

28

Scratch Project: �Create a �New Project

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

• Go to scratch.mit.edu.
• Log into your Scratch account.
• Create a new project and give it a name.

29

Scratch Project: �Pen or stamp?

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Here's the program we'll be making in this walkthrough. We used the stamp but you can choose either. You might even choose both!

Many of the concepts and blocks used here can also be used when drawing with the Pen. All you have to do is make the adjustments we went over earlier in the lesson to use the Pen blocks to adjust the options instead of the Looks blocks.

30

Scratch Project: �Set your stage

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

First, let's set up our Stage.

As with some of our other projects that use the Pen extension, you may want to use a solid-colored backdrop. We kept our backdrop solid white and used a crystal for our sprite that will be stamped.

• Add a backdrop and sprite of your choosing.

31

Scratch Project: �Initialize the program

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Next, let's initialize our program so we can reset while building and testing our code. Again, we don't know yet exactly what will need to be reset, but, there are things we can program now so things go back to a good starting place as needed while experimenting with our code.

• Add a when green flag clicked block.
• Next, add an erase all block.
• Add Looks blocks to remove any graphic effects and set the size to what you want your sprite to start out at.
• Add Motion blocks to start your sprite at the center and point in a 90° direction.

32

Scratch Project: Initialize the program

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Since we're using the stamp �in this example, we used the clear graphic effects and set size to blocks because any changes we might make to �the stamp will be from the Looks category. Other guidance on the blocks we chose are shown here.

If we were drawing with the Pen, we'd need to use the blocks from the Pen extension to reset things like the color, size, or transparency.

33

Scratch Project: �Make some code decisions

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

Now, it's time to experiment with our code to decide:

• Which options to set or change
• When those changes should happen (e.g., with every stamp or on a timer)
• What to change or set randomly, including what numbers to use.

This walkthrough is just one example of things that a sprite can do to create generative art. Your program might look totally different and that's okay!

34

Scratch Project: Make some code decisions

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

For this walkthrough, we're going to have our program do lots of things so you can see lots of examples. However, your own projects don't need to include this many!

Here's what the pseudocode for the sprite in this example might look like. This will help us break the program down into pieces so we can look at which things to turn into procedures.

When the space key is pressed, the sprite will become 50% transparent and move to a random location. Then, it will do these in a forever loop:

• Set its size to anywhere between 300–700% of its original size.
• Rotate to the left or right by any number up to 45°.
• Move forward or backward no more than 50 steps at a time.
• Make a stamp.

In parallel, the sprite will change its color every second by no more than 20.

35

Scratch Project: Make some code decisions

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

We're going to use procedures to build the more complex bits of code one-by-one instead of trying to build it all at once.

This helps us abstract the code by making �it simpler to build, use, and follow. It also makes it easier to experiment with the numbers in the parameters to figure out �what number values we want to use in our finished program.

We're going to make procedures for the �4 parts circled here. Let's do the first one!

When the space key is pressed, the sprite will become 50% transparent and move to a random location. Then, it will do these in a forever loop:

• Set its size to anywhere between 300–700% of its original size.
• Rotate to the left or right by any number up to 45°.
• Move forward or backward no more than 50 steps at a time.
• Make a stamp.

In parallel, the sprite will change its color every second by no more than 20.

36

Scratch Project: �Random Size Change

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

The first procedure we're going to build will change the size of the sprite to a random size between specific numbers. Building a procedure here lets us combine multiple blocks into one.

• Make a custom procedure block named set random size.
• Add an input followed by a label.
• Name the input parameter lower and the label to.
• Add another input followed by a label.
• Name this input parameter higher and the label %.

37

Scratch Project: �Random Size Change

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Now, let's define this procedure.

• Add a set size to block underneath the define block.
• Add a pick random block into the empty spot of set size to.
• Drag the lower block to the 1st empty spot of pick random and higher to the 2nd empty spot.

38

Scratch Project: �Random Rotation

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

Next, we're going to make a procedure to turn to the right �or left up to a certain number �of degrees. Let's think about �how we might do this.

If we use turn right or turn left blocks, our sprite will only turn in �1 direction. If you prefer this, that's okay! For this example, we want �to go in both directions so we'll �need to use a point direction �block and make Scratch calculate something for us.

39

Scratch Project: �Random Rotation

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's build our procedure block first. Then, we'll work on the definition.

• Make a procedure and name it turn left or right up to.
• Add an input parameter and name it degrees.
• Add a label and fill it in with degrees.

Now, let's define this procedure!

40

Scratch Project: �Random Rotation

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

To turn our sprite in any direction, we can use point in direction plus some math. All we have to do is add (to turn right) or subtract (to turn left) from the sprite's current direction.

• Add a point in direction block.
• Add a pick random block to the empty spot of point in direction.
• Drag a subtraction block to the 1st empty spot of pick random.
• Drag an addition block to the 2nd spot.
• Add a direction block to the 1st spot of both addition and subtraction, and the degrees parameter to the 2nd empty spot.

When the number of degrees decrements, the sprite rotates to the left.

When it increments, it rotates to the right.

41

Scratch Project: �Random Movement

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

Great work so far! Let's keep going with our procedures.

This time, we're going to move a random number of steps. Similar to the previous procedure though, we want to move forward or backward at random by up to a specified number. The move steps block always moves a sprite forward though unless we use a negative number. This means we'll need to add a little math to the move steps block.

Think about how we might do this while we build the procedure block. Then, we'll define the procedure.

42

Scratch Project: �Random Movement

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

• Make a procedure and name �it move forward or backward up to.
• Add an input parameter and name it steps.
• Add a label and fill it in with steps.

We're now ready to define this procedure!

43

Scratch Project: �Random Movement

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Since the move steps block makes the sprite �move in the direction it is facing, we can't just use add or subtract from a location to calculate where to move to. This means we have to have Scratch do our math a little different this time.

• Add a move steps under the define block.
• Add a pick random block to the empty spot �of move steps.
• Add a subtraction block to the 1st empty �spot of pick random and enter "0" as the �first number.
• Drag the steps parameter block into the �2 remaining empty spots.

Creates the negative �of the number entered into steps.

44

Scratch Project: �Parallel Changes

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Now, let's make one more procedure to change the color of our sprite by up to a certain amount in the timing we specify.

• Make a procedure named random color change up to.
• Add an input followed by a label.
• Name the input parameter number and the label every.
• Add another input followed by a label.
• Name this input parameter seconds and the label seconds.

45

Scratch Project: �Parallel Changes

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Next, we'll define this procedure.

• Add a wait block under the define block.
• Drag the seconds parameter block into the wait block.
• Add a change effect by block and make sure color is selected from the dropdown.
• Add a pick random block to the change effect by block.
• Enter "1" into the 1st empty spot of the change effect by block.
• Then, drag the number parameter block into the 2nd spot.

46

Scratch Project: Check Your Procedures

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's review our pseudocode to make sure we've built everything, and check for our next steps. From this, we can see we'll need to build 2 scripts that run in parallel and are triggered by the event of the space key being pressed.

When the space key is pressed, the sprite will become 50% transparent and move to a random location. Then, it will do these in a forever loop:

• Set its size to anywhere between 300–700% of its original size.
• Rotate to the left or right by any number up to 45°.
• Move forward or backward no more than 50 steps at a time.
• Make a stamp.

In parallel, the sprite will change its color every second by no more than 20.

47

Scratch Project: Check Your Procedures

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Before building your scripts, double-check your procedures to make sure �they work properly. You may also want to check out what changing the values �in the blocks do to get an idea of how you might want to set them up in your �final scripts.

For example, here's how different number values affect the turn left or right up �to block. A color change effect was also added so we can see each time it turns, even if it is only 1°.

48

Scratch Project: Check Your Procedures

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

One more example! Here's how different number values affect the move forward or backward up to block.

49

Scratch Project: �Generate art

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's build the first script!

• Add a when space key pressed block.
• Place a set effect to block under this. Select ghost and enter "50" for the value.
• Add a forever block. The rest of the blocks will go inside of this loop.
• Add a set random size block and fill in the values. We chose "300" and "700."
• Add a turn left or right up to block and fill in the value. We chose "45" so the sprite won't turn more than 45° at a time.
• Add a move forward or backward up to block and fill in the value. We chose "50."
• Add the stamp block.

50

Scratch Project: �Generate art

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Great work! The last thing we need to do before testing our work is add the parallel script to change the color every second.

• To have it trigger with the same �event, drag in a when space key pressed block.
• Add a forever block.
• Inside the loop, add the random �color change up to block.
• Enter the values for the amount the color should change and the time interval.

51

Scratch Project: �Test the Code

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Let's test out our work! When we run the program, we see that the ghost effect stops when we click the red stop button above the Stage.

If you wish to not have the opaque sprite show at the end, you can use the show and hide blocks to hide the sprite when the space key is pressed and then show when the program initializes.

52

Scratch Project: �Test the Code

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

Here's our final scripts (minus the procedure definitions) with the show and hide blocks added. When we run this program, we get a different result every time thanks to the random parameters — amazing!

53

Scratch Project: �Optimal Bonus Timer

UNIT 6: ART (PROCEDURES)

LESSON 6.9: GENERATIVE ART

If you have extra time left in class, build a countdown timer to make your program stop after a set amount of time. This is the same kind of timer as the ones we built for our gaming programs.

Then, run your program multiple times and check out the different results you get for your generative �art each time!

54

Scratch Project: Mission checklist

UNIT 6: ART (PROCEDURES)

All done with your project? �Check each of these steps:

• I have created a procedure with at least 1 randomized parameter.
• I used the Pen extension to draw or create stamps on the Stage.
• I have a parallel script that changes something at a set time interval, (e.g., the location or color changes every 2 seconds).

LESSON 6.9: GENERATIVE ART

Close out

56

LESSON 6.9: GENERATIVE ART

UNIT 6: ART (PROCEDURES)

Discussion: Generative Art

How does generative art differ from the other art we've made so far?

What random parameters did you use in your project today? What results did you get?

What else do you think you �can make using this type of �art and code?

57

57

Lesson 6.9 complete

UNIT 6: ART (PROCEDURES)