Post: Isabella Ouyang, Looking Outwards 06

For looking outward 09, I chose Takashi Murakami’s artwork because his work shows me good art doesn’t need too much complexity. When I think about computer-generated art I always think of complicated shapes, colors, visual effect, etc. However, as Isabella says in her post: “after scaling, coloring, placing “randomly”, it can create a sense of depth out of the superflat drawing”, even simple single prototype (the flower) can make appealing effect.

Also, the “randomness” used in the art is not completely random. Takashi Murakami must have constrained the size of the flowers, saturation of the color and composition deliberately. For example, there are always some small to medium sized white flower in between colorful flowers to balance out the various color and create harmony. I think that’s very important.

(Takashi Murakami, Flowers, flowers, flowers, 2010)


hdw – Looking Outwards – 09

This week I’m responding to this post.

I agree with my classmate’s assessment of the artist’s work. His/her work (the artist is anonymous) is really interesting because the terrains would be almost imperceptible in its artificiality, except the artist chose to add a 3-D rendered geometrically altered shape. This artistic choice made its synthetic nature obvious to the viewer. I wonder if that strengthened the artist’s purpose of creating new terrains, or if it compromised the level of realism in the terrain because of how it revealed the terrain was graphically fabricated. Nonetheless, the level of detail is awesome and a lot of attention was paid to the craft of the code. You can see more examples of the artist’s work here.

Beautifully fabricated image.



var dx = 2;
var dy = 2;
var dx1 = 2;
var dy1 = 2;
var dx2 = 2;
var dy2 = 2;
var dx3 = 2;
var dy3 = 2;
var dx4 = 2;
var dy4 = 2;
var px1;
var py1;
var py2;
var px2;
var py3;
var px3;
var py4;
var px4;
var py5;
var px5;
var py6;
var px6;
var py7;
var px7;
var py8;
var px8;

function preload(){
    var portraitURL = "";
    underlyingImage = loadImage(portraitURL);//load image
function setup() {
    createCanvas(480, 480);

function draw() {

    //draw balls in eight directions

function mousePressed() {
    //update the loaction to draw balls
    px1 = mouseX;
    py1 = mouseY;
    px2 = mouseX;
    py2 = mouseY;
    px3 = mouseX;
    py3 = mouseY;
    px4 = mouseX;
    py4 = mouseY;
    px5 = mouseX;
    py5 = mouseY;
    px6 = mouseX;
    py6 = mouseY;
    px7 = mouseX;
    py7 = mouseY;
    px8 = mouseX;
    py8 = mouseY;


function makeBall1(){

    var ix = constrain(px1, 0, width-1);
    var iy = constrain(py1, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);//get the color at that pixel
    //keeping drawing balls along its motion
    px1 += dx1;
    py1 += dy1;
    ellipse(px1, py1, 6, 6);
    if (px1 >= width || px1 <= 0) {//bounces off right and left
        dx1 = -dx1;
    if (py1 >= height || py1 <= 0) {//bounces off top and bottom
        dy1 = -dy1;        

function makeBall2(){
    var ix = constrain(px2, 0, width-1);
    var iy = constrain(py2, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px2 -= dx2;
    py2 -= dy2;
    ellipse(px2, py2, 6, 6);
    if (px2 >= width || px2 <= 0) {//bounces off right and left
        dx2 = -dx2;
    if (py2 >= height || py2 <= 0) {//bounces off top and bottom
        dy2 = -dy2;        

function makeBall3(){
    var ix = constrain(px3, 0, width-1);
    var iy = constrain(py3, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px3 += dx3;
    py3 -= dy3;
    ellipse(px3, py3, 6, 6);
    if (px3 >= width || px3 <= 0) {//bounces off right and left
        dx3 = -dx3;
    if (py3 >= height || py3 <= 0) {//bounces off top and bottom
        dy3 = -dy3;        

function makeBall4(){
    var ix = constrain(px4, 0, width-1);
    var iy = constrain(py4, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px4 -= dx4;
    py4 += dy4;
    ellipse(px4, py4, 6, 6);
    if (px4 >= width || px4 <= 0) {//bounces off right and left
        dx4 = -dx4;
    if (py4 >= height || py4 <= 0) {//bounces off top and bottom
        dy4 = -dy4;        

function makeBall5(){
    var ix = constrain(px5, 0, width-1);
    var iy = constrain(py5, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px5 += dx;
    ellipse(px5, py5, 6, 6);

function makeBall6(){
    var ix = constrain(px6, 0, width-1);
    var iy = constrain(py6, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    px6 -= dx;
    ellipse(px6, py6, 6, 6);

function makeBall7(){
    var ix = constrain(px7, 0, width-1);
    var iy = constrain(py7, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py7 -= dy;
    ellipse(px7, py7, 6, 6);

function makeBall8(){
    var ix = constrain(px8, 0, width-1);
    var iy = constrain(py8, 0, height-1);
    var theColorAtLocationXY = underlyingImage.get(ix, iy);
    py8 += dy;
    ellipse(px8, py8, 6, 6);

For this project, I wanted to control the motion of the paint brush(where the points go). I thought of the motion of fireworks and decided to go with that. A firework would be made each time the user clicks on the screen. To make the drawing process easier, I made the balls bounce off the four edges of the canvas.


This is a video of the process of creating NEUROTiQ.


NEUROTiQ is a “brain animating” headpiece created by SENSOREE and designed by Kristin Neidlinger (augmented fashion designer and founder of SENSOREE). This headpiece is a knit fabric structure that is embedded with 3D printed neuron brain sensors (essentially EEG sensors), and uses those sensors to display the state of the brain through colored lights. Each of the colors represent a different emotion, and they are displayed in tandem with the brain waves of the wearer. This design premiered NYFW in 2014 at the 3D Print Show. This project is especially cool because it comes futuristic wearable fashion with technology, integrating the two seamlessly to create a beautiful piece of art. No only does it combine fashion with computer science, but also with cognitive psychology and human emotion. It’s a really unique piece, and presents a really exciting direction for future combinations of technology and fashion.

The designer, Kristin Niedlinger, is a future concepts designer. She has a background in dance, new media, and in physical therapy as a Dance Medicine specialist, and studied at California College of the Arts. She created SENSOREE as Therapeutic Biomedia, to create wearable pieces to augment “Sensory Processing Disorder.” By taking human experiences of this disorder and combing technology and fashion, she highlights a state of mind not usually seen in mainstream media.



var jisoo;

function preload() { //load the images for underlay
    var geum = "";
    jisoo = loadImage(geum);

function setup() {
    createCanvas(800, 700);
    jisoo.loadPixels(); //load up colors of the pixels from the photo

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

    ellipse(px, py, random(6, 20), random(6, 15)); //each ellipses are somewhat random to create
    //different image with a similar style


Using the sample code, I altered how the canvas would fill up. By using ellipses with no fill, I was able to create a sketchy yet vague paint style. By adding a random element to the code, I am able to create different results with the same style.



//Natalie Schmidt
//Section D

var backgroundImage;

//preload the underlying image
function preload() {
    var Natalie = [""];
    backgroundImage = loadImage(Natalie);

function setup() {
    createCanvas(480, 480);
    background(246, 234, 188);
    //load the pixels of the image

function draw() {
//based off of example code
    var px = random(width);
    var py = random(height);
    var ix = constrain(floor(px), 0, width - 1);
    var iy = constrain(floor(py), 0, height - 1);
    //vary the transparecny based on mouseX position
    var transparency = map(mouseX, width/3, width - width/3, 40, 70);
    //egt the color of the pixels, and make them semi-transparent
    var imageColor = [red(backgroundImage.get(ix, iy)),
        green(backgroundImage.get(ix, iy)),
        blue(backgroundImage.get(ix, iy)), transparency];
//draw the suns
    sun(px, py);

function sun(x, y) {
    ellipse(x, y, 15, 15);
    // bottom middle
    triangle(x - 3, y + 15/2 + 2, x, y + 15/2 + 5,
        x + 3, y + 15/2 + 2);
    //top middle
    triangle(x - 3, y - 15/2 - 2, x , y - 15/2 - 5,
        x + 3, y - 15/2 - 2);
    //left middle
    triangle(x - 15/2 - 2, y - 3, x - 15/2 - 5, y,
        x - 15/2 - 2, y + 3);
    //right middle
    triangle(x + 15/2 + 2, y - 3, x + 15/2 + 5, y,
        x + 15/2 + 2, y + 3);

Since the original photo had a lot of sunlight and light glares in it, I wanted to use a sun to help draw the image. In order to give it a little bit more dimension, I varied the transparency of the sun depending on the position of the mouse. I feel like the varying transparency also added a really nice softness ad warmth to the image, just like golden hour sunlight. I really like pointillism as an art style, so it was fun to try and re-create it for a self-portrait.

The Process:

Here’s the original:

ikrsek-Looking Outwards-10

Alka Cappellazzo is an artist and creative coder whose body of work seems to center around code-based animations. She doesn’t have a website, or any interviews and it was generally pretty difficult to find information regarding her. In a way she seems like the type of artist who likes to step out of the spotlight and let her work take center-stage for those who are interested in it. From what I was able to find however, I can say that she is currently based out of Italy and graduated from the Brera Academy of Fine Arts with degrees in New Art Technologies and Network Medias. She is also the current vice-president and co-founder of Invalid Code – an Italy based collective of “artists and programmers born to explore and spread the potential of the code.”

I want to take the time to talk about a body of work of hers, as opposed to an individual work, the series is called White Transparency and consists of a variety of animations or static images which are repetitions of graphics creating an ornamental and visually intriguing design. These patterns cleanly represent her interest in exploring the repetition of images and patterns in nature through the medium of code. Using Processing to facilitate these designs, she frequently codes these patterns while including random and noise functions so as to get some real/interesting or unexpected designs, similar to the unpredictability that nature holds with code. She also makes sure to make the code available to the audience, as she believes that code is something to be shared and expanded upon instead of huddled away and to be jealous of.

Below I am including some links to the processing pieces in addition to screenshots because I believe they are better experienced in real-time than seen in a still image.


White Transparency IV Link;height=480&amp;border=true

White Transparency IV


White Transparency II

White Transparency II Link;height=480&amp;border=true

alchan-Looking Outwards 10

(promotional image for Ooblets, by Rebecca Cordingley)

Rebecca Cordingley (or nonplayercat) is an indie game designer/ developer/ artist. She’s currently making Ooblets (alongside Ben Wasser), a game described as “Harvest Moon meets Pokémon meets Animal Crossing” due to be released sometime in 2018. Cordingley is primarly using Unity, Maya, and Mixamo to develop the game and 3d-model, along with programs like Photoshop and Illustrator.

(gifs from the in-progress game, by Rebecca Cordingley)

I really like the simplified visual style of the game, which I think works particularly well with the game’s focus. The main aspect of the project I really appreciate though is how open Cordingley has been about the game’s development, as both she and Wasser regularly share screenshots, gifs, and progress posts on the work they’re doing on the game.



[ a video synopsis of the project]

Vertical Cinema is a program of ten films by avant-garde filmmakers, musicians and visual artists, printed on 35mm celluloid and projected vertically by means of a specially developed set-up. Vertical Cinema is a site-specific cinema, a cinema attuned to the architecture of the church. What I admire about this project is how it pushes the boundaries of what constitutes a “cinema”. It first challenges the conventional projection of films horizontally by projecting it vertically. And as shown in the video, the installation distorts the films to the point where it looks like projection of light beams. It makes us ponder whether this can still be considered a “cinema”?

A little about Tina Frank:

Tina Frank is a graphic designer, media artist as well as a professor of graphic design at the University of Art and Design in Linz, Austria. She pursued her academic studies in graphic design at Graphische Lehr-und Versuchsanstalt Vienna. She was the founder & creative director for the design offices U.R.L. Agentur für Informationsdesign. Her roots were in web design and cover designs for experimental electronic music during the mid 1990s when she also started to work with digital real-time visualization, video & multimedia.

Link |

Work | Tina Frank. Vertical Cinema. Oct 12 2013


For this week, I decided to explore the projects of Angela Washko and her work with activism in the form of video games. Graduating with a degree in Painting, Drawing, and Sculpture, Washko uses her works as an artist in order to express her views in relation to feminism and activism. Washko is employed as a fellow at Frank-Ratchye STUDIO for Creative Inquiry and acts as a Assistant Professor at Carnegie Mellon.

still of The Game: The Game

Specifically, I chose to research The Game: The Game, a choice-based story in which the player acts as a female protagonist in a dating simulator visualizing the practices of several prominent pick up artists (their books pictured below).

books referenced in game

I thought it was incredibly interesting how Washko played off of the idea of visual novels/dating simulators in order to depict negative interactions and experiences that females face on a daily basis. I think that the way the graphics are depicted along with the text allows for the user to immediately feel uncomfortable yet a part of the world that Washko creates.