Computation and Visualization in the Earth Sciences

Lesson 5: Rotation


Syntax introduced: rotate(), PI, ++, --

You can rotate the coordinate system with the rotate() function. The rotate() function takes one argument, which is an angle in radians. (360 degrees = 2pi radians, so if you don’t like thinking in radians you can specify degrees and then multiply by pi/180 to convert to radians). The rotate() function will by default rotate clockwise around the origin of the coordinate system, so if you want the rotation to occur around a different point, you have to use translate() first to move the origin.

Example 5.10

Here’s an example program that uses translate() and rotate().

// Demonstrate translate and rotate

size(200, 200)

stroke(247, 117, 10);
translate(100, 100);
line(0, 0, 55, 0);     // A horizontal orange line
rotate(60 * PI/180); // How to write 60 degrees in radians
line(0, 0, 55, 0);     // Orange line rotated
program output from example 5.10. two orange lines.
Output of Example 5.10. An orange line, then the same line rotated 60 degrees about the point (100,100).
E. Richardson

Do them all! Order matters!

Combining skills!

Example 5.11

Here’s an example of a shape I made with translate and rotate. I turned it into a function and I’m having it move across the screen.

//the sun rises and sets

float x = 10;
   float y . 190;
   float speed = 1.0;
   int direction = 1;
   int g = 10;

void setup(){
size(400, 200);


void draw(){
   background(10, g, 247); //I'm going to change the green so it has a variable
   sun(x, y); // calls the sun function
   x = x + .5*speed; //moves to the right
   y = y - (.5*speed*direction); //moves up
   if (x > width || x < 0){
      x=1; // if it hits the right side, start over
      direction =1;
   if(y ‹ 0){
      direction *= -1; // if it hits the top, go down
   if (x==1){
      g=10; //resets the green value
   if (direction == 1){
      g=g+1; //make the sky lighter as the sun goes up
      g=g-1; //make sky darker as the sun goes down

// This is my sun function
// Notice the use of push, pop, translate, and rotate

void sun(float x, float y) (
   stroke(247, 117, 10, 120);
   fill(247, 200, 10);
   ellipse(0, 0, 30, 30);
   for (int i = 0; i < 24; i++) {
      line(30, 30, 10, 0);
cartoon Eliza alerting you that instructions come nextA screencast explanation of the sunrise/sunset program (captioned version here). This screencast also provides an introduction to the syntax "++" and "--", which haven't come up before. ++ means increment by 1 and -- means decrement by one. If you write x++ it is equivalent to writing x = x + 1. Similarly, x-- is the same as x = x - 1.


5.6 Use translate() and rotate() to change a square into a diamond.

5.7: Use a combination of translate() and rotate() to change the coordinate system so that its origin is at the bottom left corner and increases to the right and upwards.

5.8: write a function that uses some combination of scale(), rotate(), or translate(), and then do something with it such as having it plot to the screen with a mouse click, or having it move by itself.

Turning in your work

Turn in 5.8 to its assignment dropbox in Canvas.

What I am looking for

In 5.8 I want to see you use new skills such as scale, rotate, and translate, combined with previously-learned skills such as function-writing, and/or mouse/keyboard interactivity.