![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
When I think about randomness and computation, the first thing that comes into my mind is random number/word generator. While it is a very simple program, I think it inspires people to utilize that randomness to create something. For example, there is a singer who uses random word generator and uses 3-5 random words to start creating an entire song at the spot, and although this is not directly related computational projects, I think this interaction between humans and computers to create art is truly fascinating!
Category: SectionC
Looking Outwards – 06
The work that I chose is called Tree Drawing by artist Tim Knowles. The canvas was placed in close proximity with a tree branch, and 100 ink pens were attached to the tree branch.
I thought this project was particularly interesting, because movement of nature is truly random and unable to predict. In this particular work, the factors that create the artwork would be the breeze, the intensity and direction, and how the tree branches move accordingly. The final presentation of the work breaks the canvas into equal size parts. The original canvas was placed on the ground, made specifically to create a disc-like shape around an entire tree.
Project-06: Abstract Clock
For this project, I first think about the way I want to represent the current time. Then, I choose to use two circles, one controlled by current second, the other controlled by current minute, to represent two planets rotating around the red sun in the center. The lines in gradually varied colors are the hour representation, 1 am/pm to 12am/pm starting from the line in lightest color to the brightest color to the lightest color. Since this is a 12 hours clock, the background color changes based on pm/am. When it is pm, the background is in dark blue, and when it is am, the background will be in light blue.
Abstract Clock
/*Name:Camellia(Siyun) Wang;
Section: C;
Email Address: siyunw@andrew.cmu.edu;*/
var angle= -180;
var radius = 0;
var s;
var h;
var m;
function setup() {
createCanvas(480, 480);
}
function hourLine(h){
//draw the time lines of 1-12 am/pm
translate(240,240);
stroke(238,232,170);
line(-200,0,0,0);//1pm/am
stroke(240,230,140);
line(0,0,200*cos(radians(-150)),200*sin(radians(-150)));//2pm/am
stroke(255,255,0);
line(0,0,200*cos(radians(-120)),200*sin(radians(-120)));//3pm/am
stroke(255,215,0);
line(0,0,200*cos(radians(-90)),200*sin(radians(-90)));//4pm/am
stroke(218,165,32);
line(0,0,200*cos(radians(-60)),200*sin(radians(-60)));//5pm/am
stroke(255,165,0);
line(0,0,200*cos(radians(-30)),200*sin(radians(-30)));//6pm/am
stroke(255,69,0);
line(200,0,0,0);//7pm/am
stroke(240,230,140);
line(0,0,200*cos(radians(150)),200*sin(radians(150)));//8pm/am
stroke(255,255,0);
line(0,0,200*cos(radians(120)),200*sin(radians(120)));//9pm/am
stroke(255,215,0);
line(0,0,200*cos(radians(90)),200*sin(radians(90)));//10pm/am
stroke(218,165,32);
line(0,0,200*cos(radians(60)),200*sin(radians(60)));//11pm/am
stroke(255,165,0);
line(0,0,200*cos(radians(30)),200*sin(radians(30)));//12pm/am
noStroke();
}
//the rotating circle(planet) on the outside representing minute
function minuteSun(m){
stroke(255,165,0);
fill(255,69,0);
circle(150*cos(radians(angle+m*6)),150*sin(radians(angle+m*6)),10);
}
//the rotating circle(planet) on the inside representing second
function secondSun(s){
stroke(255,215,0);
fill(255,99,71);
circle(60*cos(radians(angle+s*6)),60*sin(radians(angle+s*6)),10);
}
//the quuivery line representing current hour
function Hour(h){
strokeWeight(3);
stroke(255,240,245);
line(200*cos(radians(-210+30*h+random(-2,2))),200*sin(radians(-210+30*h+random(-2,2))),0,0);
strokeWeight(1);
}
function draw() {
if(h<=12){
background(173,216,230);//when it is am
}
else{
background(0,0,139);//when it is pm
}
noFill();
strokeWeight(4);
stroke(255,160,122);
circle(240,240,120);//orbit of second planet
circle(240,240,300);//orbit of minute planet
strokeWeight(2);
noStroke();
s = second();
m = minute();
h = hour();
hourLine();
minuteSun(m);
secondSun(s);
Hour(h);
//the center sun
strokeWeight(2);
stroke(255,0,0);
fill(255,0,0);
circle(0,0,20);
noFill();
noStroke();
}
Project-06: Abstract Clock
sketchDownload
var x = [];
var y = [];
function setup() {
createCanvas(450, 380);
var hr = hour();
var min = minute();
var sec = second();
//set range for displaying sec location
for (i = 0; i <= 60; i ++) {
x[i] = random(315, 345);
y[i] = random(255, 285);
}
}
function draw() {
background(7, 55, 99);
var hr = hour();
var min = minute();
var sec = second();
var mapHr = map(hr, 0, 20, 0, width);
var mapMin = map(min, 0, 50, 0, width);
var mapSec = map(sec, 0, 50, 0, width);
//flowerpot
fill(76, 32, 1);
strokeWeight(8);
stroke(102, 42, 0);
ellipse(110, 110, 110, 110);
//succulent leaf [represents hour]
if (hr > 12) {
hr = hr % 12;
}
noStroke();
fill(114, 196, 143);
for (var i = 0; i < hr; i ++) {
push();
translate(110, 110);
rotate(radians(i * 30));
ellipse(0, -30, 20, 50);
pop();
}
//flower
fill(244, 204, 204);
ellipse(110, 97, 19, 19);
ellipse(95, 108, 19, 19);
ellipse(125, 108, 19, 19);
ellipse(101, 125, 19, 19);
ellipse(119, 125, 19, 19);
ellipse(110, 111, 21, 21);
fill(255, 229, 153);
ellipse(110, 112, 13, 13);
//coffee plate
fill(220, 200, 186);
stroke(255, 248, 244);
strokeWeight(2);
ellipse(330, 270, 100, 100);
//coffee handle [represents minute]
noStroke();
push();
translate(330, 270);
rotate(radians(min * 6));
fill(255, 248, 244);
rect(-6, -60, 12, 60, 4);
pop();
//coffee cup
strokeWeight(3);
fill(220, 200, 186);
stroke(255, 248, 244);
ellipse(330, 270, 70, 70);
//coffee
fill(78, 34, 0);
stroke(120, 52, 0);
strokeWeight(2);
ellipse(330, 270, 53, 53);
//coffee bubble [represents second]
for (i = 0; i < sec; i ++) {
fill(120, 52, 0);
ellipse(x[i], y[i], 2, 2);
}
//keyboard
noStroke();
fill(188, 188, 188);
rect(280, 30, 300, 140, 7);
fill(238, 238, 238);
rect(280, 30, 300, 10, 1);
//keyboard keys
fill(255, 255, 255);
stroke(145,145,145);
strokeWeight(1);
rect(288, 48, 19, 11, 2); //first row keys
rect(310, 48, 19, 11, 2);
rect(332, 48, 19, 11, 2);
rect(354, 48, 19, 11, 2);
rect(376, 48, 19, 11, 2);
rect(398, 48, 19, 11, 2);
rect(420, 48, 19, 11, 2);
rect(442, 48, 19, 11, 2);
rect(288, 63, 19, 17, 2); //second row keys
rect(310, 63, 19, 17, 2);
rect(332, 63, 19, 17, 2);
rect(354, 63, 19, 17, 2);
rect(376, 63, 19, 17, 2);
rect(398, 63, 19, 17, 2);
rect(420, 63, 19, 17, 2);
rect(442, 63, 19, 17, 2);
rect(288, 84, 30, 17, 2); //third row keys
rect(321, 84, 19, 17, 2);
rect(343, 84, 19, 17, 2);
rect(365, 84, 19, 17, 2);
rect(387, 84, 19, 17, 2);
rect(409, 84, 19, 17, 2);
rect(431, 84, 19, 17, 2);
rect(288, 105, 37, 17, 2); //fourth row keys
rect(328, 105, 19, 17, 2);
rect(350, 105, 19, 17, 2);
rect(372, 105, 19, 17, 2);
rect(394, 105, 19, 17, 2);
rect(416, 105, 19, 17, 2);
rect(438, 105, 19, 17, 2);
rect(288, 126, 49, 17, 2); //fifth row keys
rect(340, 126, 19, 17, 2);
rect(362, 126, 19, 17, 2);
rect(384, 126, 19, 17, 2);
rect(406, 126, 19, 17, 2);
rect(428, 126, 19, 17, 2);
rect(450, 126, 19, 17, 2);
rect(288, 147, 19, 17, 2); //sixth row keys
rect(310, 147, 19, 17, 2);
rect(332, 147, 19, 17, 2);
rect(354, 147, 19, 17, 2);
rect(376, 147, 100, 17, 2);
//iPad
fill(45, 45, 45);
stroke(255, 255, 255);
strokeWeight(10);
translate(90, 230);
rotate(PI / 5.0);
rect(0, 0, 130, 200, 3);
fill(0);
noStroke();
ellipse(65, 0, 3, 3);
}
For this project, I wanted to create a 12-hour clock illustration using a top-view desk setting. To represent the numerical value of ‘hour’, I used the leaves of the flower. To represent the ‘minute’, I used the handle of the coffee cup to direct actual minute. Last but not least, I used the bubbles of coffee to represent ‘second’. In addition, I added details of my desk of an iPad along with my MacBook keyboard. It was super fun to depict my desk surrounding into this project.
LO 06: Randomness
Geoffrey Bradway’s mesmerizing yet hallucinatory patterns are created with repeated overlays of dynamic lines using machine learning and artificial intelligence. Bradway generates powerful computational art that is beyond one’s imagination, specifically with a program called Python and a plotter called Axidraw V3 A3. When Bradway produces a collection of lines that structures using [A, B, C, D, …], the robot can merely translate this list of points into mechanical operations. For instance, a line [A, B, C] is rendered as “PENUP, GOTO(A), PENDOWN, GOTO(B), GOTO(C), PENUP.” I found his particular style of generating art really fascinating as he uses AI and robots to create beautiful, magnetic piece of art. I admire how he exploits the aspects of rapidness and accuracy in computers, and brilliant intelligence human beings have. Bradway’s artistic sensibility arises as he uses his intuition to direct his artworks the way he wants to shape it with multiple lines of codes.
Reference: https://www.chromatocosmos.com/pop-art
Looking Outwards 06: Randomness
This week I took a look at Tyler Hobbs, a generative artist who utilizes randomness in his work. His project “Waves” is a generative piece made for one of four interior murals for a single client. This piece focuses on water and its fragmented nature. Each shape is a different color, but they come together as a very cohesive piece. I suppose that he uses a program to create these different lines that curve and bend on different generated paths. I would assume that at certain coordinates within the canvas, he changes the shades of blue and uses some random function to create spots/highlights of pink. The curves seem to resemble that of a sin or cos wave. The quality of water is very apparent in this piece, and I think that the artist was able to create a very clear abstract representation of water.
Project 06: Abstract Clock
sketch
//Anthony Pan
//Section C
var d = 0; //diameter for 24 hr circles
var d1 = 0; //diameter for 24 hr circles
//var d2; //first circle diameter
//var d3; //first cirlce diameter
var c1 = []; //color array for the 24 hrs of a day
var hours = []; //hours in a day
function setup() {
createCanvas(480, 480);
for(var i = 0; i <= 23; i++) {
hours[i] = i;
if(i >= 0 & i <= 8){
c1[i] = color(0, random(256), random(256)); //random green + blue, no red first 8 hrs
}
if(i > 8 & i <= 16) {
c1[i] = color(random(256), 0 , random(256)); //random red + blue, no green between 8-16 hrs
}
if(i >16 & i<=23) {
c1[i] = color(random(256), random(256), 0); //random red + green, no blue 16-24 hrs
}
}
}
function draw() {
background(0);
draw_circle(d, d1);
//fill_circle(d2, d3);
noStroke();
fill(c1[hour()]); //fill color based on the hour
//draw a circle that grows based on the number of minutes that has passed
ellipse(240, 240, 20*hour() + minute()/3, 20*hour() + minute()/3);
//display clock
textSize(15);
strokeWeight(1);
fill(255);
text(hour() + ":" + minute() + ":" + second(), 10, 470); //display time on 24 hr clock at bottom left corner
}
function draw_circle(d, d1){
for(var i = 1; i <= 25; i++) {
noFill();
stroke(255); //create why circle stroke
ellipse(240, 240, d, d1); //create 24 concentric cirlces for 24 hrs in a day
d += 20;
d1 += 20; //d and d1 grow each cirlce's radius
}
}
//process for creating fill circle
/*
function fill_circle(d2, d3) { //fill circle based on minute
for(var i = 0; i <= hour(); i++) {
noStroke();
fill(c1[hour()]); //fill color based on the hour
ellipse(240, 240, 10*hour() + d2*minute(), 10*hour() + d3*minute());
d2 += 1/6; //rate of growth based on time /proportions
d3 += 1/6;
print(d2);
}
}
*/
/*
function fill_circle(d2, d3) { //fill circle based on minute
noStroke();
fill(c1[hour()]); //fill color based on the hour
ellipse(240, 240, 20*hour() + minute()/3, 20*hour() + minute()/3);
}
/*
function draw_circle(d, d1){
for(var i = 0; i <= 23; i++) {
noFill();
stroke(255);
ellipse(240, 240, d, d1); //create 24 concentric cirlces for 24 hrs in a day
d += 20;
d1 += 20; //d and d1 grow each cirlce's radius
}
}
*/
/*
function fill_circle(d2, d3) { //fill circle based on minute
for(var i = 0; i <= minute(); i++) {
noStroke();
fill(c1[hour()]); //fill color based on the hour
ellipse(240, 240, d2, d3);
d2 += 0.33; //rate of growth based on time /proportions
d3 += 0.33;
}
}
*/
Project Description:
This clock has 24 concentric circles representing the 24 hours in a day. A second function creates a circle that is filled with a random color based on the range of time: 0-8, 8-16, and 16-24. The circle fills the concentric circles slowly, growing based on each minute passed. There is a display of the time on a 24-hour clock at the bottom of the canvas to show the exact time as the circle fills the concentric circles very slowly.
Process/Ideation:
This was some of my process working on creating this clock.
Project 06: Abstract Clock
//Alana Wu
//ID: alanawu
//Project 06 Abstract Clock
function setup()
{
createCanvas(400, 400);
}
function draw()
{
//color of background changes by minute
fill (minute()*5, minute()*3 + 100, 255 - minute());
rect (0, 0, 400, 400);
//how many curves are drawn depends on hour
if (hour() > 0)
{
anenome (100, 240, 240, 10, 65);
}
if (hour() > 1)
{
anenome (200, 255, 230, 35, 53)
}
if (hour() > 2)
{
anenome (200, 0, 200, 17, 35);
}
if (hour() > 3)
{
anenome (255, 200, 230, 25, 5);
}
if (hour() > 4)
{
anenome (255, 100, 170, 30, 75);
}
if (hour() > 5)
{
anenome (100, 240, 240, 10, 65);
}
if (hour() > 6)
{
anenome (255, 255, 200, 15, 25);
}
if (hour() > 7)
{
anenome (200, 220, 50, 25, 40);
}
if (hour() > 8)
{
anenome (150, 100, 255, 10, 85);
}
if (hour() > 9)
{
anenome (0, 200, 255, 24, 30);
}
if (hour() > 10)
{
anenome (200, 180, 255, 8, 30);
}
if (hour() > 11)
{
anenome (255, 50, 50, 28, 92);
}
//draws 3 octopi, each of which display, hour, minute, or second
octopus(mouseX, mouseY - 25, minute());
octopus(mouseX + 30, mouseY + 25, second());
octopus(mouseX - 30, mouseY + 25, hour());
//while within the canvas, waves move down each second
waveRows(constrain (second()*25 + 50, 0, height+20));
}
//grid of waves
function waveRows (start)
{
red = 10;
green = 100;
blue = 255;
for (var h = start; h < height + 60; h +=50)
{
row3(h);
row4(h);
}
}
//horizontal row of 3 waves
function row3 (y)
{
for (var x = 85; x <= width; x += 125)
{
for (var i = 5; i > 0; i--)
{
strokeWeight (1);
fill (red, green, blue);
ellipse (x, y - 25, i*20, i*20);
red += 30;
green += 30;
}
red = 10;
green = 100;
}
}
//horizontal row of 4 waves
function row4 (y)
{
for (var x = 25; x <= width; x += 125)
{
for (var i = 5; i > 0; i--)
{
strokeWeight (1);
fill (red, green, blue);
ellipse (x, y, i*20, i*20);
red += 30;
green += 30;
}
red = 10;
green = 100;
}
}
//draws colorful wavy curve
function anenome (red, green, blue, length, tilt)
{
push();
translate (10, 350);
frameRate (6);
rotate (radians (-tilt));
for (var n = 0; n < 10; n++)
{
for (var x = 0; x < length; x += .1)
{
noStroke();
fill (red, green, blue);
circle (x*20 + random (0,15), -25*cos(x) + random (0, 15), 13-x);
}
}
pop ();
}
//draws octopus w/ a color that changes by the minute
function octopus (x, y, time)
{
noStroke();
fill (minute()*10, 255 - minute(), 250);
ellipse (x, y, 50, 40);
for (var i = 0; i < 5; i++)
{
push();
translate (x, y);
rotate (radians (i*15 - 29));
ellipse (15 - i*6.8, 22, 10, 20);
pop();
}
fill (0);
ellipse (x - 12, y + 2, 8, 8);
ellipse (x + 12, y + 2, 8, 8);
noFill();
stroke(0);
arc (x, y+7, 8, 8, 0, PI, OPEN);
strokeWeight (1);
textSize (10);
text (time, x - 14, y - 6);
}
In this project, the abstract waves change by second, the three octopi reflect the time, the number of colorful curves (I was originally thinking anemone, but it really didn’t translate and I liked these anyways) change by the hour, and the colors of the background and the octopi change as the time changes.
LO-Randomness
The project I choose for this week LO is Karlheinz Stockhauen’s KLAVIERSTÜCK XI (Piano Piece 11, 1956). The way he constructed his whole score utilizes randomness. Basically, he had 19 musical pieces spread on the floor, and he will choose one piece at a time from the floor. However, when he picked the same piece for the third time, he completed the score and stopped. By composing in this way, the song can start and end with any piece among the 19 of them, therefore creating random variations and changes. The thing interesting about this is the unpredictability of the score.
Looking Outward 06: Randomness
labios
Title: labios
Artist: Manoloide
Date: 2018
I really admire the bold color choices in this piece of artwork. In my work so far in class, it’s been difficult to use bold colors with them looking tacky. This piece has a very smooth, continuous feel to it, which makes me wonder what code they used to generate the curves and shapes. I’m particularly curious about what was used to depict the lines separating apart from the multicolored curves. The almost gradient of the colors and the lack of sharp edges or corners help create the smooth and continuous feeling.
I would guess that there’s randomness components are used to generate the locations of spheres and the curves of the multicolored lines. There might also be randomness in the spacing apart of the lines at the locations they come apart at.
The image I found was not animated, but this piece would be fascinating to look at as an animation. If the code could use non linear movement (sine or cosine curves? Spherical movement?) to have the multicolored lines warp and shift, I would imagine that it would produce quite a mesmerizing effect.
Other artwork by Manoloide:
