For my project, I decided to create an abstract clock that tells the time through an animated frog. In this project, the frog slow closes its eyes following every passing second, and when a minute passes its eyes jump back to their starting position. The background itself is programmed to change subtly for every minute that passes. At the bottom of the canvas are blades of grass, one representing each hour that has already passed in the day.
var flyX = 225;
var flyY = 0;
function setup() {
createCanvas(480, 480);
background(255, 220, 220);
ellipseMode(CENTER);
rectMode(CENTER);
}
//function that draws the frog on canvas
function frog(){
//frog body
stroke(163, 207, 144);
fill(163, 207, 144);
quad(20, 480, 460, 480, 340, 308, 140, 308);
//frog head
stroke(176, 217, 159);
fill(176, 217, 159);
ellipse(width/2, height/2, 360, 302);
ellipse(130, 130, 126, 120);
ellipse(350, 130, 126, 120);
//frog blush
stroke(240, 142, 117)
fill(240, 142, 117);
ellipse(70, 218, 83, 46);
ellipse(410, 218, 83, 46);
}
//function for the flies that surround the frog
function flies(x, y){
translate(width/2, height/2)
for(var i = 0; i < 24; i++){
push();
rotate(TWO_PI*i/24);
fill(0);
rect(x, y, 1, 1);
pop();
}
for(var i = 0; i < 12; i++){
push();
noStroke();
fill(0);
rotate(TWO_PI*i/12);
rect(x, y, 5, 5)
pop();
}
}
function grass(){
var x = 0;
var hr = hour();
for(var x = 0; x <= 20*(hr-1); x += 20){
fill(61, 118, 37);
triangle(x, 480, x+20, 480, x+10, 460);
}
}
function draw() {
//initializaing variables for time
var sec = second();
var min = minute();
var hr = hour();
var eyeX = 56;
var eyeY = 66;
background(min*5, min*3.5, min*3);
//draws the frog on to the canvas
frog();
//draws blades of grass on canvas that represent the hour of the day
noStroke();
grass();
//frog mouth and eyes
stroke(0);
strokeWeight(2);
fill(0);
ellipse(350, 140, eyeX, eyeY-sec**1);
ellipse(130, 140, eyeX, eyeY-sec**1);
line(210, 168, 270, 168);
//calling function to draw flies
flies(flyX, flyY);
flyX += random(-1, 1);
flyY += random(-1, 1);
//draws blades of grass
}
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.
/* Nami Numoto
* Section A
* mnumoto@andrew.cmu.edu
* Project 06 - Abstract Clock
*/
var x = [];
var y = [];
var s = 25;
var side = 10
var s;
var m;
var h;
//160, 160, 160
function setup() {
createCanvas(480, 480);
rectMode(CENTER);
frameRate(1);
stroke("white");
}
function circles(x, y) {
fill(3,122,118); //squid game green
ellipse(x, y, 10);
}
function triangles(x, y) {
fill(237, 27, 118); //squid game pink
triangle(x - side / 2, y - side * sqrt(3) / 2, x - side, y - 0, x - 0, y - 0);
}
function squares(x, y) {
fill(255);
rect(x, y, 30, 30);
}
function draw() {
clear();
background(0); //black background
s = second();
m = minute();
h = hour();
for (i = 0; i < h; i++) { // draw same # of shapes as hrs, mins, sec
x[i] = random(10, 150);
y[i] = random(10, 470);
squares(x[i], y[i]);
}
for (j = 0; j < m; j++) {
x[j] = random(170, 330);
y[j] = random(10, 470);
triangles(x[j], y[j]);
}
for (k = 0; k < s; k++) {
x[k] = random(340, 470);
y[k] = random(10, 470);
circles(x[k], y[k]);
}
}
I made a clock inspired by the Netflix show “Squid Game” – I used the colour palette of the outfits they wear as well as the shapes that represent ranks of the people running the game.
No spoilers 🙂
The circles (lowest rank symbol) represent seconds, triangles (soldiers) minutes, and squares (managers) hours.
I decided to make all of the shapes move at random within certain bounds to indicate controlled chaos, which pretty much sums up the dystopian narrative of Squid Game.
I haven’t watched it all yet, so PLEASE DON’T TELL ME ANYTHING ABOUT IT YALL
Zach Lieberman is a media artist who creates art with code. He uses Openframeworks for most of his creation, which is constantly updated on his instagram. In his recent works, he explored using a variety of random colors along with the wave effect and named the piece :color meditation. The slowly delayed motion of the colors moving towards the viewers’ perspective as it becomes thinner as it approaches the viewers’ eye, somehow gives the sense of relaxation. Another piece that he created recently is called “Grid push color”. I was intrigued by the combinations of random color he uses, and even though they are all unintentionally selected, they blend together very well. This piece consists of gradient squares which continuously changes color. This way, he successfully illustrates the movement of colors during the transitions of squares. This piece made me reach back my childhood memory of playing with a crystal prism.
I found a generative computational artist named Anders Hoff (aka inconvergent) – he uses circles and convergent points to create an algorithm that mimics branches of a tree, all encompassed in a circular canvas. The program ‘decides’ whether to collide or create a new branch, thus creating both intersection and deviation points to simulate a natural-looking plant. The size of the branches also impacts the variability as well as the form, as the smaller branches have to respond to the larger branches that have already been drawn. I think this is a cool way to bring computing and art together, and the detail that the artist includes (smaller branches are more concentrated and have comparable ‘mass’ to larger branches) is indicative of his dedication to making his algorithm match realities of the natural world.
Arcs04-01 is part of the Random Number Multiples collection that takes computer produced visuals and translates them to prints.
I admire the vibrant colors used in this project and how the shapes of the lines flow such that it looks like the 2D print just stopped the art midway through. I admire this because it feels like the art was in motion and the audience just happened to catch a snapshot of an ongoing thing. The placement of each of the red, blue and yellow lines are random but I like how the colors are kept within these three. The creator didn’t use just any colors and I admire this artistic decision because it brings some overall cohesion to the project. The work uses “pseudo-random compositions” of branching out shapes that are distorted by a 3D surface to mimic a sense of movement while maintaining a central focal point. Watz uses software to produce a computational image and then places in aspects of randomness either through the colors or shapes. The creator connects generative art with “dynamic processes,” so in the final form of the work it gives the impression of never being static. The artist’s logic borrows from biomimicry so his art form seems to be in the process of developing and being undone.
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
