Kehkashan

Step 1: I downloaded “processing” onto my computer.

Step 2: I am watching the beginners’ video which was included in the package Jonathan sent us, since I am entirely new the world of coding and programming!

The video began with discussing the various ways in which artists have used programming to create interactive installations and programs. It then moved on to explaining that codes are essentially lines of instruction that dictate to a computer what to do. Our first ever code would be ‘to draw a rectangle’ Instruction is in the form of text, and that is what we call a ‘function’. The function for rectangle would be ‘RECT’. But ‘RECT’ in itself is too general. We need to give further specifics about height, width, location.

The first thing we need to understand is that we are operating within the ‘canvas’ of our computer screen. The (x,y) coordinates we give will allow us to place this rectangle within that canvas. How are the units of this canvas measured? On a computer this unit is pixels, a tiny dot of color on our computer screen. The coordinates need to be given inside a ‘parenthesis’ and every line of code MUST end with a semicolon. The width and height of the rectangle can also be added within the parenthesis of the coordinates. Our very first line of code therefore becomes:

Rect(x, y, w, h);

What is a code editor? It is the program which will accept your lines of code. Where do we see the results of this line of code? On the canvas which is essentially the execution of that program. We then attempted to run the code several times after altering it.

Then the video asked us to try more shapes, for example an ellipse. If we make the height and width equal it will be a circle, if we make it different it will be an ellipse, and the (x,y) coordinates will be at the center of this ellipse or circle.

This brings us to the point that the order of the lines of code MATTERS. That is the order in which the design will be created.

I then spent some time trying to get the processing program to work and try out these codes. I couldn’t make the downloaded program work :/ but I did manage to make this funny robot on the tutorial program:

What we are missing now is color. Each shape has an outline called “stroke” and an interior called “fill”. So we now need functions for the stroke and fill. In order to control the color of the shape, we need to have two lines of code BEFORE it for the stroke and fill.

What values define color? let’s assume black is 0 and white is 255 and all grayscale lies between. And if we add THREE values as opposed to that one value, we can impose an RGB scale. So if black is (0), red will be (255, 0 , 0).

Now we know how to add colors to shapes, but what about the background? For that we need to use a function, “Background”.

The next exercise is all about color:

I used color to make this creepy robot 😮

Now to animate!

A code that animates RERUNS. This is achieved by having two groups of code.

1. Setup: this is all the code happens ONCE at the start

2. Draw: this code loops over and over again!

this is how setup works:

void setup(){}

this is how draw works:

void draw(){}

what does void mean? just imagine it as a necessary part of setup and draw.

So what goes in setup?

The first thing is size. Size(400,500); (it will be slightly indented since it is code INSIDE code).

In draw you can have the rest of the things like background, shapes etc. But how to animate them? You need variations. For example by using your cursor.

so you can say ellipse(mouseX, mouseY, w, h); if you want the ellipse to move with the cursor. Now these options are endless; for example mouseX+50 or mouseX/3 etc etc.

Now what happens if you add ‘background’ to the setup? the background never loops, so you will stop seeing the background, the shape will start leaving a trail!

You can also make your program take different paths by asking it questions, which are referred to as true or false questions. These are called CONDITIONAL STATEMENT:

if(______){}

for example, if(mousePressed){rect(etc etc)}

Now if you want the program to do either one of two things, you use the code ELSE.

Okay that was that! My poor non-computer oriented brain essentially feels like mush now. I have fifteen minutes to go digest all this new info before the live streaming session starts! 😮

See you guys soon!