Graphics

From IPRE Wiki
Jump to: navigation, search
Textbook by Ira Greenberg

Jenny Chen
Mentors: Dianna Xu and Deepak Kumar

Abstract

Processing.jpg
Computer graphics is a fast growing and changing field that aids humans to a greater understanding of different kinds of data. Often times, it is easier for the human brain to process information shown in picture or movie form rather than in words or numbers. Processing is an open source object-oriented programming language that allows data to be visualized through images and animations. It was developed in 2001 by MIT students Ben Fry and Casey Reas and has been used to program images, animations, and interactions. For example, it has been used to make animated holiday cards as well as portraying complex emergent systems through artwork. It has also been used to show flocking behavior of birds and the connections between different religions around the world. Furthermore, Processing is used to make advertisements that we see on the internet and television. Thus, Processing is a useful tool that can be used to teach programming by explaining different concepts such as recursion through images and animations.

This summer I will explore different ways to create visualizations using Processing as well as explore the role of algorithms in creative media. More specifically, I would like to focus on scenes in nature. I was inspired by Andy Goldsworthy, a British artist who makes site-specific sculptures and land-art. Goldsworthy creates both permanent and temporary pieces using materials found in nature. I would like to make scenes in nature and further explore their movements, such as a sunrise and sunset, grass moving, or a rainbow after a rainstorm. Through making this series of images and simulations, I hope to gain insight from questions on both digital art and traditional art. Since multiple identical images can be made using a single algorithm while traditional art can never be identically replicated, should digital art be considered art? If so, should the code be included as part of the final project? I am approaching this project from an artist’s standpoint and will explore algorithms that can be used to make different types of images and simulations.

Goals

Starry Night by Van Gogh Example of traditional art
Error creating thumbnail: /bin/bash: /usr/bin/convert: No such file or directory

Error code: 127
Fractals Example of digital art
  • Learn and familiarize myself with Processing/Java
  • Look at philosophical standpoint of traditional art versus digital art and computer graphics
    • Questions:
    • Should digital art be considered art? If so, is the code part of the final project?
    • When using an algorithm, multiple identical pictures can be made. In traditional art, there is one final piece that can never be exactly replicated. Should each of the images made with the algorithm be considered art?
    • Some artists use programming to make art. They have and idea of what they want to create and they use programming to create that. A computer scientist thinks in code and and then produces a picture. Would a computer scientist be able to create art at the level of an artist? Similarly, could an artist write code that is as clear and concise as a computer scientist? If so, could a former computer scientist become and artist and vice versa?
  • Programming standpoint:
    • Create a series of images focusing on movements in nature.
    • Program images independent of screen size. This means that an image adjusts itself to be equally as clear regardless of screen size. Is it possible to do this in Processing without changing any code?

Daily Blog

This is where I will keep track of my work each day

Week 1 (May 24 - May 28)

Monday May 24, 2010

Code for simple shapes and colors
Image for code on the left
Today I started by looking at the Processing website. This website offers a reference guide and tutorials as to how to use Processing. It also includes sample code for different types of graphics and animations. I read about some of the history behind computer graphics and Processing. Then, I created an image with simple shapes such as rectangles and circles. I was also able to change the colors and the background colors as well as the size of the window and the shapes.

Tuesday May 25, 2010

In the morning I began by reading the Structure and Data sections on the Processing website. Later on I worked on mouse inputs. I created an image that made lines draw from one central point and continued in a circle when a mouse is moved over the graphics window. In another program, one could click the mouse on the graphics window and drag and a line of dots will be drawn where it was dragged. I also worked on boundaries and constraints. I used sample code to view and image of two concentric boxes with a circle in the inner box. I tried in create more concentric squares and make different boundaries for the circle but it did not work. Other squares in different colors appeared but the circle went behind the new squares instead of hitting the edges.

Wednesday May 26, 2010

Image for Tom Gerhardt's Mud Tub
Today I met with Deepak and Dianna about my abstract and goals for this summer. I wrote most of my abstract and continued reading about Processing. I mostly looked at the exhibitions and what other people have done using Processing. One project that particularly interested me was the Mud Tub made by Tom Gerhardt.

Thursday May 27, 2010

This morning I finished the draft of my abstract and watched some videos about projects done with Processing. After lunch, Jenny Liang from Villanova came with her mentor and Mel, Jenny and I talked with Dianna and Doug and the Villanova professor about our projects. Afterwards, Mel, Jenny and I started jigsaw puzzle.

Friday May 28, 2010

Lab Safety Training

Week 2 (June 1 - June 5)

Monday May 31, 2010

Memorial Day!

Tuesday June 1, 2010

I read some articles on the philosophical views of traditional art versus digital art and the controversies and arguments that have arisen in past years. Dianna gave me a textbook today called Processing: Creative Coding and Computational Art by Ira Greenberg. The textbook will help me gain a better understanding of Processing.

Wednesday June 2, 2010

I read some the introduction and chapter 1 and part of chapter 2. Part one of the textbook is called Theory of Processing and Computational art. The introduction is about how Ira Greenberg began using Processing. Chapter 1 is more history about computer graphics and it also has biographies of artists in the past.

Thursday June 3, 2010

This morning I created this wiki and spent some time learning how to wiki. Then I transferred my blog that I had been recording in a Word document to this wiki. I continued reading in the textbook and learned about the differences between function based (aka procedural) and object-oriented ways to structure code.
  • Function-based (procedural) Programming
    • Uses functions which is defined as a procedure, method, or subprogram. It is a small portion of code within a program. A program can have multiple functions, each performing a different task independent of one another.
  • Object-Oriented Programming (OOP)
    • Uses objects which is code that is divided into smaller pieces. OOP was developed later that function-based programming in order to overcome some limitations set by function-based programming.
Using Processing one can use either function-based programming or object-oriented programming or a combination of the two.

Friday June 4, 2010

Trip to CT

Week 3 (June 7 - June 11)

Monday June 7, 2010

Today I met Anna and we talked about our goals together. I showed her the Processing website and the wiki. We looked at some art supplies that we could use for the rest of the summer. We discussed some of the art projects that we could do and what kinds of images we should try and program. I also read about the differences between Java and Processing.

Tuesday June 8, 2010

Today I began reading Chapter 3 in the Processing textbook.
  • Classes are code structures that are used to organize a program. To use a class one needs to make objects which are instances of a class. Objects can be any command such as a variable, functions, and data structures.
  • Curly Braces {} are used to structure blocks of code.
  • Literal is an explicit number or string used in a program.
  • Primitive Variables are variables (i.e a name) assigned to a specific value in memory that one can later on change
Example:
//"int, String, boolean" tells what kind of primitive data the variable can hold
  • int trees = 10; //'int' holds integers
  • String name = Jenny; //'String' holds words
  • boolean happy = true; //'boolean' holds true or false

Wednesday June 9, 2010

This morning I finished reading chapter 3. I read about different operators as well as conditionals, arrays, loops and functions.
  • Operators:
  • Relational Operators:
  • > (greater than)
  • >= (greater than or equal to)
  • < (less than)
  • <= (less than or equal to)
  • == (equal to)
  •  != (not equal to)
  • Conditional Operators:
  • && (logical and)
  • || (logical or)
  • Assignment Operators:
  • x = 10;
  • x = x + 5;
  • x = x/4;
  • Binary & Unary Operators:
    • x += 1; == x++;
I started on chapter 4, Computer Graphics
  • Computer Graphics has 4 major applications:
    • Display of Information: involves data visualization (i.e. data sets, graphs, plots) Commonly used in business graphics, weather, molecular interactions, and biological processes.
    • Design (aka Computer-Aided Design CAD): applied in manufacturing, engineering, and architecture.
    • Simulation and Animation: is similar to display of information but creates a more "real-feeling" virtual experience. Used for pilots to practice landings etc... Uses touch, visualization, and sounds.
    • User Interfaces (aka Graphical User Interfaces GUIs): Interfaces include watches, phones, cameras, appliances, and cars. Also deals with human interactions also known as human computer interactions (HCI)
After lunch, Anna and I discussed controversial topics in computational art and traditional art. We looked at different kinds of computational art and animations, specifically Pixar. We read some articles that talked about differences in computational art and traditional art and the various philosophical views.

Thursday June 10, 2010

Today I continued reading chapter 4. I began with the section called Graphic Formats, and read about raster graphics and vector graphics. There is also a section on animation.
  • Raster Graphics is used for photographs or other very detailed images. These images are commonly very large and take up a lot of storage space, therefore, rastor graphics usually use compression algorithms to make these files smaller. Because raster images have variable resolution, the compression algorithms used could be lossy or lossless meaning the image quality could be degraded or stay the same quality respectively.
  • Vector Graphics are used for more simple images such as logos and computer-text. Unlike raster graphics, the pixels contained in the bounds of specific vector do not need to be stored in memory. Vector graphics are resolution independent and therefore, the image can be made bigger or smaller without affecting the quality and clarity of the picture.
The end of chapter 4 gives examples using different kinds of math such as elementary algebra, geometry, and trigonometry. It also talks about operator precedence and interactivity which involves event detection and event handling.
  • Interactivity: is based on events, which is anything that is inputed or changed in a computer. The following are events:
  • mouse events --> clicks, releases, hovers, enters, exits, moves, drags
  • window events' --> resizing a window
  • keyboard events --> pressing any key on the keyboard
  • menu events --> selecting a program from a pull-down menu
  • focus events --> selecting something that usually accepts additional inputs
  • Event Detection
  • Event Handling

Friday June 11, 2010

Chapter 5 begins with a basic overview and instructions on how to access and use Processing. This section is good for reference. It also introduces programming modes which include the basic mode, the continuous mode, and the Java mode. It also introduces rendering modes which include the JAVA2D mode, the P3D mode, and the OPENGL mode.
  • Programming Modes:
  • Basic mode is the most simple mode. Users type individual commands sequentially and the program will follow that order. The basic mode does not use function or classes.
  • Continuous mode uses function and classes, which allows the code to run nonlinearly. Also, by having functions and classes, one can call a specific part of the program to run, rather than have the entire program run each time. There are two basic functions used in Processing: void setup and void draw.
  • void setup is called once at the beginning of the program and allows the user to create other functions later on in the code.
  • void draw adds animation capabilities to your code.
  • Java mode allows users to program soley in Java.
  • Rendering Modes:
  • JAVA2D mode is the default mode in Processing. Creates 2D graphics.
  • P3D mode creates 3D graphics, allowing users to use an additional z-axis.
  • OPENGL mode "is a platform-independent library that functions as an interface between your code and the graphics hardware."

Week 4 (June 14 - June 18)

Monday June 14, 2010

Today I began reading chapter 6, Lines.
  • A point is a line. Thus point(50, 50); == line(50, 50, 50, 50);. To make a point a different color, one uses the stroke() function rather than the fill() function.
  • random(min, max) function generates a random number between min and max.
Sketching with for and while loops:
I talked to Dianna and started to think about a series of images I could work on. I decided that I would try to make a series of images that focuses on movements in nature. I want to make simulations that depict sunrise and sunset, a rainbow after a rainstorm, a spinning ceramic wheel, and others.

Tuesday June 15, 2010

Today I played with some code. I created a simple piece that changes the window color when clicked. I hope that this can be the beginning of the sunrise and sunset simulation. I also began another piece that uses example code that I found in Processing. The example code shows circles bouncing off one another and off the sides of the window. After changing some values in the code I was able to make the circles look a little like a fire.

Wednesday June 16, 2010

June 21, 2010 - June 25, 2010

This week I worked on a set of 4 images. I began the week with blending colors using the setGradient function.

June 28, 2010 - July 2, 2010

Sources

  • Greenberg, Ira. Processing: Creative Coding and Computational Art. 2007