jiaxinw-Project-11-Composition

sketch

function preload(){
    img = loadImage("https://i.imgur.com/TKrbX1X.jpg")
}

function setup(){
    createCanvas(480,480);
    background(40);
    img.loadPixels();
}

var d = 20;
var c;
var w = 5;
function draw(){
    frameRate(10);
    var x = width/2;
    var y = height;
    //let the tree grow from the center of the bottom
    myTurtle=makeTurtle(x,y)
    //get random color for each branch
    c = img.get(random(x*2),random(y));
    if (d>=600){
        d =10
        w = 5
    }
    //when the tree is too big, grow black branches to erase the tree
    if (d>400 & d<600){
        c=40
        w=50;
    }
    myTurtle.setColor(c);
    myTurtle.setWeight(w);
    //draw a randomly growing tree
    myTurtle.left(90);
    myTurtle.forward(50);
    myTurtle.turnToward(random(200,280),100,20);
    myTurtle.forward(random(d));
    d += 2;
    myTurtle.turnToward(random(100,380),height,30);
    myTurtle.forward(random(d));
    myTurtle.turnToward(random(width),10,50);
    myTurtle.forward(random(d));
    
};

function mousePressed(){
    //press mouse to draw white fruits 
    var x1 = mouseX;
    var y1 = mouseY; 
    var t1 = makeTurtle(x1,y1);
    t1.setColor(color(255));
    t1.setWeight(1);
    for (var i = 0; i < 50; i++) {
        t1.forward(random(5,7));
        t1.right(random(10,30));
        
    }
    
}


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

My original thought was to draw a growing tree with Turtles. I wanted the branches to grow on the canvas. So I began to use the turtle to draw a branch.  And then I think about because I needed a trunk, so I made the first “forward” longer to make a trunk. I needed the branches going spreadly on the canvas, so I made them randomly go around the center line of the canvas. And then I figured out if I let the tree just growing forever, the canvas would be a mess. That’s why I added when the tree is big enough, black branches will grow and “erase” the previous ones. Also, for making the work more interesting, I added when the mouse is pressed, an abstract white “fruit” will be drawn on the tree.

The tree grows from small to big, and fruits can be added to the tree when the mouse is clicked.