p5 Resources
This extension adds some snippets and commands meant for use with p5es projects made with the p5es project on Glitch or the p5es-empty project on Glitch.
It also adds snippets and commands meant for use the p5ts projects made with the p5ts project on Glitch or its empty variant, p5ts-empty.
For your convenience, a command to open the p5js documentation in your browser is also added.
Commands
This extension adds two commands relating to templates. "P5JS: Open a starter project" opens either p5es, p5ts, p5es-empty, or p5ts-empty on Glitch, depending on a user choice.
"P5JS: Remix a starter project" does the same, but remixes the project automatically if the user is logged in.
It also adds the "P5JS: Open Documentation" command which opens the p5js documentation. Depending on the "P5: Documentation Location" setting, it will open in VSCode or the browser.
Snippets
This extension also adds some snippets that can be used with p5.js projects created from p5es, p5ts, p5es-empty, or p5ts-empty on Glitch.
setup (Universal)
JavaScript + TypeScript
/** This function sets up our sketch. */
export function setup() {
createCanvas(500, 500);
frameRate(60);
}
draw (Universal)
JavaScript + TypeScript
/** This function redraws the sketch multiple times a second. */
export function draw() {
}
preload (Universal)
JavaScript + TypeScript
/** This function loads resources that will be used later. */
export function preload() {
}
mouseclicked (Universal)
JavaScript
/**
* This function is called when the mouse is clicked.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function mouseClicked(event) {
}
TypeScript
/**
* This function is called when the mouse is clicked.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function mouseClicked(event: MouseEvent) {
}
doubleclicked (Universal)
JavaScript
/**
* This function is called when the mouse is double-clicked.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function doubleClicked(event) {
}
TypeScript
/**
* This function is called when the mouse is double-clicked.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function doubleClicked(event: MouseEvent) {
}
mousemoved (Universal)
JavaScript
/**
* This function is called when the mouse is moved.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function mouseMoved(event) {
}
TypeScript
/**
* This function is called when the mouse is moved.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function mouseMoved(event: MouseEvent) {
}
mousedragged (Universal)
JavaScript
/**
* This function is called when the mouse is dragged.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function mouseDragged(event) {
}
TypeScript
/**
* This function is called when the mouse is dragged.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function mouseDragged(event: MouseEvent) {
}
mousepressed (Universal)
JavaScript
/**
* This function is called when the mouse is pressed.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function mousePressed(event) {
}
TypeScript
/**
* This function is called when the mouse is pressed.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function mousePressed(event: MouseEvent) {
}
mousereleased (Universal)
JavaScript
/**
* This function is called when the mouse is released.
* @param {MouseEvent} event - The `MouseEvent` that is passed as an argument.
*/
export function mouseReleased(event) {
}
TypeScript
/**
* This function is called when the mouse is released.
* @param event - The `MouseEvent` that is passed as an argument.
*/
export function mouseReleased(event: MouseEvent) {
}
JavaScript + TypeScript
// comment goes here...
