Month: October 2019

Angela Lee – Looking Outwards – 06

A still of one of the randomized outcomes when you press the canvas of Matt Deslauriers Generative Art.

Matt Deslauriers has created computational art that randomizes a “seed” based on where the user clicks, and an art piece render in real time from that seed/origin. To do this, he has combined code from Node.js and HTML. I admire the surprise element of his piece; although you know the seed will be placed every time you click, the color and form of the art that emerges change every time so you feel pleasantly surprised. To do so, the code randomizes the colors and forms that emerge from that middle seed. In his blog post, he addresses how his rendering algorithm is based on an old approach for a project called Generative Impressionism, where the particles are reset to random positions and rendered as line segments moving towards a direction. I think his artistic sense shined in his use of color. He sourced 200 of the most popular color palettes from ColourLovers.com API. Though he didn’t come up with the color schemes himself, I think it was wise for him to source the most popular color palettes because they gave a cohesive and appealing approach to color. His artistic sensibilities also manifested in the constancy of the piece. He was able to find a delicate balance between randomness and constancy that allowed the viewers to feel delighted without confusing or completely shocking the viewer. 

Mihika Bansal – Looking Outwards – 06

A project that I find to be interesting in terms of its randomness emphasizes how easy it is for the artist to get a random result when he takes the main bulk of the creation of the piece out of his hands. The piece I specifically am going to talk about it Walead Beshty’s FedEx Sculptures series.

The artist creates a glass box that is the exact dimensions of a FedEx box and ships it to the site at which there is going to be an exhibit. The amount that the box has shifted and broken is random and based on the way the box is handled in its shipping. The amount of breakage is also dependent on the time and space through which the box travels which helps reduce the degree of randomness to an extent. While there is no concrete algorithm the artist follows, he has a distinct process he has conducted for the past many years.

He works on these projects by himself and has been creating these sculptures since 2005.

Link to work: https://mesh-magazine.tumblr.com/post/104686699736/shihlun-walead-beshtys-fedex-sculptures

One of the artist’s sculptures displayed in an exhibit

Zee Salman- Looking Outwards 06- Section E

This work made by Bogdan Soban really called out to me because I love how the texture is laid out across the screen. There are different levels of detail within each corner of the image. It is very abstract, and having computation to be responsible for an image like this makes it very intriguing.

This was created by the use of Random images to generate a visual way to create a whole new image. There are three different images that can be generated by what the application is itself, or imported from somewhere else to get something similar. The picture is formed from RGB color components of “points stored in the internal matrix” of the program. Once that is done, the program reads all of them at the same time and draws the fourth picture according to Bogdan. For the algorithm, I don’t know much about how a piece like this was created. Bogdan mentioned, “Calculation of the criterion for the color mixing is the core of the programming algorithm”. So I’m guessing the randomness would be for each point the algorithm or the randomness determines which pixel would be used on the new image or would be merged with another color. There is a large area to make the mixing algorithm more and more complex in order to get more interesting results. So the more contrasts the original pictures have, the complex your compiled picture is going to be.

Chelsea Fan-Project 06

AbstractClock

/* Chelsea Fan
Section 1B
chelseaf@andrew.cmu.edu
Project-06
*/

var ocean = 255; //background "ocean" color
var fishx = [];
var fishy = [];


function setup() {
    createCanvas(480, 400);
    for (i = 0; i<=59; i++) { //from 0-59 seconds
    	fishx[i]= random(100, width); //random location of fish x coord
        fishy[i] = random(175, 275); //random location of fish y coord
    }
}

function draw() {
	noStroke();
    var S = second();
    var M = minute();
    var H = hour();
	//var mappedH = map(H, 0, 23, 0, width);
    
    //changing background color to darken every hour
    background(240-5.31*(H-1), ocean-5*(H-1), 255);

	for (i=0; i<S; i++) { //draw for number of seconds on clock
		fill(255, 160, 122); //orange fish color
		ellipse(fishx[i], fishy[i], 15, 5); //fish bodies
		triangle(fishx[i], fishy[i], fishx[i]-10, fishy[i]+4, fishx[i]-10, fishy[i]-4);//fish tails
	}
	//Shark moving across screen counts minutes
	//measured at inner corner of shark's mouth
    fill(160, 160, 160, 170); //gray color
	arc(20+M*(1/59*width)-30, height/2, 400, 150, QUARTER_PI, 11*PI/6); //shark head
    triangle(M*(1/59*width)-100, height/2, M*(1/59*width)-400, height/2-75, M*(1/59*width)-400, height/2+75); //shark tail
	fill(255); //white color
	ellipse(M*(1/59*width)+20, height/2-45, 20, 20); //outer eye
	fill(0); //black color
    ellipse(M*(1/59*width)+20, height/2-45, 10, 10); //inner eye

}

It took me a while to come up with a good idea for an abstract clock. My mind kept returning to ideas similar to the example bar length or a circular clock with standard hands. I had some difficulty figuring out the ratio of colors to keep the background blue (background changes based on the hour). Overall it was an interesting project. I don’t enjoy not being able to run through everything to see the colors of every hour. However, I did enjoy being able to create a “clock” or time measurer without any restrictions. I was able to create whatever I wanted in whatever shape, size, color, etc. I enjoy having that freedom.

Jamie Park – Looking Outwards – 06

“I am taking 15-104” generated using the random art generator

I found a random art generator online called random-art.org. When one types in a name, the generator will give you a randomly-drawn image. This program is written by Andrej Bauer, who completed his degree at CMU and is currently teaching at a university in Slovenia. This random art generator is coded using a pseudo-random number generator, which determines the color of each pixel. Because it is based on a pseudo-random number generator, one will always get the same image if he or she types in the same word.

On the website, the creator notes that the program is primarily written in OCaml, but has java script embedded on the web version, and may download a python version if desired.

I find it very interesting that one can use computer to code random images and entertain people!

Jamie Park – Project – 06

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104         Section E         Project 6

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

//--------------------------
function draw() {
    background(250); // My favorite pink
    noStroke(); //gets rid of stroke of the shapes

    fill(255, 223, 212);
    for (var x = -10; x < width + 25; x += 50){
        for(var y = -10; y < height + 25; y += 50){
            ellipse(x, y, 50, 50);
        }
    }

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    var minRect;

    // Reckon the current millisecond,
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var hourColor   = map(H, 0, 23, 60, 220);
    //changed map from 0 to 120, so the rectangle could increase 2 pixels / min
    var minuteIncrease = map(M, 0, 59, 50, 120);
    var secondRotation = map(S, 0, 59, 0, width);

    //Created two circles that change color depending on the time of the day
    fill(61, hourColor, 235); //different shades of blue (dark to light blue)
    ellipse(width / 2, height / 2, 325, 325);
    fill(235, hourColor, 61); //transition from red to yellow
    ellipse(width / 2, height / 2, 300, 300)

    //Created a blue rectangle that increases 2 pixels and changes color 2 values every minute
    rectMode(CENTER);
    fill(51 + minuteIncrease, 111, 184)
    rect(width / 2, height / 2, 70 + minuteIncrease, 70 + minuteIncrease, 15, 15);

    //Created a hexagon that rotates every second
    push();
    translate(width / 2, height / 2);
    rotate(secondRotation);
    fill(116, 232, 228);
    polygon(0, 0, 50, 6);
    pop();
}

//created function polygon to create a hexagon
function polygon(x, y, radius, nPoints){
    var angle = TWO_PI / nPoints
    beginShape();
    for (var i = 0; i < TWO_PI; i += angle){
        var sx = x + cos(i) * radius;
        var sy = y + sin(i) * radius;
        vertex(sx, sy);
    }
    endShape(CLOSE);
}

Rough sketch of my ideas

I started the project by writing down the elements I wanted to include in my clock. I then tried to visualize it through sketching. When I had a concrete idea of what i wanted, I coded the information.

And this is my version of an abstract clock that rotates, changes color, and enlarges according to the time of the day. The seconds are marked by rotating hexagon, the minutes are marked by square that increases “r” value of color by 2 and the size of the wall by 2 pixels, and hours by the two circles that change color. I really enjoyed this project as it allowed me to explore the creative side of coding.

Ammar Hassonjee – Looking Outwards 06

Picture of Gerhard Richter’s “4900 Colors: Version II” displayed in the Serpentine Gallery

The artwork above is a project by Gerhard Richter called “4900 Colors, Version II” that is comprised of 196 panels that are a 5 x 5 square. Richter used a computer program to designate a random color to each square from a list of 25 colors. The algorithm used was a simple random function that assigned a color at random from the list, but the artwork itself is a beautiful composition as it does not look as random. Richter’s purpose in this artwork was to illustrate how even when randomness is the primary generation factor, patterns can still emerge as the probability of having a pattern of colors is not as low. I admire this projects use of a simple code structure to generate a seemingly complex image through multiple iterations and then the way in which these iterations are represented together.

Taisei Manheim – Looking Outward – 06

The project that I chose was a piece called Color-Wander by Matt DesLauriers, a generative artist and creative coder from Toronto.  Color-Wander is a high resolution generative artwork that shows lines that are randomly drawn and produces a different pattern of lines and colors every time that it is clicked.  This project combines Node.js and HTML Canvas because it does well at handling larger resolutions. In order to make the image more polished, Matt used photos of snails, flowers, architecture, geometry and more as distortion maps to drive the algorithm.  When choosing colors, rather than choosing colors by hand he sourced the top 200 palettes from an online design community forum.  I find this project to be interesting because each time you click everything changes about the image, such as the density of strokes, stroke type, and overall style of the image rather than just the colors changing.

link to project
Example of an image produced by clicking.

Mari Kubota- Looking Outwards- 06

A program by a computational mathematician Andrej Bauer generates a piece of art randomly when you put in a title. The program is implemented in ocaml with the online version being implemented using ocamljs. How the program works is that the title you input becomes a seed for a number that is used to construct a mathematical formula which determines the placement of each pixel on the canvas. The art itself isn’t randomly generated each time since the same title yields the same results. The name of a picture should consist of two words with the first word determining the colors and the layout of focal points, and the second word determining the selection and arrangement of graphical elements. Therefore, by changing the first word and keeping the second, the colors and the layout change while the style remains the same. As a result, keeping the first word and changing the second one leads to a very different picture. The program is implemented in ocaml with the online version being implemented using ocamljs. 

Randomly generated art

I found this program intriguing because rather than making art completely random, Andrej Bauer found a way of using mathematical algorithms to equate a specific word to a specific image that never fails to change. 

Emma NM-LO-07

Stamen Design — Mapping the World’s Friendships

Data visualization is really interesting and cool to me. I found Stamen Design that mapped the world’s friendships through data visualization. It uses Facebook friendships the new stories feature to map interconnectedness between countries. The countries are divised by how many Facebook friendship there are between the countries, and the total number of Facebook friendships in that country. I found it interesting because you can see a bit of history through this project. You can tell where a country has been (ie. US occupied some far island in the 1980s). I think it is also really great to see us connecting outside of our country. It is important to have diverse friendships to learn about different cultures and nuances. The algorithm must map number of friendships to size and also group countries that have friendships together in the same color. The creator’s artistic sensibilities come through by how he/she chose to represent the data, specifically, the colors chosen and the use of circles to represent areas.