Looking Outwards 9

I really like Alison’s choice of Moritz Stefaner’s Project Ukko. I agree with her assessment that it is very user friendly. The visualization of the wind patterns through tilt, thickness of line, and color is very easy for anyone to read and also does not demand extensive time because it is so accessibly done. Originally when I just saw the still of the project and hadn’t yet read Alison’s review or checked out the webpage, I had thought that it was a piece of artwork because it looked so artful. I really appreciated that Stefaner found a way to make a mathy area accessible to humanities students and to give beauty to what might not seem beautiful on the surface.

Project

Alison’s Post

screen-shot-2016-10-28-at-11-42-24-pm

rgriswol_project-08

For this project, I decided to use a more amusing photo of my boyfriend.

feat. Justin Bieber cutout
feat. Justin Bieber cutout

I used randomly generated squares, which change size depending on the position of your mouse. Here’s some examples of what it might look like:

1

2

3

I tried to get the picture to generate on the faster side, though this was about as fast as I could make it, because even if I made the frame rate 2000 it didn’t appear to be faster than 50.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 08
*
*/

var underlyingImage;

function preload() {
    var cem = "http://i.imgur.com/yOjwaHP.jpg";
    underlyingImage = loadImage(cem);
}

function setup() {
    createCanvas(422, 750);
    background(255);
    underlyingImage.loadPixels();
    frameRate(50);
}

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 colorXY = underlyingImage.get(ix, iy);

    noStroke();
    fill(colorXY);
    rect(px, py, mouseX/10, mouseY/10);
}

Looking Outwards 9 Lydia Jin

Today I am responding to Sihan Dong’s looking outwards on the Tilt Brush project .
Original link to project: Tilt Brush

 

Tilt Brush by Google, created in September 2014. 

The Tilt Brush project idea is fascinating and I am impressed with how much virtual reality can do for us. I agree with Sihan’s comments about the basic facts of the Tilt Brush. I also like how she talked about how the tilt brush’s function in adding in the audio element to virtual reality is going to attract more people to experience VR. It is also true that Tilt Brush does not let the public in on their algorithm which I hope they did because the idea seems very interesting and magical to me. One thing that I would like to add is a brief explanation on how this works. Which can be found on the website. I recommend this addition because I don’t completely understand how the brush works when I first saw the video as the concept is a bit vague. Also it would be great to add the year and creator of the tilt brush.

Looking Outwards 9 – Sofia Syjuco

Look Good In
Shannon Case Looking Outwards
null
Anna Powell-Smith
Look Good In

In looking through previous Looking Outwards posts, I found Shannon Case’s post on Anna Powell-Smith, a web developer. Shannon links to a website that Powell-Smith designed, which gathers shoes that are being sold all over the UK, and places them in one repository that can easily be searched through, with filters that range from the ordinary (size or price), to the more creative (style, color, toe, heel, back).

I think that the cited project is really quite interesting, and I very much respect Anna Powell-Smith for her work. But I disagree with Shannon that this a project to admire. While it is a change of power dynamic from usually male-created capitalistic ways of selling women products, it is simply a website that links to more things to further perpetuate our consumer society.

Sofia Syjuco – Project-09

sketch
Screenshot of Portrait

var portraitPhoto; // variable to store the photo link
var colorAtPixel; // variable to store the color
var ellipseSize = 20; // variable to store the ellipse size

function preload(){
  portraitPhoto = loadImage("http://i.imgur.com/sn5iIEZ.jpg"); //load in the portrait photo
}

function setup() {
  createCanvas(800,800); // create a canvas at the photo's dimensions
  portraitPhoto.loadPixels(); // load in the pixels for the photo
}

function draw() {
  background(255);// draw in a background
  noStroke(); // no strokes around shapes
  
  
  for(var r = 0;r<=width+1;r+=ellipseSize){ // go through all the rows of pixels
    for(var c = 0;c<=height+1;c+=ellipseSize){ // go through all the columns of pixels
      colorAtPixel = portraitPhoto.get(r,c); // check what the color is in the photo
      fill (colorAtPixel); // fill it with that color
      ellipse(r,c,ellipseSize,ellipseSize); // draw a circle
    }
  }
noLoop();//just run draw once
}

I was very intrigued by the work of Danny Rozin, and how just that simple repetition of shapes could still manage to convey human features – but I wanted to work with color, not with shadows. So I tried to develop something that is in keeping with the simplicity of Rozin’s style, but incorporates colors to make the portrait more recognizably human.

sajohnso Project-09-Portrait

portrait


/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-09-portrait
* This program paints a portrait of a girl's face
*/

var underlyingImage;
    var lastY = height/2;
    var lastX = width/2;

function preload() {
    var myImageURL = "https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/10/sajohnso-girl-209x300.jpg";
    underlyingImage = loadImage(myImageURL);
}

function setup() {
    createCanvas(500, 500);
    background(0);
    underlyingImage.loadPixels();
    setFrameRate(40);
}

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);
    var distance = dist(width/2+(width/5),height/2,mouseX,mouseY); //distance from her eyes
    var lineThickness = constrain (distance, 40, distance-20); //limits brush size

//automatic brushstrokes
    var rando1 = random(2,4);
    var rando2 = random(-3,3);
    strokeWeight(4);
    stroke(theColorAtLocationXY);
    line(px-rando2, py-rando1, px+rando2,py+rando1);

//user's brushstrokes
    var theColorAtTheMouse = underlyingImage.get(mouseX, mouseY);
    strokeWeight(lineThickness/10);
    stroke(theColorAtTheMouse);
    line(pmouseX, pmouseY, mouseX, mouseY);


}

For this project, I was inspired by the example of Golan’s self-portrait, and how the result was a combination of “painting” both by the program and the user. I wanted to make a portrait look even more like a collaborative painted portrait by setting the ellipses as brushstrokes of random shape and size, and by changing the size of the brush so the “painting” would be more detailed around her eyes, and rougher around the edges. I also wanted the user to have a greater input as to what the painting would look like in the end.

screen-shot-2016-10-28-at-10-49-46-pm

Liu Xiangqi-Looking Outwards 09

What interests me a lot is this post DENISE JIANG-LOOKING OUTWARDS 06. Randomness can be represented in many ways, such as forms, shapes, colors, arrangement, but in this work, when it is static, everything is organized with a rigid pattern(without randomness). I agree with the author said “circles are organized in a rational way but the movement is not”. I admire this work because it keeps simplicity in its original form (the colors of the circle, the most simple geometry, and gird arrangement)which contrasts or highlight the movement.
Nicholas Hanna

Owen Fox Looking Outwards 9

In this post I’ll be looking at this Gerhard Richter painting, entitled 4900 colors, from this Looking Outwards post. in the original post, the author pointed out that even though every color in this piece was chosen at random, the painting still seems to evoke something. I agree, and I think that the way people can find patterns in things that are totally random is really interesting. In this painting in particular, the white squares look like the outline of some sort of object to me, and I think that by curating random elements so that some of them contrast in neat ways with eachother, artists can create very evocative works of art through random processes.

I also think it’s interesting that this piece, with each square painted at random, is indistinguishable from paintings where the artist chose colors deliberately. This kind of serialized art could potentially be made without an artist at all, and that’s cool to see in a very ego-driven medium.

Richter’s work can be found here.

Project-09

I thought it would look interesting if the picture had three “clones” of my roommate.

sketch

//Arula Ratnakar
//Section C
//aratnaka@andrew.cmu.edu
//Portrait




var picture;


function preload() {
	//loads picture of roommate 
    var img = "http://i.imgur.com/DVFUfQO.jpg";
    picture = loadImage(img);
}

function setup() {
    createCanvas(500, 500);
    picture.loadPixels();

    
}

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 = picture.get(ix, iy);


  
    noStroke();
    fill(theColorAtLocationXY);
    drawMultipleFaces()


    function drawMultipleFaces (){ 
    	ellipse (px, py, 6,6)
    	
    	push ()
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)
    	
    	rotate (radians(degrees(20)))
    	ellipse (px, py, 6,6)

    	pop()
    }

   
    
}

index

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>

    <!-- Uncomment the lines below to include extra p5 libraries, or 
         use template-all or template-all-min:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
    -->

    <script src="sketch.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>