Month: October 2018

Looking Outwards 9 rrandell

https://courses.ideate.cmu.edu/15-104/f2018/2018/09/21/looking-outward-04-2/

This is the link to the peer Looking Outwards ^

http://loop.ph/portfolio/sonumbra-de-vincy/

This is a link to the artist page ^

This is the video of the art ^

For this Looking Outwards I was really inspired by Arden Wolf’s commentary on her Looking Outwards assignment 4 about the intersection between computation and sound. Her commentary was about Sonumbra de Vincy, a site specific artwork that is called a Responsive Light Emitting Environment. The Sonumbra de Vincy is designed to be a commentary on extreme weather changes and climatic swings in the atmosphere. These changes are being explored in this artwork through sound, light and human interaction with the installation itself. I really agree with Ardens commentary on the hearkening the structures to trees to resonate with the climate changes in the artist’s intention. Arden’s commentary delved into the technology that the artist used to create it, but not much behind the concept of extreme weather and such of the artwork– but more the world context of the work.

Project 9 Liz Maday

finalfinal2

//Elizabeth Maday
//Section A
//emaday@andrew.cmu.edu
//Project 9

var theImage;

function preload() {
	theImage = loadImage("https://i.imgur.com/zBgacYu.png");
}

function setup() {
	createCanvas(400, 480);
	background(0);
	theImage.loadPixels();
	frameRate(100);
}

function draw() {
    translate(-10, -10);
    
    var x = random(width);
    var y = random(height);
    var col = theImage.get(x, y);

    stroke(col);
    var lengthmap = constrain(map(15, 0, mouseY, 0, 20), 5, 50);
    var weightmap = constrain(map(3, 0, 10, 0, mouseX/50), 0.2, 5);

    push();
    strokeWeight(weightmap);
    line(x + random(-20, 20), y + random(-10, 10), x + lengthmap, y + lengthmap);   
    pop();

    if (mouseX > width/2) {
        fill(col);
        ellipse(x, y, 2, 2);
    }
}

 

 

 

 

 

 

I liked working on this project because I got to see all the things that I could play around with while working in this format of altering a pre-existing image. I am interested in doing more creative things with this in the future. For this project, I used the position of the mouse to manipulate line length, strokeWeight, and whether or not ellipses are drawn.

Audrey Zheng – Project 09

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Project 9

var img;

function preload() {
	var me = "https://i.imgur.com/iiz3eb4.jpg";
	img = loadImage(me);
}
function setup() {
    createCanvas(480, 480);
    background(0);
    img.loadPixels();
    frameRate(100);
}

function draw() {
	var px = random(width);
	var py = random(height);
	var ix = constrain(floor(px), 0, width);
	var iy = constrain(floor(py), 0, height);
	var color = img.get(ix,iy);

	noStroke();
	fill(color);
	shape(px,py,random(4,9),random(9,15));

}


function shape(x, y, r, n) {
  var angle = TWO_PI / n;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * r;
    var sy = y + sin(a) * r;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

Alessandra Fleck – Project 09 – Portrait

sketch

//Name: Alessandra Fleck 
//Class Section : B
//Email: afleck@andrew.cmu.edu
//Project-09


var photo; //variable to hold image

function preload(){ //load photo being used off of Imgur
    var myImageURL = "https://i.imgur.com/vCkP5dD.jpg";
    photo = loadImage(myImageURL);
}

function setup(){
    createCanvas(480,480);
    background(0); //sets background to black
    photo.loadPixels();
    frameRate(100000000000000); //load photo pixels quicker
}

function draw() {
    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 = photo.get(ix, iy);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, 50, 5); //create flat ellipses
}

For this assignment I wanted to do a portrait of my sister. I chose this image because of the painting like qualities of it, despite it being an unedited photo. To capture a more oil painting-like stroke, I played with the ellipse height and width. As noted from the process, the wider the ellipse was, the more difficult it was to get the colors to lay and create the image so I kept it relatively shorter in the end.

Xindi Lyu-Project 09-Portrait-Section A

sketch

 
/*
Project 09
Xindi Lyu
Section A
xindil@andrew.cmu.edu
*/

var x
var y
var me;
var Color=["indigo","cyan","grey","yellow","white","pink","claret","green"]
var numbers=[0,1,2,3,4,5,6,7]
var a

function preload() {
    //load in my self portrait
    var URL = "https://i.imgur.com/pjDKzf3.jpg";
    me = loadImage(URL);
}

function setup() {
    //drawing the image
    createCanvas(300, 480);
   frameRate(150);
    me.loadPixels();
    
}

function draw() {
    //Get the colors of the pixels
    x = random(width);
    y = random(height);
    var mx = constrain(floor(x), 0, width-3);
    var my = constrain(floor(y), 0, height-3);
    var theColorAtLocationXY = me.get(mx, my);

    //Enable mouse interactions to gerate stroke elements
    var mousecolor = me.get(mouseX, mouseY);
    //Using lines as pixels
    stroke(theColorAtLocationXY);
    strokeWeight(1);
    line(x+random(-20,20),y+random(-20,20),x+random(-20,20),y+random(-20,20));
     
noStroke();
fill(theColorAtLocationXY)
    //Use rectangles as pixels along with the lines
    rect(x,y, random(5,10),random(5,10));
    a=random(numbers);
    //Create mosaica effect with mouse
fill(mousecolor);
     strokeWeight(0.7);
        stroke(Color[a]);
        rect(mouseX,mouseY,random(5,10),random(5,10));
    }

I used a photo of myself as the base image of this project and experimented with two different strokes to generate a dynamic effect in the result portrait. Also I incorporated an interactive element into the program for the viewers to create “mosaic” effects on the drawing.

(Original Image)

(Stroke effects)

Mosaic effects

Project 09: Portrait

sketch 

var underlyingImage;

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

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

function draw() {
    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);

    noFill();
    stroke(theColorAtLocationXY);
    line(px, py, px, py+24);
    
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    fill(theColorAtTheMouse);
    ellipse(pmouseX, pmouseY, 6, 6);

}

So like the code below wasn’t showing up and I literally did not understand what was wrong. I straight up have tried multiple methods of coding this, even duplicated the sample code(which should’ve worked) and it is still not returning the correct image. After a long period of troubleshooting I had to relent. I tried essentially the same code on a mac using the p5.js text editor and it finally worked. Still don’t really know what was wrong.

sketch try 2

// Samantha Ho
// sch1
// Project-09
// Section E

var underlyingImage;

function preload() {
    var myImageURL = "http://saho.studio/img/2018-06-28%2017_41_16.194.jpg";
    underlyingImage = loadImage(myImageURL);
}

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

function draw() {
    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);

    noStroke();
    fill(theColorAtLocationXY);
    ellipse(px, py, 6, 6);

   
}

looking outwards 9


I chose Rani Randell’s Looking Outwards 1 about Angela Washko’s interactive artwork titled “The Game”. This piece is a dating simulation video game which tackles examines public opinion concerning behavioral patterns and limited gender classifications such as female exploitation, sexism, homophobia and misogyny. The interactive video game came from years of research on “dating coaching” and “pick up artists,” such as Roosh V who wrote a book for men on how to pursue sex with women. I like this work because it is an interesting and empowering way of approaching this problem of misogynistic behavior in a male dominated world. I agree with Rani when she says that Angela’s piece “explores a future in which women can rebel against unwanted male attention and have more agency in a virtual world.” The virtual world is male dominated and toxic hypermasculinity where sexist, misogynist, homophobic and other intolerant behaviors are encouraged.Through her work, she initiates and creates new forums for discussions about feminism in spaces most hostile toward it.

Xindi Lyu-Looking Outwards 09


The rendering video by Alex Roman

While scrolling through my peer’s looking outwards blog posts, my attention was drawn by Xiaoying Meng’s post about photo-realistic renderings generated by computational algorithms. I generally agree with Xiaoying that the renderings done by Alex Roman is not only exquisitely detailed and realistic but also beautifully displayed with an artistic effect that is nearly impossible to be produced by pure photography. The algorithm mainly simulated the textures, the volume, as well as the light and atmosphere in this project. What’s critical about this simulation is that this algorithm is also able to simulate the behavior of the materials under certain circumstances of lighting, while also the lights themselves were generated accurately according to climate and time settings in the software, displayed as different intensities and different colors as it is in real life. What also is interesting about this computational rendering is that the “viewer” can be positioned at any any location with out the physical restraints, which is why lot of the best renderings have their incredible angles of viewing.

Jisoo Geum – 09 – Portrait

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-09
var underlyingImage;

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

function setup() {
    createCanvas(480, 480);
    background(255);
    underlyingImage.loadPixels();
    frameRate(5000);
}

function draw() {
    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);

    noStroke();
    fill(theColorAtLocationXY);
    textSize(random(5,30));
    textFont('Futura');
    text( "V", px, py);

    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    stroke(theColorAtTheMouse);
    line(pmouseX, pmouseY, mouseX, mouseY);
}

I figured that the color palette of the image would be more important than the details so I chose a photo that has all my favorite colors – green, orange, and blue. The girl in the picture is me when I was 8. I changed the ellipse shape into ‘V’ letter simply because I am making a V shape with my fingers. I had fun choosing the photos for this project!

Original image.

MirandaLuong-LookingOutwards-09

I will be reviewing Veronica Wang’s project review of Intr(e)Scapes, a landscape installation piece that can sense and react to visitors’ movement with reactive LED-based animations. Built in 2015 by SHO Architecture, Intr(e)Scapes is an installation that takes advantage of natural elements. I personally enjoy the project greatly. As someone who grew up in a crowded city without a lot of nature, this project was the perfect combination of both the natural and human-generated. I personally think it would fit great in where I grew up. As for Veronica’s analysis of the project, I think she did a stellar job. I could not agree with her more in her interpretation of the analysis as playful, tangible, and sensorial in effect. In fact, there is little to none that I disagree with as I think she’s done a neutral analysis that keeps to the facts. The one comment that I have of the project, overall, is that I think it would have been nice to incorporate further natural elements. The project uses artificial stalks that attempt to mimic natural grass and I would have thought it be more interesting if more natural elements were incorporated-perhaps real grass.

A video of the project installed in Georgetown (2015).

 

Installation view in Georgetown.

An image of the project on site at Georgetown’s Business Improvement GLOW conference.