Creative Programming In Processing | Set 1 (Random Walker)

Creative programming is a type of programming approach in which the goal is to create something expressive and visual instead of something that is purely functional. This type of programming approach is used to create live artworks, graphical simulations and visualize algorithms. There exists a number of tools and libraries for creative or visual programming of which Processing is the most widely used. Processing is an open source programming language and IDE that built for visual programming purposes. Processing is available for free download 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 which is just a ball moving randomly across the canvas.

Each processing sketch typically consists of two functions-

• setup() – It is called once at the beginning and is generally used for initialization purposes.
• draw() – It is called 30 times per second by default making the default framerate of the animation being 30 frames per second.

Implementation of sketch- The sample codes have been written in java using the processing library and the processing IDE. 

Java

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
}

Implementation of Walker class-

Java

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 just displays a ball that sits at the centre of the output screen- In order to move the walker object, we will add a walk() function to the Walker class and call it inside the draw() function in the sketch. We also add a checkEdges() function in Walker to prevent the Walker object from moving out of the screen. We must also modify the sketch to include the new functions we add in the Walker class. We can also do one more thing, move the background() function inside setup(). This way, the background will not be updated every time and we will be able to see the trail, the Walker object leaves behind.

Modified Implementation of sketch-

JavaScript

// 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 Walker class-

JavaScript

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);
    }
}