For this Looking Outwards assignment, I chose to look at Flora’s blog post from last week. Flora’s post mentioned how she really liked the “Summer ’91” piece by Sarah Groff Hennigh-Palermo because the work had a smooth visual flow, with mesmerizing warm tones. I thought this was accurately describing the work because upon first glance at the work, I immediately thought of a hot summer day, but an enjoyable type of hot weather. It’s very appealing to the eyes especially during dark seasons and cold weather right now.
I think that in order to add to this discussion, Sarah’s type of artistic style should be talked more in-depth. Upon looking at her portfolio of modern artwork, it was very apparent that her work tends to relate to the “rare aesthetic/deeply hidden memories” trend, where the art tends to remind you of something you’ve seen long ago.
According to Sarah’s own website, my assumption about her art style was correct because she claims to focus on “hybrid nostalgia” with her work. I always tend to find these aesthetics amusing because in a way, it gives me deja vu or a quick glimpse of an old, fading, memory.
This is “Summer ’91” by Sarah Groff Hennigh-Palermo.This is “Make Manifest” by the artist. This is the one that for some reason gave me ‘deja-vu’ vibes, and reminded me a lot of familiar images that I seem to remember from a while ago.
This week for Looking Outwards, I looked at Tian’s Looking Outwards post on Stamen Studios as part of interactive informational visualizations. He specifically looked at a map looking at bird populations in National parks. I wanted to write and learn about this topic this week because I felt that he really communicated the importance of interactive maps that allows people to look at an issue from multiple perspectives simultaneously. I think it’s a good way of communicating massive amounts of information with lots of different variables. I think that this particular example definitely helps support how interactive data can achieve ways of communication through motion and interaction that regular types of data visualization might not be able to do.
Another project I was drawn to from the same studio/artist is PENNY, which uses an AI to estimate wealth levels of an area based on images. While not entirely guaranteed to be accurate, there is a lot of consideration for signs of areas of low socio-economic welfare in a more directed way. I think that overall, there is a lot of consideration for the unique ways that digital information can be uniquely synthesized and used to make data collection and analysis easier.
var img;
function preload () {
img = loadImage("https://i.imgur.com/iVbKAY2.png"); //preloading image
}
function setup() {
background(220);
img.loadPixels();
img.resize(img.width/6, img.height/6);
createCanvas(300, 300);
}
function draw() { //the program draws a line between two random points in the color that is the average of the two points
var dist = map(mouseY, 0, height, 0, 250);
var point1X = random(-50,350); //making the boundaries slightly larger than the canvas so the edges are filled in evenly
var point1Y = random(-50, 350);
var point2X = random(point1X-dist, point1X+dist);
var point2Y = random(point1Y-dist, point1Y+dist);
var point1col = img.get(point1X, point1Y); //retrieving color from both points
var point2col = img.get(point2X, point2Y);
var linecol = img.get((point1X+point2X)/2, (point1Y+point2Y)/2); //getting the line color by using the point between the ends
stroke(linecol);
strokeWeight(3);
line(point1X, point1Y, point2X, point2Y);
}
My program uses lines varying in length to draw my face. The length of the line drawn is semi-randomize, getting larger as mouseY increases. I wanted to use lines because I thought it would be a little more visually interesting then a simple pixel. I like the fact that the image can be more or less abstract depending on what you want.
let img;
let smallPoint, largePoint;
var angle = 0
function preload() {
img = loadImage("https://i.imgur.com/43WGeu8.jpg");
}
function setup() {
createCanvas(500,500);
imageMode(CENTER);
noStroke();
background(255);
img.loadPixels();
}
function draw() {
//retrive the image pixels in different sections to be able to assign specific
//pixel sizes for each section
let x = floor(random(img.width));
let y = floor(random(img.height/4));
let y1 = floor(random(img.height/2));
let y2 = floor(random(img.height/4*3));
let y3 = floor(random(img.height));
let pix = img.get(x, y);
let pix1 = img.get(x, y1);
let pix2 = img.get(x, y2);
let pix3 = img.get(x, y3);
//pixels are drawn where the mouse location is
let pixM = img.get(mouseX,mouseY);
//when the mouse is pressed, make the rectangles horizontally oriented,
//sizes change according to mouseY value
if (mouseIsPressed){
fill(pix3);
rectMode(CENTER)
rect(x,y3, 50, mouseY/50);
fill(pix2)
rect(x,y2, 25,mouseY/100)
fill(pix1)
rect(x,y1, 10, mouseY/150)
fill(pix)
rect(x,y, 5, mouseY/200)
fill(pixM)
rect(mouseX,mouseY,5,10)
}
//naturally, rectangles are vertical. They are larger at the top of the canvas
//and towards the bottom, get smaller in size to get fading away/gradient effect.
//get larger proportionally (across different sections) as mouseX increases
else{
fill(pix);
rectMode(CENTER)
rect(x,y, mouseX/50, 50);
fill(pix1)
rect(x,y1, mouseX/100,25)
fill(pix2)
rect(x,y2, mouseX/150,10)
fill(pix3)
rect(x,y3, mouseX/200,5)
fill(pixM)
rect(mouseX,mouseY,5,10)
}
}
//when the mouse is clicked, the colors invert
function mousePressed(){
filter(INVERT)
}
I had a lot of trouble with being able to manipulate the individual pixels – I wanted to make the pixels deliberately dynamic and varied, which I had trouble with because I couldn’t change them after they appeared. So, my solution was the divide up the image canvas – when I was using the “get pixels” function, I only retrieved the pixels for portions of the image. This way, I could depict those different portions with different pixels. I chose to use rectangles throughout, but of varying sizes across the different portions of the canvas in order to create the effect that the picture is fading or loading into existence. The sizes of the rectangles furthermore varies proportionally across the sections according to the mouseX location. When the mouse is pressed, the rectangles are oriented horizontally instead. I also added an invert filter that creates color interest when the mouse is clicked.
The piece I looked at was Ryoji Ikeda’s 2013 work titled Test Pattern, originally posted by Maggie. The piece is a large-scale sound and light installation. It features huge flashing barcodes being projected onto the floor (and, in some versions, walls) of a large open space accompanied by loud rhythmic sounds.
In the post Maggie goes into detail about the physical setup of the space and the code behind it. To add to this, I will say this piece initially caught my attention because of the scale. I am always drawn to huge installations like this, especially one’s as sensorily intense. I also love the abstract and interpretable quality of the piece. Ikeda is purposely vague about the meaning behind the work, stating, “I don’t really want to speak about any concepts. Because there are no concepts.”
This whole portrait is a picture of me sitting on a ledge outside of CFA, comprised of tinted covers of some of my favorite albums of music. It really took some experimentation to get the number of blocks correct, since with too many it would crash the program and with too few you couldn’t really notice the image. Tint() also wasn’t very happy with the original covers, so I had to edit them to make sure the colors would appear correctly. Finally, I added a random component to their generation just to add something interesting as they loaded in.
var pic;
var pixel = []
var covers = []
function preload(){ ///loads the album covers from the imgur posts
var coverFile = []
pic = loadImage("https://i.imgur.com/9if5OBK.jpg") ////some of my favorite albums to play on guitar and listen to
coverFile[0] = "https://i.imgur.com/vh9pN9D.png"
coverFile[1] = "https://i.imgur.com/ojxUjeG.png"
coverFile[2] = "https://i.imgur.com/udq9ixk.png"
coverFile[3] = "https://i.imgur.com/CgaJ3WV.png"
coverFile[4] = "https://i.imgur.com/JjaAoNi.png"
coverFile[5] = "https://i.imgur.com/BBocb2g.jpg"
coverFile[6] = "https://i.imgur.com/qx4C4pJ.jpg"
coverFile[7] = "https://i.imgur.com/hrqxmIj.jpg"
for (var e = 0; e < coverFile.length; e++) {
covers[e] = loadImage(coverFile[e]);
}
}
function drawPixel(){ ///draws and colors each album cover
tint(pic.get(this.x, this.y))
image(covers[this.selection], this.x, this.y, 20, 20)
}
function makePixel(pixSelect, pixX, pixY){ ///creates the individual pieces of the portrait
p = {x: pixX, y: pixY, selection: pixSelect,
drawFunction: drawPixel
}
return p
}
function setup(){ ///loads each pixel of the image, creates a square, and sends it to an array
createCanvas(480, 480)
frameRate(100)
pic.loadPixels()
noStroke()
for (i = 0; i <= 24; i++){
for (k = 0; k <= 24; k++){
var p = makePixel(round(random(0, 7)), i * 20, k * 20, )
pixel.push(p)
}
}
}
function draw(){ ///draws in squares randomly, up to 448, total number of the image
var p = pixel[round(random(0, 448))]
p.drawFunction()
}
During week 8, the Looking Outwards assignment focused on the creative practice of an individual. As an architecture student, I am constantly interested in the different explorations that other people connect with the study of architecture. I came across the individual that my peer, Aadya Bhartia, wrote about in that week’s blog.
Meejin Yoon is the Dean of Architecture at Cornell University. She is also an architect and designer that focuses on the relationships between space, technology, and materiality. After watching her presentation from the Eyeo Festival, I really enjoyed the aspect of interaction within public spaces through responsive and interactive technology. Throughout her presentation, I appreciated the process of her design for her projects and also the connection she makes with technology as well. Overall, I do not have any disagreement with my classmate’s overview of the work of this individual. The relationship between design and technology is constantly evolving, and there is so much more to be explored and discovered.
I read a post by Shaun Murray about Stefanie Posavec and Greg McIrney’s (En)tangled Word Bank. I think his assessment of Posavec’s style in her use of color is accurate and I also feel like she is an artist who values organized complexity. Each section features well-sorted data on each of Darwin’s revisions, and while it doesn’t fall into some sort of obvious pattern it is clearly thought out and built to be visually cohesive. It is easy to see what has been changed due to the color coding of each circle, and while they are different, they all share the same structure to convey clarity and allow viewers to really understand and make good use of her work. I think McIrney’s contributions and style also share that same creative space of controlled, thought out design and balance of color to create interest and dynamism but also present material in an easy to understand manner.
For this LO, I read Bennett’s post about Lindsay Grace. As someone who does not have a background in computer science or STEM at all and enjoys video games and computers, I am always fascinated by those who teach themselves electronics and software development. This greatly contrasts the music world, where you need years of formal training and finding your own voice to be considered an artist. According to his presentation, Grace taught himself how to create games because he could not afford to buy them. I find it incredible that he taught himself in the beginning and has advanced so far in his career as an educator. I am also inspired by the scope of his projects. He has created on his own educational games, kids’ games/apps, new media art, and more. Lindsay aims to create a cross section between video games and a wide range of topics.
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
