I think with using classes you need setup() and draw() as well. Always.

Try this :

1. void setup() {
2. // runs only once
   
3. size(1000, 1000);
4. background(0);
5. // init nodes here etc.
6. }
7. 
   
8. void draw() {
9. // runs in a loop again and again
   
10. background(0);
11. // display nodes here etc.
    
12. }
13. 
    
14. class Node {
15.   color c;
16.   float xpos;
17.   float ypos;
18.   Node() {
19.     c = color(255,0,0);
20.   }
21.   void display () {
22.     noFill();
23.     smooth();
24.     int radius = (400);
25.     for (int deg = 0; deg < 360; deg += 36) { // all yellow is not needed in the class... see below
    
26.         float angle = radians (deg);
27.         float x = 100 + (cos(angle) * radius);
28.         float y = 100 + (sin(angle) * radius);
29.         ellipse (x + radius, y + radius, 6, 6);
30.     } // for
    
31.   } // func
    
32. } // class
    

you might want to read
http://wiki.processing.org/w/What_are_setup%28%29_and_draw%28%29%3F

And read the section "Hello mouse" in
http://www.processing.org/learning/overview/

Greetings, Chrisir 

Thanks, but it still doesn't make the circles for me.  First, I wrote this code which made the circles, but I couldn't control them individually.

well, you are missing this
// init nodes here etc. in setup()
and
// display nodes here etc. in draw()

you want to read
http://www.processing.org/learning/objects/
maybe.

Here's what you want:

1. ArrayList nodes;
2. void setup() {
3.   // runs only once
4.   size(1000, 1000);
5.   // Create an empty ArrayList
6.   nodes = new ArrayList();
7.   // set radius
8.   int radius = 200;
9.   // init nodes here
10.   for (int deg = 0; deg < 360; deg += 36) {
11.     float angle = radians (deg);
12.     float x = 100 + (cos(angle) * radius);
13.     float y = 100 + (sin(angle) * radius);
14.     // A new node object is added to the ArrayList (by default to the end)
15.     nodes.add(new Node(x, y, color ( deg + 10, deg*10 -50, 0 ) ));
16.   } // for
17.   println (nodes.size());
18. } // func  
19. void draw() {
20.   // runs in a loop again and again
21.   background(0);
22.   // display nodes here etc.
23.   for (int i = nodes.size()-1; i >= 0; i--) {
24.     Node node = (Node) nodes.get(i);
25.     node.display();
26.   } // for
27. } // func
28. // =======================================================
29. class Node {
30.   color c;
31.   float xpos;
32.   float ypos;
33.   Node(float tempX, float tempY, color tempColor) {
34.     xpos=tempX;
35.     ypos=tempY;
36.     c = tempColor;
37.   } // Constructor
38.   //
39.   void display () {
40.     noFill();
41.     smooth();
42.     int radius = (400);
43.     stroke(c);
44.     ellipse (xpos + radius, ypos + radius, 6, 6);
45.   } // func
46. } // class

I can't explain the full concept of objects here.
Please note that a Class is only the blue print for the real thing.

Your class "Node" is the blue print for a real little cirle.
Therefore you need

• one for-loop (in setup()) to make all the little circles from the same blue print called class Node.
• and you need one for-loop to draw those circles (in draw()).

In my Code the circles are stored in a list and we first fill the list with
circles (in setup()) and then loop through the elements of the list to display them (in draw()).

I hope this helps.

Read the above article. Ask again.


Greetings

Hi, thanks so much for your help already!  I've read through all the tutorials you suggested and understand a bit more (this is all sort of over my head right now).   I understand what you've shown me so far, but there are a few areas where I am confused:

In the code where you put this

  for (int i = nodes.size()-1; i >= 0; i--) { 

    Node node = (Node) nodes.get(i);

    node.display();

I don't understand what this means.  Is this what actually draws the Nodes?  Where it says size()-1, does this make the Node at (0,0) disappear?  Because it doesn't show up for me.  

Also,

What does this part do exactly? 

  Node(float tempX, float tempY, color tempColor) {

    xpos=tempX;

    ypos=tempY;

    c = tempColor

And can I now locate each of the Nodes by running a new draw command and typing Node[1] for example to locate Node 1?

Thanks again for all of your help and if anyone can help with this, thanks!

Hello,

you asked:

for (int i = nodes.size()-1; i >= 0; i--) { 

    Node node = (Node) nodes.get(i);

    node.display();

Is this what actually draws the Nodes?

yes, that draws the node. It goes thorugh the List (it is an arrayList, you could look this up in the reference too).
It is a for loop but going backward. You can also go forward here.
It think the color of element 0 is too dark to see. I tried to fix that. I think it gets drawn but might be too dark.
You need size()-1 because the list starts with 0 and thus we need -1 not to go over the end of the list accidently.

node it is a variable of the type Class Node. A node is one of your little circles. It has properties like xpos etc.
You adress them by node.xpos (with a dot between node and property).

This line

1. Node node = (Node) nodes.get(i);

can also be written as

1. Node node;    // declare the var
2. node = (Node) nodes.get(i);  // get the data for "node" from the list at Pos i

The part (Node) in brackets just tells the element that comes from the list that it is a type Class Node.
nodes.get(i) tells the arrayList named nodes to pop out its element at position i.
This element number i then gets stored in the variable node.

You defined that class with

• the properties xpos, ypos and so on.
• and one method, display.

The advantage is that such a class gives you a program you can look at after years and understand immediately. That is because you have the properties and the methods bundled in one place, referring to one thing, your little circles. Without the class you would have that in different places in your Code thus being less easily comprehendable and maintainable.

The next part you have a question to:

  Node(float tempX, float tempY, color tempColor) {

    xpos=tempX;

    ypos=tempY;

    c = tempColor

That is a part of the Class. It has the same name like the Class. It is the constructor. With it you call a real element, a real circle into existence (you construct it). You use the Class, the blue print, the idea of a circle, to make one real circle with position and color and so forth. 

To do so, in setup() you call the Constructor in a for loop and push your new circles in your list. You give values to the constructor - like tempX, tempY and it gets stored in the new circle (that are the lines xpos=tempX; etc.).

Your question:

And can I now locate each of the Nodes by running a new draw command and typing Node[1] for example to locate Node 1?

Yes, you can.
You can adress the nodes separately by their number, but not Node[1] - that would be with an array.
Since you use an arrayList here it is like in the Code below to change one circle (number 4):

1.   // get one element (the 4th) and change it
2.   Node node = (Node) nodes.get(4);
3.   node.radius = node.radius * 2;

Similarly draw only one circle:

1.   // get one element (the 4th)
2.   Node node = (Node) nodes.get(4);
3.   node.display();

You might not see it unless you comment out (put // in front of the diplay() line) the for loop in draw() because it is just one of the circles that are drawn anyway.

Sorry that this sounds rather complicate.  
But the advantage you have now is, that you can change each circle separately.



I modified the Code a little.

1. // from http://processing.org/learning/topics/arraylistclass.html
2. // This is a list of my circles / nodes from the class Node
3. ArrayList nodes;
4. void setup() {
5.   // runs only once
6.   size(900, 600);
7.   // Create an empty ArrayList
8.   nodes = new ArrayList();
9.   // set radius of the main circle
10.   int radius = 100;
11.   // init nodes here in a for loop
12.   for (int deg = 0; deg < 360; deg += 36) {
13.     float angle = radians (deg);
14.     // x and y = Position of small cirlces on the big circle
15.     float x = 300 + (cos(angle) * radius);
16.     float y = 300 + (sin(angle) * radius);
17.     // calculate color and radius individually
18.     color myFancyColor = color ( deg + 50, deg*10 + 70, 0 );
19.     float myFancyRadius = deg/3 + 20;
20.     // A new node object (small circle) is added to the ArrayList (by default to the end)
21.     nodes.add(new Node(x, y, myFancyColor, myFancyRadius ));
22.   } // for
23.   // message to show how many elements we have in the list (e.g. 10)
24.   println (nodes.size());
25.   // get one element (the 4th) and change it
26.   Node node = (Node) nodes.get(4);
27.   node.radius = node.radius * 2;
28.   // node.xpos-=100;
29.   node.c = color(255, 0, 0); 
30.   //
31. } // func  
32. void draw() {
33.   // runs in a loop again and again
34.   background(0);
35.   // set up the variable node from Class Node
36.   Node node;
37.   // display nodes here etc.
38.   for (int i = nodes.size()-1; i >= 0; i--) {
39.     // get the node named "node" at position i in the list
40.     node = (Node) nodes.get(i);
41.     // display this individual node
42.     node.display();
43.   } // for
44. } // func
45. // ==========================================================
46. class Node {
47.   float xpos;    // each node has its properties
48.   float ypos;
49.   color c;
50.   float radius;
51.   Node(float tempX, float tempY, color tempColor, float tempRadius) {
52.     // each node gets its properties here in the Constructor
53.     xpos = tempX;
54.     ypos = tempY;
55.     c = tempColor;
56.     radius = tempRadius;
57.   } // Constructor
58.   //
59.   void display () {
60.     noFill();
61.     smooth();
62.     // use the individual properties to draw one node
63.     stroke(c);
64.     ellipse (xpos, ypos, radius, radius);
65.   } // func
66.   //
67. } // class

Greetings, Chrisir

Sorry, allonestring, we wrote at the same time...

and you use array instead of arrayList - and your arrays are probably much clearer... 

Thank you Chrisir and allonestring sooo much for all your help!!!  I understand so much better now.