Category: Section B

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-11


var startFrame;


function setup() {
    createCanvas(480, 480); // create the canvas   
    
}


function draw() {
    background(40,41,35); //setting background color
    var turtle = makeTurtle(80,80); //setting turtle variable



    noFill();
    stroke(0);
    strokeWeight(10);

    turtle.setWeight(20); // make turtle weight 

    // go to starting position but dont start drawing

    //First Iteration of 
    turtle.penUp();

    //placeholder for where mouse should go
    //North Position
    fill('red');
    noStroke();
    ellipse(230,10,30,30);
    //South Position
    fill('red');
    noStroke();
    ellipse(230,450,30,30);
    //West Position
    fill('red');
    noStroke();
    ellipse(10,240,30,30);
    //East Position
    fill('red');
    noStroke();
    ellipse(470,240,30,30);

    for(var i = 0; i<100; i++){

        turtle.penUp();
        turtle.goto(mouseX,150); //set triangle position_01
        turtle.penDown();

        turtle.forward(mouseX);
        turtle.face(-120);
        turtle.forward(mouseX);
        turtle.face(120);
        turtle.forward(mouseY); // creates vertical growth when mouse X is moving in horizontal direction, Y is stretched
    
    }

    for(var i = 0; i<50; i++){
        turtle.penUp();
        turtle.goto(mouseX,150); //set triangle position_02
        turtle.penDown();

        turtle.forward(mouseX);
        turtle.face(-120);
        turtle.forward(mouseX);
        turtle.face(-120);
        turtle.forward(mouseY);
    
    }


    for(var i = 0; i<100; i++){
        turtle.penUp();
        turtle.goto(mouseX,150); //set triangle position_03
        turtle.penDown();

        turtle.forward(mouseX);
        turtle.face(60); // smaller forward motion
        turtle.forward(mouseX);
        turtle.face(60);
        turtle.forward(mouseY);
    
    }

    for(var i = 0; i<100; i++){
        turtle.penUp();
        turtle.goto(mouseY,150); //set triangle position_04
        turtle.penDown();

        turtle.forward(mouseY);
        turtle.face(-120);
        turtle.forward(mouseY);
        turtle.face(120);
        turtle.forward(mouseX); // when mouse moves in Y direction the lines also stretch in x direction
    
    }

    for(var i = 0; i<100; i++){
        turtle.penUp();
        turtle.goto(mouseY,150); //set triangle position
        turtle.penDown();

        turtle.forward(mouseY);
        turtle.face(-60); //smaller forward motion reversed
        turtle.forward(mouseY);
        turtle.face(60);
        turtle.forward(mouseX);
    
    }

    

}





//setting the Turtle functions 


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 explore how moving the mouse to different part of the canvas could create different distinct images from the intersection of a couple lines. As the mouse moves in the X direction, the Y direction lines are shifted vertically so that some go off the canvas or move up/down. This dynamic  movement makes the drawing full at times and have less lines in others. 

Move the mouse!

/*
Min Jun Kim
minjubki
15104
Project 11

Makes a turtle composition
*/

var t1, t2; //initialize turtles
var turtles = []
var inc = 0.05 //used to control pace of sin
var v = 0.5 //value for sin
var ang; //angle
var xind = []; //index for x
var yind = []; // index for y
var sumx=0; //sum of x
var sumy =0 ; //sum of y
var topdistx = 0; //distance from a certain point 
var topdisty = 0; // y distance from a certain point 

function setup() {
     createCanvas(480, 480); 
    //sets up two turtles

    t1 = makeTurtle(width/2, height/2);
    t1.setWeight(2);
    t1.setColor(255);
    t1.penDown();

    t2 = makeTurtle(0, 0);
    t2.setWeight(1);
    t2.setColor(0);
    t2.penDown();
    frameRate(500);



}


function draw() {
    background(0);
    noFill();

    //draws the grid in the background
    while(t2.y < height+10) {
        t2.forward(width);
        t2.right(90);
        t2.forward(3);
        t2.right(90);
        t2.forward(width);
        t2.left(90);
        t2.forward(3);
        t2.left(90);
        
    }
    //repeat once it finishes
    if (t2.y > height) {
        t2.goto(0,0);
    }

    //have a repeating colorshift
    t2.setColor(sin(v)*200);

    //only have the drwaing if mouse is in canvas
    if (mouseX> width || mouseY > height) {
        t1.penUp();
    }
    else {t1.penDown()};
    
    //t1.setWeight(random(5))
    strokeWeight(1);
    //find angle to mouse
    ang = int(t1.angleto(mouseX,mouseY));
    distanco = dist(mouseX,mouseY, t1.x, t1.y);
    
    rect(0,0, width-1, height-1);
    t1.forward(10+distanco/ang);
    //make drawing shift if mouse is moving
    t1.turnToward(mouseX,mouseY,ang);
    t1.goto(width/2, height/2);
    
    //make sure it is in bounds
    if(t1.x > width || t1.x < 0) {
        t1.goto(random(width),random(height));
    }
    //draw the pattern in middle
    for (var i = 0; i < 200; i++) {
        t1.forward(mouseY/5);
        t1.right(mouseX/9+90); 
        t1.forward(sin(v)*mouseY/100);
        //index values
        xind[i] = t1.x;
        yind[i] = t1.y;
        //draw exoanding points
        if (i % 2 === 0) {
            t1.forward(distanco*cos(v));
            t1.left(2);
        }
        //inverse expanding points
        if (i % 5 === 0) {
            t1.forward(50*sin(v));
            t1.right(2);
        }
        
        //make sure it stays in center
        t1.goto(width/2, height/2);
    }
    //find sum of all points
    for (i = 0; i < xind.length; i++) {

        sumx += xind[i];
        sumy += yind[i];
        
        
    }
    //make the list not too big
    if (xind.length > 100) {
        xind.pop();
        yind.pop();
    }
    //find distance to cneter
    topdistx = dist(sumx/xind.length, 0, 240, 0);
    topdistx = dist(0, sumy/xind.length, 0, 240);
    //go to cneter of drawing
    t1.goto(sumx/xind.length,sumy/yind.length);
    fill(0);
    //reset
    sumx=0;
    sumy=0;

    //controls the value for the sin and return to 0 if too high
    v += inc;
    if (v > 100) { v= 0};

}



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 week I wanted to draw something that could be used a music video in relation to this week’s looking outwards. I first drew patterns in the middle that changed according to the position of the mouse, then added elements that were based on time. I decided to use sin and cos and increased it with a certain value. The value could be changed to make it beat faster, but it was too overwhelming that way. Then I drew a simple grid in the background, and added color elements to it. I think that this project turned out well, and I was shocked that turtle graphics can produce such detailed programs.

Progress pics:

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-11


var myTtl = [];
var distance = 0;
var col;

function setup() {
  createCanvas(480, 480);
  background(100, 0, 0);
  frameRate(10);

}

function draw(){
  for(var i =0; i < myTtl.length; i++){
//Two geometries will be drawn alternatively according to the number of mouse click
//First geometry
    if (i % 2 == 0){
      col = map(mouseY, 0, height, 0, 255);
//Color will change according to mouseY
      myTtl[i].setColor(col);
      myTtl[i].setWeight(1);
      myTtl[i].penDown();
      myTtl[i].forward(distance);
      myTtl[i].right(45);
      distance += 1;
//The geometry will become larger and larger
    }
//Second geometry
    else{
      col = map(mouseY, 0, width, 0, 255);
      myTtl[i].setColor(col);
      myTtl[i].setWeight(1);
      myTtl[i].penDown();
      myTtl[i].forward(distance);
      myTtl[i].right(70);
//The direction of drawing the geometry goes backward
      distance -= 1;

    }
  }
}

function mouseClicked(){
//Draw a new geometry per mouse click
  myTtl.push(makeTurtle(mouseX, mouseY));
}



/////////////////////////////////////////
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(144, 255 , 210),
                  weight: 4,
                  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 use turtle to draw two different geometries. They appear alternatively according to the number of mouse clicked. As the geometries are drawn, the color of stroke changes gradually. And the starting color is based on the position of mouse X. Whenever the number of mouse clicked is even, the direction of the stroke would go backward so that the geometries that are already drawn will change color again. This project is a great practice for object command.

sketch.js

var myTurtle;
var startFrame;

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

function draw() {
    var step = (frameCount - startFrame)/25.0;
for(var i = 0; i <= 10000; i++){

    myTurtle.forward(step);
    myTurtle.left(9.0);

        myTurtle.forward(step);
        myTurtle.left(10);
        myTurtle.forward(step);
        myTurtle.left(10);
        myTurtle.forward(step);
        myTurtle.left(20);
        myTurtle.forward(step);

     myTurtle.right(137.507764); 
    myTurtle.forward(i*.2);

    if (myTurtle.y > height) resetCanvas();
}
}
function resetCanvas() {
    background(0);
    startFrame = frameCount;
    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;}

I was interested in the idea of overlaying the lines that I could create with the turtle graphics that I learned in the previous assignments and having them progress on the screen as well.

sketch

var l = 50;
var m = 10;
var R = 100;
var G = 200;
var B = 50;

function setup(){
    frameRate(10);
    createCanvas(400, 400);
    background(0);
    myTurtle = makeTurtle(mouseX, mouseY);
    myTurtle.setWeight(6);
    myTurtle.penDown(); 
}

function draw(){
    var c = color(R, G, B)
    myTurtle.setColor(c);
    myTurtle.turnToward(mouseX, mouseY, l);
    myTurtle.forward(m);
    if (frameCount % 100 === 0){
        newColor();
    }
}

function newColor(){
    m = random(0, 20);
    l = random(0, 100);
}

function mouseClicked(){
    R = random(0, 255);
    G = random(0, 255);
    B = random(0, 255);
}

function keyPressed(){
    background(0);
}

//// change nothing under this line ////
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 was inspired by the etch a sketch toy, which draws small lines that can potentially create an interesting drawing. The turtle turns towards the direction of the mouse. Every 100 frames, the line type changes to be more jagged or more smooth. When you click the mouse on the canvas, it changes the color of the line. If you press any key, the background erases to create a blank slate – similar to shaking an etch a sketch.

cmhoward-week-11

var sq1StartWidth = 90;
var sq1StartHeight = 50;
var sq2StartWidth = 375;
var sq2StartHeight = 100;
var sq3StartWidth = 135;
var sq3StartHeight = 150;
var sq4StartWidth = 425;
var sq4StartHeight = 200;
var sq5StartWidth = 240;
var sq5StartHeight = 350;
var sq1length;
var sq2length;
var sq3length;
var sq4length;
var sq5length;

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

function draw() {
    background(0);
    // var mx = constrain(mouseX, 0, width - sq2length);
    // var my = constrain(mouseY, 0, height - sq2length);
    // sq1StartWidth = mx - sq1length;
    // sq1StartHeight = my - sq1length;
    // sq2StartWidth = mouseX + (mx/2);
    // sq2StartHeight = mouseY + (my/2);
    sq1length = map(mouseX, 0, width, 10, 50);
    sq2length = map(mouseX, 0, width, 10, 50);
    sq3length = map(mouseX, 0, width, 20, 40);
    sq4length = map(mouseX, 0, width, 75, 25);
    sq5length = map(mouseX, 0, width, 50, 60);
    square_1();
    square_2();
    square_3();
    square_4();
    square_5();
    lines();
}

function square_1() {
    square1 = makeTurtle(sq1StartWidth, sq1StartHeight);
    square1.color = ('white');
    square1.penDown();
    square1.face(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.right(90);
    square1.forward(sq1length);
    square1.penUp();
}

function square_2() {
    square2 = makeTurtle(sq2StartWidth, sq2StartHeight);
    square2.color = ('white');
    square2.penDown();
    square2.face(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.right(90);
    square2.forward(sq2length);
    square2.penUp();
}

function square_3() {
    square3 = makeTurtle(sq3StartWidth, sq3StartHeight);
    square3.color = ('white');
    square3.penDown();
    square3.face(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.right(90);
    square3.forward(sq3length);
    square3.penUp();
}

function square_4() {
    square4 = makeTurtle(sq4StartWidth, sq4StartHeight);
    square4.color = ('white');
    square4.penDown();
    square4.face(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.right(90);
    square4.forward(sq4length);
    square4.penUp();
}

function square_5() {
    square5 = makeTurtle(sq5StartWidth, sq5StartHeight);
    square5.color = ('white');
    square5.penDown();
    square5.face(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.right(90);
    square5.forward(sq5length);
    square5.penUp();
}

function lines() {
    line(sq1StartWidth, sq1StartHeight, sq2StartWidth, sq2StartHeight);
    line(sq1StartWidth, sq1StartHeight + sq1length, sq2StartWidth, sq2StartHeight + sq2length);
    line(sq1StartWidth - sq1length, sq1StartHeight, sq2StartWidth - sq2length, sq2StartHeight);
    line(sq1StartWidth - sq1length, sq1StartHeight + sq1length, sq2StartWidth - sq2length, sq2StartHeight + sq2length)   

    line(sq3StartWidth, sq3StartHeight, sq2StartWidth, sq2StartHeight);
    line(sq3StartWidth, sq3StartHeight + sq3length, sq2StartWidth, sq2StartHeight + sq2length);
    line(sq3StartWidth - sq3length, sq3StartHeight, sq2StartWidth - sq2length, sq2StartHeight);
    line(sq3StartWidth - sq3length, sq3StartHeight + sq3length, sq2StartWidth - sq2length, sq2StartHeight + sq2length)   

    line(sq3StartWidth, sq3StartHeight, sq4StartWidth, sq4StartHeight);
    line(sq3StartWidth, sq3StartHeight + sq3length, sq4StartWidth, sq4StartHeight + sq4length);
    line(sq3StartWidth - sq3length, sq3StartHeight, sq4StartWidth - sq4length, sq4StartHeight);
    line(sq3StartWidth - sq3length, sq3StartHeight + sq3length, sq4StartWidth - sq4length, sq4StartHeight + sq4length) 

    line(sq5StartWidth, sq5StartHeight, sq4StartWidth, sq4StartHeight);
    line(sq5StartWidth, sq5StartHeight + sq5length, sq4StartWidth, sq4StartHeight + sq4length);
    line(sq5StartWidth - sq5length, sq5StartHeight, sq4StartWidth - sq4length, sq4StartHeight);
    line(sq5StartWidth - sq5length, sq5StartHeight + sq5length, sq4StartWidth - sq4length, sq4StartHeight + sq4length)     
}

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 explore creating animated geometric forms. With turtle graphics, there are a lot of variables that one can easily explore with easier access so this was the perfect excuse to turn a doodle I always do into an actual project. Doodles below…

While these are more complex, they are based on the same principle of connecting squares and rectangles which was the basis for my project.

click to draw

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-11

var nPoints = 10;
var x = [];
var y = [];


function setup(){
    createCanvas(480, 480);
    background(0);
    //generate random points around mouse
    for (var i = 0; i < nPoints; i++) {
        x.push(random(mouseX - 50, mouseX + 50));
        y.push(random(mouseY - 50, mouseY + 50));

    };

}

function draw(){
    strokeJoin(MITER);
    strokeCap(PROJECT);

    //generate new random points around mouse
    if (mouseIsPressed) {
        for (var i = 0; i < nPoints; i++) {
            x.push(random(mouseX - 20, mouseX + 20));
            y.push(random(mouseY - 20, mouseY + 20));
        }; 
        //get rid of the old ones in the array
        x.splice(0, nPoints);
        y.splice(0, nPoints);

        for (var i = 0; i < nPoints; i++) {
            var ttl = makeTurtle(x[i], y[i]);
            //create the sine curve in the middle
            var targetY = 240 + 90 * sin(radians(mouseX))
                ttl.setWeight(4);
                ttl.setColor(color(random(255),random(255),random(255)), 50);
                ttl.penDown();
                //connect the points towards the center sin curve
                ttl.goto(mouseX,targetY);
                ttl.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: 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 am interested in creating a brush myself. Therefore, I generated random points at the position of the mouse and then connected them with the center sin curve. It could look like a curtain sometime.