sketch

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

var positionx = [];
var positiony = [];
function setup() {
  createCanvas(480,480);
  background(255,0,0,100);

}
function draw() {
  for (var x=0; x<positionx
  .length; x++){
    var turtle = makeTurtle(positionx[x], positiony[x]);
  turtle.setColor(random(100));
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.forward(random(60),100);
        turtle.right(141.5);
        turtle.forward(random(60));
      
      turtle.penUp();
      turtle.x = positionx[x];
      turtle.y = positiony[x];
    }
  }
}

function mousePressed(){ 
  positionx.push(mouseX);
  positiony.push(mouseY);
}

For this assignment I wanted to create interactive art work using turtle graphics. For each mouse click, new geometry will appear with glittery effect created by random command.

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-11

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

var turtle;


function setup()
{
    createCanvas( 480, 480 );
    background( 255 );
    turtle = makeTurtle( width / 2, height / 2 );
    turtle.penDown;
    turtle.setWeight( 3 );
    turtle.setColor(0,0,0);
}

var turtleDist = 100;
var turtleSpeed = 1;
var turtleAcceleration = 0.05;

function draw()
{
    turtle.forward( turtleSpeed );
    if( dist( turtle.x, turtle.y, mouseX, mouseY ) < turtleDist) turtleSpeed += turtleAcceleration;
    else turtleSpeed -= turtleAcceleration * 2;
    turtleDist = dist( turtle.x, turtle.y, mouseX, mouseY );
    if( turtleSpeed < 0 )
    {
        turtle.left( 180 );
        turtleSpeed = -turtleSpeed;
    }
    turtle.turnToward( mouseX, mouseY, 7 );
    
}

It’s a turtle that chases you down.

Merry Christmas

var myTurtle;
var num;
var length = 20;

function setup() {
    createCanvas(480, 480);
    background(5, 60, 50);
    myTurtle = makeTurtle(width/2, height/2);
    flower(40);
}

function flower(angle) { //draw red flower
    for (j = 0; j <= 360/angle; j++) {
        myTurtle.penDown();
        myTurtle.x = width/2;
        myTurtle.y = height/2 - 20;
        myTurtle.setColor((color(255, 0, 0)));
        myTurtle.setWeight(6);
        drawhex(85);
        myTurtle.back(30);
        myTurtle.right(angle);
        myTurtle.penUp();
    }
}

function drawhex(length) { //draw hexagon which is a part of flower
    for (i = 0; i < 6; i++) {
        myTurtle.forward(length);
        myTurtle.right(60);
    }
}

function draw() {
    //snow flakes
    myTurtle.penDown();
    myTurtle.setWeight(1);
    myTurtle.setColor(color(255));
    drawhex(mouseX/70);
    myTurtle.x = random(0, width);
    myTurtle.y = random(0, height);
    myTurtle.penUp();
    
}

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: 45, 
                  penIsDown: true,
                  color: color(255, 0, 0),
                  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;
}

function mousePressed() {
    //it stops snowflakes
    noLoop();
    //draw ellipse
    fill(255);
    stroke(255);
    ellipse(width/2, height/2 - 20, 110, 110);
    //redraw red flower
    myTurtle.x = width/2;
    myTurtle.y = height/2;
    flower(40);
    stroke(5, 60, 50);
    //text
    textAlign(CENTER);
    textSize(28);
    strokeWeight(5);
    textFont('Trebuchet MS');
    text('M E R R Y  C H R I S T M A S', width/2, height - 40);
    
}

I made it because Christmas is coming! I created snowflakes and Christmas flower with multiple hexagons.

sketch

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

This piece I was playing with the tension of pattern and the randomness when interfere with the continuous flow of pattern.

//Monica Huang
//Section E
//monicah1@andrew.cmu.edu
//Project-11
var myTurtle;
var startFrame;

function setup() {
    createCanvas(400, 400);
    background(100);
    myTurtle = makeTurtle(width, height);
    myTurtle.setColor(color(255, 100, 200));
    myTurtle.setWeight(2); 
    myTurtle.penDown();
    resetCanvas();
    frameRate(50);
}

function draw() {
    var step = (frameCount - startFrame)/20.0;
    myTurtle.forward(step);
    myTurtle.left(10.0);
    if (myTurtle.y > height) resetCanvas();

}

function resetCanvas() {
    background(100,0,10);
    startFrame = frameCount;
    myTurtle.penUp();
    myTurtle.goto(width/6, height/2);
    myTurtle.penDown();
}

function mousePressed(){
    myTurtle.penUp();
    myTurtle.goto(width/2, height/2);
    myTurtle.penDown();
}

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

SaveSave

sketch

//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Project 11

var turtle =[];
var count = 10;
var dp;



function preload(){
    var imageurl = "https://i.imgur.com/S483jxr.jpg";
    dp = loadImage(imageurl);//loading the pic of my boy friendo
}

function setup() {
    background(0);
    createCanvas(380,300);
    image(dp,0,0)
    dp.loadPixels();
    for (var i = 0; i < count; i ++) {//setup the strokes
        turtle[i] = makeTurtle(0, 0);
        turtle[i].penDown;
    }
    strokeJoin(MITER);
    strokeCap(PROJECT);
    frameRate(30);
}

function draw() {
    for (var i = 0; i < count; i ++) {
        var pointcolour = dp.get(floor(mouseX),floor(mouseY));
        turtle[i].setColor(color(pointcolour)); //setting the colour to the pixel at the mouse point
        turtle[i].setWeight(random(15));//randomizing the weight
        turtle[i].turnToward(mouseX,mouseY, turtle[0].angleTo(pmouseX, pmouseY)); //turn along mouse movement.
        turtle[i].forward(turtle[i].distanceTo(mouseX, mouseY));//move along mouse movement.
    }
}




//given turtle stuffs
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) {
        strokeJoin(MITER);
        strokeCap(PROJECT);
        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;
}

This week I used turtle graphics to abstract colours from a portrait and “painting” with strokes randomized by mouse movements and those colours.

Move and Press Mouse!

sketch

//Hanna Jang
//Section B 
//hannajan@andrew.cmu.edu; 
//Project 11

function setup(){
	createCanvas(400, 400); 
	background(12, 24, 76); 
}

function draw(){
	
	//make tree
	var t1=makeTurtle(width/2, height/2);

//color and stroke weight of tree
	t1.setColor(74, 246, 126);
	t1.setWeight(10);
	
//make tree 
		t1.PenDown; 
		t1.right(100);
		t1.forward(200); 
		t1.PenUp;		
		
	//make tree side 
	var t1=makeTurtle(width/2, height/2);

//color and stroke weight of tree
	t1.setColor(74, 246, 126);
	t1.setWeight(10);
	
		t1.PenDown; 
		t1.right(80);
		t1.forward(200); 
		t1.PenUp;		
	
//make main star 
	var t2=makeTurtle(width/2, height/2);
	
//color and stroke weight of star 
	t2.setColor(255);
	t2.setWeight(3);
	
//adjust the star size according to mouseX
	var squareSize=20; 
		if (mouseX>width){
			squareSize=100;
			}
		if (mouseX<width){
			squareSize=30;
			}
			
//make many squares for making star 
	for (var j=0; j<25; j++){
		t2.right(50); 
		t2.left(30); 
		
//make the squares
		for (var i=0; i<4; i++){
			t2.PenDown; 
			t2.forward(squareSize); 
			t2.left(90);
			t2.PenUp;		
		}
	}
	
//make more stars when mouse is pressed 
if (mouseIsPressed){
	morestar(); 
}
}

function morestar() {
	t2=makeTurtle(mouseX, mouseY); 
	t2.setColor(248, 224, 127);
	t2.setWeight(1);
	
//randomize star size 
	var squareSize=random(3, 50); 

	
//make many shapes for making star 
	for (var j=0; j<8; j++){
		t2.right(50); 
		t2.left(30); 

//randomize the type of shapes being used for stars 
var sides=random(3, 5); 
			
	for (var i=0; i<sides; i++){
	t2.PenDown; 
	t2.forward(10); 
	t2.left(360/sides);
	t2.PenUp;		
			}
		}
	}
	
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, 
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight};
    return turtle;
}

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

When thinking about what to do, I thought of an idea to make a star object, and theme it around a simple christmas tree. I then experimented using turtle graphics to make a unique looking object and added extra twinkling stars in the background when the mouse is pressed.

hyt-project-11

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-11-turtles-freestyle


var img; 
var px = 0; // set one variable as x position 
var py = 0; // set one variable as y position
    
// preload image onto canvas
function preload() {
    img = loadImage("https://i.imgur.com/BRPnejy.jpg");    
}

// basic setup, load pixels and display image
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    image(img, 0, 0);
}

function draw() {

    // retrieve brightness value
    var rgb = img.get(px, py);
    var brightnessVal = brightness(rgb);

    // create new turtle pixel + other properties
    var pixel = makeTurtle(px, py);
    pixel.setWeight(5);
    print(brightnessVal)

    // restrain px position within canvas
    if (px <= width) { 

        // draw in the lighter zones
        if (brightnessVal >= 92 & brightnessVal < 100) { 
            pixel.setColor(color(200, 191, 201, 150));
            pixel.forward(1);

        } 
        // draw in dark zones
        if (brightnessVal < 92) {
            pixel.setColor(color(128, 122, 128, 150));
            pixel.forward(1);
        }

        // draw in gray-ish zones
        if (brightnessVal >= 100) {
            pixel.setColor(color(251, 244, 238, 150));
            pixel.forward(1);
        }
    }

    // if out of canvas then reset
    if (px > width) {
        px = 0;
        py += 8;
    }

    // make the turtles move! 
    px += 2;
}










// turtle function
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;}

For this project, I wanted to create an abstract landscape work that’s based off of a found minimalist photo, and the turtle drawing process would imitate a machine printing out the pixelated drawing. I didn’t really have a sketch, since the found image itself is my inspiration. I think the most challenging part was to incorporate the brightness() function into turtles, which took me a long time to figure out (for quite a while the brightness value was not calling the right (px, py) position) however I am quite satisfied with the foggy, pastel painting that generated.

* i’m using a grace day for this week!

The first image is an iteration without the original image, and the second image incorporates both the original + iterated turtles. Enjoy!

sketch

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 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(random(255),random(255),0),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, 
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

function setup() {
    createCanvas(480, 480);
    background(0);

}

var turtleX = [];
var turtleY = [];
var radius = 5;

function draw() {
  for (var num=0; num<turtleX.length; num++){
    var turtle = makeTurtle(turtleX[num], turtleY[num]);
    var angle=20;
    
    for (var i=0; i<20; i++) {
        turtle.penDown();
        turtle.right(angle);
        turtle.forward(radius);
      
      turtle.penUp();
      turtle.x = turtleX[num];
      turtle.y = turtleY[num];
    }
  }
  if(radius<200){
    radius += 0.5;
  }
}

function mousePressed(){
  
  turtleX.push(random(width));
  turtleY.push(random(height));

}

When users press the mouse on the canvas, there will be a turtle that is placed randomly on canvas generated. The size of each firework is also changing. This idea is inspired by the firework that we can see on celebration days.

sketch

//Robert Managad
//Section-E
//rmanagad@andrew.cmu.edu
//Project 11 -- Turtle Graphics

var turtleWormA;



function setup() {
	createCanvas(400, 400);
	
}

function draw() {
	var mil = millis(); //use of milliseconds an automatic rotation.
	background(230, 201, 148);

	//turtle drawings below, which vary on length and placement

	push();
	translate(width/2, height/2);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 100; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();

	push();
	translate(width/4, height/4);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.75, height*0.25);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.25, height*0.75);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.45, height*0.35);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.85, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.45);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.15, height*0.55);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.55, height*0.95);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.65);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.85);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.40, height*0.60);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.80, height*0.40);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(sin(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.90, height*0.90);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.60, height*0.10);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.95, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
	push();
	translate(width*0.10, height*0.15);
	rotate(mil/500);
	turtleWormA = makeTurtle(0, 0);
	turtleWormA.setColor(color(47, 24, 57));
	turtleWormA.setWeight(3);
	for (var i = 0; i < 50; i++) {
		turtleWormA.forward(2);
		turtleWormA.left(cos(i/5) * mouseY/17);
	}
	pop();
}

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

For the Turtle Composition, I wanted to play with modifying turtle paths using trigonometric functions. I also thought about elements in nature that visually present trigonometric functions to incorporate into my work as compositional elements. I came up with a handful of ideas, but ultimately saw compositional harmony with worms popping out of holes in the ground (or armpit hair).

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-11

//creates variable to be mapped
var move=500

function setup() {
    createCanvas(400, 400);
}

function draw() {
	//maps value to be used in right command
	var m = map(move, 0, mouseX, 200, 400);
    
    background(0);

    //draws darkest circular turtle which moves according to mouse
    var turtle4 = makeTurtle(mouseX, mouseY); //150
    turtle4.penDown();
    turtle4.setColor(color(20, 36, 62));
        for (var i = 0; i < 2000; i++) {
        turtle4.forward(300);
        turtle4.right(m);
        turtle4.forward(200);
    }

    //draws middle colored circular turtle which moves according to mouse
    var turtle5 = makeTurtle(mouseX+200, mouseY+200); //150
    turtle5.penDown();
    turtle5.setColor(color(85, 108, 122));
        for (var i = 0; i < 2000; i++) {
        turtle5.forward(300);
        turtle5.right(m-500);
        turtle5.forward(200);
    }

    //draws lightest colored circular turtle which moves according to mouse
    var turtle6 = makeTurtle(mouseX-200, mouseY-200); //150
    turtle6.penDown();
    turtle6.setColor(color(139, 202, 191));
        for (var i = 0; i < 2000; i++) {
        turtle6.forward(300);
        turtle6.right(m+500);
        turtle6.forward(200);
    }
}


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 did not make any sketches for this, but here are images of some compositions I liked.

For this project, I wanted to create a simple turtle collage which interacted with the mouse and created interesting compositions with eachother with every movement of the mouse. I am pretty happy with my results, and how the tiniest movement can create a different composition and pattern.