scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch...

59
8/1/2018 1 mjb – August 1, 2018 1 Computer Graphics Scratch Programming http://cs.oregonstate.edu/ mjb/scratch ~ scratch.pptx Mike Bailey [email protected] mjb – August 1, 2018 2 Computer Graphics Here’s What These Notes Are Going to Cover

Transcript of scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch...

Page 1: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

1

mjb – August 1, 2018

1

Computer Graphics

Scratch Programming

http://cs.oregonstate.edu/ mjb/scratch~

scratch.pptx

Mike Bailey

[email protected]

mjb – August 1, 2018

2

Computer Graphics

Here’s What These Notes Are Going to Cover

Page 2: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

2

mjb – August 1, 2018

3

Computer Graphics

What is “Scratch”?

Scratch is a programming environment that lets you create your own artwork and animations. It’s easy and it’s fun! It also teaches you the fundamentals of programming, possibly without you realizing that’s what you are doing.

Scratch was developed at MIT. It is free, and runs on Windows, Mac, and Linux machines. There is now also a web browser-only version.

In these notes, we will write a program that makes spiraling squares that change color. This is just a start -- you can do lots more than this!

mjb – August 1, 2018

4

Computer Graphics

How Can You Get Scratch 1.4 for Free?

Scratch is free. To download it, go to the Scratch web site:

http://scratch.mit.edu/scratch_1.4/

and click here on one of these:

Page 3: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

3

mjb – August 1, 2018

5

Computer Graphics

How Can You Get Scratch 2.0 for Free?

Scratch 1.4 is very stable and has the features you most want to use. However, there is a new Scratch 2.0 that has some new features you might have fun with (e.g., cloning, code blocks). Download it at:

http://scratch.mit.edu/scratch2download/

You can also get a web browser-based version of Scratch 2.0 at:

http://scratch.mit.edu/projects/editor/

Explanations of some of the new Scratch 2.0 features are found later in these notes.

mjb – August 1, 2018

6

Computer Graphics

Scratch Screen Layout

Script Area“Stage” (i.e., the scene)

CommandCategories

Commands in a Selected Menu

Sprite Manipulation

Sprite SelectionTabs

Page 4: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

4

mjb – August 1, 2018

7

Computer Graphics

Menu Tabs -- File

Abandon the current project and start a new one

Abandon the current project and open an existing one

Without abandoning the current project, bring an existing one in and assign all its properties (including its scripts) to a new sprite

Write out all of the information about the current sprite

Brings up a notepad for you to record information about this project

mjb – August 1, 2018

8

Computer Graphics

Menu Tabs -- Edit

Page 5: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

5

mjb – August 1, 2018

9

Computer Graphics

Menu Tabs -- Share

mjb – August 1, 2018

10

Computer Graphics

Menu Tabs -- Help

Page 6: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

6

mjb – August 1, 2018

11

Computer Graphics

Duplicate Delete Grow sprite Shrink Sprite

Set Language Save Share

Icons

mjb – August 1, 2018

12

Computer Graphics

A Good Way to Start Any Program –A Collection of Comments Describing What You Are Trying To Do

Right-click in the Script Area and select add comment

Then type your comment

A set of English-readable statements are a better way to start than just entering code.

Page 7: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

7

mjb – August 1, 2018

13

Computer GraphicsThe next step is to know what Scratch code statements you have to work with …

A set of English-readable statements are a better way to start than just entering code.

mjb – August 1, 2018

14

Computer Graphics

Motion MenuMove the sprite a certain number of steps (pixels) in the direction it is pointing

Change the pointing direction clockwise or counterclockwise

Set the pointing compass direction

Point towards something in particular (e.g., mouse-pointer)

Move the sprite to a particular location

Move the sprite somewhere in particular (e.g., mouse-pointer)

Animate the sprite somewhere in particular

Change the sprite’s x location by a certain amount (+ or -)

Set the sprite’s x location to a certain amount

Change the sprite’s y location by a certain amount (+ or -)

Set the sprite’s y location to a certain amount

If this sprite is on a scene edge, turn it around so it can move in the other direction

Display the x and y locations in the scene

Display the direction angle in the scene

Page 8: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

8

mjb – August 1, 2018

15

Computer Graphics

Costumes

Each sprite can have multiple ways it can look. Each of these is called a costume.

These can be changed during the course of an animation to give the appearance that the subject is moving or has simply changed its “look”.

mjb – August 1, 2018

16

Computer Graphics

Looks MenuChange this sprite to look like its designated “costume”

Change this sprite to look like its next costume

Display the costume number in the scene

Put a talking balloon on this sprite.

Put a thinking balloon on this sprite.

Change one of these effects

Set one of these effects

Clear all of these effects

Change the sprite size (%)

Set the sprite size (units are percent of original size)

Display the sprite size in the scene

Display this sprite

Don’t display this sprite

Move this sprite in front of all the others

Move this sprite behind one layer of sprites

Page 9: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

9

mjb – August 1, 2018

17

Computer Graphics

Effects in the Looks Menu

color fisheye whirl

pixelate mosaic brightness ghost

mjb – August 1, 2018

18

Computer Graphics

If You Have Selected a Background,the Looks Menu Appears Like This

Page 10: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

10

mjb – August 1, 2018

19

Computer Graphics

Sound MenuPlay a particular sound. Keep executing commands while the sound plays.

Play a particular sound. Pause until the sound is done playing.

Stop playing all sounds

Play a particular drum sound (35-81)

Stop playing thedrum for a moment

Play a particular note

Set the instrument number 1-128

Change the volume (percent)

Set the volume (units are percent)

Display the volume in the scene

Change the tempo (+ or -, units are beats per minute)

Set the tempo (units are beats per minute)

Display the tempo in the scene

mjb – August 1, 2018

20

Computer Graphics

A Real Pen Plotter

Up/Down

Roland

Page 11: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

11

mjb – August 1, 2018

21

Computer Graphics

Pen Menu

Erase all previous plotter linework

Will the next pen movement leave a trace or not?

Click here to bring up a color palette to choose from

(See the next slide)

(See the next slide)

Control the width of the trace

Stamp a permanent copy of the sprite

mjb – August 1, 2018

22

Computer Graphics

Pen Color (0-210)

Pen

Sha

de (

0-10

0)

The Meanings of “Pen Color” and “Pen Shade”

Black

White

Page 12: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

12

mjb – August 1, 2018

23

Computer Graphicshttp://en.wikipedia.org/wiki/HSL_and_HSV

The Meanings of “Pen Color” and “Pen Shade”

In computer graphics, this sort of color representation is referred to as Hue-Lightness. In the diagram below, the Scratch pen colors occupy the outer skin of the cylinder. Full color representation has a third component, Saturation, which Scratch doesn’t give you access to.

Hue

Lig

htn

ess

“Pen Color” = Hue.“Pen Shade” = Lightness

mjb – August 1, 2018

24

Computer Graphics

The Meaning of “Stamp”

Page 13: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

13

mjb – August 1, 2018

25

Computer Graphics

Controls Menu, I

When the green flag at the top of the screen is clicked, this part of the program will start executing. You can have as many of these as you want.

When a particular key is pressed, this part of the program will start executing. You can have as many of these as you want.

When this sprite is clicked, this part of the program will start executing.

Pause

Loop forever

Loop a particular number of times

Send a signal out to everyone. You get to pick the name. The “wait” option will wait until everyone has actually received the signal.

When this signal is broadcast, this part of the program will start executing. You can have as many of these as you want.

mjb – August 1, 2018

26

Computer Graphics

Controls Menu, II

Loop forever if the given condition is true

Execute this block of statements if the given condition is true

Execute the first block of statements if the given condition is true, otherwise execute the second

Pause until the given condition is true

Loop until the given condition is true

Stop this script

Stop all scripts

Page 14: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

14

mjb – August 1, 2018

27

Computer Graphics

Sensing Menutrue if this actor is touching the given other actor

true if this actor is touching the given color

true if this color is touching the given color

Ask a question and wait for an answer

The ask command automatically fills the variable “answer”

The x and y coordinates of the mouse

true if the left mouse button is down

true if a particular keyboard key is pressed

Computes the distance to something (e.g., the mouse-pointer)

Set the internal timer to 0. This counts up by seconds.The timer command automatically fills the variable “timer”

Gives you some property of a sprite

Gives you the volume detected by the microphone (0-100)

Gives true if a “loud sound” is detected on the microphone

Works with one of the external boards

mjb – August 1, 2018

28

Computer Graphics

If the Motor Controls are Turned On, You Also get…

Page 15: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

15

mjb – August 1, 2018

29

Computer Graphics

The Scratch Board

mjb – August 1, 2018

30

Computer Graphics

http://education.lego.com/en-gb/lego-education-product-database/wedo/9580-lego-education-wedo-construction-set

The Lego WeDo Construction Set

Page 16: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

16

mjb – August 1, 2018

31

Computer Graphics

Variables Menu

Create a new variable – you will be asked to give it a name

These are variables I had created at the time. The checkboxes say whether or not you want them to be displayed in the scene.

Used to set the variable to an initial value

Change the variable’s value by a certain amount (plus or minus)

Start a list. A list is a multi-value variable (like an array in C and Java).

Choose which variable to delete from a list of variables

mjb – August 1, 2018

32

Computer Graphics

Variables Menu: New Commands Get Added if You Make a List

Display the contents of your list in the scene

Append something to the end of the list

Insert something within the list

Change something in the list

Returns true if “thing” is in the list

Delete something from within the list

Lookup an item in the list

Get the length of the list

Page 17: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

17

mjb – August 1, 2018

33

Computer Graphics

Operators Menu

Placeholders like these can be numbers of variable names

These return true or false, and are typically used in if, forever-if, and repeat-until statements

These are used to link multiple true/false-producing statements together

String manipulation (good for creating strings for the sprite to say or think)

Modulo function (i.e., the remainder after a division is done)

Round to the nearest integer

(See the next slide)

Random number generator. You select the range.

mjb – August 1, 2018

34

Computer Graphics

Operators Menu: Math Functions

Click here to select from a list of math functions:

Angles are all in degrees!

You can embed an operator within an operator:

Absolute value

Square root

Natural log

Base 10 log

Page 18: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

18

mjb – August 1, 2018

35

Computer Graphics

Shape Encoding within Scratch

Ovals are a place to put numeric constants and variables

Hexagons are a place to put

Boolean values (i.e., values that

can be either trueor false)

Puzzle piece interlocks on the top and bottom

show where connections can be made. A command

without an interlock on the top is an Event.

mjb – August 1, 2018

36

Computer Graphics

The Paint Editor

Enlarge/Shrink Rotate Flip

Page 19: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

19

mjb – August 1, 2018

37

Computer Graphics

Setting the Background to a Handy X-Y Grid

1.

2. 3.

mjb – August 1, 2018

38

Computer Graphics

4.

Setting the Background to a Handy X-Y Grid

5.

Page 20: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

20

mjb – August 1, 2018

39

Computer Graphics

This is What the X-Y Grid Looks Like –It is Useful When you are Creating your Animation

x= -240, y = 180 x= 240, y = 180

x= 240, y = -180x= -240, y = -180

x= 0, y = 0

mjb – August 1, 2018

40

Computer Graphics

Click on the Cat sprite to get back to working with it

Work with the Cat Sprite Again

Page 21: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

21

mjb – August 1, 2018

41

Computer Graphics

1. Click on the Sounds tab and verify that there is already a sound named “meow”.

2. If there isn’t, click on the Import button and load the sound.

3. Click on the Scripts tab to go back to creating your program.

We Want a Sound to Confirm When Our Program is Done

mjb – August 1, 2018

42

Computer Graphics

Drag Each of These Commands From Its Menu and Hook Them Together

Page 22: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

22

mjb – August 1, 2018

43

Computer Graphics

Running Your Program

1. Clicking here . . .2. . . . triggers this, and everything below it

mjb – August 1, 2018

44

Computer Graphics

Bring in the Sound-playing Command, and then Drag Each of These Commands From Its Menu and Hook Them Together

Run this program! What happens? It’s probably not what you were hoping for. Why? (Hint: because you told it to.)

Page 23: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

23

mjb – August 1, 2018

45

Computer Graphics

Add a “wait” after the first “go to”

Now what happens? It’s still probably not what you were hoping for. Why?

mjb – August 1, 2018

46

Computer Graphics

Get rid of the “wait” and change the second “go to” to a “glide”

Now what happens? This is probably the effect you were hoping for.

Page 24: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

24

mjb – August 1, 2018

47

Computer Graphics

Have the Cat Run a Lap

What if we want to change how long it takes the cat to get from one place to another?

mjb – August 1, 2018

48

Computer Graphics

Changing the Glide Time in Four Places is a Pain, So Do This

1. Make a variable2. Call it HowLong

3. Put this command in here

5. Drag from here to use the variable Delay instead of a numeric value

4. Set HowLong to some value – you can always try other values later

Page 25: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

25

mjb – August 1, 2018

49

Computer Graphics

And Let’s Repeat It Multiple Times

mjb – August 1, 2018

50

Computer Graphics

Putting the Repeat Count into a Variable

Clicking these checkboxes causes your variables to display on the Stage

Page 26: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

26

mjb – August 1, 2018

51

Computer Graphics

Let’s Tie a Colored Pen to the Moving Cat

Clear the screen, Set the pen color, Set the pen width, Put the pen down (touching the page)

This draws this square

mjb – August 1, 2018

52

Computer Graphics

Time to Change the Background to Something Else

1.

2. 3.

You can also Import lots of built-in backgrounds, or even your own GIF and JPEG files

Page 27: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

27

mjb – August 1, 2018

53

Computer Graphics

Even trickier – Change the Size and Color of Each Square !

mjb – August 1, 2018

54

Computer Graphics

1. Define a variable called Size2. Define another one called NegativeSize

4. Set NegativeSize to “0-Size” (i.e., -Size)

6. Use Size and NegativeSize to give the coordinates to glide to

7. Change the size after each Repeat.Change the pen color too

8. After the Repeat is over, make the cat think something, meow, and then disappear

5. Lift the pen up, move to the start location, then put the pen down

3. Set Size to 150

Even trickier – Change the Size and Color of Each Square !

Page 28: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

28

mjb – August 1, 2018

55

Computer Graphics

Adding Randomness to Your Animation

Sometimes these animations are more exciting when you can’t predict exactly what will happen. This command will pick a random number between the two numbers that you give it:

You can drag it into place anywhere you would have otherwise used an actual number.For example, doing this …

… could produce something like this:

mjb – August 1, 2018

56

Computer Graphics

1.   Click on the Sounds tab

2.   Click on the Import button

3.   Select a sound

5.   Give it a name you like

4.   See what it sounds like

Making More Sounds Available for Your Animation!

6.   Click on the Scripts tab to use the new sound

Page 29: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

29

mjb – August 1, 2018

57

Computer Graphics

Other Things To Try

1. Have other sprites moving at the same time (hint: each sprite should have its own script)

2. Do something differently depending on the user pressing specific keyboard keys

mjb – August 1, 2018

58

Computer Graphics

Changing the Animation When a Key is Pressed

Page 30: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

30

mjb – August 1, 2018

59

Computer Graphics

Changing the Animation When a Key is Pressed

Both of these sequences are “running” at the same time

mjb – August 1, 2018

60

Computer Graphics

Using Your Own Files

Backgrounds: bmp, gif, jpg, pngAspect ratio needs to be 4:3480 x 360?640 x 480?

Costumes: bmp, gif, jpg, pngThe cat is 95 x 111Looks like most any resolution will work

Sounds: wav

Page 31: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

31

mjb – August 1, 2018

61

Computer Graphics

ChromaDepth: Encoding Depth into Image Colors

mjb – August 1, 2018

62

Computer Graphics

Custom ChromaDepth Map Backgrounds for Scratch

Background file = worldmap.jpg Background file = oregonmap.jpg

Background file = hawaiimap.jpg

You can find these background map files at:http://cs.oregonstate.edu/~mjb/scratch

You can find more ChromaDepth stuff at:http://cs.oregonstate.edu/~mjb/chromadepth

Page 32: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

32

mjb – August 1, 2018

63

Computer Graphics

Other Custom Map Backgrounds for Scratch

Background file = mars.jpg

Background file = earthe.jpg Background file = earthw.jpg

You can find these background map files at:http://cs.oregonstate.edu/~mjb/scratch

mjb – August 1, 2018

64

Computer Graphics

Exercises

Page 33: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

33

mjb – August 1, 2018

65

Computer Graphics

Drawing a Circle

There are a lot of fun things you can do with Scratch that are of the form “increment-some-quantity-to-create-a-cool-drawing”. In this case, the “some-quantity” is the angle.

mjb – August 1, 2018

66

Computer Graphics

Drawing a Circle

Page 34: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

34

mjb – August 1, 2018

67

Computer Graphics

Can We Imitate a SpiroGraph®? Sure!

mjb – August 1, 2018

68

Computer Graphics

First, We Need to Know About Polar Coordinates

θ

X

θ

Y

cos

sin

x r

y r

2 2

1tan

r x y

y

x

Page 35: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

35

mjb – August 1, 2018

69

Computer Graphics

“Polar Rose”

sin( )

cos

sin

r N

x r

y r

Start with θ=0. and keep incrementing it by a small amount

mjb – August 1, 2018

70

Computer Graphics

“Polar Rose”

Page 36: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

36

mjb – August 1, 2018

71

Computer Graphics

“Polar Rose”

What happens when N is odd?What happens when N is even?What happens if N doesn’t have to be a whole number?

mjb – August 1, 2018

72

Computer Graphics

“Polar Tulip”

3 5sin sin

2

cos

sin

r

x r

y r

Start with θ=0. and keep incrementing it by a small amount

From James Stewart, Single Variable Calculus, Brooks/Cole, 2001.

Page 37: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

37

mjb – August 1, 2018

73

Computer Graphics

“Polar Tulip”

mjb – August 1, 2018

74

Computer Graphics

“Polar Tulip”

Page 38: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

38

mjb – August 1, 2018

75

Computer Graphics

Limaçons (French for “snail”)

1 sin

cos

sin

r c

x r

y r

Start with θ=0. and keep incrementing it by a small amount

From James Stewart, Single Variable Calculus, Brooks/Cole, 2001.

mjb – August 1, 2018

76

Computer Graphics

Limaçons

Page 39: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

39

mjb – August 1, 2018

77

Computer Graphics

Limaçons

c = 1 is a “cardiod”

mjb – August 1, 2018

78

Computer Graphics

Lissajous Pattern

cos( )

sin( )

x A ct d

y B et f

Start with t=0. and keep incrementing it by a small amount

Page 40: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

40

mjb – August 1, 2018

79

Computer Graphics

Lissajous Pattern

mjb – August 1, 2018

80

Computer Graphics

Lissajous Pattern

Page 41: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

41

mjb – August 1, 2018

81

Computer Graphics

( ) cos cos

( )sin sin

R rx R r r

r

R ry R r r

r

Epicycloid:

( ) cos cos

( )sin sin

R rx R r d

r

R ry R r d

r

Epitrochoid:

Here are some others that should work too,but I haven’t had the chance to try them yet

http://en.wikipedia.org/wiki/Epicycloid

http://en.wikipedia.org/wiki/Epitrochoid

mjb – August 1, 2018

82

Computer Graphics

( ) cos cos

( )sin sin

R rx R r d

r

R ry R r d

r

Hypotrochoid:

( ) cos cos

( )sin sin

R rx R r r

r

R ry R r r

r

Hypocycloid:

Here are some others that should work too,but I haven’t had the chance to try them yet

http://en.wikipedia.org/wiki/Hypotrochoid

http://en.wikipedia.org/wiki/Hypocycloid

Page 42: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

42

mjb – August 1, 2018

83

Computer Graphics

Projectile Motion

0

0

cos

sinx

y

v V

v V

0 0

20 0

1

2

x

y

x x v t

y y v t gt

V

θ

Use:m for length unitsseconds for time units

g = 9.8 m/sec2

mjb – August 1, 2018

84

Computer Graphics

Projectile Motion

Page 43: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

43

mjb – August 1, 2018

85

Computer Graphics

Forward Kinematics

θ1

θ3

L1

θ2L2

L3

1 0 1 1

1 0 1 1

cos

sin

x x L

y y L

2 1 2 1 2

2 1 2 1 2

cos( )

sin( )

x x L

y y L

3 2 3 1 2 3

3 2 3 1 2 3

cos( )

sin( )

x x L

y y L

3

2

10

mjb – August 1, 2018

86

Computer Graphics

Forward Kinematics

Page 44: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

44

mjb – August 1, 2018

87

Computer Graphics

Forward Kinematics

mjb – August 1, 2018

88

Computer Graphics

Re

r

2 3

2

4 ( )e

e

R rP

gR

Use:km for length unitsminutes for time units

360t

P

g = 35.28 km/min2

Re = 6400 km

Scale animation time:The Scratch timer returns time in seconds, but we will treat it as minutes.We will also use a TimeScale factor.

Orbital Mechanics

Page 45: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

45

mjb – August 1, 2018

89

Computer Graphics

Orbital Mechanics

mjb – August 1, 2018

90

Computer Graphics

Orbital Mechanics

Page 46: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

46

mjb – August 1, 2018

91

Computer Graphics

Scratch 2.0

Both of these sequences are running at the same time

http://scratch.mit.edu/projects/editor/

http://scratch.mit.edu/scratch2download/

mjb – August 1, 2018

92

Computer Graphics

Differences in Scratch 2.0

http://scratch.mit.edu/projects/editor/

• The online version can run from a web browser• Clones• Code Blocks• Some of the categories have been renamed

Control → Events + ControlVariables → Data

• Motion detection

http://scratch.mit.edu/scratch2download/

Page 47: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

47

mjb – August 1, 2018

93

Computer Graphics

Scratch 2.0 Events Menu

mjb – August 1, 2018

94

Computer Graphics

Scratch 2.0 Control Menu

Page 48: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

48

mjb – August 1, 2018

95

Computer Graphics

Scratch 2.0 Sensing Menu

mjb – August 1, 2018

96

Computer Graphics

Blocks (aka Procedures, Functions, Subroutines)

Page 49: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

49

mjb – August 1, 2018

97

Computer Graphics

Blocks (aka Procedures, Functions, Subroutines)

mjb – August 1, 2018

98

Computer Graphics

Send in the Clones

}Creates a clone of the cat sprite and a separate copy of all its variables, properties, and scripts.

} This script gets run for each of the clones. Sure beats writing this 10 times!

Page 50: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

50

mjb – August 1, 2018

99

Computer Graphics

Send in the Clones

mjb – August 1, 2018

100

Computer Graphics

Send in the Clones

Think of it as 10 simultaneous scripts are running, each controlling its own sprite:

Page 51: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

51

mjb – August 1, 2018

101

Computer Graphics

Using Clones to Create a Particle System

mjb – August 1, 2018

102

Computer Graphics Chuck Evans

Particle System

Page 52: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

52

mjb – August 1, 2018

103

Computer Graphics

Particle System – Doesn’t Have to Be Actual “Particles”

mjb – August 1, 2018

104

Computer Graphics

Particle System

Display

Display

Update

The basic process is this:

EmitRandom Number Generator

Page 53: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

53

mjb – August 1, 2018

105

Computer Graphics

Particle System

mjb – August 1, 2018

106

Computer Graphics

Particle System

Page 54: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

54

mjb – August 1, 2018

107

Computer Graphics

Using Blocks to Work in Three Dimensions

A 3D Right-handed Coordinate System:

First rotating about the Y axis X

Y

Z' cos sin

'

' sin cos

y y

y y

x x z

y y

z x z

Then rotating about the X axis

'' '

'' 'cos 'sin

'' 'sin 'cosx x

x x

x x

y y z

z y z

mjb – August 1, 2018

108

Computer Graphics

Three Dimensions

Note: a great use for Blocks (aka Procedures, Functions, Subroutines))

Page 55: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

55

mjb – August 1, 2018

109

Computer Graphics

Three Dimensions

mjb – August 1, 2018

110

Computer Graphics

How Scratch Relates to C/Java Programming

Count = 0 ;

Count = Count + 1 ;

int Count ;

Page 56: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

56

mjb – August 1, 2018

111

Computer Graphics

How Scratch Relates to C/Java Programming

Both of these sequences are running at the same time

sleep( 1 ) ;

for( ; ; ){

statements …}

for( i = 1 ; i <= 10; i = i + 1 ){

statements…}

mjb – August 1, 2018

112

Computer Graphics

How Scratch Relates to C/Java Programming

Both of these sequences are running at the same time

while( i < j ){

statements…}

if( i < j ){

statements …}

if( i < j ){

statements …}else{

other statements …}

do{ ;}while(! ( i < j ) );

do{

statements …} while(! ( i < j ) );

Page 57: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

57

mjb – August 1, 2018

113

Computer Graphics

How Scratch Relates to C/Java Programming

Both of these sequences are running at the same time

i % j ;

if( i < j )if( i == j )if( i > j )

if( i < j && j < k )

if( i < j || j < k )

If( ! (i < j ) )

i + ji - ji * ji / j

mjb – August 1, 2018

114

Computer Graphics

public class Flashing implements ActionListener{

//declare what event will be listening:button.addActionListener(this);. . .

// declare what to do when the event happens:public void actionPerformed(ActionEvent e){

// do something to make the display flash:. . .

}}

How Scratch Relates to C/Java Programming

Page 58: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

58

mjb – August 1, 2018

115

Computer Graphics

voidMyBlock( int A, int B, int C ){

int X = A;int Y = B + C;glVertex2i( X, Y );

}

MyBlock( 100, 200 -100 );

How Scratch Relates to C/Java Programming

mjb – August 1, 2018

116

Computer Graphics

Best Practices, I

Start with the goals in mindList of commentsState DiagramsData Flow Diagrams

Don’t hard-code constants into the code – use variables so it is clear what you are doingUse variables to simplify expressionsPick good variable namesInitialize all variables, even to zero

ModularizeSeparate sections with BroadcastsSeparate initializing from executingUse Function Blocks

GeneralizeFor example, don’t use timer, use t = scale*timer

Page 59: scratch - Oregon State Universityweb.engr.oregonstate.edu/~mjb/scratch/scratch.2pp.pdf · Scratch is a programming environment that lets you create your own artwork ... Variables

8/1/2018

59

mjb – August 1, 2018

117

Computer Graphics

Best Practices, II

Remember that, unless specified, Scratch commands happen “instantaneously” and then the script moves on to the next instruction

Be careful you get loop conditions correct

Floating point numbers rarely exactly equal each otherUse < or > to compare themUse Absolute Value function to compare them

Watch out for Race Conditions,Deadlock, Livelock

mjb – August 1, 2018

118

Computer Graphics

Debugging

“Print” variables into the scene

Enlarge your view of the script

Single-stepping

If-statements that make something visible happenSoundSay or ThinkColor change