Month: October 2017

merlebac Looking Outwards-09

A 3D generated plant by Chaotic Atmospheres Family/Genus: Aspona Gatik Home Planet: Ikam
A 3D generated plant by Chaotic Atmospheres Family/Genus: Caradae Capesus Home Planet: Dyyg El Rhaaben (old Inilliatoa)

Alien Bonsais by Chaotic Atmospheres

http://chaoticatmospheres.com/alien-bonsais

The looking outward that I chose to respond to was Selina Lee’s week 5 post. The project that she cited was Alien Bonsais, and was made by Chaotic Atmospheres. I thought the 3D modeled plants looked beautiful. The artist did an amazing job of making them look as if they were from another world. In addition, I would have to complement Chaotic on his/her choice of color for the plants. Each model has a small amount of a bright color to make the images pop. One critique of Chaotic’s work that I would have is the background that they used. They used a plain white back drop, and I though it would have looked more interesting in a surrounding environment.

selinal-Looking-Outwards-05

mjeong1-Project-09-Portrait

sketch

//Min Young Jeong
//mjeong1@andrew.cmu.edu
//Section A
//Project-09

var underlyingImage;

function preload() {
    var myImageURL = "https://i.imgur.com/sDyW7gl.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    frameRate(10);
}

function draw() {
    var px = mouseX;
    var py = mouseY;
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    rect(px,py,random(5,10),random(5,10));
    rect(px+10,py+10,random(5,10),random(5,10));
    rect(px-10,py-10,random(5,10),random(5,10));
}

For this project I created a pixelated portrait that the user can control. Each set of rectangles are created on the position of mouse X and mouse Y. The viewer can control the number of rectangles and the position of rectangles that are drawn.

haewanp – Project 09 – Computational Portrait

Computational Portrait

var img;
var x;
var y;
var blue_range;
var red_range;
var yellow_range;

function preload() {
    img = loadImage("https://i.imgur.com/boCvJXd.jpg");
}

function setup() {
    createCanvas(360, 480);
    img.loadPixels();
    noFill();
    yellow_range = 7; //initial value;
}

function draw() {
    background(255);
    blue_range = map(mouseX, 0, width, 0, 8);
    red_range = map(mouseY, 0, height, 0, 10);
    
    for (y = 0; y < height; y+=6) {
        for (x = 0; x < width; x+=6) {
            var i = y * width + x;
            //color
            var redness = (255 - img.pixels[i*4]) / 255;
            var yellowness = (255 - img.pixels[(i+1)*4]) / 255;// I just decide to represent green value among RGB as yellow color
            var blueness = (255 - img.pixels[(i+2)*4]) / 255;
            
            //blue diagonal line
            stroke(20, 20, 255);
            strokeWeight(blueness * blue_range);
            line(x - 3, y - 3, x + 3, y + 3);
            //red diagonal line
            stroke(255, 20, 20);
            strokeWeight(redness * red_range);
            line(x + 3, y - 3, x - 3, y + 3);
            //yellow ellipse
            noStroke();
            fill(245, 220, 0);
            ellipse(x, y, yellowness * yellow_range, yellowness * yellow_range);

        }
    }
}

function mousePressed() {
    yellow_range = random(1, 12); //yellow range changes when you press mouse
}

In this project, I learned that there are many ways to depict pixels. I represent this portrait with dividing each R, G, B value (Later, I represent green value with yellow color). Based on each R, G, B value, size and stroke weight are determined. Also, this can be played around with the mouse behaviors. There are several variations based on mouse behavior below.

Project 09 – Yugyeong Lee

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Project 09

var imgYugy;

function preload() {
    var yugyURL = "https://i.imgur.com/Ghau5tT.jpg"; 
    //load image using the URL
    imgYugy = loadImage(yugyURL);
}

function setup() {
    createCanvas(480, 480);
    background(255);

    imgYugy.loadPixels();
    //how fast curves get drawn on canvas
    frameRate(750);
}
 
function draw() {
    //calling created functions
    circleYugy();
    curveYugy();
}

//circular pixels following position of mouse
function circleYugy() {
    var startX = mouseX;
    var startY = mouseY;
    var limitX = constrain(floor(startX), 0, width - 1);
    var limitY = constrain(floor(startY), 0, height - 1);
    var color = imgYugy.get(limitX, limitY);
    var diam = random(3, 10);

    noFill();
    stroke(color);
    ellipse(startX, startY, diam, diam);
}

//diagonal lines at random
function curveYugy() {
    var startX = random(0, width);
    var startY = random(0, height);
    var limitX = constrain(floor(startX), 0, width-1);
    var limitY = constrain(floor(startY), 0, height-1);
    var color = imgYugy.get(limitX, limitY);
    var diagonalLength = random(5, 25);
    var thickness = random(.5, 3);
    var curveScale = random(.1, .6)

    stroke(color);
    strokeWeight(thickness);
    noFill();
    beginShape();
    curveVertex(startX, startY);
    curveVertex(startX, startY);
    curveVertex(startX+curveScale*diagonalLength, startY+.6*diagonalLength);
    curveVertex(startX+diagonalLength, startY+diagonalLength);
    curveVertex(startX+diagonalLength, startY+diagonalLength);
    endShape();
}

There are two ways the portrait gets drawn onto the canvas: through random curves following the FrameRate and circular lines that follow the position of the mouse while capturing pixel color of each location. I wanted to create a paint-brushed effect as the end product while incorporating another geometry to disturb what could be a smooth surface. Bellow are the screenshots of the stages with just the curves and with circular curves.

           original picture                first stage (just curves)               second stage

   first stage (with circles)                 second stage                            third stage

Looking Outwards 9, odh

I chose to look at Jihee Kim’s Looking Outwards focused on randomness. She talks about a collaboration project between visual artists Memo Akten and Quayola. i agree with Jihee in that the project looks at the motions of the human body as it performs, in this case, extreme physical movements. I, however, don’t see the link of the randomness to the forces exerted on or by the human, as Jihee states. I see the randomness controlled by the motions of the human body, depicting a trail of motion that gives further context to their movements.

I also agree with the success of the artists to give life to this piece, purely made of basic, unnatural geometries. Through the randomness, I can see a human. Their success in beautifully depicting motion gives the audience enough to see a normal person carrying out the movement.

Project-09 Portrait in Jasper

This is Jasper.

sketch

//Ty Van de Zande
//ctv@andrew.cmu.edu
//Section B
//Project-09

//sorry for not commenting

var underlyingImage;
var dir = 1;

function preload() {
    var myImageURL = "https://i.imgur.com/xIecQsR.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(420, 420);
    background(0);
    underlyingImage.loadPixels();
    frameRate(60);
}

function draw() {
    var r = random(90);
    var r2 = random(3, 20);
    
    if(r <= 1){
    underlyingImage.loadPixels();
    var stepSize = round(constrain(mouseX / 8, 6, 32));
    for (var y=0; y<height; y+=stepSize) {
    for (var x=0; x<width; x+=stepSize) {
      var i = y * width + x;
      var darkness = (255 - underlyingImage.pixels[i*4]) / 255;
      var radius = stepSize * darkness;
      ellipse(x, y, r2, r2);
    }
  }
    }
    
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width-1);
    var iy = constrain(floor(py), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    var sz = random(0, 30);
    

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, sz, sz);
}

function mousePressed(){
    dir = dir *(-1);
}

akluk-SectionA-LookingOutwards-09

The project that my peer and I have chosen to talk about is the Hexagonal Generative Game of Life by Charlotte Dann.

A still of an iteration of the animation

I think the cited project is definitely one of the more interesting and mesmerizing generative art project that I have seen. I could just picture myself staring at the animation due to how much variation there is and how smooth and organic the movement is. I completely agree with my peer’s assessment and I think my peer’s assessment gives a very good and summative explanation of the project, and also explains very clearly what she thought was impressive about the project. I think Charlotte, the creator of this project is very honest on her progress, and explained what worked and what didn’t. I especially how she explain a very simple algorithm, where the “ant” just decides on one of two direction, could create such interesting and intricate systems and diagrams. Below is the link to her entire project and my peers evaluation.
Some of her initial drawings and ideas

Link to project
Link to Peer Evaluation

Looking Outwards-09

Random Number Multiples by Marius Watz and Jer Thorp
Original post by Hae Wan Park

https://creators.vice.com/en_uk/article/vvzxkb/random-numbers-screen-printed-generative-art-nyc-event

This project is awesome, like Hae Wan mentioned, because it is a combination of digital processes informing a handcrafted, physical output. One thing I would like to add to the commentary is that coding is also a craft. It’s neat to think about the processes that make up each piece. With coding, the interaction with the computer is minimal and restricted to slight hand/finger movements. The print process affords many rich interaction because the tools require fully body control. But this does not mean that one cannot inform the other.

The posters by Watz and Thorp are generative examples of pseudo-random algorithms that “simulate” nature. The simulation im taking about is that many of the patterns people see in nature have an element of randomness: rain drops, sand, etc. The contrast between the clear artificial form of the surfaces, made up by the random lines is fascinating!

selinal-Looking-Outwards-09

Sheenu-Looking Outwards-09

I enjoyed reading this blog post and learning about how artists are implementing their interactive, non-gallery work in public settings. I think that the gesture of flipping the plates in relation to the movement of water and downward movement of the eye is very clever. It creates the illusion of the fountain while also allowing more innovative room for the shape of the fountain, the movement of the water, the scale and closeness of the viewer to the work, and the interaction which initiates a change in the piece. I think especially with our most previous project, this work is relevant to expanding beyond the combination of code with two-dimensional visuals.