Category: SectionD

Ellan Suder Looking Outwards-06

random-art.org by Andrej Bauer generates individual images for user-inputted phrases. “The program accepts the name of a picture and uses it as a seed from which a picture is generated randomly. The same name always yields the same picture.”

It’s a fun, interactive artwork. The inclusion of the gallery where people can submit the images they’ve generated are really interesting because you can see all the different phrases people think of while they experiment with the generator. If you sort the gallery by popular, you can see the images voted ‘most interesting’ — one that I found most interesting was ‘sand dunes’, which by chance generated an image that looked like sand dunes.

I created a few myself:

Here is the artist’s explanation for how the code (Python) works:

The idea is to generate expression trees that describe an image. For each point `(x,y)` of the image we evaluate the expression and get a color. A color is represented as a triple `(r,g,b)` where the red, green, blue components are numbers between `-1` and `1`. In computer graphics it is more usual to use the range `[0,1]`, but since many operations are symmetric with respect to the origin it is more convenient to use the interval `[-1,1]`. I kept the program as simple as possible, and independent of any non-standard Python libraries.

If I changed anything about the project, I would like to see how each inputted word gets broken down and turned into an image.

Lanna Lang – Looking Outwards – 06

John Pound’s “RAN DUM LOOP” // 1999

This project revolves around a program that writes and draws random comics and cartoon art onscreen endlessly. The program randomly combines words, colors, shapes, figures, objects, and scenes into random text stories, cartoon drawings, and comic books. What I find interesting about this project is how Pound used the program not as a passive tool, but as an active agent in making creative decisions, and the extent how Pound used randomness to create his comics – he didn’t just use it minimally on just a few panels with nonsense word balloons, he used it to create text, scribbles, figures, stories, and page layouts.

What I saw through the one screenshot Pound shared about this project is that it uses basic shapes that resemble figures and shapes, but I would like to see this recreated with modern technology that can now scan already published comics, cartoons, and comic books, and then the program can randomly generate new comics and cartoons from those. What Pound did right was his intent behind using randomness; the point of creating something random is the idea of total nonsense and something beyond our conscious that challenges both the artist and the viewers to think abstractly.

Pound was inspired by previous programs that could make random sentences by combining basic words and other programs that could draw random figures and scenes. He then had the thought of combining these two different types of programs to make nonsense Sunday comics.

The one screenshot Pound shared of “RAN DUM LOOP” that allows us to see a sneak peek as to how the randomly generated comics looked like

CJ Walsh – Project 05 – Wallpaper

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project 05 - Wallpaper

function setup() {
    createCanvas(500, 500);
    background('#83D4F3');
    noStroke(); // i dont like the stroke on objects!
}

function draw() {
	// loop used to create variety of circles 
	for (var y = 62.5; y < height + 62.5; y += 125) {
		for (var x = 62.5; x < width + 62.5; x += 125) {
			fill('#64AEFF');
			ellipse(x, y, 125, 125);
			fill('#8ACAFF');
			ellipse(x, y, 99, 99);
			fill('#8BEFA7');
			ellipse(x - 25, y - 10, 37, 37);
			fill('#609FA0');
			ellipse(x - 20, y - 20, 21, 21);
			fill('#2D4949');
			ellipse(x + 20, y + 15, 43, 43);
			fill('#FFC5FE');
			ellipse(x + 25, y - 2, 29, 29);
		}
	}
	// background set of rectangles 
	fill('#7F7FEF');
	for (var y = 114; y < height; y += 251) {
		for (var x = 30; x < width; x += 250) {
			rect(x, y, 190, 19);
		}
	}
	// foreground set of rectangles
	fill('#5756A5');
	for (var y = 29; y < height; y += 250) {
		for (var x = 115; x < width; x += 251) {
			rect(x, y, 19, 190);
		}
	}
}

This is the wallpaper that I created for this week’s assignment. After looking through some examples, I decided that I just wanted to experiment with what I knew about loops and shapes and see what I could make. I drew all of my shapes in Adobe Illustrator first to understand where I wanted everything to be placed, and to also choose colors. I found this project to be really fun, especially when I expand the canvas and get to see the design on a larger scale. I could definitely see myself doing something similar to this project again in the future to make fun patterns and textures.

Illustrator Drawing

Lanna Lang – Project 06 – Abstract Clock

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project-06-Abstract CLock

function setup() {
    createCanvas(470, 430);
    background(154, 233, 250);
  
    ellipseMode(CENTER);
    angleMode(DEGREES);
}

function draw() {
  
    //hours
    h = hour();
    //the radius changes depending on the hour
    var hRadius = map(h%12, 0, 12, 250, 350);
    //the circle color changes
    //as the hour changes
    var hPink = map(h%12, 0, 12, 0, 230);
    noStroke();
    fill(255, 183, hPink);
    ellipse(180, 215, hRadius);
    //white reflection arc
    strokeWeight(8);
    stroke(255);
    arc(240, 170, 60, 60, 300, 360);

    //minutes
    m = minute();
    //the radius changes depending on the minute
    var mRadius = map(m, 0, 60, 100, 170);
    //the circle color changes
    //as the minute changes
    var mGreen = map(m, 0, 60, 0, 150);
    noStroke();
    fill(mGreen, 205, 180);
    ellipse(180, 215, mRadius); 
  
    //seconds
    s = second();
    //the radius changes depending on the second
    var sRadius = map(s, 0, 60, 0, 70);
    //the circle color changes
    //as the second changes
    var sGreen = map(s, 0, 60, 0, 255);
    fill(255);
    ellipse(180, 215, sRadius);
  
    //light grey circle
    fill(220);
    ellipse(400, 120, 70, 70);
  
    //dark grey circle
    fill(127);
    ellipse(400, 120, 40, 40);
  
    //record player tone arm
    strokeWeight(30);
    stroke(250, 235, 154); //yellow
    line(430, 80, 410, 100);
    strokeWeight(10);
    line(410, 100, 310, 240);
    line(310, 240, 290, 250);
    strokeWeight(20);
    line(290, 250, 250, 260);
  
    //buttons on the bottom
    strokeWeight(10);
    stroke(247, 115, 125); //red
    line(20, 410, 40, 410);
    stroke(71, 171, 88); //green
    line(60, 410, 80, 410);
    stroke(47); //dark grey
    line(100, 410, 120, 410);
  
    //volume control
    stroke(127); //dark grey
    line(400, 270, 400, 390);
    strokeWeight(2);
    fill(220); //light grey
    rect(380, 300, 40, 20);
}

My process behind making this clock/record player was simple, but I wanted to familiarize myself with the map() function so I based my whole clock off the map() function. Each ellipse represents the seconds, minutes, or hours, and as time goes on, the circles enlarge and the colors lighten for the minutes and hours. I had fun creating this image and playing with colors.

My sketch

CJ Walsh – Looking Outwards 05 – 3D Computer Graphics

For this week’s Looking Outwards I decided to focus on a series of works by Mark Kirkpatrick, a digital artist and designer. What really caught my attention in these pieces was the cohesion of the color palettes. Each piece has a really unique and calming vibe that comes from the combination of the scenery and the color palette. In creating this series of works, he stated that he enjoyed the idea of solitude within the image of the barren landscape.

This series of works is produced using Cinema4D and ZBrush, and then was rendered in Octance Render. He also goes in and adds details after rendering using Photoshop.

I think that an interesting part of his work is that almost all of his professional design and artistic knowledge is self-taught. He went to school for business so he received no formal training with these mediums and practices. He states that as he continues to gain knowledge within these programs, he can create more interesting and complicated works. His practice seems to work well in this environment, the process of experimenting with the software and rendering enables him to create images that have a sense of being both planned and unplanned.

Website: https://mkcreative.co/projects

Interview: https://create.adobe.com/2015/9/15/interview_with_adobe_stock_contributor_mark_kirkpatrick.html?scid=social52542336&adbid=644189459215347712&adbpl=tw&adbpr=282130196

Ellan Suder – Project – 05

I used the code I wrote for the hexagonal grid as a base for the wallpaper’s tiling pattern. I drew a custom shape in its own function (called ‘flame’) and made it repeat. The triangle/sparks are generated randomly.

flame wallpaper

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-05
*/

var magentaColor;
var greenColor;
//var blueColor;

function setup() {
    createCanvas(500, 500);
    magentaColor = color(238,116,217);
    greenColor = color(156, 255, 209);
    //blueColor = color(104,142,243);
}


function draw() {
    background(9,9,9);
    var tw = 100;
    var th = 100;
    var oy = 0;
    var ox = 0;
    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 8; x++) {
          if (y%2 === 0) {
            var px = ox + x * tw;
          } else if (y%2 !== 0 & x < 9) {
            var px = ox +tw/2 + x * tw;
          }
            var py = oy + y * th;
            
            fill(greenColor);
            flame(px,py,20); //outer flame
            fill(magentaColor); //inner flame
            flame(px,py+10,10);
            sparks(px,py,20);
        }
    }
  noLoop();
}
      
function flame(x,y,size) {
    stroke(magentaColor);
    strokeWeight(1.5);
    
    beginShape();
    vertex (x,y-4*size/3);     //1
      vertex (x+size/4,y-size);     //2
        vertex (x+size/3,y-size/3);     //3
      vertex (x+2*size/3,y-3*size/4);     //4
    vertex (x+size,y-size);     //5
      vertex (x+3*size/4,y+size/3);     //6
        vertex (x+size/2,y+3*size/4);     //7
          vertex (x,y+size);     //8
        vertex (x-size/2,y+3*size/4);     //9
      vertex (x-3*size/4,y+size/3);     //10
    vertex (x-size,y-size);     //11
      vertex (x-2*size/3,y-3*size/4);     //12
      vertex (x-size/3,y-size/3);     //13
        vertex (x-size/4,y-size);     //14
    endShape(CLOSE);     //back to 1  
}

function sparks(x,y,size) {
    a = size*random(-1,1);
    b = random(.9,1.1);
    triangle((x+a)*b,(y+a),
             (x+size/5+a)*b,(y+size/5+a),
             (x-size/5+a)*b,(y+size/5+a)*b);
    
    c = size*random(-1,1);
    d = random(.9,1.1);
    triangle((x+c)*d,(y+c)*d,
             (x+size/5+c)*d,(y+size/5+c),
             (x-size/5+c)*d,(y+size/5+c)*d);
  
    e = size*random(-1,1);
    f = random(.9,1.1);
    triangle((x+e)*f,(y+e)*f,
             (x+size/5+e)*f,(y+size/5+e)*f,
             (x-size/5+e)*f,(y+size/5+e)*f);
}

Kristine Kim – Project -05-Wallpaper


sketch

For this project, I wanted to use curved lines instead of rigid geometric shapes so I used sin() and cos() to portray that. I also wanted to convey a little bit of depth and dimension, so I had shadows to the curves and circles in the background. The color of the circles are a couple of shades darker than the background color so that it could help portray more dimension.

index

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project-05- Wallpaper
var x1 = 100; //x of the rect
var y1 = 100; //y of the rect

function setup() {
    createCanvas(500, 600);
    noLoop();   
}

function draw() {
    background(150, 200, 150);

//circles in the background
    for (var y = 0; y < height; y += 2 ) {
        for (var x = 0; x < width; x += 2) {
            var rx = x1 + x *25
            var ry = y1 + y * 25
            noFill();
            strokeWeight(3);
            stroke(245);
            rect(rx-100, ry-100, 60, 60);
            fill(150, 143, 255);

        }
    }

// 1st row of the curves
    for (var x = 0; x < width/4-20; x = x + 1) {
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) - 40);
        point(x + 135, 60 - 50 * sin(radians(x)) - 40);
        point(x + 265, 60 - 50 * sin(radians(x)) - 40);
        point(x + 390, 60 - 50 * sin(radians(x)) - 40);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) - 40);
        point(x + 135, 60 - 50 * cos(radians(x)) - 40);
        point(x + 265, 60 - 50 * cos(radians(x)) - 40);
        point(x + 390, 60 - 50 * cos(radians(x)) - 40);

// shadows for the 1st row
        strokeWeight(8);
        fill(110);
        point(x, 60 - 50 * sin(radians(x)) - 47);
        point(x, 60 - 50 * cos(radians(x)) -47);
        point(x + 135, 60 - 50 * sin(radians(x)) -47);
        point(x + 135, 60 - 50 * cos(radians(x)) -47);
        point(x + 265, 60 - 50 * sin(radians(x)) - 47);
        point(x + 265, 60 - 50 * cos(radians(x)) - 47);
        point(x + 390, 60 - 50 * sin(radians(x)) - 47);
        point(x + 390, 60 - 50 * cos(radians(x)) - 47);
 
 //2nd row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 50);
        point(x + 135, 60 - 50 * sin(radians(x)) + 50);
        point(x + 265, 60 - 50 * sin(radians(x)) + 50);
        point(x + 390, 60 - 50 * sin(radians(x)) + 50);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 50);
        point(x + 135, 60 - 50 * cos(radians(x)) + 50);
        point(x + 265, 60 - 50 * cos(radians(x)) + 50);
        point(x + 390, 60 - 50 * cos(radians(x)) + 50);

 //shadows for the 2nd row  
        strokeWeight(8)
        fill(110);
        point(x, 60 - 50 * sin(radians(x)) + 57);
        point(x, 60 - 50 * cos(radians(x)) + 57);
        point(x + 135, 60 - 50 * sin(radians(x)) + 57);
        point(x + 135, 60 - 50 * cos(radians(x)) + 57);
        point(x + 265, 60 - 50 * sin(radians(x)) + 57);
        point(x + 265, 60 - 50 * cos(radians(x)) + 57);
        point(x + 390, 60 - 50 * sin(radians(x)) + 57);
        point(x + 390, 60 - 50 * cos(radians(x)) + 57);

//3rd row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 150);
        point(x + 135, 60 - 50 * sin(radians(x)) + 150);
        point(x + 265, 60 - 50 * sin(radians(x)) + 150);
        point(x + 390, 60 - 50 * sin(radians(x)) + 150);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 150);
        point(x + 135, 60 - 50 * cos(radians(x)) + 150);
        point(x + 265, 60 - 50 * cos(radians(x)) + 150);
        point(x + 390, 60 - 50 * cos(radians(x)) + 150);

//shadows for 3rd row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 157);
        point(x, 60 - 50 * cos(radians(x)) + 157);
        point(x + 135, 60 - 50 * sin(radians(x)) + 157);
        point(x + 135, 60 - 50 * cos(radians(x)) + 157);
        point(x + 265, 60 - 50 * sin(radians(x)) + 157);
        point(x + 265, 60 - 50 * cos(radians(x)) + 157);
        point(x + 390, 60 - 50 * sin(radians(x)) + 157);
        point(x + 390, 60 - 50 * cos(radians(x)) + 157);


//4th row
       fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 250);
        point(x + 135, 60 - 50 * sin(radians(x)) + 250);
        point(x + 265, 60 - 50 * sin(radians(x)) + 250);
        point(x + 390, 60 - 50 * sin(radians(x)) + 250);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 250);
        point(x + 135, 60 - 50 * cos(radians(x)) + 250);
        point(x + 265, 60 - 50 * cos(radians(x)) + 250);
        point(x + 390, 60 - 50 * cos(radians(x)) + 250);

//shadows for 4th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 257);
        point(x, 60 - 50 * cos(radians(x)) + 257);
        point(x + 135, 60 - 50 * sin(radians(x)) + 257);
        point(x + 135, 60 - 50 * cos(radians(x)) + 257);
        point(x + 265, 60 - 50 * sin(radians(x)) + 257);
        point(x + 265, 60 - 50 * cos(radians(x)) + 257);
        point(x + 390, 60 - 50 * sin(radians(x)) + 257);
        point(x + 390, 60 - 50 * cos(radians(x)) + 257);


//5th row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 350);
        point(x + 135, 60 - 50 * sin(radians(x)) + 350);
        point(x + 265, 60 - 50 * sin(radians(x)) + 350);
        point(x + 390, 60 - 50 * sin(radians(x)) + 350);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 350);
        point(x + 135, 60 - 50 * cos(radians(x)) + 350);
        point(x + 265, 60 - 50 * cos(radians(x)) + 350);
        point(x + 390, 60 - 50 * cos(radians(x)) + 350);

//shadows for 5th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 357);
        point(x, 60 - 50 * cos(radians(x)) + 357);
        point(x + 135, 60 - 50 * sin(radians(x)) + 357);
        point(x + 135, 60 - 50 * cos(radians(x)) + 357);
        point(x + 265, 60 - 50 * sin(radians(x)) + 357);
        point(x + 265, 60 - 50 * cos(radians(x)) + 357);
        point(x + 390, 60 - 50 * sin(radians(x)) + 357);
        point(x + 390, 60 - 50 * cos(radians(x)) + 357);

//6th row  
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 450);
        point(x + 135, 60 - 50 * sin(radians(x)) + 450);
        point(x + 265, 60 - 50 * sin(radians(x)) + 450);
        point(x + 390, 60 - 50 * sin(radians(x)) + 450);

        fill(255, 191, 241);
        point(x, 60 - 50 * cos(radians(x)) + 450);
        point(x + 135, 60 - 50 * cos(radians(x)) + 450);
        point(x + 265, 60 - 50 * cos(radians(x)) + 450);
        point(x + 390, 60 - 50 * cos(radians(x)) + 450);

//shadows for 6th row
        strokeWeight(8); 
        fill(100);
        point(x, 60 - 50 * sin(radians(x)) + 457);
        point(x, 60 - 50 * cos(radians(x)) + 457);
        point(x + 135, 60 - 50 * sin(radians(x)) + 457);
        point(x + 135, 60 - 50 * cos(radians(x)) + 457);
        point(x + 265, 60 - 50 * sin(radians(x)) + 457);
        point(x + 265, 60 - 50 * cos(radians(x)) + 457);
        point(x + 390, 60 - 50 * sin(radians(x)) + 457);
        point(x + 390, 60 - 50 * cos(radians(x)) + 457);

//7th row
        fill(245);
        point(x, 60 - 50 * sin(radians(x)) + 550);
        point(x + 135, 60 - 50 * sin(radians(x)) + 550);
        point(x + 265, 60 - 50 * sin(radians(x)) + 550); 
        point(x + 390, 60 - 50 * sin(radians(x)) + 550);

       
        fill(255, 191, 241)
        point(x, 60 - 50 * cos(radians(x)) + 550);
        point(x + 135, 60 - 50 * cos(radians(x)) + 550);
        point(x + 265, 60 - 50 * cos(radians(x)) + 550);
        point(x + 390, 60 - 50 * cos(radians(x)) + 550);

//shadows for 7th row
        strokeWeight(8); 
        fill(100);
        point(x + 390, 60 - 50 * sin(radians(x)) + 557);
        point(x + 390, 60 - 50 * cos(radians(x)) + 557);
        point(x + 265, 60 - 50 * sin(radians(x)) + 557);
        point(x + 265, 60 - 50 * cos(radians(x)) + 557);
        point(x + 135, 60 - 50 * sin(radians(x)) + 557);
        point(x + 135, 60 - 50 * cos(radians(x)) + 557);
        point(x, 60 - 50 * sin(radians(x)) + 557);
        point(x, 60 - 50 * cos(radians(x)) + 557);
    }
}

Jacky’s LookingOutwards 05

Virtual Reality and Architecture

The Dawn of the Virtual Reality in Architecture | Gunita Kulikovska | TEDxRiga

With the advancement of technology, the field of architecture has revolutionized and buildings no longer need to be physically built in order for architects to experience the space. With the help of virtual reality, architects are able to design and feel the space in real time in three dimensional virtual world.

In the Ted Talk, Gunita Kulikovska shared her experience as well as he research in how the virtual reality technologies can be used in the fields of architecture. Coherently involved in both architecture and fostering technology startups, Gunita Kulikovska believes that it is an revolutionary mission. She envisions to break the constrains of knowledge and limits of communication between client and architect, with the help of straightforward visual support from virtual reality.

Mari Kubota- Looking Outwards- 05

3DQ is a digital agency based in Barcelona founded in 2015 by Diego Querol that does Interior Design and Architecture Computer Generated Images (CGI). The purpose of 3DQ is to make photorealistic renderings of interior spaces and architecture in order to help people visualize a project.  The Coworking 2040, for example, was made using Corona Renderer, which makes design, composition, lighting and texturing and modelling. Corona Renderer can also edit the texture and lighting of a material real time with little rendering time. 

The Coworking 2040

The colorful and realistic renderings of the Coworking 2040 drew me to 3DQ. Being able to create a tool to visualize a space without actually creating it allows people to get a feel of the space without jeopardizing money or time. A lot of 3DQ’s projects are highly saturated and texturized, giving it an alluring and realistic glow.

Jacky Tian’s Project 05

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//project-05

function setup() {
    createCanvas(600, 400);
    background(128, 128, 128);
    var tw = 60;
    var th = 60;
    var oy = 25;
    var ox = 5;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
           
            strokeWeight(0);
            fill(200, 190,  100)
            rect(px, py, 50, 50);
            strokeWeight(2);
            stroke(255);
            line(px,  py + 15,  px + 80,  py + 15);
            strokeWeight(4);
            stroke(65, 105, 225);
            line(px + 35, py, px + 35, py +  80)
            noStroke()
            fill(128, 0, 0);
            ellipse(px + 50, py + 50, 10, 10);
        }
    }
  noLoop();
    
    }

function draw() {
    // draw is not called due to noLoop() in setup()
}

EARLY SKETCH / CONCEPT SKETCH

From the early concept sketch, you can see that i was intrigued by grids combined with rectangles and dots. I was then inspired by the color scheme of the original Burberry pattern which also has the grids and rectangles.