Eye Colour Predictor

ScratchVeryHard

In this lesson we will create a program that predicts the colour of a child's eyes based on the eye colour of his/her parents. After choosing an eye colour for each parent, this program will tell you what are the percentage chances of the child having blue, brown or green eyes.

1

Create a new Scratch project

Create a new Scratch project and delete the cat sprite by right clicking on the cat and then clicking on the 'delete' option in the menu that appears.

https://scratch.mit.edu


2

Create the first eye sprite

This program will let you choose the eye colours of two parents and then will predict what colour eyes their child would have. To choose the colour of the parents eyes you'll click on a picture of an eye and each time you click it will change colour between blue, brown and green.

Included with this lesson are three pictures of an eye; a blue eye, a brown eye and a green eye. First download these pictures to your computer and then follow these steps:

  1. In your Scratch project click on the 'Upload sprite from file' button.
  2. Go to the folder you saved the eye picture files.
  3. Select the blue eye file and click 'Open'

The blue eye picture will upload into your project and appear in the stage area as a new sprite.

We're now going to create two new costumes for this sprite, a brown eye costume and a green eye costume. Follow these steps to create the two costumes:

  1. Click on the 'Costumes' tab
  2. Click the 'Upload costume from file' button
  3. Choose the brown eye picture and click OK
  4. Click the 'Upload costume from file' button again
  5. Choose the green eye picture and click OK
  6. Rename each costume to 'blue', 'brown' and 'green'




3

Rename the sprite

At the moment the sprite is called 'blue eye', we're going to rename it to 'parent 1' so that when we have a second sprite for the other parent we'll know which is which.

Follow these steps to rename the sprite:

  1. In the sprite list, click on the blue circle with an 'i' in it on the sprite
  2. Change the sprite name from 'blue eyes' to 'parent 1'

4

Shrink the sprite and change it's costume

Next we're going to make the sprite smaller so it fits better and we'll also program it to change it's costume each time it's clicked.

Add the following code to the parent 1 sprite:

Shrink it

  1. events when clicked 
  2. looks set size to 30 % 

Change it's costume

  1. events when this sprite clicked 
  2. looks next costume 

Once you've added this code test that it works by clicking the green flag and then clicking the eye. It should change colour!


5

Create a copy of the sprite

Now that we've setup the sprite for the first parent, we're going to create a copy of it to use for the second parent by doing the following:

  1. Right click on the parent 1 sprite in the sprite list
  2. Select 'duplicate'

A copy of the sprite will be created called 'parent 2'. As it was duplicated, it will have the same code so when you click on it the costumes will change just like the parent 1 sprite.


6

Create another copy of the sprite

We'll need one more copy of the sprite, this time for the child's eyes.

  1. Right click on the parent 1 sprite in the sprite list
  2. Select 'duplicate'
  3. Change the name of the new sprite to 'child'

This sprite will have differnt code to the parent sprites so delete the code that is there. Once you have deleted it add the following code to setup this child sprite:

  1. events when clicked 
  2. looks set size to 20 % 
  3. looks hide 


7

Add the Giga sprite

We're going to add a character to the program who will give the instructions and call out the results.

Open the sprite library and scroll down and find the Giga sprite. Select the sprite by clicking on it and then click 'OK' to add it to your project (you can also double click it to add it).

Once you've added the sprite drag it to the top right of the stage area and give it the following code:

  1. events when clicked 
  2. looks say Click on the eyes to change colours and then press the space bar to predict! for 5 secs 


8

Add text sprites and arrange

Along with the instructions that Giga says, we're going to add some text to the program to explain how it works. We'll do this by creating new sprites, putting text in them and then arranging them on the stage area.

Add 4 new sprites with the following text 'Parent 1', 'Parent 2', '+' and '=' by following these steps:

  1. Click on the 'Paint new sprite' button (the paint brush)
  2. Click on the 'Convert to vector' button
  3. Click on the Text tool (the T button)
  4. Click on the middle of the editor area and type the text
  5. Move and increase the size as necessary

Once you have created them arrange the sprites like they are in the picture with this step.



9

Create a 'predict' custom block

To begin the prediction you will press the space bar. We will get the costume names of the 'parent 1' and 'parent 2' sprites (as this will tell us what colour they are) and pass these into function called 'predict'.

First add the following code to the 'child' sprite:

  1. events when [space] key pressed 
  2. looks set size to 20 % 
  3. motion go to x: 50 y: 0 
  4. pen clear (we will be stamping on the stage area so we need to clear it at the start)

Next we will create our custom block called 'predict' and we will set it up to allow two values to be passed into it; an eye colour for parent 1 and an eye colour for parent 2.

To create a custom block go to the More Blocks palette:

  1. Click on the 'Make a Block' button
  2. Type 'predict' into the purple box
  3. Click on the arrow beside Options
  4. Click on the 'Add string input' button 2 times (2 number boxes will appear in the block)
  5. Rename 'string1' and 'string2' so they they're called 'parent1' and 'parent2' respectively.
  6. Click on the OK button

A large purple block called define predict parent1 parent2 will appear in the code area and a predict     block will appear in the toolbox.

To call this function add the following code underneath the clear block:

  1. moreblocks  predict     
    (replace the first [] with sensing [costume  name] of [parent 1])
    (replace the second [] with sensing [costume name] of [parent 2])

10

Create the variables

We now need to create some variables that will store the percentages for each eye colour.

In the Data palette, create 3 new lists: by clicking the 'Make a Variable' button.

  1. 'colour 1' this will store the name of the first colour
  2. 'colour 2' this will store the name of the second colour
  3. 'colour 3' this will store the name of the third colour
  4. 'percent 1' this will store the percent of the first colour
  5. 'percent 2' this will store the percent of the second colour
  6. 'percent 3' this will store the percent of the third colour

When you create your first variable you will notice that new blocks for variables become available to use in the Data palette. Click the checkbox with the tick beside each variable block, this will hide it on the stage area.


11

Create a 'set variables' custom block

We'll now create a function that sets the values of these variables.

To create a custom block go to the More Blocks palette:

  1. Click on the 'Make a Block' button
  2. Type 'set variables' into the purple box
  3. Click on the arrow beside Options
  4. Do the following 3 times:
    1. Click on the 'Add string input' button
    2. Click on the 'Add number input' button
  5. Rename 'string1', 'string2' and 'string3' so they they're called 'colour1', 'colour2' and 'parent3' respectively.
  6. Rename 'number1', 'number2' and 'number3' so they they're called 'percent1', 'percent2' and 'percent3' respectively.
  7. Click on the OK button

A large purple block called define set variables colour1 percent1 colour2 percent2 colour3 percent3 will appear in the code area and a set variables   1   1   1 block will appear in the toolbox.

Add the following code to thedefine set variables colour1 percent1 colour2 percent2 colour3 percent3 block:

  1. data set [colour1] to 0 (replace [0] with colour1)
  2. data set [percent1] to 0 (replace [0] with precent2)
  3. data set [colour2] to 0 (replace [0] with colour2)
  4. data set [percent2] to 0 (replace [0] with precent2)
  5. data set [colour3] to 0 (replace [0] with colour3)
  6. data set [percent3] to 0 (replace [0] with percent3)


12

Program the 'predict' function

Now we'll add the instructions for the 'predict' function. This will set the variables depending on what the colour of the parents eyes are. You will see in the chart with this step the percentages depending on the colour combination. We're going to code these using if-then-else statements that are 'nested' inside each other.

Add the code underneath the define predict parent1 parent2 block that will do the following:

  • If parent1 = brown and parent2 = brown then
    • set variables brown 75 green 18.75 blue 6.25 
  • else
    • If (parent1 = green and parent2 = brown) or (parent1 = brown and parent2 = green) then
      • set variables brown 50 green 37.5 blue 12.5 
    • else
      • If (parent1 = blue and parent2 = brown) or (parent1 = brown and parent2 = blue) then
        • set variables brown 50 blue 50 green 0 
      • else
        • If parent1 = green and parent2 = green then
          • set variables green 75 blue 24.75 brown 0.25 
        • else
          • If (parent1 = green and parent2 = blue) or (parent1 = blue and parent2 = green) then
            • set variables blue 50 green 50 brown 0 
          • else
            • set variables blue 99 green 1 brown 0 


13

Create a 'stamp eyes' custom block

Now that we've worked out the percentages, we're going to use the child sprite to 'stamp' eyes on the stage area. We will stamp an eye, then move to the right and stamp another eye, then we'll shrink the size of the sprite and move it down ready to stamp the next set of eyes.

Create a function that performs the instructions for stamping a set of eyes. Go to the More Blocks palette:

  1. Click on the 'Make a Block' button
  2. Type 'stamp eyes' into the purple box
  3. Click on the arrow beside Options
  4. Click on the 'Add string input' button
  5. Rename 'string1' to 'colour'
  6. Click on the OK button

A large purple block called define stamp eyes colour  will appear in the code area and a stamp eyes    block will appear in the toolbox.

Add the following code to the stamp eyes    block:

  1. looks switch costume to colour  
  2. looks show 
  3. pen stamp 
  4. motion change x by 80 
  5. pen stamp 
  6. looks hide 
  7. motion change x by -80 
  8. looks change size by -5  
  9. motion change y by -55 

14

Broadcast the results

Now we will call the 'stamp eyes' function to put a set of eyes on the stage area and then broadcast a message so that Giga can call out the percentage.

Add the following code to the 'child' sprite at the bottom of the define set variables colour1 percent1 colour2 percent2 colour3 percent3 block:

  1. moreblocks stamp eyes colour1 
  2. events broadcast [result1] 
  3. control wait 4 secs 
  4. moreblocks stamp eyes colour2 
  5. events broadcast [result2] 
  6. control wait 4 secs 
  7. moreblocks stamp eyes colour3 
  8. events broadcast [result3] 
  9. control wait 4 secs 

15

Say the results

Our last step is to program Giga to receive the messages and say the results. First we will create a function for Giga that makes the sprite say the result. Go to the More Blocks palette (make sure you're adding this to the Giga sprite):

  1. Click on the 'Make a Block' button
  2. Type 'say result' into the purple box
  3. Click on the arrow beside Options
  4. Click on the 'Add number input' button
  5. Click on the 'Add string input' button
  6. Rename 'number1' to 'percent'
  7. Rename 'string1' to 'colour'
  8. Click on the OK button

A large purple block called define say result percent colour  will appear in the code area and a say result 1    block will appear in the toolbox.

Add the following code to the say result 1    block:

  1. looks say Hello!  
    (replace [Hello!] with operators join hello world)
    (replace [hello] with [There's a ])
    (replace [world] with operators join hello world)
    (replace [hello] with percent)
    (replace [world] with operators join hello world)
    (replace [hello] with [% chance the child's eyes will be ])
    (replace [world] with colour)

Now add code to receive the messages and call the 'say result' function. Add the following code to the Giga sprite:

  1. events when I receive [result1] 
  2. moreblocks say result  percent 1  colour 1

  1. events when I receive [result2] 
  2. moreblocks say result  percent 2  colour 2

  1. events when I receive [result3] 
  2. moreblocks say result  percent 3  colour 3


16

Try it out!

Phew that was a lot of code, well done for finishing it. Click on the green flag and check to see if everything is working. You should be able to change the colour of the parents eyes and then press the space bar to predict the child's eye colour.

End of lesson
Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu