Author: aratnaka@andrew.cmu.edu

Turtle Composition

This is a doodle of mine that I have doodled in the corners of my notebooks and sketchbooks since my freshman year of high school. I was very excited to be able to doodle it in code!

data-width=’600′ data-height=’400′ index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

data-width=’600′ data-height=’400′ sketch

//Arula Ratnakar
//Section C
//Turtle Composition
//aratnaka@andrew.cmu.edu




function setup() {
	createCanvas(600, 400);
    background(255);
    var turtle = makeTurtle(width/2, height/2);
    turtle.penDown();
    turtle.setColor(0);
    turtle.setWeight (4)
    	turtle.left(90)
    	turtle.forward(145)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(100)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(16)
    	turtle.right(90)
    	turtle.forward(75)
    	turtle.right(135)
    	turtle.forward(16)
    	turtle.right(135)
    	turtle.forward(150)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(100)
    	turtle.left(135)
    	turtle.forward(16)
    	turtle.left(135)
    	turtle.forward(11.313708499)
    	turtle.forward(63.686291501)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(16)
    	turtle.left(90)
    	turtle.forward(20)
    	turtle.forward(120)

    turtle.penUp()


   
    
}

function draw() {
	
}

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

Looking Outwards-11

The website touchpianist.com is a really fun website in which you can “play” songs using a single key on your keyboard and view notes that are abstracted as lights in front of you on your browser page. I admire the mesmerizing way in which the lights appear on the html canvas, and the fact that you can tailor the songs to speeds of your choosing.

touchpianist.com uses an HTML canvas to display the lights, and WebAudio to play the songs.
Batuhan Bozkurt is both a musician and a creative coder, and he combined these two talents to create the website by playing all the songs, and then coding the setup itself.

touchpianist.com was created by Batuhan Bozkurt in May 2015.

Project-09

I thought it would look interesting if the picture had three “clones” of my roommate.

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Portrait




var picture;


function preload() {
	//loads picture of roommate 
    var img = "http://i.imgur.com/DVFUfQO.jpg";
    picture = loadImage(img);
}

function setup() {
    createCanvas(500, 500);
    picture.loadPixels();

    
}

function draw() {
    var px = random(width);
    var py = random(height)
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = picture.get(ix, iy);


  
    noStroke();
    fill(theColorAtLocationXY);
    drawMultipleFaces()


    function drawMultipleFaces (){ 
    	ellipse (px, py, 6,6)
    	
    	push ()
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)

    	pop()
    }

   
    
}

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

 

 

Looking Outwards-09

Mass Effect looks like a beautiful game with wonderful graphics and a compelling storyline. I agree that the game showcases the artistic side of games, as it has incredible characters and stories as well as beautiful visual aspects. I would have liked it if she had mentioned how the game was designed to appear as a continuous cut scene, because I believe that is a very interesting and unique design.

Looking Outwards-08

Zach Lieberman is a professor at Parsons School of Design. He studied Fine Arts at Hunter College and received a Masters in Design and Technology from Parsons. He tries to achieve a representation of and tribute to Drawing, Movement, and Magic through his work as a digital media artist. He has created custom drawing tools that do things like uncurl non-straight lines, or allow those with disabilities to draw with their eyes. He also makes drawings interactive and musical. He uses movement in large scale interactive works where people can dial a phone number and appear as a character on a projection that was displayed on a building face. He also helped magicians create illusions, making cards dance and levitate. The project that I admire the most is the drawing software that allowed a paralyzed man to draw with his eyes.

Looking Outwards-07

Kim Rees was asked by Google in July of this year to create the “Data and Motion Graphics Project,” a visualization of a grid that would provide them with 100% renewable energy at their headquarters. She asked someone to make an audio that would vary from dissonant to harmonic, and used this audio to influence the 3D objects in their model.  She wanted this to emulate the energy flow over time. I admire this project because it is a really unique and creative way to advocate for renewable energy and show its impact.

http://www.periscopic.com/news/5698

Abstract Clock

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Abstract Clock




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

//--------------------------
function draw() {
	background ('lightpink')
	
	var H = hour ()
	var M = minute()
	var S = second ()

	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push()
	translate (50,50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M) 
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (96, 139, 209)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (90, 168, 89)
	triangle (width/2, S*5, height/2, H, 10, M)
	push ()
	translate (50, 50)
	fill (90, 168, 89)
	triangle (M, 10, H, height/2,S*5, width/2)
	fill (96, 139, 209)
	triangle (width/2, S*5, height/2, H, 10, M)
	pop ()

}

 

Looking-Outwards-06

http://www.random-art.org/about/

Random Art is a website created by Andrej Bauer in which you can type out anything in a text box and it turns into an abstract computer generated painting. The words you type cause a pseudo-random number generator to create a formula that changes the color of individual pixels in the picture. The first word makes the colors, while the second creates the arrangement of graphical elements. Below are the words “Blue Demo” (left) and “Demo Green” (right).

blue_demo demo_green

Wallpaper

I liked the overlapping shapes and the contrast between the colors and the types of shapes used.

 

indexsketch

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//wallpaper



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

    for (var x=10; x<width; x+=10) {//creates the overlapping shapes
        for (var y=10; y < height; y+=100) {
            wallpaper(x,y)
        }
    }
    
}

function wallpaper (x,y) {
	fill (134, 185, 50)
    ellipse (x, y, 50,50)
    fill (200,200,255)
    rect (x, y, x+5, x+5, 50,50)

}