Skip to content

Bridget Riley.

Processing some code in processing

  • Processing is a free graphical library and integrated development environment built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context.*

it is often used in digital visual arts contexts with pure maths.

created using Processing version 1.5.1 on Windows but runs on later versions installed on Windows or Mac.

Code exploration

Note

Placeholder

The code is split into multiple fundtions for simplicity. Lots of log statements for debug purposes.

outputs each frame to disk for subsequent assembly into video

MAIN FLOW CONTROL section

Includes all setup and overall program flow control.

DECLARATIONS with global scope
//NB ****** note some variables are not used

float xPos, yPos, baseX, baseY, R, G, B, currentXbarLength, 
currentYbarLength, xTurnPos, currentYPos, previousYPos;
int count, currentColour, colourChangePos, previousColour, colourFlagPos, 
 squareside, squaresideY, currentXPos, previousXPos;

BLOCKLENGTH, SIDELENGTH,  STARTCOLOUR

boolean back, nextColour;

// Create log object
PrintWriter log;

// import the library for video frame export. !!!note third party lib
import com.hamoid.*;

??? // create a new VideoExport-object VideoExport videoExport; //SETUP

Setup the code / get ready to run initialise everything
void setup(){
  // Create a new log file in the sketch directory
  log = createWriter("processing_log.txt"); 

  log.println(millis()+" *** ENTER setup() ***");
 size(600, 300);  // Size must be the first statement
    // Set line drawing color to white
background(0);
 frameRate(30);


  // Some video settings
  videoExport = new VideoExport(this, "myVideo.mp4");
  videoExport.setFrameRate(30);  
  videoExport.startMovie();
initialise vars and constants
 BLOCKLENGTH =3;
 SIDELENGTH=100;
 squareside=150;
 //squaresideY=50;

 STARTCOLOUR=1;
 colourFlagPos=0;

currentColour=STARTCOLOUR;
//xPos=0;
//nextColour =false;
currentXPos= 0;
previousXPos=0;

currentYPos = 0;
//colourChangePos =0;
back=false;

 log.println(millis()+" *** EXIT setup() ***");
}

Core draw() function: draw and animate the square
void draw(){

  log.println(millis()+" *** ENTER draw() ***");

  printinfo();

 videoExport.saveFrame(); // save the current frame to disk

// call subfunctions to manage initial colour and position of the square

//if(currentXPos==previousXPos+BLOCKLENGTH){
 manageColour();


  managePosition();

 //}


// override default bahaviour of rect() if needed
 //rectMode(RADIUS);

 //draw a rectangle to the screen. rect() is a core function of processing.

rect(currentXPos, currentYPos, squareside, squareside);

//establish the current position on the canvas
//(currentXPos== width +squareside/2){

//update the position tracking 

if(currentXPos== width){

  println("CONDITION FIRED");
  //manageColour();
  back=true;
  delay(1000);
  currentYPos = currentYPos +squareside;
}

log.println(millis()+" *** EXIT draw() ***");

}
//*******

SUBFUNCTIONS

//******CUSTOM FUNCTIONS *********

manage and update the position of the square on the screen
void managePosition(){

  log.println(millis()+" *** ENTER managePosition() ***");
//change position and direction
//previousXPos=currentXPos+BLOCKLENGTH;
//nextColour=true;
if(!back){

setDirection(1.0, BLOCKLENGTH);
//nextColour=true;



} else if(back){

setDirection(2.0 , BLOCKLENGTH);
}

//previousXPos=currentXPos;

log.println(millis()+" *** EXIT managePosition() ***");

}
logging for debug purposes
// log to file ****************************************
void printinfo(){

   log.println("****************************LOG START*************************");
log.println("currentXPos::: "+currentXPos +"/nl");

log.println("previousXPos::: "+previousXPos);
log.println("currentXPos::: "+currentXPos);

log.println("BLOCKLENGTH::: "+BLOCKLENGTH);


log.println("currentColour::: "+currentColour);
log.println("previousColour::: "+previousColour);


log.println("R:::G:::B:::" + R+":::" +G+ ":::"+B+":::");


log.println("width::: "+width);
log.println("back:::: "+back);
 println("****************************LOG END*************************");

}

```java title="manage and update the colour of the square based on relative position"

// track and change the colour as required based on the relative xy position of the square; calls subfunctions to do so

void manageColour(){

log.println(millis()+" *** ENTER manageColour() ***");

if(!back){

if(currentXPos >= (previousXPos+BLOCKLENGTH)){

  if(currentColour==3){

    log.println(millis()+"  *************** SET RED *************");

              setColour(1);
              //previousXPos=currentXPos;

} else if(currentColour==1){

log.println("** SET GREEN **"); setColour(2);

              //previousXPos=currentXPos;

} else if(currentColour==2){ log.println("** SET GREEN **");

               setColour(3);
               //previousXPos=currentXPos;

}

log.println(millis()+" *** EXIT manageColour() ***");

} } else if(back){

if(currentXPos <= (previousXPos-BLOCKLENGTH)){

if(currentColour==3){

    log.println("*************** SET RED *************");

              setColour(1);
              //previousXPos=currentXPos;

} else if(currentColour==1){

log.println("** SET GREEN **"); setColour(2);

              //previousXPos=currentXPos;

} else if(currentColour==2){ log.println("** SET BLUE **");

               setColour(3);
               //previousXPos=currentXPos;

} }

 }
  }

  ```

```java title = "change the variables controlling square colour"

//set the colour to R,G, or B

void setColour(int newColour) { log.println(" ENTER setColour() "); //* set correct colour //red

if(newColour==1) {

R=255;
G=0;
B=0;

currentColour=1;

// previousColour=0;

fill(R,G,B); stroke(R,G,B);

//green } else if(newColour==2) {

  R=0;
  G=255;
  B=0;

  fill(R,G,B);
  stroke(R,G,B);

  currentColour=2;
  //previousColour=1;

}  else if(newColour==3) {

  R=0;
  G=0;
  B=255;

  fill(R,G,B);

stroke(R,G,B);

currentColour=3;

}

//stroke(R,G,B);

log.println(" EXIT setColour() "); }

```java title="change direction relative to previous"


void setDirection(float direction, int speed){

  log.println("*** ENTER setDirection() ***");

 if(direction==1.0){

   previousXPos = currentXPos;
   currentXPos=currentXPos+speed;
   //colourChangePos = currentXPos;

  } else if(direction ==2.0){
   previousXPos = currentXPos;
   currentXPos=currentXPos-speed;

  }

  log.println("*** EXIT setDirection() ***");

}

1
2
3
4
5
void setDirection(float direction, int speed){

  log.println("*** ENTER setDirection() ***");

 if(direction==1.0){

*** MERMAID *

flowchart TD
A --> B
flowchart TD
A["Start Program"] --> B["setup()"]
B --> B1["Create log file"]
B1 --> B2["Set canvas size"]
B2 --> B3["Set background black"]
B3 --> B4["Set frame rate"]
B4 --> B5["Initialize variables"]
B5 --> C["draw() loop"]

C --> C1["Log draw start"]
C1 --> C2["printinfo()"]
C2 --> C3["manageColour()"]
C3 --> C4["managePosition()"]
C4 --> C5["Draw rectangle"]
C5 --> D{"At right edge?"}

D -->|No| C6["Log draw end"]
C6 --> C

D -->|Yes| D1["Print condition fired"]
D1 --> D2["Set back to true"]
D2 --> D3["Delay"]
D3 --> D4["Move down one row"]
D4 --> C6

C3 --> MC{"Moving back?"}

MC -->|No| MC1{"Passed colour step?"}
MC1 -->|No| MCX["Return"]
MC1 -->|Yes| MC2{"Current colour?"}
MC2 -->|Red state| SC2["Set green"]
MC2 -->|Green state| SC3["Set blue"]
MC2 -->|Blue state| SC1["Set red"]

MC -->|Yes| MC3{"Passed colour step?"}
MC3 -->|No| MCX
MC3 -->|Yes| MC4{"Current colour?"}
MC4 -->|Red state| SC2
MC4 -->|Green state| SC3
MC4 -->|Blue state| SC1

SC1 --> S1["Set RGB to red"]
S1 --> S2["Apply red fill and stroke"]

SC2 --> S3["Set RGB to green"]
S3 --> S4["Apply green fill and stroke"]

SC3 --> S5["Set RGB to blue"]
S5 --> S6["Apply blue fill and stroke"]

C4 --> MP{"back?"}
MP -->|No| MP1["Move forward"]
MP -->|Yes| MP2["Move backward"]

MP1 --> SD1["previousXPos = currentXPos"]
SD1 --> SD2["currentXPos = currentXPos + speed"]

MP2 --> SD3["previousXPos = currentXPos"]
SD3 --> SD4["currentXPos = currentXPos - speed"]

flowchart TD
    A[Start] --> B[setup]
    B --> C[draw loop]
    C --> D[printinfo]
    D --> E[manageColour]
    E --> F[managePosition]
    F --> G[Draw rectangle]
    G --> H{Right edge}
    H -->|No| C
    H -->|Yes| I[Set back true]
    I --> J[Move down]
    J --> C