As it is built on top of Java, Processing is capable of object-oriented programming. The notion of objects and how they make our code more modular and easy to read was the main take-away from Chapters 7 and 8 of “Learning Processing”.

So what are objects? They describe an instance of a ‘class’ which has properties and capabilities embedded into it. The idea is to write our code with a class containing variables as its properties and functions as its capabilities and later declare instances of that class as the objects in our composition. Writing code in a object-oriented approach will become very useful when we want to have dozens or hundreds of “things” in our viewport behaving a certain way, like we will have happening when we start coding particle systems and autonomous agents. But we first need to learn abt arrays and arraylists which we haven’t covered yet.

Writing a class is pretty straightforward. Each class contains four elements: name, data, constructor, and methods.

Writing a Class

In order to use the class, you must first declare the object(s) as you would declare a global variable. In the case of an object, the type is the name class and the variable name is the name of the object.

Then you need to initialize them in the setup() function. Lastly you invoke the objects’ functionality by using dot syntax notation in the draw() function.

Using a class

Now on to this week’s project. I decided to do two compositions. The first one is simply code refactoring per Lesson 3 guidelines. I reorganized my previous composition using object-oriented programming and it allowed me to reuse my class twice creating a more interesting pattern. I also added a line of code to make the coloring of the pattern dynamic and display the colors of a rainbow by using sines and cosines in each of RGB parameters. The first composition can be found here.

The second compostion, Sines and Cosines, is the more interesting one. It is still a work in progress. But my idea was to mess around with the sines and cosines functions. As these functions are periodic, they are well behaved and the range of values is well controlled. I also had to reach out and learn a little bit of transformations and frameCount, a key component in making the drawing dynamic. In this composition, I needed to find a way to move the drawing center from the upper left corner to the middle of the screen and translate() allows that. By using frameCount inside the sines and cosines functions, you make the these functions oscillate for each loop cycle so the values keep changing and the drawing becomes dynamic. The same technique was applied to the fill() in the first composition so that the colors change for each loop cycle. Compositions like this could very well be the starting point for a building design. There is a way to export the lines into Rhino and I have to look into that. mouseX and mouseY were used to change where the second point of the lines is drawn but it doesn’t really behave as smoothly as I’d like. The composition can be found here.

See you next week!

This week I was introduced to control and conditional statements in Chapters 5, 6, and 7 of Learning Processing. This is probably the one part I was least looking forward to, simply because loops and conditionals begin to get a little confusing the moment they start to get nested. But they are really the elements, along with variables, that give programming its procedural nature and help automate a lot of tasks and decisions. A few key functions and system variables were discussed: constrain(), random(), mousePressed(), keyPressed(), height ,and width.

random() is the first function we get familiarized with that returns a value. There are a lot of these in Processing. A few that were not discussed in the book that I found useful for coding my Lesson 2 project were dist(), which measures the distance between two points, and map(), which remaps a value from range to another range.

Random function

Constrain function at play… Prevents the circle ball from leaving the boundary of the window.

constrain() was introduced as a handy tool for use in simple physics simulation and creating a bouncing ball. Though it would be just as effective to use a conditional to restrain the ball from moving past the edges of the window, constrain() reduces this to a line of code instead of several.

They are pretty self-explanatory and show how well prepared Processing is to making the process of scripting user interactive compositions very straightforward. The notion of local vs. global variables was also emphasized as we started creating local variables to drive our for and if blocks of code. In the context of making conditions that occur when a user presses a key or mouse buttons, the benefit of declaring a global boolean variable was immediately evident as this allows the code to toggle between false or true according to the user actions. A global variable was used in my Lesson 2 Project.

On to Project 2. With the introduction of control loops and if statements, compositions can begin to feel a little more fancy. The author of the book wants you to continue using the first composition from week 1 project but I am opting to start each one from scratch because what was done in a previous week does not necessarily have room for further improvement and it should also allow me more creative freedom.

My goal this week was to create an attractor-based circle pattern. With mouseX and mouseY position data available at my disposal, it would be really cool to see if I could make the cursor an attractor. As Processing allows for interactive compositions, the pattern would be able to change in real-time. I wanted to make the size of the circles vary depending on how close they were from the cursor.

Project 2 Sketch

The main issue was finding a way to translate distance data between each circle into information that could be used for scaling. Obviously I needed to find a way to make values lie in between 0 and 1 and multiply that scaling factor times the width and height of each circle. I discovered the map() function in the Processing reference page and was delighted to find out that it does exactly what I needed. I can already see a lot of uses for this function.

Next week I will learn how to create my own functions and start talking abt objects. This will be very useful in developing my own particle system. And I hope that I’ll be able to create a basic particle system next week or the following.

Click on this link to interact with my Project 2 composition.

See you next week!

Ted

I am using the book called ‘Learning Processing’ by Daniel Shiffman. There are a lot of books out there on Processing but I chose this one because every chapter almost feels like a lecture and it is organized for a semester course. It is the same book he uses to teach at NYU. And he knows his audience very well, that is, people who have NEVER programmed before. This will be the one of the three books I’ll be referencing during the semester. The other two will gain their mention later in the semester when the subject matter becomes relevant.

On to this week’s lesson…

We start by getting familiarized with Processing’s interface.

The fun thing about Processing is that the development environment is so straight foward and visual that applications are simply called sketches. Special functions for drawing geometrical shapes are readily available. One key idea is that with Processing, you are creating visual forms drawn by pixels. So a point drawn is simply the position of a pixel in the screen.

The syntax to create an animation simply consists of calling the function draw(). Whenever you want to have a sketch interactive with the user, mouse input data can be accessed from any function by simply using mouseX and mouseY.

Color can be modified easily by RGB or HSB standard. Every single pixel can be colored and fun gradients of color can be programmed by playing with transparencies.

A lot of the examples in the book will have to do with this creature, Prof. Shiffman called Zoog. He likes his ‘creatures’ and a lot of the projects will have to do with creating creatures whose algorithms implement specific programming techniques. I have taken my creative license so I will probably stick with more abstract forms.

My preliminary sketch for my week’s composition

Each week, I’ll be creating at least one composition to reinforce the concepts learned. This week was all about drawing shapes and making those shapes dynamic by using mouseX and mouseY inputs. I immediately thought of cone lights so decided to create a colored composition with an array of triangles whose color changed and vertices moved according to the mouse

You may play with my sketch by visiting the following link:

http://www.openprocessing.org/sketch/213101

See you next week.

I have always been very fascinated by computational design and generative art. That weird realization that these lines, curves, shapes are drawing themselves and they are acting intelligently based on a set of rules and interactive events with the user made me feel a little uneasy. Mostly, because as an architectural designer, we are pretty much only taught to simply point, click and draw and I couldn’t help but feel a little inadequate with the way I do things. Needless to say, we, designers who are used to create with their hands and minds use other processes and techniques to create and the end results can be just as beautiful as any sophisticated algorithm-based composition. But I still felt jealous. I wanted to try coding and I wanted my code to do stuff that is simply too difficult for me to do by hand.

This semester I will be learning Processing, a programming language designed for media design (images, animation, sound, data visualization, visual compositions, etc). It can create stunning interactive visual compositions that rival Picasso in their abstractness and randomness.But the real deal lies in the fact that with it, designers in all fields can implement algorithms to generate art in a straight-forward scripting environment. As it is built on top of Java, the first thing most programmers learn in school, I wanted to use this tool as a foundation for later high-level programming languages like Python, Javascript, and C#, which can help you do amazing things in 3D modeling software.

But learning Processing is just one part of it. I needed to fulfill a more specific goal. How can I use Processing to help me design architecture? Also, how can I make my project fit within the context of the Living Environment Lab? Well, programming languages are great for simulations, after all, almost all phenomena can be described in terms of a set of rules and that can be coded. For example, physics engines for games simulate physical interaction between objects based on a set of rules. Could I simulate an environment and a group of entities interacting with it according to guidelines, e.g., this thing will move away as soon as it comes within 50 pixels of distance from another entity, the group of entities spends most of its time in the center, or to the right, and so forth. The way we interact with our living environments is really all following a set of rules. What if I could create a floor plan that informs its parameters of form based on a simulation of the interaction between function of the space and users living in it? That’s how I came across this idea of simulating with ‘autonomous agents’, independent entities that behave according to rules in the code, and their application in the design of architectural form and space. My goal this semester is to create a visual composition that uses a number of agents and their rule-based interactions to generate form using Processing.

Form-finding using Agents

More on autonomous agents and agent-based modeling will be covered throughout the semester.

Hello everyone,

My name is Ted. I am a senior in the Applied Math, Engineering and Physics (AMEP) program with a penchant for architectural design and computer graphics. This semester I’ll be working with Prof. Ponto and the amazing piece of hardware at SoHE known as the DSCVR (Design Studies Commodity Virtual Reality). My goal is to cover the basics of the game engine called Unity, get acquainted with C#, and expand my modeling and rendering knowledge of 3DS MAX to develop an application that will be able to use the virtual reality features of the DSCVR to visualize building designs in real time.

This Week

On Tuesday last week, I got to do a tour of the DSCVR and experienced a hands-on demo of the system. The coolness factor is definitely overwhelming. The amazing thing about it is how accessible it would be to deploy such an equipment in a variety of settings. Any game developed in Unity can easily be made to run and take advantage of the DSCVR’s features by simply running a couple of script assets on top of your game files.

The following day I downloaded the Unity software to my home computer. Unfortunately, its grey interface can’t be changed to black and it makes text very hard to read unless you changed its size. Though it is possible to model within Unity, I am choosing to use my preferred 3D package to do the modeling and simply import the geometry into Unity. This week I spent a good ten hours watching some introductory tutorials on Unity and some others on modeling game sets on 3DS MAX.

Unity UI

Next Week

I expect to continue watching tutorials and begin making a simple game which will consist of a single room and a playable character.

See you next week!

Ted