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

Sarita Chen – Project 7 – Curves

var nPoints = 100; //Points in the ellipses

function setup() {
    createCanvas(500, 500);
    frameRate(10);
    
}

function draw() {

	background(0);
	push();
	translate(width/2,height/2);
	rotate(radians(mouseX));
	myCircle();
	pop();
}	

function myCircle() {

	var a = 300; // radius
	var b = a/2; // half of radius 1
	var c = 125; // radius 2
	var d = c/2; // half of radius 2
	var h = constrain(mouseX /10,0,a); // distance
	var w = constrain(mouseY/10,0,b);
	var x; //Hypotrochoid
	var y; //Hypotrochoid
	var u; // Hypotrochoid 2
	var v; //Hypotrochoid 2
	

	beginShape();
	

	for (var i = 0; i < nPoints; i++) {  
		var theta = map(i,0,nPoints,0, TWO_PI); // Makes the outline of the shape small circles
		ellipse(x, y, 1,1);
		x = (a - b ) * cos(theta) + h * cos( (a - b)/ b * theta); // Formula for hypotrochoid
		y = (a - b) * sin(theta) - h * sin( (a - b)/ b * theta); // Formula for hypotrochoid

		fill(255);
		noStroke();
		ellipse(u, v, 2,2);
		u = (c - d ) * cos(theta) + w * cos( (c - d)/ d * theta); // Formula for hypotrochoid
		v = (c - d) * sin(theta) - w * sin( (c - d)/ d * theta); // Formula for hypotrochoid
		
		
	}
	endShape(CLOSE);	

}

I had some trouble figuring out just exactly what I was supposed to do with the equations at first. I really hate math, so just looking at it in the beginning was throwing me off. It’s based very, very loosely off of this video (the white on black, not the actual mathematical stuff) and this image.

screen-shot-2016-10-14-at-7-02-25-pm

It started off pink and with only one ring, but I decided to change all those aspects.

Sarita Chen – Looking Outwards 7

My post this week for Information Visualization is about an experimental musical landscape for mobile devices called Carolina. The application was made in collaboration with the musical artist Kimbra (of whom I am a big fan, which is a large part of why I chose this particular project). The app was made alongside her album release The Golden Echo. The application, which is for the Android, uses guitars, base, mellotrons and vocals for the sound aspect.

The app is actually more than just an app. It was developed as a packaged website, as the creator, Jono Brandel, developed and debugged the app with Google Chrome.

The app is divided into two parts:

The introduction, which functions as a starting point to introduce users into the app and as a loading screen while the song loads.
The visualization, which is the actual graphical aspect.

What I admire about the project is first that I think the application itself is a pretty cool idea. I’ve always been a fan of very spacey world like designs, and that is exactly what this app aims to create. I also think that the graphics fit Kimbra’s music pretty well, and the fact that this is an app that one can easily download to their Android and enjoy is nice.

The visualization is created using three.js, which is similar to p5.js in that they are both Javascript libraries used for animation and creative purposes. The visuals are triggered by different parts of the music.

(Pictured above are examples of the app. The visuals are supposed to replicate the music taking you on a journey.)

I think the creators artistic sense is clearly shown in these works, as his other works seem to be a lot of interactive, visualized projects.

You can download the app from the Google play store here.

Here is the coding and a more technical explanation of the code and creation process.

Sarita Chen – Project 06 – Abstract Clock

sketch

var secR; // Initialise sec colour var
var secG;
var secB;
var minR; // Initialise min colour var
var minG;
var minB;
var hourR; // Initialise hour colour var
var hourG;
var hourB;
var h; // Initialise hour var
var m; // Initialise min var
var s; // Initialise sec var

function setup() { 
    createCanvas(500, 500);
    background(220);
    
}

function draw() { 
	background(255);

	secR = map(s,0,59,90,255); //Maps colour onto the seconds
	secG = map(s,0,59,90,180);
	secB = map(s,0,59,90,180);
	minR = map(m,0,59,90,177);  //Maps colour onto the minutes
	minG = map(m,0,59,90,91);
	minB = map(m,0,59,90,204);
	hourR = map(h,0,23,90,85); //Maps colour onto the hours
	hourG = map(h,0,23,90,134);
	hourB = map(h,0,23,90,186);

	h = hour(); // Hour variable
	m = minute(); // Minute variable
	s = second (); // Second variable

	text("Current Time:" +h,75, 50);
    text(":"+m,161,50);
    text(":"+s,178,50);


	noStroke();
	push();
	translate(width/5,height/2);
	fill(secR,secG,secB);
	ellipse(0,0,150,150);
	fill(minR,minG,minB);
	ellipse(150,0,150,150);
	fill(hourR,hour);
	ellipse(300,0,150,150);
	pop();



 
	
}

My inspiration for this abstract clock came from this website called What Colour Is It? that changes colour with the time. The website doesn’t split the time into hours/minutes/seconds, and it also displays the 6 value hex code for the colour. My only issue is that you can’t really see the minutes and hours change colour as you can the seconds.

Sarita Chen – Looking Outwards – 06

For this week’s Looking Outwards post, I chose one of the works from this blog: Rectangle World run by Dan Gries. The blog features many different types of randomly generated art pieces, but the one that stood out to me the most was the Colourful Cellular Automaton, published in June, 2012. The automaton generates random colour “tapestries” when you click the canvas. Each individual rectangle generates a colour and the colours eventually shift to match each other and form a certain range of colours. The automaton can be tested here. For the sake of the post, I tried out the automaton a couple of times and posted the images I generated below.

screen-shot-2016-10-05-at-10-52-18-am

What I admire about the work is how simple yet aesthetically pleasing the end product ends up being. As an artist myself I also think this project could be useful as a colour palette generator, and I tend to be really fond of those (for example, the twitter “manygradients” generates a colour wheel every half hour). I think the artist’s sensibilities come out in the work through the way that the project was conceived. According to the blog post, Dan Gries claimed “While thinking and reading about flocking algorithms and cellular automata, [he] had the idea of mixing the two algorithms together.” Personally I find those random bouts of inspiration to just create something to be the most interesting.

My understanding of randomness in algorithms is mostly limited to what I’ve been learning in p5.js. How the code works is that each square tries to mimic the colour of the neighbouring squares, but not exactly. The squares also try to match the direction of change of the colours of the neighbouring squares. More information about how the algorithm work can be found on the blog post.

More of Dan’s works can be found on his flickr.

His website can be found here.

Sarita Chen – Project 05 – Wallpaper

sketch

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project: Wallpaper
function setup() {
    createCanvas(600, 600);
    noLoop();
}



function draw() {

	
	background(90,230,255); // Blue.
	
	for(var x = 0; x < width + 4; x +=60){  
		for(var y = 0; y < height; y += 80){
			luigi(x,y); // draws the function "luigi"
		}
	}	
}
	// luigi design
	function luigi(x,y) {   

		noStroke();
		var hairC = ('YellowGreen');
		var skintone = ('Orange');
		var clothes = (255);
		var buttons = ('Gold');
		var pixel = 2.5;
		


		// Note: the side comments refer to the number of squares each line
		// produces.

			// Line 1
				
			fill(clothes);
			rect(x+10*pixel,y,pixel*5,pixel); //
			

			// Line 2
			
			fill(clothes);
			rect(x+9*pixel,y+pixel,pixel*9,pixel); // 9 white
			

			//Line 3
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*2,pixel*3,pixel); // 3 green 
			

			
			fill(skintone); 
			rect(x+12*pixel,y+pixel*2,pixel*2,pixel); //2 orange
	
			fill(hairC);
			rect(x+14*pixel,y+pixel*2,pixel,pixel); // 2 green
			
			fill(skintone);
			rect(x+15*pixel,y+pixel*2,pixel,pixel); // 1 orange
			

			//Line 4
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*3,pixel,pixel);  // 1 green

			
			fill(skintone);
			rect(x+9*pixel,y+pixel*3,pixel,pixel); // 1 orange

			
			fill(hairC);
			rect(x+10*pixel,y+pixel*3,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+11*pixel,y+pixel*3,pixel*3,pixel); // 3 orange
				

			
			fill(hairC);
			rect(x+14*pixel,y+pixel*3,pixel,pixel); // 1 green
		

			fill(skintone);
			rect(x+15*pixel,y+pixel*3,pixel*3,pixel); // 3 orange
				

			//Line 5

			fill(hairC);
			rect(x+8*pixel,y+pixel*4,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+9*pixel,y+pixel*4,pixel,pixel); // 1 orange

			
			fill(hairC);
			rect(x+10*pixel,y+pixel*4,pixel*2,pixel); // 2 green

			
			fill(skintone);
			rect(x+12*pixel,y+pixel*4,pixel*3,pixel); // 3 orange
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*4,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+16*pixel,y+pixel*4,pixel*3,pixel); //3 orange

			
			// Line 6

			fill(hairC);
			rect(x+8*pixel,y+pixel*5,pixel*2,pixel);  // 2 green

			
			fill(skintone);
			rect(x+10*pixel,y+pixel*5,pixel*4,pixel); // 4 orange
			
			fill(hairC);
			rect(x+14*pixel,y+pixel*5,pixel*4,pixel);  // 4 green

		
			fill(skintone);
			rect(x+10*pixel,y+pixel*6,pixel*7,pixel);  // 7 orange
			
			//Line 8
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*7,pixel*2,pixel); // 2 green
			
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*7,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+12*pixel,y+pixel*7,pixel*3,pixel); // 3 green
			
			//Line 9
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*8,pixel*3,pixel); // 3 green
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*8,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+12*pixel,y+pixel*8,pixel*2,pixel); // 2 green
			
			fill(clothes);
			rect(x+14*pixel,y+pixel*8,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*8,pixel*3,pixel); // 3 green
			
			//Line 10
			
			fill(hairC);
			rect(x+7*pixel,y+pixel*9,pixel*4,pixel); // 4 green
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*9,pixel*4,pixel); // 4 white
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*9,pixel*4,pixel); // 4 green
			

			// Line 11
			
			fill(skintone);
			rect(x+7*pixel,y+pixel*10,pixel*2,pixel); // 2 orange
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*10,pixel,pixel); // 1 green
			
			fill(clothes);
			rect(x+10*pixel,y+pixel*10,pixel,pixel); // 1 white
			
			fill(buttons);
			rect(x+11*pixel,y+pixel*10,pixel,pixel); // 1 yellow
			
			fill(clothes);
			rect(x+12*pixel,y+pixel*10,pixel*2,pixel); // 2 white
			
			fill(buttons);
			rect(x+14*pixel,y+pixel*10,pixel,pixel); // 1 yellow
			
			fill(clothes);
			rect(x+15*pixel,y+pixel*10,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+16*pixel,y+pixel*10,pixel,pixel); // 1 green
		
			fill(skintone);
			rect(x+17*pixel,y+pixel*10,pixel*2,pixel); // 2 orange
			

			//Line 12
		
			fill(skintone);
			rect(x+7*pixel,y+pixel*11,pixel*3,pixel); // 3 orange
		
			fill(clothes);
			rect(x+10*pixel,y+pixel*11,pixel*6,pixel); // 6 white
	
			fill(skintone);
			rect(x+16*pixel,y+pixel*11,pixel*3,pixel); // 3 orange
		
			// Line 13
			
			fill(skintone);
			rect(x+7*pixel,y+pixel*12,pixel*2,pixel); // 2 orange
			

				
			fill(clothes);
			rect(x+9*pixel,y+pixel*12,pixel*8,pixel); // 8 white
			
			
			fill(skintone);
			rect(x+17*pixel,y+pixel*12,pixel*2,pixel); // 2 orange
		
			// Line 14
			
			fill(clothes);
			rect(x+9*pixel,y+pixel*13,pixel*3,pixel); // 3 white
			
			fill(clothes);
			rect(x+14*pixel,y+pixel*13,pixel*3,pixel); // 3 white
			

			// Line 15
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*14,pixel*3,pixel); // 3 green
		
			fill(hairC);
			rect(x+15*pixel,y+pixel*14,pixel*3,pixel); // 3 green
			
			// Line 16
			
			fill(hairC);
			rect(x+7*pixel,y+pixel*15,pixel*4,pixel); // 4 green
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*15,pixel*4,pixel); // 4 green
			



			}

I wanted to make my wallpaper 8bit style, so I decided to recreate an 8bit version of Luigi from the older Super Mario games. I used an image I found here, which made it convenient as I could easily count the number of “pixels” used to create the image. Actually making the Luigi function took up the most time, because I had initially started off by having a for loop generate the squares for each line.That actually made it harder for me to put the function in a for loop to generate the wallpaper, because it was too many variables to handle so I had to go back and reedit everything… Anyways, I’m happy with the final result! I tried to make the colours as vibrant as possible, since Super Mario is a very bright, cheerful game.

Sarita Chen – Looking Outwards – 05

This week I chose the Doodle3D Transform project for my Looking Outwards report. Doodle3D Transform is a 3D design app that converts 2D images to 3D images for 3d printing. The application works for most tablets and browsers.

(Pictured above are gifs showing in a few quick steps how the application functions. )

What I admire about this project is how user friendly the entire application is, making it easy for people who have a mostly basic understanding of 3d printing and 3d graphics to create something useful (like a vase for example, as pictured above). This is also the reason for why the creators made this project in the first place. They wanted to make 3d design easily accessible for people who may not necessarily be experts in that field.

Here is a photo of the team that created the project:

Doodle3D is a tech company located in the Netherlands. The team working on this project consists of Rick Companje, the founder, and four collaborators: Nick van Dijk, Casper, Peter Uithoven and Jeroen Somers.

Here is a link to the project website.

How the program works is that you can draw anything, whether it’s tracing, freehand etc in 2D. The app then renders your design into a 3D version using CAD (computer aided design) software, which you can freely play around with as the two images are side by side, as shown below.

Here is a video for the application.

Sarita Chen – Project 04 – String Art

sketch

function setup() {
    createCanvas(640, 480);
   
}

function draw() {
	 background(0); // black.

	 var sizeV = 20; //Variable for the increment.

	 
	
	 strokeWeight(1.5);
	 stroke(180,180,255); //Blue
	 for(var b = 0; b < 50; b++)
	 	line(b*sizeV,height,20,b); // Blue lines 


	 stroke(100,255,255); // Teal
	 for(var r = 5; r < 20; r++)
	 	line(r*sizeV,1,640,r*20); // Teal lines 

	 stroke(200,140,255); //Pink
	  for(var g = 0; g < 40; g++)
	 	line(g*sizeV,480,1,g*10); // Pink lines 

	 stroke(255,180,180); //Purple
	  for(var y = 0; y < 50; y+=2)
	 	line(y*sizeV,height,480,y*2); // Purple lines 

	  stroke(255,180,255); //Lavender
	  for(var y = 0; y < 50; y+=2)
	 	line(y*sizeV,height,300,-y*2); // Lavender lines

  	 stroke(150,230,255);
	 fill(150,230,255);
	 ellipse(width/2,height/2,100,100);

	 // Just for added effect.
	 if (mouseIsPressed) {
	 	ellipse(random(50,150),100,20,20);
	 	ellipse(random(380,400),400,50,50);
	 	ellipse(random(200,300),300,20,20);
	 	ellipse(random(100,200),400,50,50);
	 	ellipse(random(50,100),200,50,50);
	 	ellipse(random(400,460),100,20,20);
	 	ellipse(random(50,150),20,20,20);
	 }
  
}

(Please click.)

At first I wanted to have the strings coming out from the four corners of the canvas, but to me it was kind of boring so I just randomly placed them instead. I had some difficulty figuring out how to get the strings to curve in the beginning. My goal was to make the circle look like it was in a room of string.

Sarita Chen – Looking Outwards – 4

Max Cooper is a musician of the techno and electronic genre. One of his projects includes an immersive 4D musical experience. It’s kind of like virtual reality, except the focus is more on sound than visuals.

“The 4D system, and a lot of the work I do with my music in terms of spatiality and trying to create immersive spaces and structures within them, has to do with psycho-acoustics and the power of sound to create our perception of the reality we’re in,” he said. “The idea is to create an alternative reality that can be very beautiful, relaxing, jarring, and even uncomfortable, but still an interesting experience that can communicate a new idea.” – Cooper, about the project.

For the 4D effect, Cooper used a software that enabled him to design and build a 3-dimensional representation of the music. The sounds can take on any shape or form inside this 3-dimensional space. The software also calculates the effect of the speakers to create variance in the sounds.

What I admire about the project is the level of innovation it has to create an entirely original musical experience. It seems that he spent a lot of time and effort thinking about the shape of the sounds. The sound system used is known as 4D Sound, and was created by a group stationed in Amsterdam.

Sarita Chen – Project 03 – Dynamic Drawing

sketch

function setup() {
    createCanvas(640, 480);
   

}

function draw() {
	// Changes the colours from Red to Blue when the mouse is moved horizontally.
	 colR= map(mouseX,220,width,220,180);
	 colG= map(mouseX,180,width,100,180);
	 colB= map(mouseX,190,width,100,255);
	 background(colR,colG,colB);
	 noStroke();
	// Declares variables for height and width of shapes.
	 varOpp = width - mouseX;
	 var cH = 70;
	 var cW = 70;

	// Changes the size when the mouse is moved horizontally.
	 var cH = map(mouseX,0,width,250,0);
	 fill(255,255,255);
	 ellipse(width/2,height/4,cW,cH);

	 fill(180,170,255);
	 rect(mouseX+200,height/3,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/2,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/2,cW,cH);

	  fill(180,170,255);
	  rect(varOpp-200,height/2,cW,cH);

	 fill(255,170,255);
	 rect(mouseX,height/4,cW,cH);

	 fill(255,170,255);
	 rect(varOpp,height/1.5,cW,cH);
}

I took inspiration from the first deliverables assignment, so I’d say what I came up with is pretty simple. What I want to work on for next time is adding more depth to the movement of graphics, since this is pretty 2-dimensional.

Sarita Chen – Looking Outwards – 03

(Above are examples of the Raven Kwok’s work.)

Taken from his tumblr bio: ” Raven Kwok is a visual artist / animator / programmer. His artistic and research interest mainly focuses on exploring generative visual aesthetic brought by customized algorithms and processes created through computer programming.”

One project of his that I admired was a music video called Skyline that he created. The music video was created with a coding software known as Processing. Kwok talks about how he uses a geometric model known as “Voronoi Tessellation”, used in René Descartes theory of planetary motion. What I admire about the work, personally, is how trippy yet fluid the movements of the works are. In the Skyline music video, the audio of the song influences the movements, which creates an original outcome for the work.