Section E – Page 25 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Jenny Hu — Looking Outwards 06

Zach Lieberman is an artist and programmer that specializes in computational and graphic art. I’m especially drawn to the pieces below for his beautifully generated compositions that blend random color juxtapositions beautifully. In terms of how it was generated, I assume the placement, colors, and direction of each shape are randomly generated each time, while the key visual qualities remain consistent in the algorithm— the diffusion rates of colors, the shapes of each point, and the spacing of the stripes in the composition.

The ability to visually balance these elements despite the randomness is what I absolutely love about these compositions. The randomness is used with a purpose that is artistically driven and envisioned.

Find this work’s post here: https://www.instagram.com/p/BlrG6iZg8Ow/?taken-by=zach.lieberman

Jenny Hu — Project 06: Abstract Clock

jenny’s sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 06

//sphere beats with the second
//torus' grow with the minute & hour

var sphereR = 29;
var smallTR = 30;
var largeTR = 100;
var sThick = 8;
var lThick = 25;
var buffer = 50;
var sphereToggle = 1;


function setup(){
  createCanvas(480, 480, WEBGL);
}


function draw(){
  background(250);
  normalMaterial();
  var M = minute();
  var H = hour();

  //inner sphere as seconds 
  //pulsed with a framerate calculation below
  for (var i=0; i<2; i++){
      //if statements isolate if the sphere is growing/shrinking
      if (sphereR < 30) {
          sphereToggle = 1; 
      }
      if (sphereR > 32.5) {
          sphereToggle = -1;   
      }
          // pulse per beat = 5/60
          // aka sphereR units traveled/60 frames
      sphereR = sphereR + i*(5/60)*sphereToggle; 
      sphere(sphereR);       
   }
  
  //middle torus radius as the minutes
  smallTR = 35 + buffer/3 + M;
  push();
  rotateZ((frameCount * 0.01)/2);
  rotateX((frameCount * 0.01)/2);
  rotateY((frameCount * 0.01)/2);
  torus(smallTR, sThick);
  pop();

  //outer torus radius as the hour
  largeTR = smallTR + sThick + buffer + H;
  push();
  rotateZ((frameCount * 0.02)/5);
  rotateX((frameCount * 0.005)/2);
  rotateY((frameCount * 0.005)/2);
  torus(largeTR, lThick);
  pop();

}

Exciting! I wanted to use this project as an excuse to just get familiar with basic WebGL and 3D primitives. (My main references to learn these are the in the links at the end.) Outside of the 3D elements— this clock is relatively straightforward— the inner sphere pulses ( in, out, and back in) per second in a simple for-loop, calculated by the distance it needs to pulse over the framerate (60). The inner torus radius is growing based on the minutes of the hour, while the outer torus radius is growing based on the hour of the day. Since the change is so slow, you can see the comparison of the smallest and largest times of the day below— midnight and 11:59 pm.

Clock at 11:59 PM — representing the largest possible radii for the hours and minutes— 23, and 59.

Clock at midnight— representing the smallest possible radii for the two torus. 0 and 0.

The rotations of each torus are essentially just coded with numbers to provide diverse volumes and angles in a given moment (basically, I just proportioned thicknesses and speeds by eye).

Resources:
The Coding Train — Light and Material Tutorial
P5 3D Geometry example reference
Getting started on WebGL

I was also super inspired by Syed Reza’s work. I hope I can produce something with similar confidence and complexity soon!

Sketches:

Julie Choi – Looking Outwards – 06

Inspired by Jackson Pollock: Live Painting at VAAS by students

This artwork was inspired by the art of randomness that Jackson Pollock has expressed in his artworks. In VAAS, students in vocational training put on a physical art show. The piece embodies the mood of the “60s era Cambodian rock music” through a live painting performance. It captures randomness during the performance because they try to express their theme, “riot of colors”. On a big canvas, a group of students paints on the white surface with body movements and objects such as brooms, leaves, and shoes. I admire this piece of art because sometimes randomness can be hard in a society with high technological development. I feel like this artwork was possible for students to present it because teenagers are known to be youthful and free. During the performance, they did not have any rules to how they painted; they ended a creating and expressing their youth in dreams with many shades of color and motion. This work is hung up on the VAAS courtyard so that visitors get to see when they enter the school. I respect this type of randomness in art because it is closer to playing rather than very calculated strokes.

Carley Johnson Looking Outwards 06

This week I will be discussing art created by Rami Hammour, and alum of the Rhode Island School of Design. His work deals in generation and randomness, not without limitations though. Each art piece has a different set of parameters so I’ll discuss two examples.

“A Text of Random Meaning”

“This text-like visualization is a mapping of a “Register and Taps” random number generator in action. The drawing comparing three registers: 9, 11 and 13. It shows the difference in values, and counting of the generated numbers while highlighting the taps.” -Rammi Hammour

The limits of this piece are in the three different registers and the visual part of the piece is able to have some sense of flow and form because of it.

“Exhaustive Permutation and Bubble Sort”

“A 30-60-90 Triangle could meets with another identical triangle in defined 7 different ways. If no repetition occurred this will yield an exhaustive 5040 assembly. 8 triangles are needed to exhaustively have all 7 cases in each assembly, also conditional to no repetition occurring.”

Studying the purpose of ‘randomness’ in computational art is that really, it’s hard to get completely random results, as otherwise a piece might be limitless. In order to make the piece function and flow some limitation must be present. Even in the example from class with the “limitless” moving squares. They were limited by the canvas, by color, and by size though labeled random.

Emily Zhou – Looking Outwards – 06

Mark Wilson is a digital artist, painter, and printmaker who began exploring random computational art in 1980. He started on a microcomputer, learning programming in order to create artwork. He essentially writes software that uses calculated repetition to construct intricate layers.

Mark Wilson, “e4708”, 2008 archival ink jet print.

I admire the complexity of his work, and the effectiveness of the algorithm to generate elaborate pieces without becoming overly messy and disorderly. I am fascinated by the way he reproduces a similar style throughout his work, and the implications of this in the program.

Though left unspecified, Wilson leaves certain elements to be randomly chosen by the machine while carefully curating others. I would assume he makes decisions about scale and arrangement, which elements of patterning and colour dependent on random.

Wilson has paintings dating back to 1973 that inspired his digital style that continues to develop in the present year through computation.

Rachel Lee- Looking Outwards 06- Section E

This week, I have decided to explore the generative art of artist and creative coder Matt Deslauriers. In the particular experiment I am investigating Deslauriers has decided to depict a ‘seed’ that is randomly generated using simplex noises to render the particle’s size, position, scale, noise and velocity. As the artwork uses Node.js and Canvas to output frames as mp4 videos, when the user clicks the frame, the seed characteristics and background color is further randomised. I really admire and am impressed by Deslauriers’ generative art experiment because he managed to think every element through very carefully, despite having a limited degree of control over a randomised composition. For example, in order to achieve color contrast between each frame, he used a module by another developer to ensure legibility of text on background color and visual harmony between elements, demonstrating his acute attention to detail. Overall, I think each composition is very beautiful, and the artist was able to demonstrate his artistic sensibilities by investigating contrasts, the shape of the strokes the underlying framework which the generative strokes follow (e.g. grid, circular, hexagonal).

screen1 — A still from Deslaurier’s generative piece (2016)

Alice Fang – Looking Outwards – 06

A conversation, generated on September 29, 2018

smiling face withface is a Tumblr-bot that was created by Allison Parrish, a computer programmer, poet, educator and game designer who currently teaches at NYU’s Interactive Telecommunications Program. smiling face generates and posts glitchy emoticons, pulling randomly from the open-source SVG files from Twitter’s twemoji project. The randomness, in this case, is obtained from a set data source (Twitter’s emojis, of which there are 2841) , and a Python program adjusts the numbers and paths from the emoji taken. The results are strange amalgamations that are fun, quirky, and very colorful, and most of the time, nearly unrecognizable from the original source. Personally, I think the glitchy-ness makes viewing these emojis more interesting, if sometimes uncomfortable, because you know what it is but there’s something that’s slightly off. Many of them make me laugh, and the project is still ongoing into October 2018, so there’s more to look forward to!

Elena Deng-Looking Outwards 06

This week I decided to take a look at Andrej Bauer’s random art. Within the image, the mathematical formula determines the color of each pixel in the image. Within the code, there is a list of operators referring to the other operators in the list. The idea of the image is to generate expression trees to describe an image. For each point of the image (x,y) we will evaluate the expression and get a color. The colors are determined by (r, g, b) which are numbers between -1 and 1. The image displayed is a large number of rectangles (pixels) on the canvas. The program uses a RGB color model. The model uses Python and it can be changed by introducing new operators.

Yingying Yan-Project-05-Wallpaper

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-05
*/

var oy = 0; // orginal y position
var ox = 0; // original x position 
var tw = 50; // the width spacing
var th = 50; // the height spacing

function setup() {
    createCanvas(585, 600);
    background(234, 185, 83);

}

function draw() {
	// for all the odd rolls and columns, we will draw flowers
	//by calling the x and y position
	for (var y = 0; y < 20; y++) {
	    for (var x = 0; x < 20; x++) {
	    	if((x % 2 == 1) & (y % 2 == 1)){
            var py = oy + y * th;
            var px = ox + x * tw;
            push();
            flower(px, py);
            pop();
        }
    // for all the even rolls and columns, we will draw cactus
    // by changing the x and y position
            if ((x % 2 == 1) & (y % 2 ==1)){
        	var ly = oy + y * th;
        	var lx = ox + x * tw;
        	push();
        	cactus(lx, ly);
        	pop();

        }
    }
}

noLoop();
}

// function that draws the flower with variables x and y
function flower (x,y) {
	translate (x, y);
	scale(0.5)
	for (var i = 0; i < 7; i += 1) {
        fill(147, 87,37, 100);
        noStroke();
		rectMode(CENTER);
		ellipse (0, 0, 20, 100);
		rotate(radians(45));
	}
}

//function that draws cactus and called by variable x and y 
function cactus(x, y) {
    translate(x,y);
    scale(0.5);
    noStroke();
    //the vertical stem
    fill(90,87,36, 140);
	ellipse(100, 100, 10, 100);
    // the left rectangle bend
	push()
	noStroke();
	translate(85,110);
	rotate(radians(30))
	rectMode(CORNER);
	rect(0,0, 20, 8);
	pop();
    //the left ellipse or branch
	push();
	noStroke();
	translate(83, 112);
	rotate(radians(-50));
	ellipse(0,0, 10, 30);
	pop();
    //the branch on the right side
    push();
	translate(100,100)
	rotate(radians(-120));
	ellipseMode(CORNER);
	ellipse(0, 0, 10, 50);
	pop();


}

I wanted to draw minions and bananas, but it was too challenging so I ended up drawing flowers and cactus. I like how I accidentally made my flower transparent, that was cool. Then I basically used assignment B’s method to place my flowers and cactus. This project is a little bit stressful than the other ones. As you can tell I turned this in 5 minutes before it is due.

YingyingYan – LookingOutwards-05

Closer view of the 3D world Tomer created

Somerset Isle is a 3D rendering project done by an environment artist from Vancouver, Tomer Meltser. He got his inspiration from the world heritage site Chew Jetty in Malaysia. The project includes a walkthrough video and a series of images from the rendering. Most of the items he used in the render can be found in the ArtStation website.

The faded background creates an interesting atmosphere.

I was looking at a list of 3D renderings drawings, the spatial atmosphere in Tomer’s image totally caught my attention. The environment he created is very dreamy, has a sense of unrealistic yet realistic at the same time. It is conflicting, but that’s the feeling I got from looking at this project. I know 3D artists use Rhino, Vray, AutoCAD, Photoshop and other software that I am using in the studio right now. But Tomer totally made a new world with all the software! Those tools are so much more powerful than I thought. Maybe he’s 3D graphic did not involve any algorithm, and does not fit the Looking Outward requirement this week. Yet, I think the drawings he made are super cool, so I feel the need to share this.

Somerset Isle | Environment Reel 2018 from Tom Meltser on Vimeo.