Home | Level 3 Index | Modules | Tutorials

Transforming Pictures

This activity has the following desired goals:

Learning to transform pictures (A, M).

Step 1

Type in the following code and run it:

cleari()
showAxes()
val pic = trans(100, 0) * rot(45) * penColor(blue) -> Picture.rectangle(100, 50)
draw(pic)

Q1a. What does the above code do? Explain to a friend.

Step 2

Type in the following code and run it:

cleari()
showAxes()
val pic = Picture.rectangle(100, 50)
pic.translate(100, 0)
pic.rotate(45)
pic.setPenColor(blue)
draw(pic)

Q2a. What does the above code do? How is it different from the code in step 1? Explain to a friend.

Explanation

You can transform pictures in the following main ways (via a tranformation object/function or a transformation method/command):

Transformation	Object/function	Method/command
rotate	`rot(angle) -> pic`	`pic.rotate(angle)`
scale (to make bigger or smaller)	`scale(f) -> pic`	`pic.scale(f)`
translate (in its local coordinate system)	`trans(x, y) -> pic`	`pic.translate(x, y)`
translate (in its parent’s coordinate system)	`offset(x, y) -> pic`	`pic.offset(x, y)`
change pen color	`penColor(color) -> pic`	`pic.setPenColor(color)`
change pen thickness	`penThickness(t) -> pic`	`pic.setPenThickness(t)`
set no pen	`noPen -> pic`	`pic.setNoPen()`
change fill color	`fillColor(color) -> pic`	`pic.setFillColor(color)`
set opacity	`opac(o) -> pic`	`pic.setOpacity(o)`
position at a given location		`pic.setPosition(x, y)`
rotate to a particular heading		`pic.setRotation(angle)`
rotate to a particular heading (alternative way)		`pic.setHeading(angle)`
scale to a particular size		`pic.setScale(scale)`

As shown above, there are two distinct ways of doing picture transformations:

The object/function way, e.g., trans(100, 0) -> pic - which is useful while doing functional/compositional graphics. This way of doing transformations can be used only before a picture is drawn (and these transformations are applied when the picture is drawn).
The method/command way, e.g.. pic.translate(100, 0) - which is useful while doing generative art or gaming. This way of doing transformations can be used before and after a picture is drawn.

Multiple transformations can be combined in the following ways:

tranformation objects/functions are combined using *, e.g., trans(100, 0) * rot(45) -> pic
transformation methods/commands are combined by sequential calls, e.g., pic.translate(100, 0); pic.rotate(45)

Step 3

Type in the following code and run it

clear()
setSpeed(superFast)

def square(n: Int) {
    repeat(4) {
        forward(100)
        right(90)
    }
}

setFillColor(blue)
square(100)

right(90)
hop(100)
left(90)

square(100)

Q3a. How can you make the second square not blue?

Now type in the following code and run it:

cleari()

def sq = Picture.rectangle(100, 100)

val pic1 = fillColor(blue) -> sq
val pic2 = sq

val pics = picStack(pic1, trans(100, 0) -> pic2)

draw(pics)

Q3b. What do you think the picStack instruction does? Is it a command or function?

Q3c. How is the second piece of code (which is picture-graphics based) in this section different from the first piece of code (which is turtle-graphics based)?
Hint. Think in terms of expression vs command oriented instructions.

Exercise

Use all the picture transfomation functions listed above to create and transform one or more rectangles.