Blog

Some Basic Thoughts on Data Visualization

Here's the PDF for a short presentation I gave on data visualization. The presentation includes some basic projects. Unfortunetly, my thoughts on these projects are not on the presentation (which is probably the most important part). Lecture - Data Visualization - Type 2 Examples:  http://fathom.info/projects/popsci.html http://datavisualization.ch/showcases/visualizing-friendships-on-facebook/ http://cinemetrics.fredericbrodbeck.de/ My Own Projects:  http://thejsj.com/pieces/statistical-painting-analysis/ http://thejsj.com/pieces/my-friends-on-facebook/ http://thejsj.com/pieces/random-trends/

Appropriation - Class Proposal

This is a PDF with the syllabus for a class I am proposing to give next spring as part of my teaching practicum course, here at VCU. Course Syllabus - April 2

Great Artists Do What?

Apparently, the famous Picasso quote was actually uttered by T.S. Eliot. Here is a quote from one of his actual books: One of the surest tests [of the superiority or inferiority of a poet] is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest. Eliot, T.S., “Philip Massinger,” The Sacred Wood, New York: Bartleby.com, 2000 Taken from: http://nancyprager.wordpress.com/2007/05/08/good-poets-borrow-great-poets-steal/ It's impressive how popular a quote that was never said can become...

AnIntroductionToProcessing

This post attempts to give a short, concise introduction to Processing and it's usefulness. 1. Downaload the Program http://processing.org/download/. 2. Open up the program. 3. Setting up your PDE. Every PDE(file extension for Processing) has to main have two function that should always be part of your document: setup and draw.You should write them like this: void setup(){ } void draw(){ } In the setup function, you typically write the size, background, and frame rate of the "Sketch" (The name given to a PDE file). void setup(){ size(screen.width, screen.height); //This makes the sketch the size of your screen background(255); //This make your sketch have WHITE background frameRate(99999); } You can also setup other values such as colorMode, default strokes and fill, if it loops or not... void setup(){ size(screen.width, screen.height); //This makes the sketch the size of your screen background(255); //This make your sketch have WHITE background frameRate(99999); colorMode(HSB, 360,100,100,100); // Hue, Saturation, Brightness, Alpha stroke(0); noLoop(); } 4. Starting to draw(); //Simple draw functions The main advantage of Processing over HTML/CSS is in the fact that it is made precisely for creating visuals. It is much more powerful in this regard than most technologies associated to the web. In this first funciton we are going to draw some simple geometry. Then we will start making it dynamic. void draw(){ line(0,0,width,height); ellipse(0,0,width,height); rect(width/2, height/2, width, height); } As you can see, our images have a with a color. We can remove this inside color by calling the fill() function and the noFill() function. We can also use the stroke() and noStroke() function. void draw(){ stroke(255,0,0); //Red line(0,0,width,height); fill(0,255,255); //Cyan ellipse(width/2, height/2,100,100); noFill(); stroke(0,0,255); //Blue rect(width/2, height/2, width, height); } Now, let's make this dynamic. We will set up a variable and make it increase to increase the size of the circle continually. public int sze = 0; void draw(){ stroke(255,0,0); //Red line(0,0,width,height); fill(0,255,255); //Cyan ellipse(width/2, height/2,sze,sze); noFill(); stroke(0,0,255); //Blue rect(width/2, height/2, width, height); sze++; } We can also make the size of the circle random by changing the r every instance of the loop. public int sze = 0; void draw(){ stroke(255,0,0); //Red line(0,0,width,height); fill(0,255,255); //Cyan ellipse(width/2, height/2,sze,sze); noFill(); stroke(0,0,255); //Blue rect(width/2, height/2, width, height); sze = int(random(0,height)); /* 3 important things 1. We don't re declare the variable. We only have to put the "int" preface when we declare the variable the first time. If will throw an error if you do otherwise. 2. There are four main types of variables: int, float, String and boolean. Float is and int with decimal numbers. Random gives out and float, not an int, so you have to convert it to an int by wrapping it up in int(float). 3. You establish two numbers with Random: the least possible number and the highest number you want to give it. We give it "height", because we don't want to circle to be bigger than the height. */ } We can also make the position of the circle random. public int sze = 0; public float x = 0; public float y = 0; void draw(){ stroke(255,0,0); //Red line(0,0,width,height); fill(0,255,255); //Cyan ellipse(width/2, height/2,sze,sze); noFill(); stroke(0,0,255); //Blue rect(width/2, height/2, width, height); sze = int(random(0,height)); x = random(0,width); y = random(0,height); } If you're a graphic designer, you will probably have to put some text in this. For that you use the text() function. void draw{ fill(0); textSize(24); text("Hello, my name is Jorge", width/2, height/2); } Let's make this a little more interesting. void draw(){ float r = 0; float g = 0; float b = 0; float x = width/2; float y = height/2; x = random(0,width); y = random(0,height); r = random(0,255); g = random(0,255); b = random(0,255); fill(r,g,b); textSize(24); text("Hello, my name is Jorge",x,y); } 5. Making it a little interactive. What if you sketch responded to your mouse? How about making your sketch a small paint program? public int xStart = 0; public int yStart = 0; void draw() { //Nothing } void mousePressed() { xStart = mouseX; yStart = mouseY; } void mouseReleased(){ stroke(0); line(xStart,yStart, mouseX, mouseY); } 6. Exporting I know what you are thinking. I can't use this outside the program? This isn't even useful, for me... well, you can export all these things into Images and also into PDF's that you can later edit(you can edit them as vectors if they are a PDF). void keyPressed() { if (key == ENTER) { saveFrame("Export.png"); } } You can also export to PDF using this method. import processing.pdf.*; void setup(){ size(screen.width, screen.height); //This makes the sketch the size of your screen background(255); //This make your sketch have WHITE background frameRate(999); beginRecord(PDF, "frame.pdf"); } public int xStart = 0; public int yStart = 0; void draw() { //Nothing } void mousePressed() { xStart = mouseX; yStart = mouseY; } void mouseReleased(){ stroke(0); line(xStart,yStart, mouseX, mouseY); } void keyPressed() { if (key == ENTER) { endRecord(); exit(); } } 7. Top 5 thing I left out 1. Importing Fonts: You can import any font you want into Processing and use it in you sketch. http://processing.org/reference/textFont_.html 2. There are a BUNCH of libraries that you can import, to use Processing in many other different ways. http://processing.org/reference/libraries/ 3. You can use Images in Processing by loading them into the system and calling them. http://processing.org/learning/basics/loadingimages.html 4. You can create Loops to do all kinds of stuff with the for() statement. http://processing.org/reference/for.html 5. You can use Processing on your web pages with the CANVAS statement. http://processingjs.org/ 8. Example Projects My Projects with Processing http://thejsj.com/2011/mfa/painting-analysis/paintings.php http://thejsj.com/2011/mfa/my-friends-on-facebook/ http://thejsj.com/2011/mfa/human-vs-computer/ http://thejsj.com/pieces/random-trends-process-book/ http://thejsj.com/pieces/357/ Other Projects http://jmartinho.net/digitalArt-html5/index.php?art=tr-lines http://www.thegreeneyl.com/mit-media-lab-identity-1 http://vimeo.com/22955812 http://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data

Course Description: Copy, transform and Combine: The designer as editor

Description The information age has brought upon new challenges to the idea of originality. The individual genius has disappeared and a new paradigm of creation has replaced it. Creation is the 21st Century is made through copying, transforming and combining old ideas. The field of design is no exception. This course will tackle a new form of creation with the idea of the designer as editor. The designer is the one who successfully chooses and dismisses, not the one who creates out of nothing. The course will introduce students to new ways of incorporating these ideas into there processes in a multi-medium course. Course Objectives To investigate the possibility of creating visual work through the copying, transforming and combining the works of other designers in conjunction with an examination of the different types of copying. To develop new methodologies and processes that incorporate the integration of other’s work with the work of the student. To study the theoretical implications of the different types of copying in the field of graphic design. To examine the ethical component of copying, trying to draw the thin line between ‘influence’ and fraud. Content This course will be structured through the different categories/methodologies of “copying” (some current possibilities are repetition, appropriation, emulation, replication). Each section will have an introductory lecture with an accompanying project. An approximate 1 to 2 weeks will be give for every project with a culminating final project.

Editing in Cinematography

A very important part of Cinematography is the editing between sequences. These are as important and the shot themselves and the way in which a film is edited gives it its fell and pace. Here are three very good examples of film editing. They are all very different, showing the range of possibilities for this activity. 1. Le Quattro Volte https://www.youtube.com/watch?v=-iJMbh51fb8 0:54:55 - 1:00:07 This film is the most simple of all to be shown. It involves very long and paused shots. Through the cinematography, a tree is turned into a character. Through the editing and shot length a keen and deep sense of time is embedded into the visual flow of the scenes. This film goes against the modern day shot length and instead goes for a much longer one, that goes hand in hand with the pace of life of this little Italian village. The black screen for 15 seconds is not a very common sight in modern day movie editing, but serves the film very well in its intention to show a deep sense of time. The editing seems to focus on a very detailed look of this characther. 2. North by Northwest http://www.youtube.com/watch?v=Tkgl4UZLCbo The editing in this scene accentuates the opposition between these two elements: the character and the plane. It is through the editing that we can see how the conflict between them and it is through the editing that this conflict is intensified. 3. Cidade de Deus 0:54 - 4:15 http://www.youtube.com/watch?v=RoNATPsOsZk This on the other hand is a fairly complex scene. I like how the action starts by focusing on the details of the place (the knifes, the guitar, the chicken, the peeling of the vegetables, the cooking). It is by the addition of all these details that we start to get a feel for what is happening. When the chicken escapes, we then get a glimpse of the first character (Ze pequeno) and the cut between the kids chasing the chicken and him. As if that wasn't enough, then the second main character is introduced and through editing of all these simultaneous event that come together at the end, we get the introduction to the film.