Lab Exam 3 Practice Questions

1. Write a Turtle object program to reproduce this image:

turtlelab

OK, here:

review1

var myTurtle;
var initialSquareSize = 100;

function setup() {
  createCanvas(400, 400);
  myTurtle = new Turtle(width/2 - initialSquareSize/2, 20);
  noLoop();
}

function draw() {
  background("black");

  var factor = 0.9;
  var redness = 255; 
  var squareSize = initialSquareSize; 
  
  myTurtle.setWeight(1.5); 
  for (var i = 0; i < 30; i++) {
    myTurtle.setColor(color(redness, 0,0));
    turtleSquare(squareSize);
    myTurtle.right(25);
    myTurtle.forward(squareSize);
    squareSize *= factor;
    redness *= factor;
  }
}

function turtleSquare(sqSize) {
  myTurtle.penDown();
  for (var i=0; i<4; i++) {
    myTurtle.forward(sqSize);
    myTurtle.right(90);
  }
  myTurtle.penUp();
}



//=======================================================
// TURTLE GRAPHICS IMPLEMENTATION
// Roger Dannenberg, 2015
//
// Turtle(x, y) -- make a turtle at x, y, facing right, pen down
// left(d) -- turn left by d degrees
// right(d) -- turn right by d degrees
// forward(p) -- move forward by p pixels
// back(p) -- move back by p pixels
// penDown() -- pen down
// penUp() -- pen up
// goto(x, y) -- go straight to this location
// setColor(color) -- set the drawing color
// setWeight(w) -- set line width to w
// face(d) -- turn to this absolute direction in degrees
// angleTo(x, y) -- what is the angle from my heading to location x, y?
// turnToward(x, y, d) -- turn by d degrees toward location x, y
// distanceTo(x, y) -- how far is it to location x, y?
//
function Turtle(x, y) {
  this.x = x;
  this.y = y;
  this.angle = 0.0;
  this.penIsDown = true;
  this.color = color(128);
  this.weight = 1;

  this.left = function(d) {
    this.angle -= d;
  };
  this.right = function(d) {
    this.angle += d;
  };
  this.forward = function(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
  };
  this.back = function(p) {
    this.forward(-p);
  };
  this.penDown = function() {
    this.penIsDown = true;
  };
  this.penUp = function() {
    this.penIsDown = false;
  };
  this.goto = function(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
  };
  this.distanceTo = function(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
  };
  this.angleTo = function(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
  };
  this.turnToward = function(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
      this.angle += d;
    } else {
      this.angle -= d;
    }
  };
  this.setColor = function(c) {
    this.color = c;
  };
  this.setWeight = function(w) {
    this.weight = w;
  };
  this.face = function(angle) {
    this.angle = angle;
  }
}


2. Write a program that reverses an image from left-to-right pixel-by-pixel (there are more efficient and simpler ways to reverse an image, but the point here is to be familiar with accessing and changing images at the pixel level.

Reminder: don’t try to loadPixels() in preload()!

pixel-reversal

/*
// NOTES:
http://p5js.org/reference/#/p5/set
http://p5js.org/reference/#/p5/get
http://p5js.org/reference/#/p5/loadPixels
http://p5js.org/reference/#/p5/updatePixels

// For maniplating the pixel OF AN IMAGE
var kittenImg;
kittenImg.loadPixels(); // makes the pixels of that image accessible
var someColor = kittenImg.get(x,y); // retrieve the color stored at (x,y);
kittenImg.set(x,y, someColor); //  change the color at (x,y) in the image
kittenImg.updatePixels(); // enact the change, clobber the image's pixels

// For maniplating the pixel OF THE CANVAS
loadPixels();
get(x,y);
set(x,y, someColor);
updatePixels(); 
*/


var kittenImg;
function preload(){
  kittenImg = loadImage("http://i.imgur.com/SztgckY.jpg");
}

function setup() {
  createCanvas(640, 480);
  kittenImg.loadPixels(); 
  loadPixels(); 
  noLoop(); 
}



function draw() {
  // Version that copies the image to the canvas's pixels, 
  // but flipped as it does so
  var w = kittenImg.width;
  var h = kittenImg.height;
  for (var y=0; y<h; y++){
    for (var x=0; x<w; x++){
      var someColorFlipped = kittenImg.get(w-1-x,y); 
      set(x,y, someColorFlipped);
    }
  }
  updatePixels(); 
}



/*
function draw() {
  // Version that clobbers the image: 
  // It flips the data stored in the image itself
  // and then draws the (flipped) image to the canvas
  
  var w = kittenImg.width;
  var h = kittenImg.height;
  
  for (var y=0; y<h; y++){
    for (var x=0; x<w/2; x++){ // note, only needs to go to w/2!
      var someColorX   = kittenImg.get(x,y    ); 
      var someColorWmX = kittenImg.get(w-1-x,y); 
      kittenImg.set(x,y,     someColorWmX);
      kittenImg.set(w-x-1,y, someColorX);
    }
  }
  kittenImg.updatePixels(); 
  image(kittenImg, 0,0);
}
*/


/*
function draw() {
  // Version that copies the image, 
  // by rendering each pixel as a little tiny poky line point,
  // but flipped as it does so
  background(0); 
  strokeWeight(1); 
  
  var w = kittenImg.width;
  var h = kittenImg.height;
  for (var y=0; y<h; y++){
    for (var x=0; x<w; x++){
      var someColorFlipped = kittenImg.get(w-1-x,y); 
      stroke(someColorFlipped);
      point(x,y);
    }
  }
}
*/