Friday, September 20, 2013

A Dynamic sketch and an interactive sketch in processing

I am currently being amazed by the simplicity of this programming language as it can make your life a lot easier if you are planning to play with graphic windows. Mainly what I am doing in my experiments with this language could be categorized by some as random crap. But the fact that I can create a simple application that creates shapes based on my clicks which in other languages would require a lot more boilerplate code makes this language stand out.

In this article I will share with you two more source codes. One that creates a dynamic sketch (similar to the one I posted here) and one that creates an interactive sketch that changes depending on where you click on the canvas. You might be wondering why is he referring to apps as sketches and to windows as canvasses? Well the reason is Processing programming language is not really designed specifically for programmers. It is also designed for artists who have decided to follow the way things are going and create "computerized" art. But we programmers are allowed to enjoy it's simplicity and use it like a programmer's paint.

A dynamic Sketch:

The following source code creates an infinite amount of concentrical circles. It starts from the very centre of the canvas and expands to the bounds of the canvas. When the circle goes out of bounds it starts over. The colors of the circles are purely random.

//This is an application that draws concentric circles
//The circles decrease insize after each iteration so one does not completely cover the other. Only a portion of it
//The circles are created indefinately as I never make a call for noLoop() inside the draw() function 
//This is intentionally as to create a "dizzy" effect

void setup(){
  //set the size of the canvas
  //change the color mode from hexadecimal palette to RGB mode 
  //choose color for background

void draw(){
  //x1 is the variable for the size of the circle.
  for(int x1=1000;x1>0;x1-=10){
    //create 1000 circles each time draw is called  
    //choose random color for each circle bound
    //We only want the circle bounds so we call noFill();


When you run the code the output will look something like the above picture but given the fact that the code is dynamic the output would be too. Circles will continuously be drawn indefinitely until you stop the application. The final application can be found here. The application will run in linux, Mac OS and Windows.

An interactive sketch:

The following sketch draws a polygon depending on where the mouse is clicked. 

void setup(){

void draw(){
   //only create a polygon if mouse is pressed
    //save the current state of the canvas
    //move the canvas
    //map the mouse click and save it to an integer
    int circleResolution=(int)map(mouseY+100,0,height,2,10);
    //choose the radious of the polygon depending on where I clicked
    int radius=mouseX-width/2;
    //choose the size of the angle depending on the mouse click
    float angle=TWO_PI/circleResolution;
    //choose random stroke colour for each polygon
    //polygons require extra code in order to be drawn,
    //depending on where the mouse was clicked create the same number of vertices
     for(int i=0;i < circleResolution;i++){
      //define the x and y coordinates of each vertex
      float x=0+cos(angle*i)*radius;
      float y=0+sin(angle*i)*radius;
      //store each vertex for our polygon
    endShape(); //we tell the compiler our shape is completed
    //bring back the saved canvas state


If you run the above code and play a little bit with your mouse you can get the above the result, or any other result. It's a matter on where you click and where you drag your mouse. The application for the above example can be found here. The application can run on Windows, Linux and Mac OS

No comments :

Post a Comment

tell us your opinion about the subject

Note: Only a member of this blog may post a comment.

Related Posts Plugin for WordPress, Blogger...