Code Examples for Rotation in Processing.js

Read the accompanying blog post.

Example 1

void setup()
{
  size(660, 228);
  noLoop();

  noStroke();
  rectMode(CENTER);
  drawSquares();
}

void drawSquares()
{
  int x = y = 24;

  for (int i=1; i <= 108; i++) {
    fill(200,200,200);
    rect(x, y, 24, 24);

    fill(100,100,100);
    ellipse(x, y, 4, 4);

    if (x == 636) {
      x = 24;
      y = y+36;
    } else {
      x = x+36;
    }
  }
}

Example 2

void setup()
{
  size(660, 228);
  noLoop();

  rectMode(CENTER);
  drawSquares();
}

void drawSquares()
{
  int x = 24;
  int y = 24;

  noStroke();

  for (int i=1; i <= 108; i++) {
    rotate(0.4+TWO_PI/360);

    fill(200,200,200);
    rect(x, y, 24, 24);

    fill(100,100,100);
    ellipse(x, y, 4, 4);

    if (x == 636) {
      x = 24;
      y = y+36;
    } else {
      x = x+36;
    }
  }
}

Example 3

void setup()
{
  size(660, 228);
  noLoop();

  rectMode(CENTER);
  drawSquares();
}

void drawSquares()
{
  int x = 24;
  int y = 24;

  noStroke();

  for (int i=1; i <= 108; i++) {
    pushMatrix();

    rotate(0.4+TWO_PI/360);

    fill(200,200,200);
    rect(x, y, 24, 24);

    popMatrix();

    fill(100,100,100);
    ellipse(x, y, 4, 4);

    if (x == 636) {
      x = 24;
      y = y+36;
    } else {
      x = x+36;
    }
  }
}

Example 4

void setup()
{
  size(660, 228);
  noLoop();

  rectMode(CENTER);
  drawSquares();
}

void drawSquares()
{
  int x = 24;
  int y = 24;

  strokeWeight(4);

  for (int i=1; i <= 9; i++) {
    pushMatrix();

    stroke(193,0,0);
    fill(200,200,200);
    rect(x, y, 24, 24);

    translate(x, y);

    stroke(207,107,0);
    rect(x, y, 24, 24);

    rotate(0.4+TWO_PI/360);

    stroke(0,150,0);
    rect(x, y, 24, 24);

    translate(-x, -y);

    stroke(0,150,181);
    rect(x, y, 24, 24);

    popMatrix();

    x = x+36;
  }
}

Example 5

void setup()
{
  size(660, 228);
  noLoop();

  rectMode(CENTER);
  drawSquares();
}

void drawSquares()
{
  int x = 24;
  int y = 24;

  noStroke();

  for (int i=1; i <= 108; i++) {
    pushMatrix();

    translate(x, y);
    rotate(0.4+TWO_PI/360);
    translate(-x, -y);

    fill(200,200,200);
    rect(x, y, 24, 24);

    popMatrix();

    fill(100,100,100);
    ellipse(x, y, 4, 4);

    if (x == 636) {
      x = 24;
      y = y+36;
    } else {
      x = x+36;
    }
  }
}