Working with Processing

This is the first post in the second semester and also a completly new blog.
We started working with Processing.

What is Processing?

"Processing is a programming language, development environment, and online community. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology. Initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context, Processing evolved into a development tool for professionals. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production." (http://www.processing.org/)

Practice

We already did some first steps in Processing last semester in one of our last lessons before the summer break. Therefor we used the online version of Processing: The sketchpad
Beside the sketchpad you can find several references on the website (for instance codes, examples or tutorials).

We started with easy forms and codes for drawing:

• rectangle = rect (x,y,width,height);
• ellipse = ellipse (x,y,width,height);
• line = line (x1,y1,x2,y2)
• background colour = background (R,G,B)
• inking = fill (R,G,B)

These orders are written into void draw. The size of the field is ordered by size(value,value); ans is placed in the area of void setup. The first exercice was to create an animated person who is moving from the one side to the other. We decided to code a girl standing on a skateboard. The skatergirl drives from left to right by moving her foot. She then appears on the left side again after disappearing. Furthermore she also moves her arms (because she is excited) and her mouth (growing larger and smaller).

The code for the moving skatergirl:

void setup (){

    

    size (300,300);

    

    }

    int i=0;

    int j=0;

    int k=0;

    float l=0;

void draw() 

{

    background (255,255,255);

//mund

    l=l+0.2;

    if(l>10)l=-1;    

    

//arme

    k=k+1;

    if (k>40)k=-1;

    

//bein

    j=j+1;

    if (j>50)j=-1;

 //gesamt   

    translate(i,0);

    i=i+1;

    if (i>400) i=-100;

    

    fill(0,255,0);

    ellipse(100,240,100,10);   //skateboard

    

    fill(0,0,0);

    ellipse(70,250,10,10);  //rolle links

    ellipse(130,250,10,10);  //rolle rechts

    

    fill(139,71,38);

    ellipse(100,100,70,110); // haare

    

    fill(250,200,0);

    ellipse(100,80,50,50);  // kopf

    

    fill(255,0,0);

    ellipse(100,90,7+l,7+l); //mund

    

    fill (0,0,0);

    ellipse (90,75,5,5); // auge links

    ellipse (110,75,5,5); // auge rechts

    

    line(100,105,100,150);  //körper

    line(100,130,50,110+k);   //arm links

    line(100,130,150,110+k);  //arm rechts

    

    fill(255,0,0);

    triangle(70, 200, 100, 150, 130, 200);

    line(90,200,90-j,255);    //bein links

    line(110,200,110,240);   //bein rechts

     }

The movement is created through the int instruction. That is a datatype for integers, numbers without a decimal point. The datatype for numbers with comma is float. Both are written in the space between setup and draw. With the help of if you can manage a situation. You say the program what should happen in a certain case in which way.
For example: The whole picture should be moved to the right. We want that the picture appears again on the left side after it went out on the right side. So you say:

    if (i>400) i=-100;

This line says that if you reach a value over 400 (the field is about 300 large) then you go to position -100. Because of the fact that the field is 300 weidth the picture has time to disappear and then appear out of the area but drives into it again. With the if-case you can simulate repetition. Here is an example for repetition (repeating 2 ellipses and 2 strokes in different colours and positions):

    void setup (){

    size (300,300);

    }
    int i=0;
    int j=0;
    int r=0;

 
    void draw()
    {

 
    fill(200,r,r);
    ellipse(i,j,30,30);
    fill(r,0,0);
    ellipse(i,j,15,15);
    stroke (255, 0, 255);
    line(i,j,200,200);
    stroke (0, 0, 255);
    line(i,j,50,50);

    r=r+1;
    i=i+30;
    if (i>300) {
    i=0;
    j=j+40;
    }

    }

Translate helps you to move the complete picture in the field. The first value refers to the x-axis, the second to the y-axis in the area. With intentical values you move in a diagonal way.

    translate(x,y);

Next topic included a colour gradient.

    [...]

    int r=0;

    void draw() {

    fill(r,0,0);

    r=r+1;

    [...]

For a colour gradient you also work with values. In this case r replaces one colour and can thereby be changed.

Rotation

We also learned that things and the complete field can be rotated. The datatype rotate (radians(ab)); rotates the whole system. It works with translate (ab,cd);. The result changes referring to what comes first in line. Another useful code is: rectMode(CENTER);. This code makes it possible that everything refers to the center of the field.

Homework: Experimenting!