# p5.js

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

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

**Page:** 68

---

## [Including API key in the header :(](https://discourse.processing.org/t/including-api-key-in-the-header/21936)

<div class="topic-metadata">

**Author:** [@sasaKDH](https://discourse.processing.org/u/sasaKDH)\
**Replies:** 9\
**Last updated:** [June 18, 2020, 10:21am UTC](https://discourse.processing.org/t/including-api-key-in-the-header/21936 "2020-06-18T10:21:45Z")

</div>

I want to use API but I’m not familiar with JSON and API :frowning: The site said me that I shoud include my apikey in the header but I don’t know how. function preload(){ let url1 = "https://static.api.nexon.co.kr/f…

---

## [P5.js - not displaying static gif image](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948)

<div class="topic-metadata">

**Author:** [@Chrissy](https://discourse.processing.org/u/Chrissy)\
**Replies:** 18\
**Last updated:** [June 18, 2020, 10:02am UTC](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948 "2020-06-18T10:02:50Z")

</div>

Hello everyone. Please may you help me. I am learning p5.js by going through the book by Lauren McCarthy titled “Make: Getting Started with p5.js” and I have become stuck with Example 7-4 on page 108. Basically the gi…

---

## [How do i use .saveData()](https://discourse.processing.org/t/how-do-i-use-savedata/21960)

<div class="topic-metadata">

**Author:** [@KrishnaGoyal](https://discourse.processing.org/u/KrishnaGoyal)\
**Replies:** 4\
**Last updated:** [June 18, 2020, 5:00am UTC](https://discourse.processing.org/t/how-do-i-use-savedata/21960 "2020-06-18T05:00:41Z")

</div>

I was working on the posenet classifier project. But the .saveData() doesnt seem to be saving the json file. Can someone help me with it?

---

## [Pre Loading bottleneck](https://discourse.processing.org/t/pre-loading-bottleneck/21083)

<div class="topic-metadata">

**Author:** [@phoebus](https://discourse.processing.org/u/phoebus)\
**Replies:** 8\
**Last updated:** [June 17, 2020, 7:06pm UTC](https://discourse.processing.org/t/pre-loading-bottleneck/21083 "2020-06-17T19:06:13Z")

</div>

Hi there In my p5.js website, rich.gg ,I use a loading animation that I made using Daniel Shiffman’s technique seen here function richImg(imgName, filename) { window\[imgName\] = loadImage(filename, imgLoaded); func…

---

## [I've replaced table data with a csv and it doesn't work](https://discourse.processing.org/t/ive-replaced-table-data-with-a-csv-and-it-doesnt-work/21941)

<div class="topic-metadata">

**Author:** [@Quorum](https://discourse.processing.org/u/Quorum)\
**Replies:** 1\
**Last updated:** [June 17, 2020, 11:29am UTC](https://discourse.processing.org/t/ive-replaced-table-data-with-a-csv-and-it-doesnt-work/21941 "2020-06-17T11:29:03Z")

</div>

I’ve replaced the first row of the code you can see below to replace this data with a csv, but it doesn’t work: let games = \[ \['Boston Celtics', '105', 'Philadelphia 76ers', '87', ''\], \['Philadelphia 76ers', '127', …

---

## [Problem loading json url](https://discourse.processing.org/t/problem-loading-json-url/21898)

<div class="topic-metadata">

**Author:** [@maddyna](https://discourse.processing.org/u/maddyna)\
**Replies:** 3\
**Last updated:** [June 16, 2020, 7:20pm UTC](https://discourse.processing.org/t/problem-loading-json-url/21898 "2020-06-16T19:20:09Z")

</div>

function setup() { createCanvas(400, 400); let url=‘http://api.open-notify.org/iss-now.json’; loadJSON(url,drawEarthquakes,‘jsonp’); } function draw() { background(220); } function drawEarthquakes(earthquakes){ …

---

## [In p5.js web editor, can I reuse an image from assets folder in several projects?](https://discourse.processing.org/t/in-p5-js-web-editor-can-i-reuse-an-image-from-assets-folder-in-several-projects/21899)

<div class="topic-metadata">

**Author:** [@carbonne](https://discourse.processing.org/u/carbonne)\
**Replies:** 3\
**Last updated:** [June 16, 2020, 9:35am UTC](https://discourse.processing.org/t/in-p5-js-web-editor-can-i-reuse-an-image-from-assets-folder-in-several-projects/21899 "2020-06-16T09:35:14Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I’m beginning to explore p5.js web editor, and I was wondering if there is a way to reuse an image from a previous project without uploading it …

---

## [Video problems only in p5.js editor](https://discourse.processing.org/t/video-problems-only-in-p5-js-editor/21852)

<div class="topic-metadata">

**Author:** [@rbgtoffolo](https://discourse.processing.org/u/rbgtoffolo)\
**Replies:** 2\
**Last updated:** [June 15, 2020, 6:21pm UTC](https://discourse.processing.org/t/video-problems-only-in-p5-js-editor/21852 "2020-06-15T18:21:34Z")

</div>

I’m trying to create a test project based on Daniel Shiffman’s Game of Life. In code, I’m using the webcam to create a new matrix every 20 frames. In offline everything works fine. Someone can help why this code does not…

---

## [Problems working with p5.PolySynth - reference is not clear](https://discourse.processing.org/t/problems-working-with-p5-polysynth-reference-is-not-clear/21892)

<div class="topic-metadata">

**Author:** [@umutreldem](https://discourse.processing.org/u/umutreldem)\
**Replies:** 0\
**Last updated:** [June 15, 2020, 2:59pm UTC](https://discourse.processing.org/t/problems-working-with-p5-polysynth-reference-is-not-clear/21892 "2020-06-15T14:59:57Z")

</div>

Getting into p5.PolySynth the last few days, I have noticed that there are some things in the reference that are not very clear to me: \*When calling .play(), the function requires at least three arguments. The refer…

---

## [Multiply Matrix and Point to apply transformation](https://discourse.processing.org/t/multiply-matrix-and-point-to-apply-transformation/21874)

<div class="topic-metadata">

**Author:** [@stephanschulz](https://discourse.processing.org/u/stephanschulz)\
**Replies:** 0\
**Last updated:** [June 14, 2020, 8:39pm UTC](https://discourse.processing.org/t/multiply-matrix-and-point-to-apply-transformation/21874 "2020-06-14T20:39:49Z")

</div>

openframeworks has makeRotationMatrix, makeTranslationMatrix, etc. and apply it to any stored coordinate. p5js has applyMatirx() but it applies to the elements being drawn not to variables. It seems http://glmatrix.net …

---

## [Issues Overlaying HTML Buttons on a P5 Canvas](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227)

<div class="topic-metadata">

**Author:** [@swan](https://discourse.processing.org/u/swan)\
**Replies:** 9\
**Last updated:** [June 14, 2020, 6:06pm UTC](https://discourse.processing.org/t/issues-overlaying-html-buttons-on-a-p5-canvas/21227 "2020-06-14T18:06:25Z")

</div>

Hi, I am creating a little evolutionary algorithm app as a side project. Anyway, I’m having troubles creating a hamburger button that will reveal a sidebar menu for changing settings and maybe returning to home. I would …

---

## [loadTable from object and not from url](https://discourse.processing.org/t/loadtable-from-object-and-not-from-url/21788)

<div class="topic-metadata">

**Author:** [@suvir](https://discourse.processing.org/u/suvir)\
**Replies:** 6\
**Last updated:** [June 13, 2020, 10:27am UTC](https://discourse.processing.org/t/loadtable-from-object-and-not-from-url/21788 "2020-06-13T10:27:27Z")

</div>

Hi, This is what i was doing before. p.preload = () =\> { data = (p as any).loadTable("http://127.0.0.1:3448/sample.csv", "csv", "header"); }; I would like to intiliaze the data above from a js response object. T…

---

## [P5.js using P2D and WebGL primitives](https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824)

<div class="topic-metadata">

**Author:** [@ylh](https://discourse.processing.org/u/ylh)\
**Replies:** 1\
**Last updated:** [June 13, 2020, 1:14am UTC](https://discourse.processing.org/t/p5-js-using-p2d-and-webgl-primitives/21824 "2020-06-13T01:14:31Z")

</div>

I have a sketch that uses straightforward draws and text boxes. I now want to add a 3D drawing. Evidently WebGL will break my current code. I only have one 3D drawing which can be in a separate area. Can I have two diff…

---

## [Some problem in pushing blocks in p5.js sketch](https://discourse.processing.org/t/some-problem-in-pushing-blocks-in-p5-js-sketch/21780)

<div class="topic-metadata">

**Author:** [@Nisss](https://discourse.processing.org/u/Nisss)\
**Replies:** 3\
**Last updated:** [June 12, 2020, 10:32am UTC](https://discourse.processing.org/t/some-problem-in-pushing-blocks-in-p5-js-sketch/21780 "2020-06-12T10:32:12Z")

</div>

https://editor.p5js.org/Nis\_Collect/sketches/eeOTXD\_D2 :point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::point\_up::poi…

---

## [How to save a transparent gif （without background）？](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730)

<div class="topic-metadata">

**Author:** [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Replies:** 13\
**Last updated:** [June 12, 2020, 1:34am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730 "2020-06-12T01:34:17Z")

</div>

When the png is ok（without background，transparent）.，I use canvas to save the gif，but I always get a gif with a black background . I used a method to replace black with transparency, but there will still be black resid…

---

## [How to position image correctly with applyMatrix](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766)

<div class="topic-metadata">

**Author:** [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Replies:** 4\
**Last updated:** [June 11, 2020, 7:38pm UTC](https://discourse.processing.org/t/how-to-position-image-correctly-with-applymatrix/21766 "2020-06-11T19:38:44Z")

</div>

Hi, I’ve started my first AR project and I can’t figure out how to position image correctly in a real world. For example, I want to replace my TV screen with custom image like this: My question is: if I know the co…

---

## [Adding one textured plane slows/lags the whole environment](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720)

<div class="topic-metadata">

**Author:** [@awunk](https://discourse.processing.org/u/awunk)\
**Replies:** 2\
**Last updated:** [June 11, 2020, 5:46pm UTC](https://discourse.processing.org/t/adding-one-textured-plane-slows-lags-the-whole-environment/21720 "2020-06-11T17:46:54Z")

</div>

Following some popular p5.js tutorials I got a 3d environment of cubes running, I want to add a text element for a little GUI. However, when texture(hovertext) is ran in the draw function, the environment drops from 30fp…

---

## [Generating landscapes. How to set real values?](https://discourse.processing.org/t/generating-landscapes-how-to-set-real-values/15018)

<div class="topic-metadata">

**Author:** [@Tanya](https://discourse.processing.org/u/Tanya)\
**Replies:** 6\
**Last updated:** [June 11, 2020, 12:56pm UTC](https://discourse.processing.org/t/generating-landscapes-how-to-set-real-values/15018 "2020-06-11T12:56:19Z")

</div>

Hello! I’m creating a program in JavaScript which will generate a landscape. It would be great to use real z-coordinate values. The idea is to use some function and it’ll return me the altitude of a certain point. Well, …

---

## [How to change the button label text of widget created by selectFileInput()](https://discourse.processing.org/t/how-to-change-the-button-label-text-of-widget-created-by-selectfileinput/21335)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 8\
**Last updated:** [June 11, 2020, 8:06am UTC](https://discourse.processing.org/t/how-to-change-the-button-label-text-of-widget-created-by-selectfileinput/21335 "2020-06-11T08:06:52Z")

</div>

Hi all, Very simple question, apologies. When I use createFileInput() in p5.js, the label on the button is always “Choose Files”, and I just can’t find a way to change the dang thing. I suppose createFileInput() create…

---

## [Detect if code is being run in editor or embedded](https://discourse.processing.org/t/detect-if-code-is-being-run-in-editor-or-embedded/21259)

<div class="topic-metadata">

**Author:** [@STEMcoding](https://discourse.processing.org/u/STEMcoding)\
**Replies:** 2\
**Last updated:** [May 24, 2020, 6:46pm UTC](https://discourse.processing.org/t/detect-if-code-is-being-run-in-editor-or-embedded/21259 "2020-05-24T18:46:48Z")

</div>

I would like to be able to add something to my p5.js code to be able to detect whether the code is being run in the http://editor.p5js.org environment or if it is being run embedded in a website. If in the editor then I…

---

## [mouseClicked to get mouseX and mouseY](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704)

<div class="topic-metadata">

**Author:** [@Ciaran](https://discourse.processing.org/u/Ciaran)\
**Replies:** 9\
**Last updated:** [June 9, 2020, 3:46pm UTC](https://discourse.processing.org/t/mouseclicked-to-get-mousex-and-mousey/21704 "2020-06-09T15:46:16Z")

</div>

I want to be able to log the position of the mouse when it is clicked on the canvas, I can get it to work with mousePressed but the function mouseClicked() is not working can anyone point me in the right direction? Code…

---

## [Implementing Shiffman Box 2D Library For p5js](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676)

<div class="topic-metadata">

**Author:** [@noah1211](https://discourse.processing.org/u/noah1211)\
**Replies:** 4\
**Last updated:** [June 8, 2020, 5:18pm UTC](https://discourse.processing.org/t/implementing-shiffman-box-2d-library-for-p5js/21676 "2020-06-08T17:18:54Z")

</div>

Hello, I recently watched the nature of code video on the box2d library, and it looks very useful! I am having quite the tough time setting up the library for p5js (I am trying to use shiffman’s library). Is this library…

---

## [P5js.org home page nav menu](https://discourse.processing.org/t/p5js-org-home-page-nav-menu/21679)

<div class="topic-metadata">

**Author:** [@doodleslice](https://discourse.processing.org/u/doodleslice)\
**Replies:** 2\
**Last updated:** [June 8, 2020, 4:26pm UTC](https://discourse.processing.org/t/p5js-org-home-page-nav-menu/21679 "2020-06-08T16:26:33Z")

</div>

Wasn’t sure where to post this. This about the p5js.org home page. I support the message there in support of Black Lives Matter, but in adding it to the home page the nav bar seems to have disappeared. I’m new to the com…

---

## [Fullscreen canvas p5js & posenet](https://discourse.processing.org/t/fullscreen-canvas-p5js-posenet/21086)

<div class="topic-metadata">

**Author:** [@babyP5](https://discourse.processing.org/u/babyP5)\
**Replies:** 2\
**Last updated:** [June 8, 2020, 12:03pm UTC](https://discourse.processing.org/t/fullscreen-canvas-p5js-posenet/21086 "2020-06-08T12:03:41Z")

</div>

hello everyone im working on project where i have to put an emoji on the face of a person but i have to show that emoji on the canvas and not the webcam video for now everything work fine my question is how can i make th…

---

## [How to check for collision detection with rotated polygons using p5.collide2D](https://discourse.processing.org/t/how-to-check-for-collision-detection-with-rotated-polygons-using-p5-collide2d/21299)

<div class="topic-metadata">

**Author:** [@cyberia2020](https://discourse.processing.org/u/cyberia2020)\
**Replies:** 2\
**Last updated:** [June 7, 2020, 11:58pm UTC](https://discourse.processing.org/t/how-to-check-for-collision-detection-with-rotated-polygons-using-p5-collide2d/21299 "2020-06-07T23:58:52Z")

</div>

Hello Processing and p5.js community! I am having difficulty understanding how to detect when two rotated polygons have collided using the p5.collide2D library. Although my shapes are Rects I have tried to convert them …

---

## [How to set character length (maxlength) for input box/text box](https://discourse.processing.org/t/how-to-set-character-length-maxlength-for-input-box-text-box/21663)

<div class="topic-metadata">

**Author:** [@chrisdean](https://discourse.processing.org/u/chrisdean)\
**Replies:** 2\
**Last updated:** [June 7, 2020, 7:01pm UTC](https://discourse.processing.org/t/how-to-set-character-length-maxlength-for-input-box-text-box/21663 "2020-06-07T19:01:54Z")

</div>

Hi all, The subject line says it all really. I have created an input box to enter text, but I need to set the maximum amount of characters that someone can type into it, ie. for a name. input = createInput(); input.po…

---

## [Implementing Robert Hodgin's "Meander": trouble with curvature and 'modified bitangents'](https://discourse.processing.org/t/implementing-robert-hodgins-meander-trouble-with-curvature-and-modified-bitangents/21651)

<div class="topic-metadata">

**Author:** [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Replies:** 0\
**Last updated:** [June 7, 2020, 11:40am UTC](https://discourse.processing.org/t/implementing-robert-hodgins-meander-trouble-with-curvature-and-modified-bitangents/21651 "2020-06-07T11:40:58Z")

</div>

Hi! I’ve been trying to create a very basic version of Robert Hodgin (aka Flight 404) 's Meander program but I am having some difficulty and I’m not sure what the problem is. The sketch I am working on is here: https:/…

---

## [Issues with remove() - Cannot read property 'getByteTimeDomainData' of undefined](https://discourse.processing.org/t/issues-with-remove-cannot-read-property-getbytetimedomaindata-of-undefined/21656)

<div class="topic-metadata">

**Author:** [@ballinoates](https://discourse.processing.org/u/ballinoates)\
**Replies:** 0\
**Last updated:** [June 7, 2020, 2:39pm UTC](https://discourse.processing.org/t/issues-with-remove-cannot-read-property-getbytetimedomaindata-of-undefined/21656 "2020-06-07T14:39:38Z")

</div>

Hi All- Got a doozy here, really need some halps! So in a nut shell my partner and I are working on a web based VJ app that lets the user pick different sketches to display. Everything was working ok until we tried to …

---

## [Regarding pixel manipulation from live camera feed](https://discourse.processing.org/t/regarding-pixel-manipulation-from-live-camera-feed/21643)

<div class="topic-metadata">

**Author:** [@maddyna](https://discourse.processing.org/u/maddyna)\
**Replies:** 0\
**Last updated:** [June 7, 2020, 8:28am UTC](https://discourse.processing.org/t/regarding-pixel-manipulation-from-live-camera-feed/21643 "2020-06-07T08:28:23Z")

</div>

\<!-- Tips: Format your code with \</ I am trying to map image pixels from live camera into a larger canvas but whenever i am doing that i am only getting a black canvas Can anybody suggest whr I am going wrong in my al…

---

## [Class error in code help needed](https://discourse.processing.org/t/class-error-in-code-help-needed/21620)

<div class="topic-metadata">

**Author:** [@maiat](https://discourse.processing.org/u/maiat)\
**Replies:** 12\
**Last updated:** [June 6, 2020, 8:14pm UTC](https://discourse.processing.org/t/class-error-in-code-help-needed/21620 "2020-06-06T20:14:16Z")

</div>

let numWalkers = 50; let walkers = \[\]; let dotCanvas; let pixelColor; // let walkerX = \[\]; // let walkerY = \[\]; // let speed = \[\]; // let size = \[\]; let people = \[\]; let name = \[\]; let numero = 0; function preload() { …

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

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