Base class for the library
Create Debug Div cause p5 font is expensive.
How to use debug() method.
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
utils.debug(
{
"FPS": frameRate().toFixed(0),
"Frequency": frequency.toFixed(3)
});
Timestamp function useful for file naming to avoid overwrite issues.
(boolean
= true
)
If true -> Timestamp within Year-Month-Day
String
:
Current date + time depending on _date argument value.
When _date = true;
The return format is Year-Month-Day_Hour-Minute-Second
When _date = false;
The return format is Hour-Minute-Second
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
// Font source:
// https://www.dafont.com/lcd-at-t-phone-time-date.font
var cutomFontName = "LCDAT&TPhoneTimeDate.ttf";
function setup() {
createCanvas(600, 600);
//noLoop();
}
function draw() {
background(200);
// get current time stamp within date
var currentTime = utils.getTimeStamp();
//print(currentTime);
// write it to canvas using utils's text function
fill(255, 100, 20);
utils.text(
currentTime, // string to display
width * 0.5 - 100, // x position
height * 0.5 - 60, // y position
16
);
// get current time stamp without date
var currentTime2 = utils.getTimeStamp(false);
fill(90, 90, 90);
// write it to canvas using utils's text function
utils.text(
currentTime2, // string to display
width * 0.5, // x position
height * 0.5, // y position
80, // fontsize
cutomFontName, // custom font
CENTER, // text alignment horizontal
CENTER); // text alignment vertical
}
Utilizes p5JS saveCanvas function to make it easier file saving process by combining the function with getTimeStamp() method.
(String
= "png"
)
The file extension JPG, PNG, ...
var x, y, px, py;
var jump = 10;
var ptime = 2000;
// Init global utils var
var utils = new p5.Utils();
var counter = 0;
function setup() {
createCanvas(600, 600);
x = width * 0.5;
y = height * 0.5;
px = x;
py = y;
background(180);
}
function draw() {
//background(180, 1);
px = x;
py = y;
// Basic random walker algorithm
var dice = random();
if (dice < 0.25) {
x += jump;
} else if (dice < 0.5) {
x -= jump;
} else if (dice < 0.75) {
y += jump;
} else {
y -= jump;
}
strokeWeight(5);
stroke("#ffcc00");
noFill();
beginShape();
vertex(x, y);
vertex(px, py);
endShape();
// Automated saveCanvas for every 10th second
if (utils.notify(10) == true && counter < 4) {
ptime = millis();
// save current canvas image with default attributes
utils.saveCanvas();
// or you can set prefix and file extension argument
// utils.saveCanvas("randomWalker","jpg");
// clear the canvas again
background(180);
// set starting position to middle of the canvas
x = width * 0.5;
y = height * 0.5;
px = x;
py = y;
counter++;
}
}
Resizes an array and returns it. Similar to vectors resize in C++.
(Number)
The new size of the array
(Array<Number> | Array<String> | Array<Boolean>)
:
The new array
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
var arr = [];
arr = utils.arrayResize(arr,10);
print(arr);
// or assign default values
arr = utils.arrayResize(arr, 22, random(0,1));
print(arr);
Creates shadow effect usign drawing context. Must be used with endShadow method. See examples for how to use it.
((p5.Color | String))
The color can be declared as
color(r,g,b,a)
or in hexadecimal format
"#FFCC00"
as string argument.
(Number)
Blur amount of the shadow.
(Number)
Shadow offset for x axis.
(Number)
Shadow offset for y axis.
var utils = new p5.Utils();
function setup() {
createCanvas(400,400);
rectMode(CENTER);
}
function draw() {
utils.beginShadow("#000000", 5, 10, 10);
rect(width*0.5, height*0.5, 100, 100);
utils.endShadow();
}
Stops shadow effect for the following graphics on the canvas. For example usage beginShadow page.
Default Context 2D Gradient fill style. Must be used with endLinearGradient method. See examples for how to use it.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
(Number)
The x-axis coordinate of the start point.
(Number)
The y-axis coordinate of the start point.
(Number)
The x-axis coordinate of the end point.
(Number)
The y-axis coordinate of the end point.
(Array<Number>)
The distribution weight of colors. The values must be between 0 - 1. Conventionally, if you include three colors, set the first one to 0, the last one to 1, and the middle one depends on your choice(0-1). The method automatically assign start and stop values, if you do not specify any value they will be generated randomly.
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
function setup() {
createCanvas(600, 600);
noLoop();
}
function draw() {
background(220);
noStroke();
// Begin gradient fill
utils.beginLinearGradient(
["#FFCC00", color(34, 116, 165), color(126, 161, 114)],//Colors
width * 0.5 - 100, // gradient begin point x
height * 0.5 - 100, // gradient begin point y
width * 0.5 + 100, // gradient end point x
height * 0.5 + 100, // gradient end point y
[0, 0.5, 1] // Position of each color.
);
circle(width * 0.5, height * 0.5, 400);
// End gradient fill
utils.endLinearGradient();
}
function keyPressed() {
if (key == 's')
utils.saveCanvas("linearGradientFill");
}
Stop Gradient fill for the following graphics. Must be used with beginLinearGradient method. See examples for how to use it.
Set the style and display the text in a single method. See getTimeStamp example on how to use the function.
returns true every nth second in draw function
(Number)
Set notifier frequency. The input value needs to be in seconds.
boolean
:
if (utils.notify(10) == true) {
// do something here.
}
Removes the ruler graphics from the canvas.
Ruler for newcomers to show pixel meter.
// Define global variable and initialize p5.Utils lib
var utils = new p5.Utils();
function setup() {
createCanvas(400,400);
// No need to run in draw function
// The function creates its canvases in a different drawing context
utils.enableRuler();
}
function draw() {
background(220);
rect(width*0.5, height*0.5,500, 500);
}
function keyPressed() {
if(key == 'h') {
utils.disableRuler();
}
}