# Lab Exam 3 Practice Questions

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

OK, here:

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 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.

/*
// NOTES:
http://p5js.org/reference/#/p5/set
http://p5js.org/reference/#/p5/get
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
get(x,y);
set(x,y, someColor);
updatePixels();
*/

var kittenImg;
}

function setup() {
createCanvas(640, 480);
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);
}
}
}
*/