Andrej Bauer, a professor of computational mathematics at the University of Ljubljana, created “random art.” Every picture is created by a computer program that accepts a string from which an image is randomly generated. The picture’s name is the base for a pseudo-random number generator, used to create a mathematical formula, which determines the colors used in the picture. The same name will always create the same picture, though adjustments like capitalization will produce a change. If the picture name consists of two words, the first word determines the colors and focal points of the image, while the second word determines the selection and arrangements of elements present. You can make your own random art – just type in a name for the picture, press “Paint,” and watch as the image loads. At first the colors are selected, and you see a pixelated screen of color. Then, it begins loading and becoming a more complex and high quality painting. Some string images are generated more quickly than others.
http://www.random-art.org/
“Play That Funky Music” random picture, words capitalized.“play that funky music” random picture, words not capitalized.
The Random Art Program by Andrej Bauer is a website that generates an image based on the text the user inputs as the title. The test is used as the seed for a pseudo-random number generator for a mathematical formula. The formula dictates color and sequence of random choices. Although the same title always produces the same image, it is difficult to predict the outcome of the image from the name alone. If the title has two words, the first word determines color and layout, and the second word determines composition and selection of graphics.
I had a lot of fun trying out different titles. The program is case sensitive, drastically affecting the outcome of the image.
function setup() {
createCanvas(480, 480);
noStroke();
}
function draw() {
//set variables as time
var sc = second();//second of clock
var mt = minute();//minute of clock
var hr = hour();//hour of clock
var yh = hr*20;//y position of hour ellipse
//color change
background(0,0,0)
if (yh >= 400 & yh < 420){//20:00 - 21:00
background(99,30,80);
} else if (yh >= 420 & yh < 480){//21:00-00:00
background(57,25,84);
} else if (yh >= 0 & yh < 80){//00:00-04:00
background(1,8,79);
} else if (yh >= 80 & yh < 120){//04:00-06:00
background(0,173,255);
} else if (yh >= 120 & yh < 160){//06:00-08:00
background(252,255,181);
} else if (yh >= 160 & yh < 240){//08:00-12:00
background(255,255,112);
} else if (yh >= 240 & yh < 300){//12:00-15:00
background(255,221,64);
} else if (yh >= 300 & yh < 360){//15:00-18:00
background(255,121,84);
} else if (yh >= 360 & yh < 400){//18:00-20:00
background(167,60,90);
}
fill(233, 236, 239);
//text(hr + ':' + mt + ':' + sc, 30, 300);//clock for reference
push();
stroke(233, 236, 239);
strokeWeight(5);
line(50,0,50,sc*8);
line(200,0,200,mt*8);
line(400,0,400,yh);
pop();
//clock hands
ellipse(50,sc*8,60,60);//second
ellipse(200,mt*8,90,90);//minute
ellipse(400,yh,135,135);//hour
}
I enjoyed looking at the different approaches to keep time. I showed the passing of time through the movement of the circles and the changes in the background color. The left, middle, and right circles depict seconds, minutes, and hours, respectively. As the hour circle moves up and down, the background color also changes, reflecting the day’s time.
var x = [0];
var y = [0];
var w = 25;
var rc;
var gc;
var bc;
var r = [];
var g = [];
var b = [];
var theta = [0];
var dtheta = [];
var rad = [50];
var mo;
var d;
var h;
var mi;
var s;
function setup() {
createCanvas(480, 480);
translate(240, 240);
rotate(radians(270)); // midnight pointing upwards
strokeWeight();
var mo = month(); // establishing times as variables
var h = hour();
var mi = minute();
var s = second();
if (mo == 1) { // converting days to be out of 365
d = day();
} else if (mo == 2) {
d = 31 + day();
} else if (mo == 3) {
d = 59 + day();
} else if (mo == 4) {
d = 90 + day();
} else if (mo == 5) {
d = 120 + day();
} else if (mo == 6) {
d = 151 + day();
} else if (mo == 7) {
d = 181 + day();
} else if (mo == 8) {
d = 212 + day();
} else if (mo == 9) {
d = 243 + day();
} else if (mo == 10) {
d = 273 + day();
} else if (mo == 11) {
d = 304 + day();
} else if (mo == 12) {
d = 334 + day();
}
if (h < 12) { // tying hour to red fill
rc = map(h, 0, 11, 0, 255);
} else {
rc = map(h, 23, 12, 0, 255);
}
if (mi < 29) { // tying minutes to green fill
gc = map(mi, 0, 29, 0, 255);
} else {
gc = map(mi, 59, 30, 0, 255);
} if (s < 29) { // tying seconds to blue fill
bc = map(s, 0, 29, 0, 255);
} else {
bc = map(s, 59, 30, 0, 255);
}
fill(rc, gc, bc);
circle(0, 0, 480); // clock face
for(j = 0; j < 4; j += 1) {
if (j == 0) { // setting colors of markers inverse
r[j] = 90;
g[j] = 75;
b[j] = map(bc, 255, 0, 0, 255);
} else if (j == 1) {
r[j] = 50;
g[j] = map(gc, 255, 0, 0, 255);
b[j] = 0;
} else if (j == 2) {
r[j] = map(rc, 255, 0, 0, 255);
g[j] = 50;
b[j] = 50;
} else if (j == 3) {
if (d < 182) {
r[j] = map(d, 0, 364, 0, 255);
g[j] = map(d, 0, 364, 0, 255);
b[j] = map(d, 0, 364, 0, 255);
} else {
r[j] = map(d, 364, 0, 0, 255);
g[j] = map(d, 364, 0, 0, 255);
b[j] = map(d, 364, 0, 0, 255);
}
}
r.push(r[j]);
g.push(g[j]);
b.push(b[j]);
fill(r[j], g[j], b[j]);
specialcircle(rad[j], y[j], w);
rad.push(rad[j] + 50);
x.push(0);
y.push(0);
theta.push(0);
}
}
function draw() {
strokeWeight(0);
translate(240, 240);
rotate(radians(270)); // midnight pointing upwards
var mo = month(); // establishing times as variables
var h = hour();
var mi = minute();
var s = second();
if (h < 12) { // tying hour to red fill
rc = map(h, 0, 11, 0, 255);
} else {
rc = map(h, 23, 12, 0, 255);
}
if (mi < 29) { // tying minutes to green fill
gc = map(mi, 0, 29, 0, 255);
} else {
gc = map(mi, 59, 30, 0, 255);
} if (s < 29) { // tying seconds to blue fill
bc = map(s, 0, 29, 0, 255);
} else {
bc = map(s, 59, 30, 0, 255);
}
r[0] = 90; // marker fill inverse of clock face
g[0] = 75;
b[0] = map(bc, 255, 0, 0, 255);
r[1] = 50;
g[1] = map(gc, 255, 0, 0, 255);
b[1] = 0;
r[2] = map(rc, 255, 0, 0, 255);
g[2] = 50;
b[2] = 50;
if (d < 182) {
r[3] = map(d, 0, 364, 0, 255);
g[3] = map(d, 0, 364, 0, 255);
b[3] = map(d, 0, 364, 0, 255);
} else {
r[3] = map(d, 364, 0, 0, 255);
g[3] = map(d, 364, 0, 0, 255);
b[3] = map(d, 364, 0, 0, 255);
}
fill(rc, gc, bc);
circle(0, 0, 480); // clock face
for(j = 0; j < 4; j += 1) { // movement with time
theta[0] = map(s, 0, 59, 0, 355);
theta[1] = map(mi, 0, 59, 0, 355);
theta[2] = map(h, 0, 23, 0, 355);
theta[3] = map(d, 0, 364, 0, 355);
x[j] = rad[j] * cos(radians(theta[j]));
y[j] = rad[j] * sin(radians(theta[j]));
fill(r[j], g[j], b[j]);
specialcircle(x[j], y[j], w);
}
}
function specialcircle(x, y, w) {
ellipse(x, y, w, w);
}
I wanted to create a clock that was both readable and abstract. The seconds marker corresponds to blue, the minutes to green, the hours to red, and the days of the year to grayscale. The clock face fill is a combination of all of these colors, but the inverse of the marker colors.
The Computer Composer game, which is featured on the website of The Mathenæum, allows you to choose to generate a short musical composition with the assistance of a computer. For every input of notes and rhythms, you can either manually input values or choose to have the computer randomly assign them for you. It is interesting to see the limitations of randomness within music; for example, this program specifically only writes in C major or A natural minor, which eliminates 5 of the possible notes in each octave. It is also limited to one and a half octaves, as opposed to the 7 usually present on a piano. Compositionally, the creation of rhythms is always much more variable, as is the case even more clearly in this program.
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw() {
background(240, 217, 156);
fill(220);
strokeWeight(2);
ellipse(200,200,395);
fill('magenta');
stroke(150,255,100);
ellipse(200,180,50);
fill(183, 156, 240);
strokeWeight(6);
arc(200,250,200,150,0,180,CHORD);
let hr = hour();
let mn = minute();
let sc = second();
strokeWeight(4);
stroke(255,100,150);
noFill();
let end1 = map(sc,0,60,0,360);
arc(120,120,35,35,0,end1);
arc(280,120,35,35,0,end1);
stroke(150,100,255);
let end2 = map(mn,0,60,0,360);
arc(120,120,28,28,0,end2);
arc(280,120,28,28,0,end2);
stroke(150,255,100);
let end3 = map(hr % 12,0,12,0,360);
arc(120,120,20,20,0,end3);
arc(280,120,20,20,0,end3);
stroke("orange");
let s = map(second(),0,60,0,360) - 180;
line(200,180,200 + cos(s)*50, 180 + sin(s)*50);
strokeWeight(2);
text('hehe: \n' + s, 100, 190);
text('hehe: \n' + s, 300, 190);
strokeWeight(1);
stroke('red');
text('Hey_time: \n' + hr + 'hours' + mn + 'minutes', 100, 50);
}
function mouseIsPressed() {
if (s % 5 == 0){
fill('blue');
strokeWeight(6);
stroke(0);
arc(200,250,200,150,0,180,CHORD);
} else {
fill(183, 156, 240);
strokeWeight(6);
stroke(0);
arc(200,250,200,150,0,180,CHORD);
}
}
This project was quite challenging. I had to search through the internet to learn how to call the numbers using javascript. It turned out to be easy. However, contextualizing my concepts to code was again very difficult. I tried to create a cute face using functions that implement the numbers of the clock. However, as always, it turned out quite differently than my sketch. I used lines on the nose and used the print function to print the time on the top left corner of the canvas.
I must say this design happened a bit by accident. I was trying to make it so that based on my clock motions, particularly of the dot that represents the second hand, that I would have moving dots around it that would change position using noise. During this process because of how I was doing my rotations using frameCount, I ended up creating this instead. I liked it so much on the second hand I used it for my hour and minute to create the moving circles. They move very fast but sometimes it will show down and the hour and minute circles will intersect and I think it is very beautiful.
one generative design that looks like organic matter
E-Volver is a site work from 2006 that was done as work for the Research Labs of LUMC in Leiden. They named their softwares ‘image breeding units’ which works by generating artificial pixels. They use 13 different genes that together make an agent act randomly and behave differently on screen. I like how this project is meant to generate and create images that look like they could be from inside a microscope, or even look like fungus forming while still being computed randomly. What I think is really cool about this installation is that touch can randomly affect the code. These images are displayed on screens and when tapped it will randomly deactivate some of the animations. The process will begin again and again regenerating and changing after a certain number of taps. I have not looked into code that can change based on user-experience and I think that this is a project that is not just important to the software developers of it, but to the people who went to experience the site.
For this week’s looking outwards, I looked at Andrej Bauer’s work. I find it tough to interpret randomly generated art because I could not quickly identify the artist’s central message. However, I admire the visuals in Bauer’s artworks; there was a combination of attractive colors and shapes. Also, although computer algorithms randomly generate the artworks, Bauer’s pieces always have a focal point and repetitive graphic elements. This is because the algorithm that Bauer employs is pseudo-random. The artist uses a random number generator to create mathematical formulas, which determine the colors and composition. We can still consider the algorithm as random since we cannot accurately predict the outcome. Bauer declared two main variables in his algorithm to create the visuals: the first one determines the composition, and the second one decides the colors that appear. By reassigning the values in those variables, the artist can create random pictures every time. However, the same values would produce results with similar compositions or colors. Overall, I think Bauer successfully achieves randomness in his artworks with the use of randomly generated numbers and mathematical computation.
I love Japanese paper wallpapers from the 1920’s and 1930’s, so I chose them as my particular inspiration for this work. I love the inspiration from nature while keeping with a more geometric feel, consistent with traditional Japanese art. Something about them feels timeless and elegant, but not boring. In particular, these two wallpapers inspired me:
Panel wallpaper with floating circular designsPanel wallpaper alternating between ornate rectangular strips and simple floating circular designs
The sketch I drew out before approaching the code was as follows:
Simple sketch of overall layout, as well as potential circle fills
I also decided to include color in my design. I’m personally attracted to a lot of primary color schemes, but didn’t want to play too far into that for fear of my wallpaper looking too discordant from my Japanese inspiration. So, I settled on a dark red and a warm blue.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
