|3:50||Sketch Postings Review|
|4:10||Logo and Turtle Graphics|
|4:40||Push and Pop|
|5:40||Advanced Topic: How the Turtle Object Works|
|6:20||Closing Notes and Assignment|
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 Mindstorms which discusses logo and its goals.
One of the ideas introduced in Logo was "turtle graphics". In logo one can issue commands like
move forward. These commands are carried out by an on-screen "turtle". Tracing the path of the turtle often produces interesting drawings.
Turtle robots were also produced, which allowed children a more physical experience.
I’ve created a basic implementation of a turtle, grab the code on Github.
myTurtle = new Turtle(x, y)
turtle constructor, creates a turtle object takes optional x, y starting coordinates (default is center of sketch)
moves the turtle along its current bearing, drawing a line if pen is down
moves the turtle backward from its current bearing, drawing a line if pen is down
instantly transports the turtle to the provided x, y location, drawing a line if pen is down
rotates the turtle’s bearing clockwise by the provided angle in degrees
rotates the turtle’s bearing counter-clockwise by the provided angle in degrees
changes the turtle’s bearing to the provided angle in degrees
tells the turtle to move without drawing
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
You can use turtle graphics to create drawings with a wide variety of styles, but turtle graphics lends itself to curvy/spirography drawings naturally. This is largely due to two differences in the way the turtle works vs p5’s
myArray = ["apple", "pear"]; console.log("myArray", myArray); myArray.push("banana"); console.log("myArray", myArray); item = myArray.pop(); console.log("myArray", myArray); console.log("item", item);
records the turtle’s current state (position, bearing, etc.) to a stack so that changes can be undone easily
restores the turtle’s state to the top recorded state on the stack
Object Oriented Programming is a programming paradigm in which data and functions are bundled together. These bundles are called objects, and each object represents an idea in your larger program. Breaking up a program into objects is one way to organize a complex project.
In a OOP video game, you might have objects which represent enemies. Enemy objects would contain data such as their
strength. They would also contain functions such as
Our turtle objects have data including
bearing and functions like
In OOP it is common that many objects are similar. These similar objects often all behave the same way, but have distinct state or data. In the video game you may have several enemies that all
jump() the same way, but each specific enemy has it’s own
speed. These similar objects are often described as being specific instances of a general class.
An object’s functions know which instance they belong to and can access the instance’s data using
This allows you to specify a template object that contains the shared behavior of a group of similar objects. You can then create many instance objects that share the template object as their prototypes. These instance objects can have their own properties, but will share (inherit) the properties defined in the template object. Usually, objects define their own data/state properties and inherit behavior/method/function properties.
Note: Since the properties on the template object are only used if the instance object doesn’t define them, you can override the behavior of the template for a specific instance object. This leads into the full power of inheritance and polymorphisim
Here is what happens when you call a constructor function with the
In these first few weeks we’ve looked at some intermediate topics related to drawing still images in p5. We’ll be moving on to other topics in the coming weeks, but if you want to continue with drawing you might want to check out The Nature of Code by Daniel Shiffman. Daniel teaches over at NYU ITP, contributes heavily to Processing and p5.js. The Nature of Code covers a lot of interesting topics with code in Processing. Also check out his Youtube channel.
While you are working you might occassionaly create a script that gets stuck or takes a very long time to execute. This will freeze up the Chrome tab the script is running in. Use the task manager to stop your script.
Create a daily p5.js sketch exploring the topics presented in class. Post an image of your results each day to the class sketch blog.
For those of you who prefer a little more direction, some optional prompts:
#turtle_plus_random Without random, turtle graphics tend to have a machine-made quality, throwing a little random chance into your moves and turns can make things look more natural.
#image_only Keep the pen up, and do all your drawing using
#recursive_turtle Try out making a drawing using a recursive function. Try to make something that looks very different from the tree example.