Diana Connolly – Looking Outwards 10


Filtered Transparencies (2015), by Filipa Valente

Filtered Transparencies is an interactive art piece that “uses layered light, space and sound to create an immersive experience.” The artist uses her background in architecture to help create interactive light pieces in which the viewer gets a sense of volume, and an almost “hologram-like” environment. Please see the video below for a better understanding of how this is done:

Filtered Transparencies – LISBON 2015 from Filipa Valente on Vimeo.

I find this very inspirational because the artist is able to use light, usually a thing only sensed by our vision, to be sensed through physicality and volume. I find it interesting that Valente studied architecture for undergraduate and masters (at the Bartlett School of Architecture in London), and I like how this background influenced her interactive art. She is now based in Los Angeles, working as an architect/interactive artist. Her current area of interest involves how an individual interacts with the space around them, in terms of interactive and media art. I am unsure of the original software used to create Filtered Transparencies, but I am sure that some computing/software was used to program the interactive lights.

For more information on the project, the article cited above is here: http://cargocollective.com/limilab/Filtered-Transparencies-2-0-LISBON-2015

Hannah K-Looking Outwards-09

This week for my Looking Outwards, I decided to look at Shannon‘s Looking Outwards post from Week 1!

For her post, she looked at a sound reactive light installation by Nocte that was created in collaboration with the designer Roland Ellis. Nocte, creates light installations and responsive environments in order to engage their audience in a unique experience. Roland Ellis is a British designer based in Somerset House out of London.

I really liked this project because it engages two different senses together. The lamps are digitally controlled, and live audio can control the animations. It is both seemingly simple but complex.

I was not able to gather too much about the details of how this installation actually works, but I thought it was an amazing interactive work. I also thought that Shannon’s original Looking Outwards post was thorough and detailed, and I learned a lot just from reading her post and perspective!


Hannah K-Project-09


var myImage;
// Variables needed for lerp
var orig = color(theColorAtLocationXY);
var next = color(135, 206, 250);

function preload() {
    var goldenGateBridge = "https://i.imgur.com/jeVkTI5.png";
    myImage = loadImage(goldenGateBridge);

function setup() {
    createCanvas(414, 750);

function draw() {
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 10, width-1);
    var iy = constrain(floor(py), 10, height-1);
    var theColorAtLocationXY = myImage.get(ix, iy);

    // Creates a diagonal "line" that pulls colors
    // used in the rest of my portrait
    if(py > px) {
    rect(px, py, 10, 5); 
    else {
    theColorAtLocationXY = lerp(orig, next, 0.5);
    rect(px, py, 5, 10);

For this week’s process, I was heavily reliant on the template for creating my final product. Unless most weeks, I did not really have a drawing that I made prior to starting my final project. I decided to use a picture from a couple of summers ago when I went biking across the Golden Gate Bridge. I decided to create a diagonal “background” of sorts that depends on other colors that were used in my image.

On a final note, I am not sure why the computational portrait is not showing up on this page, even though the code is embedded. I tried re-uploading my file numerous times and embedding it, but nothing seems to work…When I open the html file associated with my code, it works though..!


Project 9 Lydia Jin


//Lydia Jin
//Section D
//Project 9

var brother;

function preload() {
	//load picture of my brother
    var myImageURL = "http://i.imgur.com/NrbfIdb.jpg";
    brother = loadImage(myImageURL);

function setup() {
	//set up canvas
    createCanvas(500, 500);
    //load 100 times in 60 seconds

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

    //draw quads
	quad(px-random(10), py-random(10), px-random(10), py-random(10), px+random(10), py, px, py+random(10));


I decided to use a photo of my brother taken in hockey uniform. I used quads to present the image to make it more cool since quads are more random than ellipses. A finished portrait looks like the one below:

Yugyeong Lee Project – 09


//Yugyeong Lee
//Section A
//Project 09

var imgYugy;

function preload() {
	var imgURL = "http://i.imgur.com/XYdrw0f.jpg";
	imgYugy = loadImage(imgURL);

function setup() {
    createCanvas(540, 700);


function draw() {

//circular pixels controlled by mouseX and mouseY
function drawYugyC () {
	var pX = mouseX;
	var pY = mouseY;
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var diam = random(5, 15);

	ellipse(pX, pY, diam, diam);

//diagonal lines at random
function drawYugyL () {
	var pX = random(0, width);
	var pY = random(0, height);
	var iX = constrain(floor(pX), 0, width - 1);
	var iY = constrain(floor(pY), 0, height - 1);
	var color = imgYugy.get(iX, iY);
	var offset = random(5, 20);
	var strokeweight = random(1, 5)

	line(pX, pY, pX + offset, pY + offset);

I was exploring on combination of diagonal lines and circles to create a pixelated portrait of myself. The diagonal lines appear at random while circular pixels can be controlled by the location of the mouse.



Yugyeong Lee Looking Outwards – 09

For this week, I looked at Shan Wang’s Looking Outwards post from week 5. The project called The Third and the Seventh by Alex Roman, a Spanish CG artist, is a 12 minute movie that illustrates architecture through series of images which he utilized rendering programs such as DSMax and V-Ray and texture work in Photoshop to create. His sensibility of clarity and light is apparent throughout the film with incredible reality of details, none of which has been filmed. I agree with Shan that the artist’s aesthetic sensibility and the techniques created a fascinating project that interestingly convey a feeling of 3 dimensional, spatial feeling in a 2 dimensional display. And to add on to that, especially after watching the film, Roman’s intricate use of the movement of light and shadow throughout his film as well as the composition is what I believe gave visual depth to this production.



//Mercedes Reys

//Section C 



//global variables 
var underlyingImage;
var px = [];
var py = [];

//pre-load images 
function preload() {
    var myImageURL = "http://i.imgur.com/FODHYaP.jpg";
    underlyingImage = loadImage(myImageURL);

function setup() {
    createCanvas(windowWidth, windowHeight);

function draw() {  

    //for loop to fill arrays
    for (i = 0; i < frameCount; i++) { 
    px[i] = random(width);
    py[i] = random(height);

    //get color
    var ix = constrain(floor(px[i]), 0, width-1);
    var iy = constrain(floor(py[i]), 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);

    //draw lines at random length and direction 


I was initially trying to go for something more complex where there would be lines and circles only drawn in the white area to create a constellation effect. That proved to be to difficult and I couldn’t get it to run, so instead I simplified it to just lines that appear in a semi chaotic matter to make a spooky face appear.


sajohnso Looking Outwards 09

In her looking outwards 06 post, Arula discussed Andrej Bauer’s random art website. Her description of the way it works and its response to user text interaction really helped me analyze the website when I visited it to analyze it myself. By expanding on her research, I found that this website is actually based on hash visualization, and implements many different mathematical functions such as sin, cos, exp, square root, division, and mix. Some critics have looked at it as a fresh look on what separates random images from “art”, and whether that distinction can truly ever be drawn.
Random Art, by Andrej Bauer n.d

The original creator’s work: https://courses.ideate.cmu.edu/15-104/f2016/2016/10/08/looking-outwards-06-4/

Project 09 – Portrait

I had a lot of fun with this project once I got the preliminaries set up.  I started out thinking that I wanted to have an image recreated by pixilation when the mouse scrolled over the image.  But then I realized that that wouldn’t work because of the constant mouse movement.  So I decided to create a more fun portrait.  The subject’s last name is displayed mainly opaque and then the picture is displayed with a spotlight on top of it.  I spent a lot of time on this image but I still want to continue working on it.

screen-shot-2016-10-28-at-11-36-32-pm beginningscreen-shot-2016-10-28-at-11-36-47-pm after one movement with the mousescreen-shot-2016-10-28-at-11-36-13-pmafter scrolling over the image multiple times


//Naomi Shimada
//Section D

var img;
var inloc = "http://i.imgur.com/XTKXPpa.png";
var distThreshold = 20;
var underlyingImage;

function preload() {
   img = loadImage(inloc);
   underlyingImage = loadImage(inloc);


function setup() {
    createCanvas(400,300);     //sets up on the background image

function draw(){
    for (var y = 0; y < height; y +=40){
        for (var x = 0; x < width; x +=40) {
            if (nearMouse(x, y, distThreshold)) {
           var c = underlyingImage.get(mouseX,mouseY);
              stroke(c);           //the stroke color is determined on the pixel underneath
              strokeWeight(1);          //creates the last name of the subject, Khalouf
              text("Khalouf", x,y);
                 image(underlyingImage, 0, 0, underlyingImage.width / 8, underlyingImage.height / 8);

    var x = constrain(mouseX, 0, img.width - 1);     //redraws the image based on mouse X and Y
    var y = constrain(mouseY, 0, img.height - 1);
    // get a subrectangle from image. x and y (upper left corner)
    // should be within the image.
    var smaller = img.get(x, y, 100, 100);
    image(smaller,x, y, 120, 120);
    ellipseMode(CORNERS);        //puts a "spotlight" on the center of the image

function nearMouse(x, y, d) {
    return dist(x, y, mouseX, mouseY) < d;


Rhea’s post for Looking Outwards 2, about William Latham, was fascinating. He creates these cool-looking computer generated graphics using what he calls the “mutation” code that almost look like organisms. They’re almost mistakable for actual images of viruses or the like.
I find these specific generations of his fascinating, though I would like to see more of his work.