# p5.js

**URL:** https://discourse.processing.org/c/p5js/10.md?page=70

[Latest](https://discourse.processing.org/latest.md) · [Categories](https://discourse.processing.org/categories.md) · [Tags](https://discourse.processing.org/tags.md)

**Page:** 71

---

## [Creating a class with multiple constructors and static variables in JavaScript](https://discourse.processing.org/t/creating-a-class-with-multiple-constructors-and-static-variables-in-javascript/21156)

<div class="topic-metadata">

**Author:** [@AndJ](https://discourse.processing.org/u/AndJ)\
**Replies:** 1\
**Last updated:** [May 22, 2020, 2:40am UTC](https://discourse.processing.org/t/creating-a-class-with-multiple-constructors-and-static-variables-in-javascript/21156 "2020-05-22T02:40:14Z")

</div>

I am familiar with Processing/Java but am trying to learn more p5.js/JavaScript. I am creating a class that, in Java, has multiple constructors with the same number of arguments with different data types. Example: clas…

---

## [Please plese please help me with my problem, appearing in a simple p5.js code](https://discourse.processing.org/t/please-plese-please-help-me-with-my-problem-appearing-in-a-simple-p5-js-code/21123)

<div class="topic-metadata">

**Author:** [@Nis](https://discourse.processing.org/u/Nis)\
**Replies:** 2\
**Last updated:** [May 21, 2020, 7:59am UTC](https://discourse.processing.org/t/please-plese-please-help-me-with-my-problem-appearing-in-a-simple-p5-js-code/21123 "2020-05-21T07:59:06Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/U0p3GjOK1 The above provided link is of my project in which I want to make only one rectangle appear after particular frame-counts.But there appears a problem while doing thi…

---

## [Why does this Javascript sketch lag compared to the Java sketch?](https://discourse.processing.org/t/why-does-this-javascript-sketch-lag-compared-to-the-java-sketch/21019)

<div class="topic-metadata">

**Author:** [@the0ne](https://discourse.processing.org/u/the0ne)\
**Replies:** 3\
**Last updated:** [May 20, 2020, 9:15pm UTC](https://discourse.processing.org/t/why-does-this-javascript-sketch-lag-compared-to-the-java-sketch/21019 "2020-05-20T21:15:08Z")

</div>

So, I ported a Java Processing sketch to p5.js. The sketches should be simple to run - just basic image rasterization. I tried my best to optimize the JS code but have been unsuccessful at getting any decent performance …

---

## [How to rotate a sprite toward the direction of motion](https://discourse.processing.org/t/how-to-rotate-a-sprite-toward-the-direction-of-motion/21056)

<div class="topic-metadata">

**Author:** [@shinyogre](https://discourse.processing.org/u/shinyogre)\
**Replies:** 12\
**Last updated:** [May 20, 2020, 1:44pm UTC](https://discourse.processing.org/t/how-to-rotate-a-sprite-toward-the-direction-of-motion/21056 "2020-05-20T13:44:54Z")

</div>

I am trying to figure out how to align a sprite image to the angle of the hill that it “moves” along. I am using atan2 and the result is this (gif is multiplying the angle by 360 just to show the effect): Here is my …

---

## [Posenet with p5js](https://discourse.processing.org/t/posenet-with-p5js/21009)

<div class="topic-metadata">

**Author:** [@babyP5](https://discourse.processing.org/u/babyP5)\
**Replies:** 5\
**Last updated:** [May 20, 2020, 12:29pm UTC](https://discourse.processing.org/t/posenet-with-p5js/21009 "2020-05-20T12:29:25Z")

</div>

hello everyone im working on a project with posenet and p5js and i want when my hand is above my shoulder i append a number inside of an array the porblem is its keep adding the number multiple times before stoping and …

---

## [How to reduce PoseNet inputResolution to make it perform faster](https://discourse.processing.org/t/how-to-reduce-posenet-inputresolution-to-make-it-perform-faster/21060)

<div class="topic-metadata">

**Author:** [@yuinjann](https://discourse.processing.org/u/yuinjann)\
**Replies:** 0\
**Last updated:** [May 19, 2020, 3:25pm UTC](https://discourse.processing.org/t/how-to-reduce-posenet-inputresolution-to-make-it-perform-faster/21060 "2020-05-19T15:25:02Z")

</div>

Hi! I’m using posenet and hence video capture, and not drawing the video image. My project uses node and want to track wrist positions of everyone who opens the browser. However, the size of my video is the size of my c…

---

## [Disable smooth/anti-alias for textures](https://discourse.processing.org/t/disable-smooth-anti-alias-for-textures/21078)

<div class="topic-metadata">

**Author:** [@d128](https://discourse.processing.org/u/d128)\
**Replies:** 0\
**Last updated:** [May 20, 2020, 4:53am UTC](https://discourse.processing.org/t/disable-smooth-anti-alias-for-textures/21078 "2020-05-20T04:53:37Z")

</div>

Hi, everyone. I’m using a 400x200 texture on a sphere and I want to disable the smooth/anti-alias only for the texture in order to get a sharp and pixelated look. Is this possible or there’s a workaround? If it’s disabl…

---

## [Playing multiple songs in row](https://discourse.processing.org/t/playing-multiple-songs-in-row/20966)

<div class="topic-metadata">

**Author:** [@babyP5](https://discourse.processing.org/u/babyP5)\
**Replies:** 6\
**Last updated:** [May 20, 2020, 12:30am UTC](https://discourse.processing.org/t/playing-multiple-songs-in-row/20966 "2020-05-20T00:30:28Z")

</div>

hello everyone im trying to play 2 songs in row but it end up playing only the first song every time can someone help me plz let song; let song2 ; function setup() { song = loadSound('sample1.mp3'); song2 = loadSoun…

---

## [Different user client images with websockets](https://discourse.processing.org/t/different-user-client-images-with-websockets/21054)

<div class="topic-metadata">

**Author:** [@yuinjann](https://discourse.processing.org/u/yuinjann)\
**Replies:** 0\
**Last updated:** [May 19, 2020, 2:05pm UTC](https://discourse.processing.org/t/different-user-client-images-with-websockets/21054 "2020-05-19T14:05:17Z")

</div>

Hi! I’ve made a glitch sketch with posenet and p5.js, where a tree grows when two people( on different broswers) hands touch. I attached my own hand images to the wrist positions. In client.js, when two different hands …

---

## [Buffering geometry in Webgl](https://discourse.processing.org/t/buffering-geometry-in-webgl/21030)

<div class="topic-metadata">

**Author:** [@vheun](https://discourse.processing.org/u/vheun)\
**Replies:** 2\
**Last updated:** [May 19, 2020, 7:54pm UTC](https://discourse.processing.org/t/buffering-geometry-in-webgl/21030 "2020-05-19T19:54:33Z")

</div>

I try to build some more performance demos that need to redraw a chain of multiple 3D geometries that are all identical. Is there a way to buffer a geometry with p5js and just tell webgl to redraw a buffered shape? That…

---

## [Anybody here use a linter for coding in p5.js?](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853)

<div class="topic-metadata">

**Author:** [@Bassam](https://discourse.processing.org/u/Bassam)\
**Replies:** 9\
**Last updated:** [May 19, 2020, 3:19am UTC](https://discourse.processing.org/t/anybody-here-use-a-linter-for-coding-in-p5-js/20853 "2020-05-19T03:19:01Z")

</div>

If so, what editor do you use (atom, vscode…). What linter do you use? I’m having trouble telling telling ESLint to ignore undefined variables. It doesn’t realize window, height, setup() are built into p5.js.

---

## [Using React with p5.js (ES6+ support)](https://discourse.processing.org/t/using-react-with-p5-js-es6-support/3298)

<div class="topic-metadata">

**Author:** [@atoro](https://discourse.processing.org/u/atoro)\
**Replies:** 12\
**Last updated:** [May 18, 2020, 7:23am UTC](https://discourse.processing.org/t/using-react-with-p5-js-es6-support/3298 "2020-05-18T07:23:15Z")

</div>

Check the online version here: http://fractal-tree-simulator.surge.sh/ Source code is available here: https://github.com/atorov/fractal-tree-simulator Using React with p5.js This project demonstrates the possibili…

---

## [No graphics after resetShader()](https://discourse.processing.org/t/no-graphics-after-resetshader/13585)

<div class="topic-metadata">

**Author:** [@pazka](https://discourse.processing.org/u/pazka)\
**Replies:** 6\
**Last updated:** [May 18, 2020, 3:43pm UTC](https://discourse.processing.org/t/no-graphics-after-resetshader/13585 "2020-05-18T15:43:40Z")

</div>

Hello everybody ! I come to you because I have been encountering a problem that I have a lot of struggle to solve. At this point I am almost sure it’s a bug but I’d rather have your opinion first ! My goal is to draw t…

---

## [Draw on top of shader?](https://discourse.processing.org/t/draw-on-top-of-shader/20764)

<div class="topic-metadata">

**Author:** [@toom](https://discourse.processing.org/u/toom)\
**Replies:** 5\
**Last updated:** [May 18, 2020, 12:08pm UTC](https://discourse.processing.org/t/draw-on-top-of-shader/20764 "2020-05-18T12:08:32Z")

</div>

Hi there, how can I draw text or a primitive shape on top of a shader? resetShader() doesn’t appear to do anything. Every shape drawn after the shader is started is somehow under the shader. I’m capturing video from the…

---

## [Export gif, CCapturer](https://discourse.processing.org/t/export-gif-ccapturer/21008)

<div class="topic-metadata">

**Author:** [@cuvner](https://discourse.processing.org/u/cuvner)\
**Replies:** 1\
**Last updated:** [May 18, 2020, 11:17am UTC](https://discourse.processing.org/t/export-gif-ccapturer/21008 "2020-05-18T11:17:01Z")

</div>

Hello, I have a file directory error which I cannot seem to resolve, any help much appreciated. Its the “js/gif.worker.js” html \<!DOCTYPE html\>\<html lang="en"\>\<head\> \<script src="p5.js"\>\</script\> \<script src=…

---

## [Strange performance issue](https://discourse.processing.org/t/strange-performance-issue/20976)

<div class="topic-metadata">

**Author:** [@Miguelac](https://discourse.processing.org/u/Miguelac)\
**Replies:** 2\
**Last updated:** [May 18, 2020, 7:21am UTC](https://discourse.processing.org/t/strange-performance-issue/20976 "2020-05-18T07:21:18Z")

</div>

I’m writing a game (a clone of the game “untangle”) and I’m quite happy with how it turned out. However, while yesterday the game was running well on my phone, today after a few small additions for new features I notice…

---

## [Uncaught TypeError: Cannot read property 'collide' of undefined (sketch: line 19)](https://discourse.processing.org/t/uncaught-typeerror-cannot-read-property-collide-of-undefined-sketch-line-19/20914)

<div class="topic-metadata">

**Author:** [@cmoredock](https://discourse.processing.org/u/cmoredock)\
**Replies:** 5\
**Last updated:** [May 18, 2020, 6:45am UTC](https://discourse.processing.org/t/uncaught-typeerror-cannot-read-property-collide-of-undefined-sketch-line-19/20914 "2020-05-18T06:45:20Z")

</div>

Hello, I am trying to spend some time to figure out how to track and remove elements from an object array, and “thought” I had a pretty good understanding of what I needed to do. I am getting the above error on occasion…

---

## [Help with integrating a Javascript p5 file into HTML](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962)

<div class="topic-metadata">

**Author:** [@Noaaaa](https://discourse.processing.org/u/Noaaaa)\
**Replies:** 2\
**Last updated:** [May 17, 2020, 12:35pm UTC](https://discourse.processing.org/t/help-with-integrating-a-javascript-p5-file-into-html/20962 "2020-05-17T12:35:03Z")

</div>

Just started trying to learn HTML, and I’m having trouble using a Javascript file within it. I want to use the p5.js Javascript library and I have created a canvas within a file called sketch.js. Why does only my H1 show…

---

## [Canvas size does not resize on click](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941)

<div class="topic-metadata">

**Author:** [@lerelolli](https://discourse.processing.org/u/lerelolli)\
**Replies:** 4\
**Last updated:** [May 17, 2020, 10:32am UTC](https://discourse.processing.org/t/canvas-size-does-not-resize-on-click/20941 "2020-05-17T10:32:18Z")

</div>

I have multiple different sketches defined and put them all in an array so I can iterate through them and show them one by one with an on click event. It does work fine except when I change the visual after a window resi…

---

## [What does the following syntax do? =\_=\>](https://discourse.processing.org/t/what-does-the-following-syntax-do/20927)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 4\
**Last updated:** [May 17, 2020, 3:12am UTC](https://discourse.processing.org/t/what-does-the-following-syntax-do/20927 "2020-05-17T03:12:39Z")

</div>

Looking at code from open processing and I come across this piece of code. C=0 setup=\_=\>{ createCanvas(W=720,W,WEBGL) noStroke() T=createGraphics(W,W).noStroke() texture(T) } draw=\_=\>{ C+=1e-3 background(…

---

## [Buttons to switch sketches in the browser?](https://discourse.processing.org/t/buttons-to-switch-sketches-in-the-browser/20607)

<div class="topic-metadata">

**Author:** [@ballinoates](https://discourse.processing.org/u/ballinoates)\
**Replies:** 6\
**Last updated:** [May 17, 2020, 2:42am UTC](https://discourse.processing.org/t/buttons-to-switch-sketches-in-the-browser/20607 "2020-05-17T02:42:15Z")

</div>

Hi all- Im new to p5js but decent in processing 3, so my apologies up front. I would like to have lets say 4 sketches in p5js available for users to swap between. Lets say for simplicity a 400x400 canvas and below the c…

---

## [Image not recognized](https://discourse.processing.org/t/image-not-recognized/20912)

<div class="topic-metadata">

**Author:** [@virtuous1](https://discourse.processing.org/u/virtuous1)\
**Replies:** 6\
**Last updated:** [May 17, 2020, 1:48am UTC](https://discourse.processing.org/t/image-not-recognized/20912 "2020-05-17T01:48:58Z")

</div>

Hello I was to create a sketch in p5js in the atom editor. As part of it I tried to upload an image and I got this error: Refused to execute script from 'http://127.0.0.1:3000/Draw-Pixel/MyGame.png' because its MIME typ…

---

## [noErase() is not working in WEBGL](https://discourse.processing.org/t/noerase-is-not-working-in-webgl/20920)

<div class="topic-metadata">

**Author:** [@vheun](https://discourse.processing.org/u/vheun)\
**Replies:** 4\
**Last updated:** [May 16, 2020, 1:50pm UTC](https://discourse.processing.org/t/noerase-is-not-working-in-webgl/20920 "2020-05-16T13:50:25Z")

</div>

The following example does not work the way it should. Once erase() is called it just erases everything. noErase() is not stopping the mode. https://p5js.org/reference/#/p5/erase

---

## [Issues with pixel resolutions using image() on a phone?](https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887)

<div class="topic-metadata">

**Author:** [@seang42](https://discourse.processing.org/u/seang42)\
**Replies:** 1\
**Last updated:** [May 16, 2020, 12:46pm UTC](https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887 "2020-05-16T12:46:33Z")

</div>

Hi, I’m attempting to use p5js to place a bunch of images in a grid like fashion on a canvas and have the user save the sketch to use as a background for their phone. I get the users phone resolution using displayWidth…

---

## [Position relative to shape](https://discourse.processing.org/t/position-relative-to-shape/20926)

<div class="topic-metadata">

**Author:** [@casperleerink](https://discourse.processing.org/u/casperleerink)\
**Replies:** 1\
**Last updated:** [May 16, 2020, 7:17am UTC](https://discourse.processing.org/t/position-relative-to-shape/20926 "2020-05-16T07:17:34Z")

</div>

Hi! Beginner question: is it possible to position elements relative to another shape. For example lets say I want to place 9 rectangles into another rectangle, it would be great if the size and position of the child rec…

---

## [Problem with my button](https://discourse.processing.org/t/problem-with-my-button/20868)

<div class="topic-metadata">

**Author:** [@Coco5](https://discourse.processing.org/u/Coco5)\
**Replies:** 11\
**Last updated:** [May 15, 2020, 10:21pm UTC](https://discourse.processing.org/t/problem-with-my-button/20868 "2020-05-15T22:21:09Z")

</div>

Hi, I have a little problem with p5js. My code was working very well until I added a button to save my canvas. I don’t understand why when I add the button in the function setup, it is making my code to crash. //QUELQU…

---

## [How to nicely generate a graph of a function of two variables with a restriction on the domain?](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760)

<div class="topic-metadata">

**Author:** [@jancnahn](https://discourse.processing.org/u/jancnahn)\
**Replies:** 2\
**Last updated:** [May 15, 2020, 3:31pm UTC](https://discourse.processing.org/t/how-to-nicely-generate-a-graph-of-a-function-of-two-variables-with-a-restriction-on-the-domain/20760 "2020-05-15T15:31:14Z")

</div>

Hello, I recently got into p5 from watching The Coding Train, and I wish to generate two-dimensional surfaces in 3D (like using WEBGL) given by a function of two variables. If there is a function in Processing that doe…

---

## [P5js sound and Safari](https://discourse.processing.org/t/p5js-sound-and-safari/20880)

<div class="topic-metadata">

**Author:** [@antocreo](https://discourse.processing.org/u/antocreo)\
**Replies:** 2\
**Last updated:** [May 15, 2020, 1:53pm UTC](https://discourse.processing.org/t/p5js-sound-and-safari/20880 "2020-05-15T13:53:58Z")

</div>

Hi, I am experiencing some problems with p5.sound on Safari. I simply can’t hear the sound but the files are loaded and they seem to be played when I check in the console inspector. I just don’t hear the sound and yes,…

---

## [Posenet node sockets tree leaf interaction](https://discourse.processing.org/t/posenet-node-sockets-tree-leaf-interaction/20899)

<div class="topic-metadata">

**Author:** [@yuinjann](https://discourse.processing.org/u/yuinjann)\
**Replies:** 0\
**Last updated:** [May 15, 2020, 4:35am UTC](https://discourse.processing.org/t/posenet-node-sockets-tree-leaf-interaction/20899 "2020-05-15T04:35:52Z")

</div>

hey! So I made a node app with posenet, and the aim is for an interactive web experience, where two people’s hands are needed to grow a tree. The first person who logs on will be the root of the tree, and the second per…

---

## [P5.js vs p5.min.js; Which one should I use?](https://discourse.processing.org/t/p5-js-vs-p5-min-js-which-one-should-i-use/19920)

<div class="topic-metadata">

**Author:** [@Bassam](https://discourse.processing.org/u/Bassam)\
**Replies:** 7\
**Last updated:** [May 15, 2020, 5:07am UTC](https://discourse.processing.org/t/p5-js-vs-p5-min-js-which-one-should-i-use/19920 "2020-05-15T05:07:24Z")

</div>

Is there any harm in using the min version? I’m just wondering if it’ll be faster, take up less memory, be faster to download…?

[Previous page](https://discourse.processing.org/c/p5js/10.md?page=69)

[Next page](https://discourse.processing.org/c/p5js/10.md?page=71)