Category: Project-11-Composition

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.

sketch

//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 11

var baseface; 

//Load Base Face Image
function preload() {
    var basefaceload = "https://i.imgur.com/FXyP6ss.gif";
    baseface = loadImage(basefaceload);
}

//Set up loaded Base Face 
function setup () {
    createCanvas(280,400);
    background(0);
    image(baseface, 0, 0);
    text("drag the mouse to make my brows thicker!", 10, 10);
}

function draw() {

    var distmousex = map(mouseX, 0, width, 0, 5);
    var distmousey = map(mouseY, 0, height, 0, 5);

//Right brow
    var browr = makeTurtle((width / 2) + 40 + distmousex, height/3 + distmousey);
    browr.setColor(color(210, 180, 140));
    browr.setWeight(4);
    browr.face(0);
    browr.forward(50);

//Left brow
    var browl = makeTurtle((width / 2) + distmousex, height/3 + distmousey);
    browl.setColor(color(210, 180, 140));
    browl.setWeight(4);
    browl.face(180);
    browl.forward(50); 

//Right Eye 
    var eyer = makeTurtle((width / 2) + 60, (height/3) + 15);
    eyer.setColor(50); 
    eyer.setWeight(1);

    for (var i = 0; i < 100; i++) {
        eyer.right(360/100);
        eyer.forward(0.7);
    }

//Left Eye 
    var eyel = makeTurtle((width / 2) - 20, (height/3) + 15);
    eyel.setColor(50); 
    eyel.setWeight(1);

    for (var i = 0; i < 100; i++) {
        eyel.right(360/100);
        eyel.forward(0.7);
    }

//Mouth
    stroke("Salmon");
    strokeWeight(6);
    arc((width / 2) + 20, (height/2) + 15, 80, 40, 0, PI);

//Right Iris 
    var irisr = makeTurtle((width / 2) + 60, (height/3) + 23);
    irisr.setColor(color(30, 17, 0));
    irisr.setWeight(7);

    for (var i = 0; i < 100; i++) {
        irisr.right(360/100);
        irisr.forward(0.2); 
    }

//Left Iris 
    var irisl = makeTurtle((width / 2) - 20, (height/3) + 23);
    irisl.setColor(color(30, 17, 0));
    irisl.setWeight(7);

    for (var i = 0; i < 100; i++) {
        irisl.right(360/100);
        irisl.forward(0.2);
    }   

}

//Turtle Graphics 
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 originally create a makeup simulation, but as I was working on the project, I found that to be difficult, as turtle graphics work more as a pen, rather than a painting function. I feel like my final product turned out to be way different than my first ideas.

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project 11
var tt1;
var startX; 
var startY;
var aa;
var ttlength;

function setup() {
    createCanvas(480, 400);
    background(173, 255, 244);
    tt1 = makeTurtle(startX,startY);
    tt1.setColor(color(255,144,0));
    tt1.setWeight(0.5);
    startX = width/2; // set the starting point to center of the canvas 
    startY = height/2;
    aa = random(20,340) // randomise angle
    ttlength = random(100,400); // randomize the length of the lines
    

  
}


function mousePressed() {

    for( var i=0; i <height/4; i +=2){
        tt1.penDown();
        tt1.forward(ttlength);
        tt1.right(aa);
        tt1.forward(ttlength);
        tt1.penUp();
        tt1.goto(startX,startY+i);
        
    }
}


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 use randomized angles and line lengths to explore different compositions. I also wanted to see shapes created from the repetition and overlaps of thin lines.