p5.js | side JS platform that empowers artists | Graphics library
kandi X-RAY | p5.js Summary
kandi X-RAY | p5.js Summary
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. Using the metaphor of a sketch, p5.js has a full set of drawing functionality using the HTML5 canvas element. You’re not limited to the drawing canvas though. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound. p5.js draws inspiration, wisdom, and guidance from its precursor Processing. However, it is a new interpretation, not an emulation or port. We don't aim to match Processing's set of functionality exactly, allowing ourselves space to deviate and grow in the context of the web. The p5js.org website contains an extensive overview of the project, community, documentation, and examples. If you already know the basics of JavaScript or Processing, the p5.js overview wiki page is a good place to start.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Combines regex patterns into a single regexp .
- An error trace parser .
- Merge non - class methods .
- Creates a source decorator for the given options .
- Get a list of HTML code for a page .
- convert path from path to path
- Sets up the code and setup the initial sketch nodes
- parse an ASL file
- Creates a new lexer tokenizer .
- Run sketch code
p5.js Key Features
p5.js Examples and Code Snippets
Lines of Code : 87License : Permissive (MIT)
Copyimport P5 from 'p5'
const myp5 = new P5((sketch) => {
let y = 100
sketch.setup = () => {
sketch.createCanvas(720, 400)
sketch.stroke(255)
sketch.frameRate(30)
}
sketch.draw = () => {
sketch.background(0)
y = y // Regular p5js instance mode sketch,
// don't use this!
const sketch = (p5) => {
// p5 code
}
// This function which will be called by the Sketch component,
// its arguments are the width and height the canvas will be,
// in pixels, and the p yarn add p5-svelte p5 -D
Width
{width}
Height
{height}
public void addPassenger(Passenger a){
passengers[count] = a;
count++
}
public void addPassenger(Passenger a){
passengers[numPassengers] = a;
numPassengers++
}
public class SELECT
id,
SelectedP,
CASE SelectedP
WHEN 'P1' THEN P1
WHEN 'P2' THEN P2
WHEN 'P3' THEN P3
WHEN 'P4' THEN P4
WHEN 'P5' THEN P5
END
AS SelectedPValue
FROM
yourTable
SELECT
id, SelDROP TABLE IF EXISTS `354567000013_6744043_DET_TABLE`
> OK
> Time: 4.592s
CREATE TABLE IF NOT EXISTS `354567000013_6744043_DET_TABLE` (UNIQUE_DATA_ID INTEGER PRIMARY KEY,DET_ID_1,DET_ID_2,DET_ID_3,DET_ID_4,DET_ID_5,DET_ID_6,DET_ID_Store modified code (as data) into code segment;
Execute new code;
Store modified code (as data) into code segment;
Execute a serializing instruction; (\* For example, CPUID instruction \*)
Execute new code;
SELECT SUBSTR(column1, 1, p1 - 1 ) || '~' ||
SUBSTR(column1, p2 + 1, p3 - p2 - 1) || '~' ||
SUBSTR(column1, p4 + 1, p5 - p4 - 1) AS column1_new
FROM (
SELECT column1,
INSTR(column1, '~', 1, 1) AS p1,
import p1 from "../../img/Project/PoleAnglais.png";
import p2 from "../../img/Project/I-Art.png";
import p3 from "../../img/Project/Hestia.png";
import p4 from "../../img/Project/EvlV1.png";
import p5 from "../../img/Project/Kelly.png";
imdrop table if exists #dts;
go
create table #dts(
CustomerName char(1) not null,
ProductName char(2) not null);
insert #dts(CustomerName, ProductName) values
('A','p1'),
('A','p2'),
('A','p3'),
('A','p1'),
('B','p1'),
('Community Discussions
Trending Discussions on p5.js
QUESTION
I'm trying to use Matter.Query.region to see if the character in my game is grounded. But, when I try to run region with a bounds object that I created (displayed with the dots shown in the game), it doesn't come up with any collisions even though it is clearly intersecting other bodies.
Code:
...ANSWER
Answered 2022-Mar-24 at 00:20The bounds object doesn't appear to be properly created. The purple p5 vertices you're rendering may be giving you a false sense of confidence, since those aren't necessarily related to what MJS sees.
It's actually a pretty simple fix, passing an array of vertices instead of individual arguments:
QUESTION
I would like to paint ellipses over an image when clicking the mouse, and when I press the keyboard, hide and show the underneath image alternatively, without cleaning the ellipses.
I'm using createGraphics() to store the image data, and remove() so when the keyboard is pressed I spect the image disappear but it doesn't work
Here is a sketch of what I trying to do:
...ANSWER
Answered 2022-Feb-28 at 19:58The best approach is probably to draw the ellipses to a separate buffer (p5.Graphics), and then draw that on top of the image or blank background as needed. An alternative approach would be to record the position of each ellipse in an array so that they can be redrawn. However, the latter approach will use more memory and switching the image on and off will have a noticeable delay after many ellipses have been drawn.
p5.Graphics)
QUESTION
I'm really struggling here and I can't get it right, not even knowing why.
I'm using p5.js in WEBGL mode, I want to compute the position of on point rotated on the 3 axes around the origin in order to follow the translation and the rotation given to object through p5.js, translation and rotatation on X axis, Y axis and Z axis.
The fact is that drawing a sphere in 3d space, withing p5.js, is obtained by translating and rotating, since the sphere is created at the center in the origin, and there is no internal model giving the 3d-coordinates.
After hours of wandering through some math too high for my knowledge, I understood that the rotation over 3-axis is not as simple as I thought, and I ended up using Quaternion.js. But I'm still not able to match the visual position of the sphere in the 3d world with the coordinates I have computed out of the original point on the 2d-plane (150, 0, [0]).
For example, here the sphere is rotated on 3 axis. At the beginning the coordinates are good (if I ignore the fact that Z is negated) but at certain point it gets completely out of sync. The computed position of the sphere seems to be completely unrelated:
It's really hours that I'm trying to solve this issue, with no result, what did I miss?
Here it follows my code:
...ANSWER
Answered 2022-Feb-26 at 22:25I've finally sorted out. I can't really understand why works this way but I didn't need quaternion at all, and my first intuition of using matrix multiplications to apply rotation on 3-axis was correct.
What I did miss in first instance (and made my life miserable) is that matrix multiplication is not commutative. This means that applying rotation on x, y and z-axis is not equivalent to apply same rotation angle on z, y and x.
The working solution has been achieved with 3 simple steps:
- Replace quaternion with matrix multiplications using vectors (method
#resize2) - Rotating the drawing plane with Z-Y-X order
- Doing the math of rotation in X-Y-Z order
QUESTION
I'd like to get help from Geometry / Wolfram Mathematica people. I want to visualize this 3D Rose in JavaScript (p5.js) environment.
This figure is originally generated using wolfram language by Paul Nylanderin 2004-2006, and below is the code:
...ANSWER
Answered 2022-Feb-18 at 20:06Presumably the algorithm above is referencing cos() and sin() functions that handle the angles in degrees rather than radians, but wherever using angles while employing non-trigonometric transformations, the result will be incorrect.
For example, the following formula using radians...
- phi = (Pi/2)Exp[-theta/(8 Pi)]
...has been incorrectly translated to...
- phi = ( 180 / 2 ) * Math.exp( -theta / ( 8 * 180 ) )
To test, let's assume theta = 2. Using the original formula in radians...
- phi = ( Math.PI / 2 ) * Math.exp( -2 / ( 8 * Math.PI ) )
- = 1.451 rad
- = 83.12 deg
...and now the incorrect version using degrees, which returns a different angle...
- phi = ( 180 / 2 ) * Math.exp( -2 / ( 8 * 180 ) )
- = 89.88 deg
- = 1.569 rad
A similar issue will occur with the incorrectly translated expression...
- pow( ( 1 - ( 3.6 * theta % 360 ) / 180 ), 2 )
Bottom line: Stick to radians.
P.S. Note that there might be other issues, but using radians rather than degrees needs to be corrected foremost...
QUESTION
I want to copy an array and sort it. However, when I copy the array and sort it, it seems to sort both arrays. Does anyone know why this is?
...ANSWER
Answered 2022-Feb-11 at 15:37Because arrays in JS are reference values, so when you try to copy it using the = it will only copy the reference to the original array and not the value of the array. To create a real copy of an array, you need to copy over the value of the array under a new value variable. Thats why your parent array (arr1) is modified rather the child array (arr2). But if you dont want that to happen replace the following,
QUESTION
I'm trying to create a board game with p5.js (Javascript)
To set up the game board which is a 6 by 6 grid, I have to fill the grid with 6 colors in a way that no horizontal or vertical touching cells have the same color. And all 6 colors have to be used in 6 cells.
But now I'm struggling a bit creating an algorithm that places the colors randomly but keeping the rules.
I tried to start at the top left corner, filling with a random color. Then I start to fill the cell to the left and the bottom with a different color.
The problem is, that when the script wants to fill the last few cells, there are no colors left to use (either already 6 cells filled or a remaining color is a neighbor)
Example: Still two cells need to be red, but only one place is left for red (under white):
...ANSWER
Answered 2022-Feb-06 at 18:57One way to look at this would be as searching for a path through a tree where each node has 6 possible children for the six colours which could come next. Ignoring all the constraints initially, you pick one of these at random 36 times, and have your order of placements.
Using a recursive function (which will be useful in a moment), an unconstrained search would look like this:
QUESTION
Hello coding community I need your help. I took a sketch from openprocessing and I need to convert it into p5.js. The first script is the source code, then below will by my translation. I'm not sure about the syntax.
...ANSWER
Answered 2022-Feb-02 at 10:05You're almost there, but there are a couple of gotchas:
- you declare variables at the top (e.g.
float x, y, x2, y2, rad, rad2, dist, dist2;, etc.), however you don't initialize them with values. Because JavaScript is untyped (unlike Java), the interpreter can't guess what type you meant and the variables will be initialised toundefined(while in Java, because they'refloattype they'll default to0). Doing math operations onundefinedresults inNaN(not a number). - you're accidentally incrementing some values by strings instead of floats:
rotateBy += '.003'; yIn += '.005'; - optional:
fill(#02021A, 10);won't work in p5.js, however you can use fill(r,g,b,a) and pass your values in hex notation:fill(0x02, 0x02, 0x1A, 10);
This is your code with these two fixes applied:
QUESTION
I'm trying to make a visualizer and I have to draw 4 vertexes while using math to make each vertex so they can react with the music. Rather than just typing all 4 of them out and plotting them I would like to use a nested for loop to do this. I was testing using a regular ellipse with the translate function in p5.js and the translate seems to be translating itself and not just changing the values to how I would want it.
...ANSWER
Answered 2022-Jan-30 at 18:40QUESTION
In the following p5.js code I'm trying to create 2 separate methods.
centerInWindow() is meant to keep the image centered in the canvas while it's being scaled down after the user clicks on the canvas.
centerToClick() is meant to keep the image centered on the point the user clicked on, while it's being scaled up.
None of them work and I'm having trouble getting the logic right.
...ANSWER
Answered 2022-Jan-28 at 03:39There are probably multiple ways to solve this problem, but here's one:
Imaging your viewport is an NxM rectangle, and you are drawing some portion of a scene in within that viewport. In order to zoom in and out you can shift the origin at which you draw that scene and increase or decrease the scale. The tricky part is to make it possible to zoom in and out centered on an arbitrary point within the currently visible portion of the scene, keeping that point in the scene locked to the current point in the viewport.
Given some center point, and a desired scale factor, it is possible to determine the necessary change in the offset of the scene to preserve the position of the center point after scaling.
There's probably some complicated trigonometric proof for how to calculate this, but conveniently it is a simple calculation based on the ratio of the offset of the mouse from the current top left of the scene, to the scaled height of the scene.
QUESTION
I'm currently making a 2D game in Javascript, but I want to the game to have different lighting levels, for example, if I were to create a day and night cycle. However, I want to be able to cut holes in the lighting/foreground, or do something so that I can make certain parts of the screen lit up, for example like a flashlight or candle. Note: I'm also using the P5.js library.
The most obvious idea that came to mind for going about in creating a foreground is just creating a rectangle with some opacity that covers the entire screen. This is good, but how am I supposed cut through this? Obviously, the code below won't work because I'm just layering on another element, and the rectangle is still obstructed and not perfectly clear.
...ANSWER
Answered 2022-Jan-22 at 03:11The erase() function may be what you are looking for. It is more flexible than trying to explicitly paint over the areas you want to cover (such as in the approach of using the stroke of a circle and rectangle to cover everything except a circle). And it is easier to use than beginContour() since you can use it with any of the built in drawing primitives (rect, ellipse, triangle, etc).
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install p5.js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
