Category: Section D

I chose to make two turtles that would follow the mouse to reveal and image below. I gave each turtle a different angle of rotation to give them a “dance-like” feel, while they reveal an abstract picture.

Final Image:

odhP11

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 11

//Declares the image
var abstract;

//Declares the turtles
var turtle1;
var turtle2;

function preload() {
    abstract = loadImage("https://i.imgur.com/ve9JtKn.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(100, 100, 200);
    abstract.loadPixels();
    frameRate(20000);

    //Sets the start point of the turtles
    turtle1 = makeTurtle(width/2, height/2);
    turtle2 = makeTurtle(width/2, height/2);
}

function draw() {

    //Pulls the color from the image
    var color1 = abstract.get(turtle1.x, turtle1.y); //Gets the color from the image 
    var color2 = abstract.get(turtle2.x, turtle2.y);

    turtle1.setColor(color1);
    turtle1.setWeight(10);

    turtle2.setColor(color2);
    turtle2.setWeight(10);

//Turtles move towards the mouse
    turtle1.forward(10);
    turtle2.forward(10);

//Target is the mouse location
    var targetX = mouseX;
    var targetY = mouseY;

    turtle1.turnToward(targetX, targetY, 4); 
    turtle2.turnToward(targetX, targetY, 6); 
}


function turtleLeft(d) {
    this.angle -= d;
}

function turtleRight(d) {
    this.angle += d;
}

function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}

function turtleBack(p) {
    this.forward(-p);
}

function turtlePenDown() {
    this.penIsDown = true;
}

function turtlePenUp() {
    this.penIsDown = false;
}

function turtleGoTo(x, y) {
    if (this.penIsDown) {
        stroke(this.color);
        strokeWeight(this.weight);
        line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}

function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}

function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}

function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}

function turtleSetColor(c) {
    this.color = c;
}

function turtleSetWeight(w) {
    this.weight = w;
}

function turtleFace(angle) {
    this.angle = angle;
}

function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

sketch

// ryu kondrup
// rkondrup@andrew.cmu.edu
// sectionD
// assignment10A

// makeTurtle(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?



//global variables
var brighten = 25;
var x = [];
var y = [];
var starSize = [];




//TURTLE CODE
function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleTo: turtleAngleTo,
                  turnToward: turtleTurnToward, distanceTo: turtleDistTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

//massive red world
function zoom1() {
    //to chase the other worlds
    t1.turnToward((t2.x + t3.x)/2,(t2.y + t3.y)/2, 1);
    t1.forward(sq(0.005*(68 - t1.distanceTo(t2.x, t2.y)/10)));
    t1.penUp();
    //for a dotted line, alternate penDown then penUp
    t1.turnToward((t2.x + t3.x)/2,(t2.y + t3.y)/2, 1);
    t1.forward(sq(0.005*(68 - t1.distanceTo(t2.x, t2.y)/10)));
    t1.penDown();

}
//medium orange world
function zoom2() {
    //to chase the other worlds
    t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
    t2.forward(5*sq(0.01*(68 - t2.distanceTo(t1.x, t1.y)/10)));
    t1.penUp();
    //for a dotted line, alternate penDown then penUp
    t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
    t2.forward(5*sq(0.01*(68 - t2.distanceTo(t1.x, t1.y)/10)));
    t1.penDown();

}

//tiny pink world
function zoom3() {
    //to chase the other worlds
    t3.turnToward((t1.x + t2.x)/2,(t1.y + t2.y)/2, 1);
    t3.forward(5*sq(0.02*(68 - t2.distanceTo(t1.x, t1.y)/10)));
    t1.penUp();
    //for a dotted line, alternate penDown then penUp
    t2.turnToward((t1.x + t3.x)/2,(t1.y + t3.y)/2, 1);
    t2.forward(5*sq(0.02*(68 - t2.distanceTo(t1.x, t1.y)/10)));
    t1.penDown();

}



function setup() {
    frameRate(60);
    createCanvas(480, 480);

//to put star positions and sizes into arrays
    for (var i = 0; i < 300; i++) {
        x.push(random(width));
        y.push(random(height));
        starSize.push(random(3));
    }

    //too many turtles ! define each turtle's start position
    t1 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));
    t2 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));
    t3 = makeTurtle(random(width/3, 2*width/3), random(height/3, 2*height/3));





    //to set the color and strokeweight of each turtle
    t1.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
    t1.setWeight(1);
    t2.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
    t2.setWeight(1);
    t3.setColor(color(28 + brighten, 38 + brighten, 79 + brighten));
    t3.setWeight(1);


}

function draw() {
    // var darkBlue = color(28, 38, 79);
    // var orange = color(237, 132, 45);
    // var red = color(201, 34, 80);
    // var purple = color(183, 62, 151);
    background(color(28, 38, 79));

//to draw same stars each frame
    for (var j = 0; j < x.length; j++) {
        fill(255);
        ellipse(x[j], y[j], starSize[j]);

    }

//to make the turtles each frame
    zoom1();
    zoom2();
    zoom3();
    noStroke();

    //massive red world
    fill(201, 34, 80); //red
    ellipse(t1.x, t1.y, 100); //massive
    //for the shine
    push();
    translate(-20, -15);
    fill(201 + brighten, 34 + brighten, 80 + brighten);
    rectMode(CENTER);
    rect(t1.x, t1.y, 12, 20, 5);
    pop();

    //medium orange world
    fill(237, 132, 45); //orange
    ellipse(t2.x, t2.y, 50); //medium
    //for the shine
    push();
    translate(-10, -7);
    fill(237 + brighten, 132 + brighten, 45 + brighten);
    rectMode(CENTER);
    rect(t2.x, t2.y, 4, 6, 2);
    pop();


    //tiny pink world
    fill(183, 62, 151); //purple
    ellipse(t3.x, t3.y, 20); //tiny
    //for the shine
    push();
    translate(-4, -4);
    fill(183 + brighten, 62 + brighten, 151 + brighten);
    ellipse(t3.x, t3.y, 2);
    pop();

}

In this project I wanted to challenge myself with the task of making turtles which interact with each other on the canvas. I eventually ended up with quasi-gravity, which i then expressed as shiny rubber planets zooming around the screen which speed up as they approach each other and slow down as they disperse. I am pretty happy with the result, and although it looks very simple in the end the process that took me to the end product was long and rife with console errors. In the future I would like to figure out how to prevent the edges of planets from intersecting, or maybe give them the ability to bounce off of each other.

forgot to put my code up:
sketch

//Kathy Song
//Section D
//yunzhous@andrew.cmu.edu
//Project-11

var col;//coolor of turtle
var myTurtle = [];//array to store turtles
var degree = 20;//turn by degree

function setup() {
  createCanvas(480, 480);
  background(220);
  frameRate(10);
}

function draw() {
  for(var i = 0; i < myTurtle.length; i++) {
    col = map(mouseX, 0, width, 0, 255);//color according to mouseX
    myTurtle[i].setColor(col);
    myTurtle[i].setWeight(2);
    myTurtle[i].penDown();
    myTurtle[i].forward(20);
    myTurtle[i].right(degree);
    degree += 2;//degree constantly changing
  }
}

function mouseDragged() {
  myTurtle.push(makeTurtle(mouseX, mouseY));//make new turtle when mouse is pressed
}



function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I wanted to make something that make turtles along the curve that mouse is dragged. Then the turtle automatically moves and create random visual effect. The color of the stroke would also be controlled by mouseX, giving the image a little variety. I intentionally used only greyscale to create a snow&tree effect (because I really want it to snow!)

sketch

//Name: Colleen Duong
//Email: cduong@andrew.cmu.edu
//Section: d
//Assignment-10-b

//  cows = loadImage("https://i.imgur.com/cqxAWPM.jpg");


var cows;
var t1;
var t2;
var t3;
var t4;
var t5;
var t6;

function preload() {
  cows = loadImage("https://i.imgur.com/cqxAWPM.jpg");  //Cow Image Preload
}

function setup() {
  createCanvas(480, 480); //Change
  background(0);
  cows.loadPixels();
  frameRate(2000);
  t1 = makeTurtle(width/2, height/2); //Starts from the center of the canvas
  t2 = makeTurtle(width/2, height/2);
  t3 = makeTurtle(width/2, height/2);
  t4 = makeTurtle(width/2, height/2);
  t5 = makeTurtle(width/2, height/2);
  t6 = makeTurtle(width/2, height/2);
}

function draw() {
    var color1 = cows.get(t1.x, t1.y);  //Get colors of the picture
    var color2 = cows.get(t2.x, t2.y);
    var color3 = cows.get(t3.x, t3.y);
    var color4 = cows.get(t4.x, t4.y);
    var color5 = cows.get(t5.x, t5.y);
    var color6 = cows.get(t6.x, t6.y);
    t1.setColor(color1);  //Sets color for each line
    t2.setColor(color2);
    t3.setColor(color3);
    t4.setColor(color4);
    t5.setColor(color5);
    t6.setColor(color6);
    t1.setWeight(3);
    t2.setWeight(3);
    t3.setWeight(3);
    t4.setWeight(3);
    t5.setWeight(3);
    t6.setWeight(3);

//Turtles move towards the mouse
    t1.forward(10);
    t2.forward(10);
    t3.forward(10);
    t4.forward(10);
    t5.forward(10);
    t6.forward(10);

//Target is mouse location
    var targetX = mouseX;
    var targetY = mouseY;

//
  t1.turnToward(targetX, targetY, 2); //Mouse controls line
  t2.turnToward(targetX, targetY, 4);
  t3.turnToward(targetX, targetY, 6);
  t4.turnToward(random(width), random(height), 8);  //Lines are drawn randomly
  t5.turnToward(random(width), random(height), 10);
  t6.turnToward(random(width), random(height), 12);
//creates circles when drawing over
}



//TURTLE CODE
function turtleLeft(d) {
    this.angle -= d;}
function turtleRight(d) {
    this.angle += d;}
function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);}
function turtleBack(p) {
    this.forward(-p);}
function turtlePenDown() {
    this.penIsDown = true;}
function turtlePenUp() {
    this.penIsDown = false;}
function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;}
function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));}
function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;}
function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }}
function turtleSetColor(c) {
    this.color = c;}
function turtleSetWeight(w) {
    this.weight = w;}
function turtleFace(angle) {
    this.angle = angle;}
function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0,
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;}

I really enjoyed the concept of the portrait project that we did last so I wanted to do another version of it using turtles instead for this week’s assignment. I also wanted users to somewhat be able to control where the lines go.

Final product-ish