heeseoc-Project-11-Composition

sketch

//Steph Chun
//Section A
//heeseoc@andrew.cmu.edu
//Project-11

var turtle, turtle2;
var angle = 20;
var side = 5;
var angle2 = 160;
var side2 = 10;

function setup(){
    createCanvas(400,400);
    background(20,20,50);
	frameRate(10);
	//circular geometric shape
	turtle = makeTurtle(random(0,width), random(0,height));
	//spikey geometric shape expanding from the center
	turtle2 = makeTurtle(width/2, height/2);
}

function draw(){
	stroke(255);
	strokeWeight(.8);
	textSize(14);
	text("click anywhere!", 5, 20);

	//circular geometric shape 
	for (var i = 0; i < 30; i++){
		turtle.setColor(color(random(150,255), random(200,255), random(200,255)));
	    turtle.penDown();
	    turtle.setWeight(.2);
	    turtle.left(angle);
	    turtle.forward(side);
}
	turtle.right(10);
    side += .5;

    //spikey geometric shape expanding from the center
	turtle2.setColor(color(random(150,255), random(200,255), random(100,255)));
    turtle2.penDown();
    turtle2.setWeight(.3);
    turtle2.left(angle2);
    turtle2.forward(side2);
    turtle2.right(5);
    side2 += 2;

}

//creating spiral shape on mouseclick 
function mousePressed(){
	turtle = 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(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;}

While I was exploring what I can do with turtles, I noticed how I can make interesting spirals through drawing lines and manipulating angles. At first, I was trying to execute these (not-so-exactly) circular spirals with some random factors on mouseclick, but then it looked somewhat boring with only those on a dark background. So I re-generated one of the spirals that I thought was interesting and placed it at the center. After a while I left the code alone, it made this interesting circular shape even though it started off as a rather angular and spikey shape, which I thought resonated with the circular shapes that are being created on mouseclick. I liked how it has an interactive component, but later on, the user is like swallowed by the dense spiral and notice the connection between the two seemingly different elements.