Processing beginner

xb23

I am looking for something that I can interact with. Like http://www.w3schools.com/ , which I used for html/css/javascript. Rather than videos. In order to learn Processing. Currently the only one I know is:

http://www.learningprocessing.com/examples/

Any others?

Chrisir

on the main page you find tutorials and examples

in processing included you find examples (menu file)

see also http://www.openprocessing.org

see also a complete book here

http://natureofcode.com/book

there is also the WIKI with interesting "technical FAQ"

http://wiki.processing.org/w/Main_Page

http://wiki.processing.org/w/Technical_FAQ

Books

there are a lot more books when you look on the main page, section books

http://www.processing.org

and of course khan academy

xb23

Thank you.

Chrisir

you're welcome!

Chrisir

I think the best way to learn is to practice.

Think of small tasks and try to accomplish them.

E.g. make this:

 *
 **
 ***
 ****

or this

*

**

***

****

*****

****

***

**

*

or make pong or 3D pong or boggle or pac man or snake or tetris or arkanoid

http://en.wikipedia.org/wiki/Arkanoid

or write an editor or tic tac toe

or

Peg solitaire

http://en.wikipedia.org/wiki/Peg_solitaire

Graph of a function in 2D and 3D

http://en.wikipedia.org/wiki/Graph_of_a_function

or a paint program

you'll find them all on wikipedia

xb23

I'm just a beginner. Making those things you listed is way beyond my level at the moment.

Chrisir

the stars at the beginning of my post may not be too hard.

Also pong is not hard.

It's good to practice OOP.

;-)

xb23

for (int i = 0; i < 4; i++){

  for (int j = 0; j < i+1; j++){

    print("*");
  }

  println();
}

Chrisir

Nice!

Now do the same with circles in the main window

xb23

*

**

***

****

*****

****

***

**

*






for (int i = 0; i < 4; i++){

  for (int j = 0; j <i+1; j++){

    print("*");
  }

  println();
}





for (int i = 0; i < 5; i++){

  for (int j = 0; j < 5-i; j++){

    print("*");
  }

  println();
}

Chrisir

Nice!

Chrisir

and now with lines...

xb23

You mean something like:

for (int y = 0; y <= height; y+=10){

  line(0,y,width,y);

}

Chrisir

yes, but with different lengths like the stars

also different color and thickness

You could then make a class LineMine and store the properties there

and then you could move them

finally you could go 3D

just go step by step...

Chrisir

How far are you now?

;-)

xb23

size (200,200);

float r = 0;
float b = 0;
float g = 0;

for (int i = 0; i < width; i++) {

  for (int j = 0, y = 0, x = width; j < i; j++, y+=10, x-=10) {

    stroke(r,g,b);
    strokeWeight(random(3));
    line(10, y, x, y);
    r = random(255);
    g = random(255);
    b = random(255);
  }
}

Do floats have to be initialised? As I couldn't run without first giving r,b, and g initial values. I thought by default, if you don't initialise them, they are set to 0.0f? Hence, that it's necessary to initialise?

Chrisir

float r;

is enough

it's 0.0 then

xb23

"The local variable r, may have not been initialised"

That's what I get when I just have "float r;"

And isn't it, 0.0f?

Chrisir

all right!

See now you're better than me

You could then make a class LineMine and store the properties there

xb23

Lol, I don't understand why I must initialize? r isn't a local variable. I'm not sure what's going on.

Chrisir

yeah, it's a global variable in processing, you are right

from what's going on behind the scenes it's a local var

don't worry about this, it's need an initial value

you should say this

    r = random(255);
    g = random(255);
    b = random(255);

before

stroke(r,g,b);

otherwise 1st line is always black ;-)

You could then make a class LineMine and store the properties there

xb23

I don't understand why it's treated as a local variable?

Linemine linemine;

void setup() {

  linemine = new Linemine();

  size (200, 200);

  linemine.display();
}

class Linemine {

  float r;
  float b ;
  float g;

  Linemine() {

    r = random(255);
    b = random(255);
    g = random(255);
  }

  void display() {

    for (int i = 0; i < width; i++) {

      for (int j = 0, y = 0, x = width; j < i; j++, y+=10, x-=10) {

        stroke(r, g, b);
        strokeWeight(random(3));
        line(10, y, x, y);

      }
    }
  }
}

Chrisir

No, that's not the right approach.

The class should hold only one item of a type (a line e.g.) - that's the purpose of a class

when you have multiple lines, pls. instantiate multiple objects in an array

Chrisir

pls consider

  float r;
  float b ;
  float g;

just write

color lineColor;

xb23

I didn't understand. I also didn't understand why r is treated as a local variable, when I have it as a global variable.

Chrisir

don't worry over r, it's a technicality

for the class: it needs posX,posY, length, color, thickness ...

define it in setup()

xb23

Well it just confuses me, as it contradicts what I've read regarding global vs local variables. Global variables are accessible throughout the program. I've declared it as global, and didn't have a local variable in that function (that would of masked the global variable). So it doesn't make sense as to why it's treated as local, when I didn't declare it as a local variable (in which case, the error message would make sense, as you have to initialise local variables). I'm finding programming hard enough, I don't need the added stress of confusing error messages.

Chrisir

this works

float r ;
float b ;
float g ;

void setup() {
  size (200, 200);
}

void draw() {

  for (int i = 0; i < width; i++) {

    for (int j = 0, y = 0, x = width; j < i; j++, y+=10, x-=10) {

      stroke(r, g, b);

      strokeWeight(random(3));
      line(10, y, x, y);
      r = random(255);
      g = random(255);
      b = random(255);
    }
  }
}

Chrisir

it's probably a thing of active versus static mode

you're right it's a global var

xb23

Okay thanks. Got a lot to study.

Chrisir

yeah, when you want to practice, work on that class as I said

;-)

xb23

The class should hold only one item of a type (a line e.g.) - that's the purpose of a class

when you have multiple lines, pls. instantiate multiple objects in an array

I am not sure what this means?

So the class, should look like this:

class Linemine {

  float r;
  float b ;
  float g;

  Linemine() {

    r = random(255);
    b = random(255);
    g = random(255);
  }

  void display() {


        stroke(r, g, b);
        strokeWeight(random(3));

        line(10, y, x, y);

      }
    }

And that if I want more lines, have multiple objects?

Chrisir

that's correct!

for the class: it needs posX,posY, length, color, thickness ...

Chrisir

then you could start before setup() with

Linemine linemine1;
Linemine linemine2;
Linemine linemine3;
Linemine linemine4;
Linemine linemine5;
Linemine linemine6;

and handle those in draw()

xb23

http://www.learningprocessing.com/exercises/chapter-9/exercise-9-7/

Snake s0;
Snake s1;

void setup() {
  size(400,200);
  smooth();
  // Initialize
  s0 = new Snake(50);
  s1 = new Snake(25);
}

void draw() {
  background(255);

  // Update and display
  s0.update(mouseX-30,mouseY);
  s0.display();

  // Update and display
  s1.update(mouseX+30,mouseY);
  s1.display();  
}


class Snake {
  // x and y positions
  int[] xpos;
  int[] ypos;

  // The constructor determines the length of the snake
  Snake(int n) {
    xpos = new int[n];
    ypos = new int[n];
  }

  void update(int newX, int newY) {
    // Shift all elements down one spot. 
    // xpos[0] = xpos[1], xpos[1] = xpos = [2], and so on. Stop at the second to last element.
    for (int i = 0; i < xpos.length-1; i ++ ) {
      xpos[i] = xpos[i+1]; 
      ypos[i] = ypos[i+1];
    }

    // Update the last spot in the array with the mouse location.
    xpos[xpos.length-1] = newX; 
    ypos[ypos.length-1] = newY;
  }

  void display() {
    // Draw everything
    for (int i = 0; i < xpos.length; i ++ ) {
      // Draw an ellipse for each element in the arrays. 
      // Color and size are tied to the loop's counter: i.
      stroke(0);
      fill(255-i*5);
      ellipse(xpos[i],ypos[i],i,i); 
    }

  }

}

While practising, I didn't understand this class.

I didn't understand, why it's not:

int xpos
int ypos

Rather than;

int [] xpos
int [] ypos

Chrisir

why did you quit our nice lines? It's not finished!

xb23

Lol I didn't quit anything. I struggled with understanding Objects & Arrays, so returned back to the chapter on Arrays, tried a few examples to re-understand, and got stuck on the one above. It feels like I'm progressing, but then feels like I'm not learning as much as I thought.

Chrisir

As for the snakes:

since it's wonderfully commented, it's easy:

each snake consists of the elements of the body.

Each element is stored with x and y pos in 2 parallel arrays (we could use PVector instead)

look at display() to see how it is used

ellipse(xpos[i],ypos[i]

the radius is also i, so the size is bigger (try 10 instead of i)

update()

update() has the purpose to move the snake:

the head comes as a new pos where the mouse is

the elements after the head each get the pos of the element before it

xb23

Ok thanks.

xb23

Is this correct?

Linemine linemine;
Linemine linemine1;
Linemine linemine2;
Linemine linemine3;
Linemine linemine4;
Linemine linemine5;
Linemine linemine6;

void setup() {

  size(200, 200);

  linemine = new Linemine(random(200), random(height), random(10), color(random(255), random(255), random(255)));
  linemine1 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
  linemine2 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
  linemine3 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
  linemine4 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
  linemine5 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
  linemine6 = new Linemine(random(width), random(height), random(10), color(random(255), random(255), random(255)));
}

void draw() {

  linemine.display();
  linemine1.display();
  linemine2.display();
  linemine3.display();
  linemine4.display();
  linemine5.display();
  linemine6.display();
}
class Linemine {

  float posX;
  float posY;
  float stroWeight;
  color c;


  Linemine(float posx_, float posy_, float stro_, color c1) {

    posX = posx_;
    posY = posy_;
    stroWeight = stro_;
    c = c1;
  }

  void display() {


    stroke(c);

    strokeWeight(stroWeight);

    line(10, posY, posX, posY);
  }
}

Chrisir

that's better

look, c1 in the constructor could be called c_

so all parameters end with the sign _

that's good to have same things identified as being same (parameters)

now, you understood that a class holds one type of item and only one (a line in that case).

next step

Now as a next step you could e.g. start using an array of lines

then instead of

  linemine.display();
  linemine1.display();
  linemine2.display();
  linemine3.display();
  linemine4.display();
  linemine5.display();
  linemine6.display();

you could for-loop over it

also in setup() you would have an array instead of so many similar lines

so

Linemine [] lines;

etc.

xb23

A class can hold more than one type of item, right? But it defeats the purpose of a class, since it's use is made for one type of item only? A cookie cutter after all, is made for making cookies only. Same with class. Right?

Chrisir

correct!

it's made for one type of item like a line or a car or a ball.

This entity has different properties (like position and length) and methods

GoToLoop

I didn't understand. I also didn't understand why r is treated as a local variable, when I have it as a global variable.

Seems like you had re-declared fields as local variables by using the same name, overshadowing their field counterparts!
Only fields are auto-initialized w/ a corresponding default value appropriate for their data-types!
On the other hand, local variables demand an initial value before their usage!

xb23

Yes to both comments above.

But I keep getting confused with fields and global variables. Let me get this straight, once and for all!! I've looked at all the past posts and this is what I've arrived at:

• There is technically nothing called "global variable" in Java. It's either "fields" or "local variables". In Processing, it's "global variables" and "local variables". Global variables, are the variables declared at the top, whilst local variables are those declared within functions, and their use is limited to that function, whilst global variables are accessible throughout the program (i.e scope).

Lets take a look at a portion of the snake class above:

class Snake {
  // x and y positions
  int[] xpos;
  int[] ypos;

int[] xpos & xpos

These are "non-static fields". When an object is instantiated, by calling the constructor, the non-static fields are instantiated. Everything else in the class is not, to save memory.

So each object, gets it's own individual copy of the "non-static fields" from the class, when it's created. The constructor is responsible for giving the "non-static fields" initial values. So object, in memory, only contains "non-static fields" and values assigned to those fields. No methods, nothing else. But the object can access those from the class, as if it belonged to the object itself. So it appears the object "inherits" everything from the class, but only "non-static fields" are taken from the class, and the rest remain.

Another name for "non-static fields" is "instance variables". Because each instant of a class (each object), have values unique to it.

"Static" fields are not instantiated, and shared among all objects of the class.

A field declared with a "static" modifier, is called a "Class Variable" or "static field". For example:

`static int balls = 10;` // 10 can change
Or static final int balls = 10 // difference here is that 'final', means the "10" will never change.

"A state" means a "value"?

A "field" is like a "global variable". It is a type of variable that has a scope throughout the entire program/class (i.e not declared within a method). A class variable has scope throughout the whole class, and is accessible from any method of that class, static or instance (non-static). So a class variable is a field, a static field.

Fields are given default values (if not initialised) depending on their data type (i.e 0.0f for float, 0 for int, false for boolean etc). Local variables are not given default values, thus MUST be initialised, or error will occur.

Is this all correct?

I will like to thank you both for your patience & support. It's been very helpful! It's only been a few weeks of Processing for me, so it's going quite good so far! With your help, I'm sure to get a lot more advanced within a short period of time. ;)

GoToLoop

Class constructor. Called when using new. It returns the newly instantiated reference this: That reference is internalized by keyword this inside that created object!

A method will often store its temporary state in local variables.

Didn't understand any of that. That's the only comment from you so far, that I didn't comprehend. Everything else was understood.

Let's retry it!

• All object creations (instantiations) involve dynamically (at runtime) setting apart a contiguous block of memory
  (generally from the heap zone) of just enough size, so each of them can have their own copy of all the non-static fields
  (instance variables) from their class.

• Even though it's a block of memory, for reference purposes, it's enough to track it by its 1st physical memory address.
  Java has its own means to determine both the size of the block and where each field is at within it by that value alone!

• That memory value is called reference or pointer to that object. In order to maintain a track of it,
  there gotta be at least 1 variable holding that value, thus making a strong reference to it.

• Objects which got no variable strongly referencing it & it's not currently active are marked for destruction by the GC!

• Within a class context, keyword this means the reference value which is currently accessing a class member.

• A class is generally instantiated by using keyword new & calling its constructor.
  Which in turn implicitly returns this, so we can both keep track of it and access its members.

• Even though an object stores non-static fields only, we still have access to the rest of its class' members transparently!

• All non-static fields (instance variables) from an object form what is called the state of an object.
  An object is considered having the same state as another when all their non-static fields have exactly the same values!

I think that's all for now! ;)

xb23

Thanks.

• What is "the heap zone"?

  A special area in memory, for objects, arrays, classes etc?

Objects which got no variable strongly referencing it & it's not currently active are marked for destruction by the GC!

How can an object have no variable strongly referencing it?

Don't we have to declare, for example;

`Car myCar `//Which will be the variable that will hold the value to the 1st physical memory address of the block where the object is stored. This is a special kind of variable called, a pointer/reference, because the value within it, is a reference/pointer to the 1st physical memory address where the object is stored

Within a class context, keyword this means the reference value which is currently accessing a class member.

A class is generally instantiated by using keyword new & calling its constructor. Which in turn implicitly returns this, so we can both keep track of it and access its members.

Forgive me, but I'm still struggling to understand this part.

GoToLoop

What is "the heap zone"?

https://en.wikipedia.org/wiki/Stack_and_heap

How can an object have no variable strongly referencing it?

Merely instantiate an object w/o assigning it to a variable:

new PVector(10, 30, -50.5);

The recent instantiated object above got no variable holding/tracking its reference.
It'll be put in the "death row". And eventually "executed" by the Garbage Collector (GC)!

Forgive me, but I'm still struggling to understand this part.

A class has members: static & non-static fields, methods & constructors.
In order to access any of those members, we need a reference plus the dot . operator:
http://processing.org/reference/dot.html

// store a PVector reference in variable p:
final PVector p = new PVector(1e3, QUARTER_PI);

// method member access using the value of p as reference:
p.mult(TWO_PI);

// non-static field member access now.
// Java knows which field y to access due to the reference used:
println(p.y);

exit();

Chrisir

hey, xb23, that is all under the hood of the system

you seem to me like somebody who wants to learn to drive and starts by taking apart the engine and trying to understand it.

Two different things.

Better concentrate on practicing.

What are they gonna ask you in your exam? Nothing about the heap, right?

xb23

Chrisir, I understand what you're saying. Since I'm studying for a Computer Science degree, I'm eager to learn as much as I can, even the small technical details, as it helps understand what's going on, when I'm learning Programming (and why errors occur etc).

But I suppose, you're right. Best to practice now, and worry about what's under the hood in year 2, as it hasn't been covered this year. I'm in year 1 of a 3 year course. I just feel that there is so much to learn, and I want to catch up, that's why I'm asking lots of questions.

Chrisir

;-)