This week I studied Chapter 9 of “Learning Processing”, and Chapter 2 of “The Nature of Code”. This is a little different than what I had originally set as the material for Week 4 but I really wanted to start dealing with vectors and particle systems and it seemed like a good idea to mix the material dealing with Arrays and the PVector class together since they are both complementary to one another.

Last week I was introduced to object-oriented programming and the creation of objects to make our Processing more flexible and modular. By using arrays of objects, now I can automate the creation and animation of multiple objects, as many as I’d like, with the use of for loops, dot notation and array operations. Of course, arrays need not be just objects, they are free to contain any type of variable, as long as all the variables in the array are of the same type. The book presented the example of making a trail of ellipses follow a mouse cursor. As the exercise, the author asked us to refactor the code using an object-oriented approach. This was a little bit tricky syntax-wise because arrays needed to be declared and initialized and I wanted to make the size of the array an argument that could easily be changed. Here is my solution:

Solution to Exercise

On to PVectors… They are a class in Processing made to help model motion and physics. We know abt vectors. Velocity, Acceleration and position are all vector quantities. You can do algebra with vectors, you can do calculus with vectors. Particle systems will often operate under certain motion simulations and this is why it becomes necessary to make particles use PVectors. Otherwise we would need to have variables of motion for x, y, and z separately.

Owing to the knowledge I gained from Chapter 2, I was able to code a basic particle system that responds to mouse presses making each particle’s acceleration be toward the cursor each time the mouse is pressed. This is my project for the week and you may interact with the composition by clicking here. Next week, I will add a number of enhancements including trails and more realistic accelerations by including forces and dampening.

See you next week.

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.