# p5.js

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

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

**Page:** 54

---

## [\[SOLVED\] \*NOOB\* Fourier Series / Need help, transforming p5j code into processing (Java)](https://discourse.processing.org/t/solved-noob-fourier-series-need-help-transforming-p5j-code-into-processing-java/26899)

<div class="topic-metadata">

**Author:** [@arazym](https://discourse.processing.org/u/arazym)\
**Replies:** 2\
**Last updated:** [January 8, 2021, 9:12pm UTC](https://discourse.processing.org/t/solved-noob-fourier-series-need-help-transforming-p5j-code-into-processing-java/26899 "2021-01-08T21:12:08Z")

</div>

Hi, I am trying to transscript Daniel Shiffman’s Code for Fourier Series to be processing-readable. Fourier Series | The coding train I am beginner and managed to get this far until i got quite a bit lost; line 34 (…

---

## [P5.js Web Editor - Hindi Translation](https://discourse.processing.org/t/p5-js-web-editor-hindi-translation/26839)

<div class="topic-metadata">

**Author:** [@cassie](https://discourse.processing.org/u/cassie)\
**Replies:** 2\
**Last updated:** [January 8, 2021, 6:38pm UTC](https://discourse.processing.org/t/p5-js-web-editor-hindi-translation/26839 "2021-01-08T18:38:40Z")

</div>

Hello all! Recently a pull request was made on the p5.js Web Editor for a Hindi translation. If you speak Hindi, it would be really helpful if you could review and give feedback on the translation! You can comment on the…

---

## [Create presets with buttons (save/load slider data)](https://discourse.processing.org/t/create-presets-with-buttons-save-load-slider-data/26830)

<div class="topic-metadata">

**Author:** [@Mem](https://discourse.processing.org/u/Mem)\
**Replies:** 4\
**Last updated:** [January 6, 2021, 12:45pm UTC](https://discourse.processing.org/t/create-presets-with-buttons-save-load-slider-data/26830 "2021-01-06T12:45:27Z")

</div>

Hi, I would like to save parameters made with sliders as a set of preset with a button, loadable later with this button Someone can give direction where I should looking for please Thank you

---

## [Help with hiding and showing the canvas](https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795)

<div class="topic-metadata">

**Author:** [@Michna](https://discourse.processing.org/u/Michna)\
**Replies:** 1\
**Last updated:** [January 5, 2021, 3:27pm UTC](https://discourse.processing.org/t/help-with-hiding-and-showing-the-canvas/26795 "2021-01-05T15:27:56Z")

</div>

Hello everyone, i started to programm an online gallery of photographs where more pictures are shown on one canvas. I would like to move to second page or create second canvas (then third and so on) with another photogr…

---

## [In P5.js how to draw within the constraint of an image](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759)

<div class="topic-metadata">

**Author:** [@blkpanther](https://discourse.processing.org/u/blkpanther)\
**Replies:** 3\
**Last updated:** [January 5, 2021, 1:11am UTC](https://discourse.processing.org/t/in-p5-js-how-to-draw-within-the-constraint-of-an-image/26759 "2021-01-05T01:11:48Z")

</div>

I intend to draw some dots within the constraint of the outline of an image. Currently I only know how to mask shape with another shape (using ( imgClone = img.get() ).mask( mask.get() )), or image with another image, bu…

---

## [Chrome 83 makes extreme changes to some HTML widgets in p5 sketch](https://discourse.processing.org/t/chrome-83-makes-extreme-changes-to-some-html-widgets-in-p5-sketch/21970)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 4\
**Last updated:** [January 4, 2021, 10:14pm UTC](https://discourse.processing.org/t/chrome-83-makes-extreme-changes-to-some-html-widgets-in-p5-sketch/21970 "2021-01-04T22:14:46Z")

</div>

Hi folks, I thought I’d post something I found out the other day. I uprevved my Mac Chrome browser from 81.xxx to 83.xxx and a lot of my HTML widgets in a p5.js sketch broke. Well, substantially changed their appearance…

---

## [Issue with loading images in p5.js](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900)

<div class="topic-metadata">

**Author:** [@bjr29](https://discourse.processing.org/u/bjr29)\
**Replies:** 7\
**Last updated:** [January 4, 2021, 5:11pm UTC](https://discourse.processing.org/t/issue-with-loading-images-in-p5-js/14900 "2021-01-04T17:11:12Z")

</div>

I tried making a clock for my background with a background image using this code: let h; let m; let s; let bg; function preload() { bg = loadImage("Background/Wireframed Dark BG.png"); } function setup() { bg.loa…

---

## [Transition from one vector array to another](https://discourse.processing.org/t/transition-from-one-vector-array-to-another/26728)

<div class="topic-metadata">

**Author:** [@fbrie002](https://discourse.processing.org/u/fbrie002)\
**Replies:** 5\
**Last updated:** [January 4, 2021, 1:36am UTC](https://discourse.processing.org/t/transition-from-one-vector-array-to-another/26728 "2021-01-04T01:36:13Z")

</div>

Hi, I’m trying to create a smooth transition from one array of numbers to another but the numbers in question are all floating point numbers between 1 and -1, most of which below 0, so it’s been tricky. The arrays in que…

---

## [Main canvas and createGraphics() off screen canvas not matching](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706)

<div class="topic-metadata">

**Author:** [@hansi95](https://discourse.processing.org/u/hansi95)\
**Replies:** 3\
**Last updated:** [January 4, 2021, 12:55am UTC](https://discourse.processing.org/t/main-canvas-and-creategraphics-off-screen-canvas-not-matching/26706 "2021-01-04T00:55:55Z")

</div>

Hey everyone! Here’s the image I’m talking about (https://imgur.com/ZzCpEca) You can see the particles on my exported canvas are not in the same place as the main canvas. Seems like they start in different positions or s…

---

## [Properties in the Composite Objects EggRing Example](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678)

<div class="topic-metadata">

**Author:** [@javagar](https://discourse.processing.org/u/javagar)\
**Replies:** 6\
**Last updated:** [January 3, 2021, 9:15pm UTC](https://discourse.processing.org/t/properties-in-the-composite-objects-eggring-example/26678 "2021-01-03T21:15:46Z")

</div>

This concerns the p5.js class EggRing example that is accessible through the Processing Development Environment menu via File \> Examples… \> Objects \> ex05\_Composite\_Objects. It can also be found online here: Composite…

---

## [Appending to two dimensional array](https://discourse.processing.org/t/appending-to-two-dimensional-array/26736)

<div class="topic-metadata">

**Author:** [@dave307](https://discourse.processing.org/u/dave307)\
**Replies:** 4\
**Last updated:** [January 3, 2021, 7:45pm UTC](https://discourse.processing.org/t/appending-to-two-dimensional-array/26736 "2021-01-03T19:45:43Z")

</div>

How would you append to a two array and append to a certain rows. like a = \[1,2,3\] b = \[5,6\] then you append a to the first column and b to the second column of another array so it would be c = \[1,2,3\] \[5,6\] hope…

---

## [Can't load API data](https://discourse.processing.org/t/cant-load-api-data/26722)

<div class="topic-metadata">

**Author:** [@Chudroy](https://discourse.processing.org/u/Chudroy)\
**Replies:** 2\
**Last updated:** [January 3, 2021, 4:03pm UTC](https://discourse.processing.org/t/cant-load-api-data/26722 "2021-01-03T16:03:43Z")

</div>

function setup() { createCanvas(400, 400); var url = "http://api.openweathermap.org/data/2.5/weather?q=London&appid=\_\_\_\_\_\_&units=metric" loadJSON(url); } Hi! When I try to load JSON data from this weather API, …

---

## [Updating drawing with codemirror contents](https://discourse.processing.org/t/updating-drawing-with-codemirror-contents/26695)

<div class="topic-metadata">

**Author:** [@kutal](https://discourse.processing.org/u/kutal)\
**Replies:** 1\
**Last updated:** [January 3, 2021, 4:00pm UTC](https://discourse.processing.org/t/updating-drawing-with-codemirror-contents/26695 "2021-01-03T16:00:47Z")

</div>

Hi all, Problem statement I am struggling to understand how to pass the contents of a codemirror editor (when it’s updated manually on screen, by deleting or add new code) to a p5.js instance, on a button click. In ot…

---

## [Image transitions with pixel array in p5.js](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696)

<div class="topic-metadata">

**Author:** [@fbrie002](https://discourse.processing.org/u/fbrie002)\
**Replies:** 4\
**Last updated:** [January 2, 2021, 11:12pm UTC](https://discourse.processing.org/t/image-transitions-with-pixel-array-in-p5-js/26696 "2021-01-02T23:12:44Z")

</div>

Is it possible to animate a transition between two images in p5? This should be so simple but I can’t find any examples on how to do it. I looked into using createGraphics and an offscreen buffer but apparently it does…

---

## [Color two side of a custom shape](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676)

<div class="topic-metadata">

**Author:** [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Replies:** 2\
**Last updated:** [January 2, 2021, 6:39am UTC](https://discourse.processing.org/t/color-two-side-of-a-custom-shape/26676 "2021-01-02T06:39:01Z")

</div>

How I can use two colors for two sides (top,inner) of a custom shape.

---

## [Can not read property of undefined?](https://discourse.processing.org/t/can-not-read-property-of-undefined/26684)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 2\
**Last updated:** [January 2, 2021, 6:00am UTC](https://discourse.processing.org/t/can-not-read-property-of-undefined/26684 "2021-01-02T06:00:21Z")

</div>

I don’t understand why can’t the value in the array be pushed, my maths seems right. The program chooses groups of 9 pixels and checks the contrast, and if it’s higher than 100 it draws a circle in that area. How do I fi…

---

## [What am I missing?](https://discourse.processing.org/t/what-am-i-missing/26652)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 5\
**Last updated:** [December 31, 2020, 6:21pm UTC](https://discourse.processing.org/t/what-am-i-missing/26652 "2020-12-31T18:21:05Z")

</div>

Idk what’s happening but all of a sudden a simple for loop won’t draw a circle for me. https://www.openprocessing.org/sketch/1051206 I believe I’m missing something obvious, but I cant find it. this is stupid but can som…

---

## [Filter allow only a specific range of frequency to pass through](https://discourse.processing.org/t/filter-allow-only-a-specific-range-of-frequency-to-pass-through/26623)

<div class="topic-metadata">

**Author:** [@wonderhope](https://discourse.processing.org/u/wonderhope)\
**Replies:** 5\
**Last updated:** [December 30, 2020, 11:23pm UTC](https://discourse.processing.org/t/filter-allow-only-a-specific-range-of-frequency-to-pass-through/26623 "2020-12-30T23:23:56Z")

</div>

how can i filter a song and allow only a specific range of frequency to pass through? Cuz when i use bandpass filter, it only allows me to input one frequency instead of a range(i.e. one lower frequency and one higher fr…

---

## [Trying to run p5 code on codepen, what files to include, pls?](https://discourse.processing.org/t/trying-to-run-p5-code-on-codepen-what-files-to-include-pls/26615)

<div class="topic-metadata">

**Author:** [@richengle](https://discourse.processing.org/u/richengle)\
**Replies:** 1\
**Last updated:** [December 30, 2020, 9:21am UTC](https://discourse.processing.org/t/trying-to-run-p5-code-on-codepen-what-files-to-include-pls/26615 "2020-12-30T09:21:34Z")

</div>

i ami trying to run some p5 code from https://editor.p5js.org/aatish/sketches/SJoT7GDtf on codepen \[html/CSS/JS intepreter\] I have included https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js and many other…

---

## [Very long class code](https://discourse.processing.org/t/very-long-class-code/26599)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 7\
**Last updated:** [December 29, 2020, 10:53pm UTC](https://discourse.processing.org/t/very-long-class-code/26599 "2020-12-29T22:53:44Z")

</div>

I want to connect every point with a line using a neighbor system, and I’m using a lot of class variables that don’t work. I don’t know if there is a limit but here’s the code: https://www.openprocessing.org/sketch/10506…

---

## [Custom blendMode math?](https://discourse.processing.org/t/custom-blendmode-math/26562)

<div class="topic-metadata">

**Author:** [@tinywitchdraws](https://discourse.processing.org/u/tinywitchdraws)\
**Replies:** 1\
**Last updated:** [December 28, 2020, 7:23pm UTC](https://discourse.processing.org/t/custom-blendmode-math/26562 "2020-12-28T19:23:45Z")

</div>

I’m working on a little image processing app, and I want to try building a custom blend mode. Specifically, I want to use Divide (Newcolor= A/B)in my sketch, and p5js doesn’t have it-- is there a way for me to make it? …

---

## [Asteroid game errors](https://discourse.processing.org/t/asteroid-game-errors/26478)

<div class="topic-metadata">

**Author:** [@gmoangher](https://discourse.processing.org/u/gmoangher)\
**Replies:** 1\
**Last updated:** [December 28, 2020, 10:27am UTC](https://discourse.processing.org/t/asteroid-game-errors/26478 "2020-12-28T10:27:21Z")

</div>

I got weird error messages on my code. I’m trying to make an asteroid game prototype, and most of the time when I shoot an asteroid it gives me a message that shouldn’t be there. I’ve tried debugging multiple times. My c…

---

## [Use an existing canvas with p5js](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113)

<div class="topic-metadata">

**Author:** [@niko](https://discourse.processing.org/u/niko)\
**Replies:** 5\
**Last updated:** [December 27, 2020, 10:48am UTC](https://discourse.processing.org/t/use-an-existing-canvas-with-p5js/26113 "2020-12-27T10:48:51Z")

</div>

Hi, I would like to use an existing canvas with p5js. It seems not possible in a simple way. The reason I want to do that is: I don’t want p5js to insert a canvas and make my already displayed page to suddenly extend. …

---

## [Path finding algorithm?](https://discourse.processing.org/t/path-finding-algorithm/26522)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 3\
**Last updated:** [December 26, 2020, 7:40pm UTC](https://discourse.processing.org/t/path-finding-algorithm/26522 "2020-12-26T19:40:33Z")

</div>

I made a simple background maker for my phone, I’m thinking about making one the fills the whole screen. should I use a pathfinding algorithm, and if so which one? https://www.openprocessing.org/sketch/1049907 I put som…

---

## [P5js project as a png?](https://discourse.processing.org/t/p5js-project-as-a-png/26519)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 5\
**Last updated:** [December 26, 2020, 2:28pm UTC](https://discourse.processing.org/t/p5js-project-as-a-png/26519 "2020-12-26T14:28:47Z")

</div>

I made this sketch https://www.openprocessing.org/sketch/1049735 and I want to put it as my iPhone’s wallpaper. If I screenshot it will look very bad on my phone, Is there a way I can download the canvas as a png? btw …

---

## [A problem that I cannot figure out: "Wrapping shapes across a screen". (Iterative math and loops problem.)](https://discourse.processing.org/t/a-problem-that-i-cannot-figure-out-wrapping-shapes-across-a-screen-iterative-math-and-loops-problem/26501)

<div class="topic-metadata">

**Author:** [@jstodd](https://discourse.processing.org/u/jstodd)\
**Replies:** 3\
**Last updated:** [December 26, 2020, 6:55am UTC](https://discourse.processing.org/t/a-problem-that-i-cannot-figure-out-wrapping-shapes-across-a-screen-iterative-math-and-loops-problem/26501 "2020-12-26T06:55:01Z")

</div>

Update: Solved! I reposted the working code as the answer. Thanks u/marcusround A problem that I cannot figure out: “Wrapping shapes across a screen”. (Iterative math and loops problem.) This sounds like a very easy pr…

---

## [P5.js website example pages not building](https://discourse.processing.org/t/p5-js-website-example-pages-not-building/26515)

<div class="topic-metadata">

**Author:** [@Mohan2k1](https://discourse.processing.org/u/Mohan2k1)\
**Replies:** 0\
**Last updated:** [December 25, 2020, 11:27pm UTC](https://discourse.processing.org/t/p5-js-website-example-pages-not-building/26515 "2020-12-25T23:27:54Z")

</div>

I am new to open source contribution and I forked and cloned p5.js website and this are the steps i followed cd src/data/examples/build\_examples npm install cd …/…/…/…/ npm install npm run watch Website is run…

---

## [Why is the result undefined?](https://discourse.processing.org/t/why-is-the-result-undefined/26430)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 26\
**Last updated:** [December 23, 2020, 3:16pm UTC](https://discourse.processing.org/t/why-is-the-result-undefined/26430 "2020-12-23T15:16:19Z")

</div>

https://www.openprocessing.org/sketch/1048482 this is my code. I’m trying to make a weighted random function where the position of the weight in the array is the result. I want to be able to put three numbers in for ex…

---

## [Porting a project from Processing to p5.js, getting stuck on an error](https://discourse.processing.org/t/porting-a-project-from-processing-to-p5-js-getting-stuck-on-an-error/26454)

<div class="topic-metadata">

**Author:** [@jjjolton](https://discourse.processing.org/u/jjjolton)\
**Replies:** 5\
**Last updated:** [December 23, 2020, 2:07am UTC](https://discourse.processing.org/t/porting-a-project-from-processing-to-p5-js-getting-stuck-on-an-error/26454 "2020-12-23T02:07:19Z")

</div>

I’ve been working on getting a Processing project ported to p5.js, mostly just to figure out how to make it work. I’ve been stuck on an error ("There’s an error due to “MakeTriangle” not being defined in the current scop…

---

## [React and P5 problem with loadSound and loadImage](https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440)

<div class="topic-metadata">

**Author:** [@teemee](https://discourse.processing.org/u/teemee)\
**Replies:** 1\
**Last updated:** [December 22, 2020, 3:34pm UTC](https://discourse.processing.org/t/react-and-p5-problem-with-loadsound-and-loadimage/26440 "2020-12-22T15:34:23Z")

</div>

I’m new to React and Node.js and I have a problem using it with P5.js. I have successfully made this project with p5.js and tone.js but the project involved some sensitive data that I want to hide from the public, such a…

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

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