var time = 0;
var pupil = 400;
function setup() {
createCanvas(600, 600);
background(182, 217, 214);
}
function draw() {
fill(200, 200, 0);
ellipse(300, 300, 600, 400);
fill(0, 0, 0);
if(time <= 720) pupil -= 0.4;
else pupil += 0.4;
ellipse(300, 300, pupil, 400);
time++;
time%=1440;
}
This clock is inspired by this image, which claims that a cat’s eyes will change during the day. Although not all that practical, I think it’s a super cool idea.
This map of the US was created by Jasper Johns, and my grandmother has a version of it on her wall. Since I see it whenever I come to visit, I immediately thought of it for this week’s LO assignment. The randomness of the work comes from how the states’ borders are not clearly defined and paint is all over the place. Johns found a way to use 3 different colors together by blending them but also contrasting them. I admire the chaos of this piece, and wonder if there is any underlying message about the US. Although not particularly useful as a map, this is an incredibly cool painting.
This work is inspired by “A Million Times”, though it tells time in a very different way. I created an array of small, one-arm clocks to tell seconds, minutes, and hours, based on their columns and rows. This effectively creates a vector field that tells time with its coefficients. While each time in the day looks distinct and often disjointed, the array becomes spontaneously synchronized every now and again and blurs the viewer’s ability to tell the time. I understand if you don’t want to put this on your wrist but I hope you enjoy it on your computer screen for a little bit 🙂
Randomness within art and all other aspects of life is extremely interesting. There are different types of random numbers and each type can be used in different cases. One person who’s interested me in expressing randomness is Rami Hammour. Rami Hammour is an architectural designer who created a digital piece of artwork centered toward the idea of randomness. I’m not sure of the algorithms used to create the piece although the artwork itself is not random. Like pseudo-random numbers his work has limitations and expectations that don’t make his work truly ‘random’. But the overall idea of the work is to not directly express randomness but to describe the complex relationship between human experience, “digital media, authorship, and even conceptions of reality and the divine”. The artist’s sensibilities lie in the parameters behind the artwork and the understanding that randomness is prevalent everywhere, even in nature, yet it can be completely elusive in a digital system, in which they’re designed with all the forces and processes are known and quantifiable.
//cbtruong;
//Section B;
var secondVal;
var minuteVal;
var hourVal;
var monthVal;
var sixtyCircleX = [];
var sixtyCircleY = [];
var sixtyCircleX2 = [];
var sixtyCircleY2 = [];
var hourAngle = [];
function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
secondVal = second();
minuteVal = minute();
hourVal = hour();
monthVal = month();
for (var i = 0; i < 8; i++){
hourAngle.push(i*45);
}
for (var y = 10; y < 120; y += 20){
for (var x = 10; x < 200; x += 20){
sixtyCircleX.push(x);
sixtyCircleY.push(y);
}
}
for (var y2 = 370; y2 < 480; y2 += 20){
for (var x2 = 290; x2 < 480; x2 += 20){
sixtyCircleX2.push(x2);
sixtyCircleY2.push(y2);
}
}
}
function draw() {
background(205, 202, 240);
timeOfDay(hourVal);
for (var i = 0; i < 8; i++){
noStroke();
fill(230, 100, 120);
if (i > hourVal % 8){
fill(27, 30, 35);
}
hourSquare(hourAngle[i]);
hourAngle[i] += 0.1;
}
for (var j = 0; j < 60; j++){
fill(100, 230, 120);
if (j > secondVal){
fill(240);
}
sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);
}
for (var l = 0; l < 60; l++){
fill(120, 120, 230);
if (l > minuteVal){
fill(240);
}
sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);
}
for (var m = 180; m <= 480; m += 25){
fill(240);
if (m >= monthVal*22.5){
fill(45, 67, 89);
}
push();
translate(-60, 20);
rotate(radians(330));
monthTri(20, m);
monthTri(260, m);
pop();
}
}
function hourSquare(hourAngle){
push();
translate(230, 230);
square(80*cos(radians(hourAngle)), 80*sin(radians(hourAngle)), 20);
pop();
}
function timeOfDay(hourValue){
if (hourVal > 15){
fill(227, 111, 30);
}
else if (hourVal < 15 & hourVal > 7){
fill(252, 209, 77);
}
else {
fill(27, 30, 35);
}
circle(240, 240, 100);
}
function sixtyCircleTime(x, y){
circle(x, y, 20);
}
function monthTri (x, y){
triangle(x, y, x + 20, y, x + 10, y + 20);
}
I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.
For this Week’s LO, I will talk about Wolfgang Amadeus Mozart’s (attributed but up for debate) Musical Dice Game (1792) – also known as Musikalisches Wurfelspiel.
Seeing how we were to find Randomness, I was initially at a loss. Until I happened onto this piece that was allegedly from Mozart himself.
Its randomness lies in the fact that a die (or two) is supposed to be thrown to get a value from 2 to 12 but minus 1 – so a range of 1-11. With this number, a person will consult a chart that has 8 columns and 11 rows. The “random” number will give the person the measure of music from the row of the column and then they will move onto the next column and repeat the process. They will do this for all 8 columns and the second set of 8 columns and 11 rows each in the second chart. The end product is a 16-Measure Piece of Music.
This is where the computation comes in – it is just like the nested for loops we have been working with. Furthermore, the available measures are like the arrays.
Overall, I like Classical Music and Mozart is one of my favorites. And I find it cool that he supposedly made something like this.
This project was very difficult in the aspect of just coming up with ideas how to make it look like a clock without it actually being a clock. My outer green square represents seconds: each side has 15 seconds such as it is easy to count time by quoters. Blue square stands for minutes with same description for how it works. The pink square represents hours. Two triangles in top left and bottom right corners represents 12 am and 12 pm or 00:00 and 12:00.
I’ve used primary colors of CMU such as green, blue, red, yellow and black to make it a Tartan Clock.
Randomness. Such a broad idea in this world. Whenever I try to randomly pick numbers while filling up the lottery ticket, I close my eyes and move my hand in the air to pick a number thus trying to imitate the effect of randomness. Yet, despite the fact that I don’t see the numbers, I still feel the need to stop at some specific point. So, … maybe it’s not random after all? Just a so-called “gut feeling” or “woman intuition”? For this Looking Outwards assignment I chose a digital art by Martin Krzywinski called “Faces of Randomness”. This project inspires me because it shows that even though all generated drawings look very similar, they’re all unique with their own random variables in algorithms. It’s very similar to humans – we all buy the same clothes, yet our personalities are all unique. In his art, Martin Krzywinski used “sixteen random numbers with 1000 digits each represented by their digit transition paths and frequencies.” I assume Martin wrote an algorithm that generates 16 random numbers with 1000 digits each which draws random lines from one point to another and the color depends on the location of the line at the random points. Very similar to our previous project of “String Art”. The creator’s artistic sensibilities manifest in the final form by creating a beautiful string art effect using only 16 random digits that show color transitions based on the random paths that the lines were drawn in. I chose this project because it is very similar to what we are doing in class. In this sense, I feel some kind of connection and realization that anything is possible. Even though this idea of computer scince for design and creative usage was new to me, I was able to learn so much in such short amount of time to even understand the methods behind some computational art. And I think it’s beautiful.
//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project
var cloudVar = []; //array for cloud x coordinate
var rainVar = []; //array for cloud y coordinate
var hourTime; //variable to store hour
var minuteTime; //vairable to store minute
function setup() {
createCanvas(600, 600);
}
function draw(){
background(155);
hourTime = hour();
minuteTime = minute();
for(var i = 0; i <= 23; i++){ //sets cloud x position by mapping the current second of the day to an x value on the canvas
cloudVar[i] = map((second()+(60*minute())+(60*60*(hour()-i))),0,(24-i)*60*60,-105,width);
}
for(i = 0; i <= 59; i++){ //sets the rain y position my mapping the current second of the hour to a y value on the canvas
rainVar[i] = map((second()+60*(minute()-i)),0,(60-i)*60,-12,height+10)
}
for(var counter = 0; counter <= 23; counter ++) { //for loop that checks how many hours into the day it is and draws that many clouds with the stored x values and each hour that has passed
if(hourTime >= counter){
drawCloud(cloudVar[counter],counter);
}
}
for(var counter = 0; counter <= 59; counter ++) { //for loop that checks how many minutes into the hour it is and draws that many rain drops with the stored y values and each minute that has passed
if(minuteTime >= counter){
drawRain(rainVar[counter],counter);
}
}
}
function drawCloud(x,counter) { //function to draw clouds
var y; //long amount of if statements to set the y coordinate
if(counter == 0) {
y = 50
}
else if(counter == 1) {
y = 150
}
else if(counter == 2) {
y = 250
}
else if(counter == 3) {
y = 350
}
else if(counter == 4) {
y = 450
}
else if(counter == 5) {
y = 550
}
else if(counter == 6) {
y = 50
}
else if(counter == 7) {
y = 150
}
else if(counter == 8) {
y = 250
}
else if(counter == 9) {
y = 350
}
else if(counter == 10) {
y = 450
}
else if(counter == 11) {
y = 550
}
else if(counter == 12) {
y = 50
}
else if(counter == 13) {
y = 150
}
else if(counter == 14) {
y = 250
}
else if(counter == 15) {
y = 350
}
else if(counter == 16) {
y = 450
}
else if(counter == 17) {
y = 550
}
else if(counter == 18) {
y = 50
}
else if(counter == 19) {
y = 150
}
else if(counter == 20) {
y = 250
}
else if(counter == 21) {
y = 350
}
else if(counter == 22) {
y = 450
}
else if(counter == 23) {
y = 550
}
fill(255); //series of ellipses that draws the cloud
ellipse(x,y,60,50);
ellipse(x+30,y-10,60,50);
ellipse(x+80,y,60,50);
ellipse(x+20,y+20,60,50);
ellipse(x+60,y+15,60,50);
push();
noStroke();
ellipse(x+40,y+10,100,55)
pop();
}
function drawRain(y,counter) { //function to draw rain
var x; //insanely long amount of if statements, like seriously there has to be an easier way to do this, to have the raindrops fall in a "random" pattern
if(counter == 0) {
x = 5;
}
if(counter == 39) {
x = 15;
}
if(counter == 20) {
x = 25;
}if(counter == 2) {
x = 35;
}
if(counter == 48) {
x = 45;
}if(counter == 38) {
x = 55;
}
if(counter == 59){
x = 65;
}
if(counter == 23) {
x = 75;
}
if(counter == 19) {
x = 85;
}
if(counter == 21) {
x = 95;
}
if(counter == 47) {
x = 105;
}
if(counter == 24) {
x = 115;
}
if(counter == 1) {
x = 125;
}
if(counter == 27) {
x = 135;
}
if(counter == 25) {
x = 145;
}
if(counter == 37) {
x = 155;
}
if(counter == 49) {
x = 165;
}
if(counter == 3) {
x = 175;
}
if(counter == 28) {
x = 185;
}
if(counter == 46) {
x = 195;
}
if(counter == 58) {
x = 205;
}
if(counter == 57) {
x = 215;
}
if(counter == 50) {
x = 225;
}
if(counter == 36) {
x = 235;
}
if(counter == 45) {
x = 245;
}
if(counter == 9) {
x = 255;
}
if(counter == 35) {
x = 265;
}
if(counter == 5) {
x = 275;
}
if(counter == 51) {
x = 285;
}
if(counter == 40) {
x = 295;
}
if(counter == 17) {
x = 305;
}
if(counter == 13) {
x = 315;
}
if(counter == 22) {
x = 325;
}
if(counter == 16) {
x = 335;
}
if(counter == 34) {
x = 345;
}
if(counter == 4) {
x = 355;
}
if(counter == 29) {
x = 365;
}
if(counter == 12) {
x = 375;
}
if(counter == 56) {
x = 385;
}
if(counter == 55) {
x = 395;
}
if(counter == 11) {
x = 405;
}
if(counter == 26) {
x = 415;
}
if(counter == 15) {
x = 425;
}
if(counter == 33) {
x = 435;
}
if(counter == 41) {
x = 445;
}
if(counter == 44) {
x = 455;
}
if(counter == 30) {
x = 465;
}
if(counter == 10) {
x = 475;
}
if(counter == 6) {
x = 485;
}
if(counter == 18) {
x = 495;
}
if(counter == 42) {
x = 505;
}
if(counter == 14) {
x = 515;
}
if(counter == 52) {
x = 525;
}
if(counter == 7) {
x = 535;
}
if(counter == 53) {
x = 545;
}
if(counter == 31) {
x = 555;
}
if(counter == 8) {
x = 565;
}
if(counter == 54) {
x = 575;
}
if(counter == 43) {
x = 585;
}
if(counter == 32) {
x = 595;
}
fill(0,0,255); //draws a small ellipse as a rain drop
ellipse(x,y,7,30)
}
This project was a lot of fun but very challenging. I came up with my idea fairly early on (I was brainstorming and listening to storm sounds). The amount of clouds is the amount of hours in the day, including a cloud for 0:00, and the amount of rain drops is how many minutes it has been in the day, including a drop for minute 0. The drops fall from the top and the clouds move left to right, with their positions being updated every second. I had to do a lot of algebra to have working formulas for the dynamic positions and ran into a lot of bugs when it came to keeping track of so many variables. My sketches became very incoherent very quickly. I also ended up writing an insane amount of for statements which was not good. If I could do this project again I would try to figure out a way to do what the if statements accomplished with some sort of loop.
For this week I am talking about the YouTuber Answer in Progress, and her video “the science behind lofi music”. Lofi hip hop music has become popular in the late 2010s and early 2020s as background music for studying and gaming amongst Millennials and Gen Z. Answer in Progress sought to write an AI that could randomly produce lofi music. She gave the program a bunch of different drum and instrumental audio files and background noise, told it what frequencies and RPMs to play at that most lofi music plays at, and has the AI learn what notes should come after what other notes. Then her code should be able to produce a lofi song on its own. There are a few errors, including one song that just plays the same note over and over again, so the program does not produce a very sonically pleasing songs. It lacks an ear for what makes some notes and chords more pleasing than others that humans have, but its pretty impressive for randomly generated music with no human help.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
