Week 1 Assignment: Walker Documentation (Zulfkhar Maukey)

Introduction

The Walker is an interactive p5.js project that creates a constantly morphing creature that moves in random directions on a canvas. This project utilizes JavaScript and the p5.js library to generate a visually intriguing and ever-changing artwork. In this documentation, we will provide a detailed description of what the Walker does, what the user can expect, and any interactive elements involved.

Project Description

What It Does

The Walker is an abstract creature that appears to be walking across the canvas. It constantly changes its shape, giving it an amorphous and unpredictable appearance. The key features of the Walker project are as follows:

1. Random Movement: The Walker moves in random directions, making it appear as if it is wandering aimlessly across the canvas.
2. Mouse Interaction: There is a 50% chance that the Walker will move towards the mouse cursor’s position. When this happens, it appears as though the creature is attracted to the mouse.
3. Shape Morphing: The creature’s shape is continually changing. It starts with a predefined shape made up of random vertices, and these vertices are updated randomly, causing the creature to morph over time.

User Interaction

The user’s interaction with the Walker project is minimal but plays a crucial role in shaping the creature’s movement. Here’s what the user can do:

• Mouse Movement: When the user moves their mouse cursor within the canvas, the Walker may respond by moving towards the mouse cursor with a 50% probability. This interaction creates a dynamic relationship between the user’s cursor and the creature’s movement.

Implementation

Walker Class

The Walker is implemented as a JavaScript class with the following methods:

• Constructor: The constructor sets up the initial position of the Walker at the center of the canvas and initializes the creature’s shape with a random set of vertices.
• step(): This method controls the Walker’s movement. It calculates a random number to determine whether the Walker should move towards the mouse cursor or in a random direction. If the decision is to move towards the mouse, it adjusts the position of the Walker accordingly. Otherwise, it moves the Walker randomly. The Walker’s position is constrained within the canvas boundaries.
• display(): The display() method is responsible for rendering the Walker on the canvas. It draws the creature as a shape with constantly morphing vertices.
• updateBounds(): This method randomly updates the positions of the creature’s vertices, causing it to morph and change shape.

Setup and Draw Functions

In the p5.js setup function:

• The canvas is created with a size of 400×400 pixels.
• The background is set to a light gray color (RGB 220, 220, 220).
• An instance of the Walker class is created.

In the p5.js draw function:

• The step() method of the Walker is called, updating its position.
• The display() method of the Walker is called to draw the creature on the canvas.

Demo

Full-source code

Conclusion

The Walker project is an interactive P5.js artwork that combines randomness and user interaction to create an ever-changing and visually intriguing creature. Users can observe the creature’s unpredictable movement and, through their mouse cursor, influence its direction. This project serves as an example of how programming and creativity can come together to produce interactive and captivating visual experiences.