This week, we will see different ways to create Cycles with programming. In architecture, the repetition of geometric elements create grids, patterns, rythms. Mastering cycles in programming will help to create different logical structures enabling the creation of rigid grids to complex apparently non-repetitive structures.

“Many interpreted languages are categorized as scripting languages. There is no clear definition of a scripting language, but there are properties commonly used to identify one. They are typically created for specific domains or applications. For example, MEL was developed for Maya, ActionScript for Flash, and JavaScript for the Web. A scripting language provides easy access to specific tasks relevant to a particular context. For example, AppleScript for Mac OS can be used to process a folder full of images and then upload them to a server or send them via Email. Programs can usually be written more quickly in a scripting language, but they often run slower and use more of the computer’s memory.”

“Java was chosen as the basis for Processing because it represented a good balance between performance and simplicity of use. If we didn’t care about speed, a scripting language like Python or Ruby might make more sense in a sketching environment. If we didn’t care about transition to more advanced languages, we might not use Java/C++ style syntax.” (Processing p. 680)

CODE CYCLES.ZIP

print() println() ++ (increment)

We will introduce basic principles of outputs and inputs.

First, let's take a part of the code we had last week using the draw loop. We will simply output some text using print() command. Note print() command use a String (sequence of character) and output the content in the java console (in Proce55ing, this is the window bellow the code). This is usefull when you want to trace a value of a variable in your code during the execution. A similar function is used to output code inside a text file.

void setup(){
  size(600,300);
}
 
int count=0;
 
void draw(){
 
  background(155);
  count = count+1;
      //count++; is an alternative way to increment count.
  print(count);
     //print(count+"\n"); will output the content on a new line
     //println(count); is a shorter way to write print(count+"\n");
 
}

OUTPUT:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515...

For each loops:

• We redraw an empty screen using background(),
• Increment count of 1
• Print the value of count.

% (modulo)

The modulo is a simple way to control an event during a loop execution.

Next, we will add control to the loop where we will change the value of the variable count each time it reach a certain value.

void setup(){
  size(600,300);
}
 
int count=0;
 
void draw(){
 
  if(count==10)
    {
      background(255,0,0);
      count = 0;
    }
  else
    background(155);
 
  count = count+1;
 
  println(count);
}

OUTPUT:

1
2
3
4
5
6
7
8
9
10
1
2
3
4
...

Remark, each time count reach 10, count is reset to 0.

void setup(){
  size(600,300);
}
 
int count=0;
 
void draw(){
 
  if( (frameCount%10) == 0)
    background(255,0,0);
  else
    background(155);
 
  count = count+1;
 
  println(count);
}

void setup(){
  size(600,300);
}
 
 
void draw(){
 
  if( (frameCount%10) == 0)
    background(255,0,0);
  else
    background(155);
 
  println(frameCount);
}

mouseX draw()

Interactivity in proce55ing is nothing else than a function called at each new frame. For convinience, it is provided as a basic element. This is the draw() function. If something is changed inside the draw() function and refreshed rapidly enough, you get an interactive program.

In proce55ing, two variables (mouseX and mouseY) are updated according to the position of the mouse on each frame. The value of mouseX and mouseY depend on the size of your window (declared in void setup()).

In the example, the value of mouseX and mouseY is used to change the background colors.

void setup(){
  size(600,300);
}
 
 
void draw(){
 
  if( (frameCount%10) == 0)
    background(mouseX,0,0);
  else
    background(mouseY);
 
  println("Count:" + frameCount + "| mouseX:" + mouseX + " | mouseY:" + mouseY);
}

OUTPUT:

...
Count:30| mouseX:213 | mouseY:74
Count:31| mouseX:209 | mouseY:72
Count:32| mouseX:204 | mouseY:72
Count:33| mouseX:202 | mouseY:72
Count:34| mouseX:197 | mouseY:72
Count:35| mouseX:195 | mouseY:72
Count:36| mouseX:189 | mouseY:72
Count:37| mouseX:186 | mouseY:72
Count:38| mouseX:186 | mouseY:72
Count:39| mouseX:174 | mouseY:72
Count:40| mouseX:171 | mouseY:72
Count:41| mouseX:168 | mouseY:72
Count:42| mouseX:164 | mouseY:72
Count:43| mouseX:162 | mouseY:72
Count:44| mouseX:158 | mouseY:72
Count:45| mouseX:153 | mouseY:72
Count:46| mouseX:151 | mouseY:73
Count:47| mouseX:148 | mouseY:73
Count:48| mouseX:145 | mouseY:73
Count:49| mouseX:142 | mouseY:74
Count:50| mouseX:138 | mouseY:75
Count:51| mouseX:135 | mouseY:76
Count:52| mouseX:131 | mouseY:77
...

Remark: mouseX in this example could be over 255 (the maximum value of RGB 0-255), then the color is shifted back to black.

More advanced relation: Sometimes, it is good to normalize the value of mouseX according to the width of your program.

( mouseX/(float)width ) * 255

This way, you always get a value between 0 and 1. You could then multiply your value by a maxium value (255 for RGB colors).

size()

Introduction to an ObjectOriented Framework for Geometry. A first example, the most simple as possible.

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
}
 
void draw(){
  background(255);
}

Remark: In this example we use OpenGL in size(). We could also use size(width, height, P3D); Once imported in proce55ing, OOG create an empty 3D scene

In OOG, you have three main types of objects: *Single Points (Pt) *List of Points (Pts and Face) *Collection of Lists of Points or Faces (Obj)

Any Pt could be part of many Pts at the same time. Any Pt or Pts(Face) could be part of many Obj.

In fact, Pts and Obj could be used for groupping (similar as for LAYERS, GROUPS, TAGGING interfaces).

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();
  Pt p = Pt.create(0,0,0);
  form.add(p);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList = new Line();
 
  for(int i=0; i<30; i++)
    {
      Pt p = Pt.create(i*10,i*i,0);
      myList.add(p);
    }
 
  form.add(myList);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<20; i++)
  {
    Pt p;
 
    p = Pt.create(i*10,i*i,0);
    myList.add(p);
 
    p = Pt.create(-i*10,i*i,0);
    myList.add(p);
  }
 
  form.add(myList);
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<20; i++)
  {
    myList.add(Pt.create( i*10,i*i,0));
    myList.add(Pt.create(-i*10,i*i,0));
    myList2.add(Pt.create( i*10,i*i,30));
    myList2.add(Pt.create(-i*10,i*i,30));
  }
 
  form.add(myList);
  form.add(myList2);
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<20; i++)
  {
    myList.add(Pt.create( i*10,i*i,0));
    myList.add(Pt.create(-i*10,i*i,0));
    myList2.add(Pt.create( i*10,i*i,30));
    myList2.add(Pt.create(-i*10,i*i,30));
  }
 
  form.add(myList);
  form.add(myList2);
 
  for(int i=0; i<myList.size()-1; i++)
  {
    Face myFace = new Face();
 
    myFace.add(myList.pt(i));
    myFace.add(myList.pt(i+1));
    myFace.add(myList2.pt(i+1));
    myFace.add(myList2.pt(i));
 
    form.add(myFace);
  }
 
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<20; i++)
  {
    if(random(100)<50)
    {
      myList.add(Pt.create( i*10,i*i,0));
      myList.add(Pt.create(-i*10,i*i,0));
      myList2.add(Pt.create( i*10,i*i,30));
      myList2.add(Pt.create(-i*10,i*i,30));
    }
  }
 
  form.add(myList);
  form.add(myList2);
 
  for(int i=0; i<myList.size()-1; i++)
  {
    Face myFace = new Face();
 
    myFace.add(myList.pt(i));
    myFace.add(myList.pt(i+1));
    myFace.add(myList2.pt(i+1));
    myFace.add(myList2.pt(i));
 
    form.add(myFace);
  }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
 
  for(int i=0; i<80; i++)
  {
    myList.add(Pt.create( i*10,sin(i/3.0)*30,0));
  }
 
  form.add(myList);
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<80; i++)
  {
    myList.add(Pt.create( i*10,sin(i/3.0)*30,0));
    myList2.add(Pt.create( i*10,cos(i/3.0)*30,30));
  }
 
  form.add(myList);
  form.add(myList2);
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

output(*)

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList  = new Line();
  Line myList2 = new Line();
 
  for(int i=0; i<80; i++)
  {
    myList.add(Pt.create( i*10,sin(i/3.0)*30,0));
    myList2.add(Pt.create( i*10,cos(i/3.0)*30,30));
  }
 
  for(int i=0; i<myList.numOfPts()-1; i++)
  {
    Face myFace = new Face();
 
    myFace.add(myList.pt(i));
    myFace.add(myList.pt(i+1));
    myFace.add(myList2.pt(i+1));
    myFace.add(myList2.pt(i));
 
    form.add(myFace);
  }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
int bump = 10;
int moduleHeight = 50;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList;
  Line myList2;
 
  myList = new Line();
  myList2 = new Line();
 
  for(int i=0; i<80; i++)
  {
    myList.add(Pt.create( i*10,sin(i/3.0)*bump,0));
    myList2.add(Pt.create( i*10,cos(i/3.0)*bump,moduleHeight));
  }
 
  for(int i=0; i<myList.numOfPts()-1; i++)
  {
    Face myFace = new Face();
 
    myFace.add(myList.pt(i));
    myFace.add(myList.pt(i+1));
    myFace.add(myList2.pt(i+1));
    myFace.add(myList2.pt(i));
 
    form.add(myFace);
  }
 
  /////////////////////////////////////
  /////////////////////////////////////
 
  myList = new Line();
  myList2 = new Line();
 
  for(int i=0; i<80; i++)
  {
    myList.add(Pt.create( i*10,cos(i/3.0)*bump,moduleHeight));
    myList2.add(Pt.create( i*10,sin(i/3.0)*bump,moduleHeight*2));
  }
 
  for(int i=0; i<myList.numOfPts()-1; i++)
  {
    Face myFace = new Face();
 
    myFace.add(myList.pt(i));
    myFace.add(myList.pt(i+1));
    myFace.add(myList2.pt(i+1));
    myFace.add(myList2.pt(i));
 
    form.add(myFace);
  }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
int bump = 10;
int moduleHeight = 50;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  Line myList;
  Line myList2;
 
  for(int j=0; j<10; j++)
  {
 
    myList = new Line();
    myList2 = new Line();
 
    for(int i=0; i<80; i++)
    {
      myList.add(Pt.create( i*10,sin(i/3.0)*bump,moduleHeight*(j*2)));
      myList2.add(Pt.create( i*10,cos(i/3.0)*bump,moduleHeight*(j*2+1)));
    }
 
    for(int i=0; i<myList.numOfPts()-1; i++)
    {
      Face myFace = new Face();
 
      myFace.add(myList.pt(i));
      myFace.add(myList.pt(i+1));
      myFace.add(myList2.pt(i+1));
      myFace.add(myList2.pt(i));
 
      form.add(myFace);
    }
 
    /////////////////////////////////////
    /////////////////////////////////////
 
    myList = new Line();
    myList2 = new Line();
 
    for(int i=0; i<80; i++)
    {
      myList.add(Pt.create( i*10,cos(i/3.0)*bump,moduleHeight*(j*2+1)));
      myList2.add(Pt.create( i*10,sin(i/3.0)*bump,moduleHeight*(j*2+2)));
    }
 
    for(int i=0; i<myList.numOfPts()-1; i++)
    {
      Face myFace = new Face();
 
      myFace.add(myList.pt(i));
      myFace.add(myList.pt(i+1));
      myFace.add(myList2.pt(i+1));
      myFace.add(myList2.pt(i));
 
      form.add(myFace);
    }
 
  }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  //////////////////////////////////////
  //CREATE A BASIC GRID
 
  Obj tmpObject = new Obj();
 
  for(int i=0; i<30; i++)
  {
    Line myList  = new Line();
 
    for(int j=0; j<20; j++)
      myList.add(Pt.create( i*10,j*10,0));
 
    tmpObject.add(myList);
  }
 
  //////////////////////////////////////
  //CREATE LINE S FROM A GRID USING MODULO
 
  for(int i=0; i<tmpObject.numOfLines(); i++)     //For each Lines
    if(i%3==0)                                    //Skip the third line
    {
      Line myList  = new Line();                  //Container fpr new Points
 
      Line iLine = tmpObject.line(i);             //Create a temp line
 
      for(int j=0; j<iLine.numOfPts(); j++)       //For each points of this line
        myList.add(iLine.pt(j));
          //myList.add(tmpObject.line(i).pt(j));
          //(Alternative way to access the point directly inside the line)
 
      form.add(myList);                           //Add the new Line to form obj()
    }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  Scene.drawAxis = true;
  Line.globalRender = new RenderPtsAll();
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  //////////////////////////////////////
  //CREATE A BASIC GRID
 
  Obj tmpObject = new Obj();
 
  for(int i=0; i<30; i++)
  {
    Line myList  = new Line();
 
    for(int j=0; j<20; j++)
      myList.add(Pt.create( i*10,j*10,0));
 
    tmpObject.add(myList);
  }
 
  //////////////////////////////////////
  //CREATE LINE S FROM A GRID USING MODULO
 
  for(int i=0; i<tmpObject.numOfLines(); i++)     //For each Lines
    if(i%3==0)                                    //Skip the third line
    {
      Line myList  = new Line();                  //Container fpr new Points
 
      for(int j=0; j<tmpObject.line(i).numOfPts()-1; j+=2)       //For each points of this line
      {
        int indexOfLine  = (i+1)%tmpObject.numOfLines();
        int indexOfPoint = (j+1)%tmpObject.line(i).numOfPts();
        myList.add(tmpObject.line(i).pt(j));
        myList.add(tmpObject.line(indexOfLine).pt(indexOfPoint));
      }
 
      form.add(myList);                           //Add the new Line to form obj()
    }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}

import processing.opengl.*;
import oog.*;
 
Oog goo;
 
void setup(){
  size(600,300,OPENGL);
  goo = new Oog(this);
 
  createForm();
}
 
Obj form;
 
void createForm(){
  form = new Obj();    //Create an empty Object
 
  //////////////////////////////////////
  //CREATE A BASIC GRID
 
  Obj tmpObject = new Obj();
 
  for(int i=0; i<60; i++)
  {
    Line myList  = new Line();
 
    for(int j=0; j<60; j++)
      myList.add(Pt.create( i*10,j*10,0));
 
    tmpObject.add(myList);
  }
 
  //////////////////////////////////////
  //CREATE LINE S FROM A GRID USING MODULO
 
  for(int i=0; i<tmpObject.numOfLines(); i++)     //For each Lines
    if(i%3==0)                                    //Skip the third line
    {
      Line myList  = new Line();                  //Container fpr new Points
 
      for(int j=0; j<tmpObject.line(i).numOfPts()-1; j+=2)       //For each points of this line
      {
        int indexOfLine  = (i+1)%tmpObject.numOfLines();
        int indexOfPoint = (j+1)%tmpObject.line(i).numOfPts();
        myList.add(tmpObject.line(i).pt(j));
        myList.add(tmpObject.line(indexOfLine).pt(indexOfPoint));
      }
 
      form.add(myList);                           //Add the new Line to form obj()
    }
 
  goo.setCenter(form);
}
 
void draw(){
  background(255);
  form.draw();
}