[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE
Professor Roger B. Dannenberg • Fall 2016 • Introduction to Computing for Creative Practice
![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2020/08/stop-banner.png)
Martin Klimas plays songs through a frequency generator with pigmented water on top, so that the sound waves cause the water to create standing waves. This way, we are able to visualize the tones themselves as they appear in the wate, three dimensionally. I admire the fact that you can actually visualize the frequencies as beautiful and dynamic forms.
http://www.foleygallery.com/exhibitions/focus/sound_works_-_martin_klimas/pressrelease
I was trying to create intricate spaces reminiscent of a stained glass window taken to the extreme.
//Arula Ratnakar
//SectionC
//aratnaka@andrew.cmu.edu
//String Art
var y = 640
yTwo=0
var xStep = 50
function setup() {
createCanvas(480,640);
background('lightblue');
}
function draw() {
for (var i = 20; i< 480; i+=20)
line(width/2,0, i, y )
for (var i = 20; i<480; i+=20)
line (width/2, 640, i, yTwo)
for (var i = 20; i <640; i+=20)
line (0, height/2, 480, i)
for (var i = 20; i<640; i+=20)
line (480, height/2, 0, i)
for (var i = 20; i<640; i+=20)
line (0, 0, 480, i)
for (var i = 20; i<640; i+=20)
line (480, 0, 0, i)
for (var i = 20; i<640; i+=20)
line (0, 640, 480, i)
for (var i = 20; i<640; i+=20)
line (480,640, 0, i)
}<!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>
I call this drawing the “Rainbow Eraser.” As you move the cursor from left to right, a black rectangle covers the rainbow. As you move back from right to left, the black rectangle is erased.
//Arula Ratnakar
//aratnaka
//Section C
//Dynamic Drawing: Rainbow Eraser
var redX = 0;
var orangeX = 100; //beginning of the orange rectangle
var yellowX = 200;
var greenX = 300;
var blueX = 400;
var purpleX = 500;
var purpleY = 600;
var colorMain = 0; //variable used to create the main white rectangle at the end
function setup() {
createCanvas(600, 600);
}
function draw() {
noStroke ();
background (0);
fill (255, colorMain, colorMain);//fills first rectangle with red (for now)
rect (redX ,0, orangeX, 600);
fill ('orange');
rect (orangeX,0, orangeX, 600);
fill ('yellow');
rect (yellowX, 0, orangeX, 600);
fill ('green');
rect (greenX, 0, orangeX, 600);
fill ('blue');
rect (blueX, 0, orangeX, 600);
fill ('purple');
rect (purpleX, 0, orangeX, 600);
if (mouseX < 600) {
redX = mouseX; //attaches mouseX to the leftmost edge of the red rectangle
}
if (mouseX > yellowX) {
orangeX = mouseX;
}
if (mouseX > greenX){
yellowX = mouseX;
}
if (mouseX > blueX){
greenX = mouseX;
}
if (mouseX > purpleX){
blueX = mouseX;
}
if (mouseX > 600) {
purpleX = mouseX;//as you drag the mouse from left to right, the black background shows through, "erasing" the rainbow
}
if (mouseX > 600){
colorMain = 255; // when you start to drag the mouse back from right to left, the white will "erase" the black box
}
}
<!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>
The artist I chose is named Josh Harker. He specializes in 3D printed artwork. I admire the intricate patterns that manifest through his works. I am not sure what algorithms he uses to create these works.
His pieces are all delicate and intricate, and show animals, skulls, and human figures.
This is a work by Alex Dragulescu. He created an algorithm that took apart computer viruses and identified their habits, grouping and growing tendencies, and patterns. Using these patterns, he created three dimensional forms. I like this work because it makes a computer virus seem like an actual mutated cell from a human virus. The floral, spiraling form of the trojan virus pictured below has both beautiful and grotesque aspects to it, for a beautiful piece of code that is used for a grotesque purpose.
I was trying to make the face resemble the style of characters from PowerPuff Girls and FairlyOdd Parents I really like the changing eye colors, which I did by replacing the g value in (r, g, b) with the variable eyeColor.
//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Generative Faces
var eyeSize = 20;
var faceWidth = 120;
var faceHeight = 150;
var pupil = 20//I said pupil but I meant iris
var mouth = 20
var hairWidth = 200
var hairHeight = 150
eyeColor = 7
function setup() {
createCanvas(640, 480);
}
function draw() {
background(170, 204, 235);
noStroke ()
ellipse (width /2, ((height/2)-20), hairWidth, hairHeight)//adds hair to the face
fill (184, 151, 123)// colors the face
ellipse(width / 2, height / 2, faceWidth, faceHeight);
fill (0)
ellipse (width/2, ((height/2)-50), 70, 70)
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill (255)
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
fill (116,eyeColor, 183)
ellipse (eyeRX, height /2, pupil, pupil)//adds right iris
ellipse (eyeLX, height/2, pupil, pupil)//adds left iris
fill(0)
ellipse (eyeLX, height/2, pupil/2, pupil/2)//adds left pupil
ellipse (eyeRX, height/2, pupil/2, pupil/2)//adds right pupil
ellipse (width/2, 280, 30, mouth);//adds a mouth
}
function mousePressed() {
faceWidth = random(100, 200);
faceHeight = random(100, 160);
eyeSize = random(20, 30);
pupil = random (15, 20)
mouth = random (1, 40)
hairWidth = random (200, 350)
eyeColor= random (1, 255)// changes the eyecolor
} function setup() {
createCanvas(300, 300);
background(255);
}
function draw() {
fill (30, 20, 15);
ellipse (90, 180, 150, 200);
fill (226, 185, 143);
ellipse (100, 150, 90, 100);
fill (30, 20, 15);
ellipse (65, 120, 40, 53);
fill (255);
ellipse (117, 150, 20, 15);
fill (255);
ellipse (85, 150, 20, 15);
fill (0);
ellipse (119, 150, 10, 10);
fill (0);
ellipse (87, 150, 10, 10);
noStroke ();
fill (226, 185, 143);
quad (90, 190, 110, 190, 110, 250, 90, 250);
fill (181, 82, 57);
quad (60, 215, 130, 230, 120, 283, 60, 283);
ellipse (100, 180, 20, 10);
fill (30, 20, 15);
rect (73, 135, 20, 5);
rect (107, 135, 20, 5);
}
Nintendo’s Legend of Zelda: Skyward Sword, for the Wii U, is a video game that I find especially inspiring. It includes majestic landscapes, floating castles, monstrous bosses, creepy monsters, adorable creatures, giant flying birds, sword fights, gorgeous temples and castles, and an incredible story. Nine people led the design of the game, organizing themselves into teams of writers, composers, designers, producers, and a director (Hidemaro Fujibayashi). The entirety of the game’s development process took five years. The main drive behind creating Skyward Sword was the creators’ feeling that they had not fully fleshed out the world of Legend of Zelda: Twilight Princess, and the need to create a Zelda game that was as well received and cherished as Ocarina of Time. Skyward Sword makes up for the flaws of Twilight Princess, and recreates the intrigue and beauty of Ocarina of Time. The creators of Legend of Zelda could work with virtual reality in the future and have the players fully immerse themselves into the beautiful worlds and landscapes and characters. They are currently in the process of developing a Zelda game for the PlayStation 4. Skyward Sword inspired me to pursue a minor in Game Design, because it showed me the incredible results (an entirely new universe full of crazy fantasy places and characters!) of incredible imagination.