Today’s Groups

Group	Members
A	Enayet, Danielle, Jane
B	Talia, Sanie, Amber
C	Jonathan, Sachi, Dorothy, Gabriel
D	Bateel, Jennifer, Kim

Homework Review

A: Most Polished: Last week we discussed how spending a few minutes polishing or framing the sketch can help make it feel more like a complete visual idea. Choose a project that demonstrates this and discuss.
B: Part of the homework from last week was to create a sketch that generates an image pixel by pixel. Choose a work that does this and discuss.
C: Part of the homework from last week was to create a sketch that processes an image pixel by pixle. Choose a work that does this and discuss.
D: Part of the homework from last week was to create a sketch that uses image as input. Choose a work that does this and discuss.

Today’s Learning Objectives

Background on Logo + Turtles
Basic Turtle Commands
Using Turtles to Draw

Assignment

Keep Sketching!

Suggestions:

Make a crazy sprialgraph looking thing. Get that out of the way.
Use a thick, transparent line. Explore building up layers. Recolor in Photoshop with a Gradient Map.
Create a pre-rendered animation.

Challenge: Animal Face

Using turtle graphics, create an intricate portrait of an animal. Begin by choosing an animal. Look a photo references of your animal and note interesting details, textures, patterns, and features. How can you translate those details into your sketch. Create you sketch primarily using turtle graphics techniques.

Logo and Turtle Graphics

Logo is a computer programming language, created in 1967 at the (now) MIT Media Lab to explore how programming can help children learn critical thinking and problem solving. One of the creators of Logo, Seymour Papert, wrote the book Mindstorms which discusses logo and its goals.

One of the ideas introduced in Logo was "turtle graphics". In Logo one can issue commands like left to turn and forward to move. These commands are carried out by a robotic or on-screen "turtle". The turtle can draw a line, tracing its path and producing interesting drawings.

Logo’s use of turtles allows students make a strong association between what happens in the program and how they move their own bodies in the real world. Papert called this “body-syntonic” learning.

Our Simple Turtle

I’ve created a basic implementation of a turtle for you to use this week.

Grab the code here.

Comp Form Turtle API

myTurtle = new Turtle(x, y)

turtle constructor, creates a turtle object takes optional x, y starting coordinates (default is center of sketch)

myTurtle.moveForward(distance)

moves the turtle along its current bearing, drawing a line if pen is down

myTurtle.moveBackward(distance)

moves the turtle backward from its current bearing, drawing a line if pen is down

myTurtle.moveTo(x, y)

instantly transports the turtle to the provided x, y location, drawing a line if pen is down

myTurtle.turnRight(angleDegrees)

rotates the turtle’s bearing clockwise by the provided angle in degrees

myTurtle.turnLeft(angleDegrees)

rotates the turtle’s bearing counter-clockwise by the provided angle in degrees

myTurtle.turnTo(angleDegrees)

changes the turtle’s bearing to the provided angle in degrees

myTurtle.penUp()

tells the turtle to move without drawing

myTurtle.penDown()

tells the turtle to draw a line when it moves

myTurtle.image(image, width, height)

draws and image centered on the turtle’s current location and aligned with the turtle’s rotation

myTurtle.pushState()

records the turtle’s current state (position, bearing, etc.) to a stack so that changes can be undone easily

myTurtle.popState()

restores the turtle’s state to the top recorded state on the stack

Turtle Examples

Turtle Square Example

turtle_square

Turtle Triangle Example

turtle_triangle

Turtle Multiple Triangles Example

turtle_triangles

Turtle Spiralgraph Example

turtle_spiralgraph

In-class Challenge

Explore using p5’s pixel manipulation functions by modifying the scripts above. Work through the following challenges in order. Don’t skip any.

Modify the Triangle Example

Draw a Pentagon.
Draw an Octagon.
Draw a Circle.
Draw a Circle with a dashed line. Tip: penUp() + penDown()

Modify the Multiple Triangles Example

Draw each triangle with different colors.
Change the triangle function to draw squares.
Remove the .moveTo() commands.
Change the .turnTo() commands to turnLeft(60).

Style Tip: If you change what a function does, you should change its name as well. Did you change the function name in 6?

Modify the Spiralgraph Example

Change the moveForward() parameter to i * 3.
Center the result of 11.
Comment out the noLoop()
Change the turnRight() parameter to 175 + frameCount.

Challenging Challenges

Start with the original Triangle Example. Change it to draw a Spiral.
Draw two spirals. One Red, one Blue. They should spiral inside each other.
Using a loop, draw 10 concentric triangles.
Draw this:

Challenge Self Assessment

After you work with Turtle Graphics this week, you should have a solid grasp on the basics. Consider redoing the challenges above to see how solid your understanding is.

Time	Comment
< 12 in 20 minutes	You need to put in some extra work to strengthen your programming understanding.
12 in 20 minutes	Good.
16 in 30 minutes	Great.
16 in 20 minutes	Hot Dang!

Study Examples

Turtle + Images

turtle_image

Turtle Push + Pop

turtle_push

Turtle Recursive Tree

turtle_tree