Andrew – [OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE

AndrewWang-Final-Project-PaintTool

*Sorry this was submitted a day late (I still have a grace day if that counts), I was really busy and thought I had submitted it earlier. I actually finished it last week, but wanted to hold off submitting it in case I decided to change anything.

I deployed the project using Zeit onto https://ns-dmpwapvltg.now.sh/

For my project I tried to replicate a paint program that allows the users to draw things using tools. I started with the generic tools such as pencil, rectangle, ellipse, eraser, text, and line, creating an object to add to an array that is drawn over each time draw() is ran.

I then created a way to both undo and redo objects using z and y by popping the last element in the drawn array onto a stack, and moving pieces from the stack back to the array when redoing. The stack is cleared if the user draws again. I also made it possible to save the image by pressing s, redrawing over the text tool bar to allow for a cleaner saved image.

I used prompt in order to get the values that the users would need to input when using these tools, otherwise piping to a default value to avoid nils. If I had more time I would have created form fields that the user would be able to interact with more freely and less intrusively.

files:

104-project

Andrew Wang – Final Proposal

I will be trying to implement a drawing application that simulates Microsoft Paint. There will be functionalities to allow for erasing, box draw, circle/sphere draw, text input, and changing specific font, color, and weight settings. I will also be implementing the ability to capture and save the image that is drawn. If time allows, I was also thinking about adding the ability to hit start, stop, and record a video of the drawing sequence.

To create this I’m planning on drawing white over the canvas for erase, box, circle/sphere, and text input can be handled using the p5.js framework along with screen-capture. I was thinking about having the video function be created by taking constant screen-captures and and at the end calling some library to help create a gif out of the pictures. I’m not sure if p5.js handles this capability, but I’m sure a lot of libraries exist out there to help with this type of issue.

Example wireframe:

AndrewWang-LookingOutwards-12

Traces

– 2008

Barrel Distortion – Philip Rideout – 2011

Screenshot

Chris O Shea’s work emphasizes visualizing fluid motion. Although in this project he primarily focused on car paths, this technique could be applied to many different patterns as well. I really like time lapse as a form of visualization, and I believe that it can provide key insight and allow patterns to form from data that previously might look disoriented. On the flip side, Philip Rideout’s project focused more on the nature of one object. In this case he distorts barrels using vertex based techniques. By applying these techniques he is able to view the barrels under a comprehensive list of conditions and gain more insight into the object’s structure this way.

Although their work appears different, I believe they are actually quite similar in that they both try to explore and gain insight into objects and scenarios. Philip’s work does this with objects while Chris’ work applies to scenarios and larger scale activities. These two stood out to me as I feel that a missed opportunity could be a combination of both cases. I think it would be very interesting to see a project that combines the two aspects and observes an object in certain scenarios and evaluates its form and condition.

AndrewWang-Project-11

sketch

var myTurtles = [];
var img;
function preload(){
    img = loadImage("https://i.imgur.com/eQWbexS.png");
}
function setup() {
    createCanvas(600, 400);
    var turtle = new makeTurtle(width/2, height/2);
    turtle.setColor("yellow");
    turtle.setWeight(4);
    myTurtles.push(turtle);
    strokeJoin(MITER);
    strokeCap(PROJECT);
   
}
function mousePressed(){
    //creates new turtle on mouse click
    var ranColor = random(0,255);
    px = random(0,width);
    py = random(0,height);
    turtle = new makeTurtle(px,py);
    turtle.setColor('yellow');
    turtle.setWeight(4);
    myTurtles.push(turtle);
}

function draw() {
    //draws image
    background(255);
    image(img, 0, 0, 600, 400);
    //draws firefly 
    for(i=0; i<myTurtles.length; i++){
        myTurtles[i].penDown();
        drawTurtles(myTurtles[i]);
        myTurtles[i].penUp();
    }
}

function drawTurtles(turtle){
    //draws a firefly
    angle = random(-90,90);
    distance = random(0,3);
    turtle.right(angle);
    turtle.forward(distance);
}
////////

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtlePenDown() {
    this.penIsDown = true;
}


function turtlePenUp() {
    this.penIsDown = false;
}


function turtleGoTo(x, y) {
    if (this.penIsDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, x, y);
    }
    this.x = x;
    this.y = y;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
}


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penIsDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  penDown: turtlePenDown, penUp: turtlePenUp,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

I wanted to replicate the effect of fireflies using the turtles. I made them move randomly and change direction randomly in order to do this over a dark relevant background.

AndrewWang-LookingOutwards-11

‘Spicule’ by Yaxu – Album as a live coding device on Pi Zero

-2016

Spicule allows for tracks to be remixed and reworked in a TidalCycles live coding environment. I really like the fact that the live coding environment that allows the user to play with the tracks for free and is a complex remixing tool that has high functionality. It uses the Haskell pure functional programming language and ultimately lets patterns be composed and combined with expressive code. Patterns are represented as functions of rational time, which allows time to be manipulated to create complexity.

I think this project is really cool because it allows for so much user expressiveness. It provides the tools for the user to dissect the provided tracks in such a way that it really becomes their own music, and I think that is something admirable.

AndrewWang-Project-10

sketch

//Andrew Wang

var cars = [];
var count = 0;

function setup(){
    createCanvas(600,400);
    background(0,255,0);
    createCars();
    rectMode(CENTER);
    noStroke(); 
}

function draw(){
    count+=1
    //calls create cars every 200 counts
    if (count%250==0){
        createCars();
    }
    //draws the road
    fill(223);
    rect(width/2,height/2,600,200);
    fill("yellow");
    //yellow stripes on road
    for(i=1;i<=8;i++){
        rect(i*600/9,height/2,50,15)
    }
    fill(0);
    //increases cars speed and then draws the car
    for (var i = 0;i<cars.length;i++){
        cars[i].draw();
        cars[i].x+=cars[i].speed;
    }
}

function createCars(){
    //randomly creates a car for either one or both lanes
    var carChance = floor(random(1,4));
    if (carChance == 1){
        cars.push(Car(1));
    }else if (carChance == 2){
        cars.push(Car(1));
        cars.push(Car(2));
    }else{
        cars.push(Car(2));
    }
}

function drawCar(){
    //draws the body of the car
    fill(this.R,this.G, this.B);
    rect(this.x,this.y,this.carWidth,this.carHeight,this.roundness);
    fill(255);
    //draws the hood of the car
    rect(this.x,this.y,20,30);
    fill(0);
    //draws the wheels of the car
    ellipse(this.x-this.carWidth/3, this.y+this.carHeight/2,20,5);
    ellipse(this.x+this.carWidth/3, this.y+this.carHeight/2,20,5);
    ellipse(this.x+this.carWidth/3, this.y-this.carHeight/2,20,5);
    ellipse(this.x-this.carWidth/3, this.y-this.carHeight/2,20,5);
}

function Car(lane){
    //depending on the lane sets the car to that lane and then changes the car direction and starting position
    if (lane == 1){
        heightY=150;
        direction = -1
        widthX=600;
    }else{
        heightY=250;
        direction = 1;
        widthX =0;
    }
    return {x: widthX,
            y: heightY,
            roundness: random(0,10),
            carHeight: random(30,70),
            carWidth: random(50,100),
            R: random(0,255),
            G: random(0,255),
            B: random(0,255),
            speed: direction * random(0.7,1),
            draw: drawCar
           }
}

I thought it would be cool to do a birds eye view of a road simulation. I liked the fact that there was a lot you could do with the idea such as cars moving in different directions, and making sure that the cars don’t collide with each other.There was also a lot of variability that could be put into each car, such as its roundness, color, speed, and such. Overall I think it worked out decently, and although in the future perhaps it would be cool to add some more functionalities to it such as more color options or car models.

AndrewWang-LookingOutwards-10

Filtered Transparencies – Filipa Valente 2014

Filipa used interactive video projects transposed onto transparent fabrics that were could be interacted with by the audience to create holographic images and animations. It was showcased at the PASEO festival in Taos. I really appreciate the creativity that went into this artwork. I also really like how she made it an interactive experience for the audience in order to create a more personal feeling for them.

Filipa is an architect SBA/media artist who is based in Los Angeles, California. She studied to finish her BSc in Architecture at the Bartlett school of Architecture in London, and then went on to complete her Masters in Media Art and Architecture MEDIASCAPES at SciArc in Los Angeles. She has experience collaborating with several different well known architectural practices such as the Zaha Hadid Architects, Wilkingson Eyre Architects, Amanda Levete Architect, and the Synthesis Design + Architects in Los Angeles. Through this Filipa developed her own personal work and frequently participates in projects with other artists and architects.

AndrewWang-Project-09

sketch

var underlyingImage;

function preload() {
    var friendImageURL = "http://i.imgur.com/2b0zZtx.png";
    friendImage = loadImage(friendImageURL);
}

function setup() {
    createCanvas(738, 800);
    background(0);
    friendImage.loadPixels();
    rectMode(CENTER);
}

function draw() {
    var xCoord = random(width);
    var yCoord = random(height);
    var imageX = constrain(floor(xCoord), 0, width);
    var imageY = constrain(floor(yCoord), 0, height);
    var xyColor = friendImage.get(imageX, imageY);
    console.log(xyColor);
    var rectHeight = random(0,20);
    var rectWidth = random(0,10);
    noStroke();
    fill(xyColor[0]);
    rect(xCoord, yCoord, rectWidth, rectHeight)
}

Initially I wasn’t sure how I should format the picture, but after trying out some different things I took only the greyscale value out of the pixel get function, and used rectangles of varying widths and heights to create the image. I thought that it would be cool to create an effect as if the image was crafted onto a tree bark.

AndrewWang-LookingOutwards-09

Jinhee Lee – Looking Outwards 03

Artist’s Work – Dot San 2016 “SUV”

I was looking through the work of my peers and stumbled upon this interesting looking outwards report. After reading the post and information about the piece, I really agreed with everything that Jinhee said in his original post. There were a lot of subtle things that were included in the artists work, such as the detail scaling that Jinhee had mentioned.

It was also interesting looking at some of the other pieces that Dot San made, in which he actually materializes and shows the printed versions of some of his concepts / digital works. Looking at these you can really see the intricacies and details that went into the work, and also notice that a lot of his work is created for tours and exhibitions which is definitely noticeable in the finesse that his finished products show.

AndrewWang-LookingOutwards-08

benfry.com
fathom.info

The presentation was by Ben Fry. He’s an expert in data visualization and part of Fathom which is a design and software consultancy in Boston. He also codeveloped Processing which is an open source programming language and IDE. He received his Ph.D. from the MIT Media Lab and was also the chair of design for Carnegie Mellon’s School of Design.

Some things I noticed about his presentation was that he used a lot of useful infographs that attract the attention of the audience. He starts off very basic and also uses a little bit of information shock value to grasp the audience’s attention. Afterwards he goes into a little more detail about his actual project. I think I can take a lot away from this presentation, however, there were some things I wasn’t a fan of either. Some slides were a little too packed with information and it wasn’t possible to internalize all the information.

The main project that Ben is working on is to take their clients data, and create patterns and narratives that the audiences can relate to. Allowing better understanding of topics like global gender gaps to gas turbine rhythms. Essentially trying to make more sense of the world.