Creative programming is a programming method that aims to create something expressive and visually appealing, rather than something purely functional. This type of programming method is used to create live artwork, graphical simulations and visualization algorithms. There are many tools and libraries for creative or visual programming, of which the processing is the most widely used. Processing is an open-source programming language and IDE that is built for visual programming. It is free to download and process here. It is also available as a Python dialect (processing.py) and a JavaScript framework (p5.js). In this article, we will build a simple random walker program that is just a ball moving randomly on a canvas.
Each processing sketch usually contains two functions-
- setup() – It is called once at the beginning and is usually used for initialization purposes.
- draw() – 30 calls per second by default, making the default frame rate for animations 30 frames per second.
Implementation sketches
The sample code has been written in Java using the processing library and the processing IDE.
Walker w; //Walker object
void setup() //Called at the beginning once
{
size( 640 , 360 ); //Declaring size of the output window
w = new Walker(); //Initializing the new walker object
}
void draw() //Called every frame
{
background( 255 ); //Setting a white background
w.display(); //Displaying the walker object
}Implement the Walker class
class Walker //The walker class
{
PVector location; //A vector object representing the location
Walker() //Constructor to initialize the data member.
{
//Initial location of the walker object is
//set to the middle of the output window.
location = new PVector(width /2 , height /2 );
}
void display() //Function to display the walker object
{
//Drawing a black circle of radius 10 at location
fill( 0 );
ellipse(location.x, location.y, 10 , 10 );
}
}At this point, if we run the sketch, it only shows a ball in the center of the output screen-
In order to move the walker object, we will add a walk() function to the walker class and call it in the draw() function in the sketch. We’ve also added a checkEdges() function to Walker to prevent Walker objects from moving off the screen. We also had to modify the sketch to include the new functions we added to the Walker class. There is one more thing we can do by moving the background() function into setup(). This way, the background is not updated every time, and we can see the traces left by the Walker object.
Implementation of revisions to sketches
//Program to implement random walker
Walker w; //Walker object
void setup() //Called at the beginning once
{
size(640, 360); //Declaring size of the output window
background(255); //Setting a white background
w = new Walker(); //Initializing the new walker object
}
void draw() //Called every frame
{
w.walk(); //Walking the Walker object
w.checkEdges(); //Checking for edges of the output screen.
w.display(); //Displaying the walker object
}Modified implementation of the Walker class –
class Walker //The walker class
{
PVector location; //A vector object representing the location
Walker() //Constructor to initialize the data member.
{
//Initial location of the walker object is
//set to the middle of the output window.
location = new PVector(width /2, height /2);
}
void walk()
{
//The x and y values of the location
//vector are incremented by a random value
//between -5 and 5
location.x += random(-5, 5);
location.y += random(-5, 5);
}
//Function to prevent the Walker to move out of the screen
void checkEdges()
{
if (location.x <0)
location.x = 0;
else if (location.x> width)
location.x = width;
if (location.y <0)
location.y = 0;
else if (location.y> height)
location.y = height;
}
void display() //Function to display the walker object
{
//Drawing a black circle of radius 10 at location
fill(0);
ellipse(location.x, location.y, 10, 10);
}
}If you find anything incorrect, or would like to share more information about the above topics, please write a comment.
