Vanessa Kim&Sophie Lee Project-09

project_31-506x480project_12-509x480project_21-507x480

This is a group project: Sophie and Vanessa.

We created a turtle that is constantly spiraling to create a dynamic shape. Wherever the user clicks on the screen the dynamic shape changes color. Through this project, we wanted to convey the themes of dynamic vs static and regular vs irregular. We searched for an image that consisted of irregular geometric shapes with multiple colours to contrast the regularity of the dynamic hexagonal shapes that we created. Overall, through the dynamic turtle and the found image, we wanted to produce an illustration that depicts contrasting themes.

Before starting, we first brainstormed themes together and looked over the given examples for the project. We decided on which effects we wanted our turtle to have and then looked at different functions to apply into the code. We tried to use new codes we recently learnt. Sophie typed and wrote the code whilst I sketched and searched for different references for the code and the image. The making of the code was done together.

sketch

//Sophie Lee and Vanessa Kim
//15-104
//chaeyunl@andrew.cmu.edu and yookyunk@andrew.cmu.edu
//Project-09

var img = "http://i.imgur.com/zP3JWyF.png?1"
var myTurtle;
var side = 100;
var shapeX;
var shapeY;
var turtCol = [0, 0, 0];

function setup() {
   createCanvas(744, 744);
   imagebackground.loadPixels();
   shapeX = 0;
   shapeY = 0;

   myTurtle = new Turtle(shapeX, shapeY);
   myTurtle.setColor("Black");
   myTurtle.setWeight(4);
}

function preload() {
   imagebackground = loadImage(img);   
}

function draw() {
   image (imagebackground, 0, 0);
   shape();
}

function shape() {
   var length = 0;
   var goldenAngle = 180*(3-sqrt(5));

   myTurtle.setColor(turtCol);
  
   for (var j = 0; j < 5; j++) {
       myTurtle.penDown();
      for (var i = 0; i < 6; i++) {
          myTurtle.forward(side);
          myTurtle.right(60);
       }
       myTurtle.penUp();
       myTurtle.right(goldenAngle);
       myTurtle.forward(length);
   }
}

function mousePressed() {
   myTurtle.x = mouseX;
   myTurtle.y = mouseY;

   turtCol = imagebackground.get(mouseX, mouseY);
}

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;
  }
}