aratnaka@andrew.cmu.edu – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

Turtle Composition

aratnaka@andrew.cmu.edu — Sun, 13 Nov 2016 04:01:11 +0000

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



  
    
    p5.js vers 0.5.2, Edit index.html to Change This Title

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

aratnaka@andrew.cmu.edu — Sun, 13 Nov 2016 03:55:18 +0000

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

aratnaka@andrew.cmu.edu — Sat, 29 Oct 2016 01:57:01 +0000

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



  
    
    p5.js vers 0.5.2, Edit index.html to Change This Title

Looking Outwards-09

aratnaka@andrew.cmu.edu — Sat, 29 Oct 2016 00:26:10 +0000

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.

The game was developed by Bioware and published by EA games.
https://courses.ideate.cmu.edu/15-104/f2016/2016/09/01/sadiejohnson-looking-outwards-01/

Looking Outwards-08

aratnaka@andrew.cmu.edu — Sun, 23 Oct 2016 03:14:54 +0000

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

aratnaka@andrew.cmu.edu — Sat, 15 Oct 2016 22:50:24 +0000

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

aratnaka@andrew.cmu.edu — Sat, 08 Oct 2016 03:13:43 +0000

index



  
    
    p5.js vers 0.5.2, Edit index.html to Change This Title

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

aratnaka@andrew.cmu.edu — Sat, 08 Oct 2016 01:40:42 +0000

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).

Wallpaper

aratnaka@andrew.cmu.edu — Mon, 03 Oct 2016 03:59:47 +0000

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

index sketch



  
    
    p5.js vers 0.5.2, Edit index.html to Change This Title

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



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

    for (var x=10; x



Looking Outwards Week 5
aratnaka@andrew.cmu.edu — Mon, 03 Oct 2016 03:42:50 +0000

The architect Zaha Hadid’s renderings of her buildings are a beautiful form of 3D graphics. Her buildings are inspired by dictator states and show dramatic curved and organic forms. I admire her work because it shows architecture as an art form rather than serving  a simply functional purpose.