P5JS

Overview

P5.js is an open-source JavaScript library that simplifies creative coding and interactive graphics development for web-based applications. It offers a beginner-friendly environment for artists, designers, and programmers to create dynamic visual content and user interfaces directly in the browser. With its easy-to-learn syntax and extensive functionality, P5.js empowers users to experiment with animations, games, data visualizations, and interactive art projects, making it a versatile tool for creative expression and educational purposes.

Introduction to p5.js

1. Web-based development P5.js is a creative web-based coding platform and open-source JavaScript library designed to make coding interactive and visually engaging web applications accessible to artists, designers, and programmers.
2. Beginner friendly P5.js simplifies web development by providing easy-to-learn functions and a beginner-friendly environment, making it an ideal choice for those new to programming.
3. Extensible framework With P5.js, you can create a wide range of projects, including animations, games, data visualizations, interactive art, and more, all directly in your web browser.
4. Promotes curiosity P5.js encourages experimentation and creativity by allowing you to manipulate graphics, respond to user input, and build interactive user interfaces with just a few lines of code.
5. Active community P5.js offers a supportive and active community, a wealth of online tutorials, and extensive documentation, making it an excellent tool for college undergraduates to explore the intersection of programming and creative expression.

P5.js is a user-friendly JavaScript library that empowers college undergraduates to explore the world of creative coding. With its approachable syntax and versatile capabilities, it provides a valuable gateway for students to combine their artistic and programming skills, enabling them to create interactive web projects spanning animations, games, data visualizations, and more, while benefiting from a robust community and learning resources.

Anatomy of a P5.js program

1. setup() The setup() function initializes variables and the canvas, or program drawing space. The setup routine does not do any drawing. setup() is called only once during program execution.

2. draw() The draw() function is responsible for updating variables and rendering graphics elements on the screen. draw() is called continuously throughout the life of the program.

3. preload() The preload() function is an optional function that is called just once prior to setup() if it exists. The preload() function is used load program image and sound assets. preload() ensures that all assets are loaded before passing control to setup().

The p5.js game loop offers a simple, yet powerful framework for exploring user interface design. Follow the link, modifying the program to explore the program flow.

The Game Loop Pattern

1. The Game-Loop pattern is a recurring structure in interactive applications, like p5.js, games, simulations, and mobile apps, where there is a continuous cycle of updating the application’s state and rendering visual output.

2. Initialization occurs before the start of the main loop.

3. Loop iterations typically consist of two main phases: an update phase, where the application’s logic and state are modified based on user input and other factors, and a render phase, where the visual elements are drawn to reflect the current state.

4. Frame rate is used to describe the speed of each loop iteration, often measured in frames-per-second or fps. By running this loop continuously, often at a fixed frame rate, applications maintain responsiveness and create smooth animations and interactions.

5. Complex game engines implement game loops that perform many different functions. Here is an example of a complex game loop implemented by the Unity game engine, or a simpler game loop used in Pygame

6. Development approach whether simple or complex, the developer needs to understand how their specific game loop pattern, so that they can make appropriate, informed decisions about where to add their code to accomplish specific actions.

The Game-Loop pattern is a fundamental structure in interactive applications, ensuring that user interactions are processed, and the visual display is updated in a coordinated manner. It consists of an update phase for logic and state changes and a render phase for visual rendering, allowing for responsive and immersive experiences in games and simulations. This pattern is essential for maintaining smooth animations and dynamic content in web-based applications.

Key Concepts in P5.js coding

1. Sketch Structure: P5.js sketches typically consist of two primary functions: setup() and draw(). The setup() function is called once when the sketch starts and is used for initial setup tasks like canvas creation and variable initialization. The draw() function is called repeatedly, typically 60 times per second by default, and is where most of the interactive and animated content is placed.

2. Canvas Creation: You use the createCanvas() function to specify the dimensions of the drawing canvas. This function is typically called within the setup() function. The canvas is where all the graphics and user interface elements will be displayed.

3. Coordinate System: P5.js uses a Cartesian coordinate system with the origin (0, 0) at the top-left corner of the canvas. The x-axis increases from left to right, and the y-axis increases from top to bottom.

4. Looping: P5.js uses a continuous loop for the draw() function by default. To control the frame rate and animation speed, you can use functions like frameRate() to set the frame rate to a specific value.

5. Rendering Order: In the draw() function, objects and elements are drawn from back to front. This means that the order in which you draw elements matters, as objects drawn later may appear on top of those drawn earlier.

6. Background: The background() function is used to set the background color of the canvas and is typically called within the setup() function or at the beginning of the draw() function to refresh the canvas in each frame. The window canvas is effectively erased with each call to background().

7. No Loop: You can use the noLoop() function to stop the draw() function from continuously executing. This is useful when you want to create static sketches or interactive elements that respond only to user input.

8. Mouse and Keyboard Interaction: P5.js provides functions like mouseX, mouseY, and key to access the current mouse position and keyboard input, allowing you to create interactive elements and respond to user actions.

9. Comments: Just like in regular programming, you can add comments to your code using // for single-line comments and /* */ for multi-line comments. Comments are essential for documenting your code and explaining its logic to others.

Understanding these fundamental concepts is crucial for getting started with P5.js and building a strong foundation for creating interactive and visually appealing user interface designs.

P5JS Global State

1. Global state When initializing, P5.js sets default values for various attributes, such as fill color, stroke color, stroke weight, transformations (translate, rotate, scale), and more.

2. Transformation attributes these attributes represent the traditional 2D or 3D euler coordinates including translate() (the current position of the canvas origin), rotate() (the current rotation angle in radians), and scale() (the current scaling factors for the x and y axes.)

3. Style attributes These attributes represent the current values affecting drawing: fill() (the current fill color for shapes.), stroke() (the current stroke color for shapes), strokeWeight() (the current stroke weight or line thickness), strokeCap() (the current stroke cap style (ROUND, SQUARE, or PROJECT)), strokeJoin() (the current stroke join style (MITER, ROUND, or BEVEL)).

4. Graphics state This attribute is actually a collection of all the other attributes and is managed with push() and pop().

5. Saving and restoring By using push() and pop() you can isolate and manage different elements or groups of elements within your P5.js sketch without worrying about unintended side effects on the rest of your drawing.

6. Stack Design pattern P5.js maintains state in a stack data structure. The initial global state is the first element in the stack. push() make a copy of the current top of the stack and adds it to the top. Any state changes are made to the top element of the stack. pop() deletes the top element of the stack, effectively restoring global state to the previsous top of the stack.

7. General workflow When writing P5.js programs, you should aim to isolate the update-render steps within a separate function. Within the function, you call push() at the beginning of the update, perform the update, render the drawings, and finally, call pop() to restore the P5.js state.

By using push() and pop() in your P5.js sketch, you can encapsulate and control the changes made to these attributes within a specific scope, ensuring that changes made within the scope do not affect the rest of your drawing. This makes it easier to manage complex graphics and animations with different settings and transformations.