# p5.js

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

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

**Page:** 59

---

## [Read the pixels of input file](https://discourse.processing.org/t/read-the-pixels-of-input-file/24797)

<div class="topic-metadata">

**Author:** [@pixelMaker](https://discourse.processing.org/u/pixelMaker)\
**Replies:** 1\
**Last updated:** [October 21, 2020, 3:26pm UTC](https://discourse.processing.org/t/read-the-pixels-of-input-file/24797 "2020-10-21T15:26:20Z")

</div>

Hi, I have been working with processing on java for a while, but new to JS. I am trying to let the user upload an image, and then I want to be able to use get() or pixels\[\] to read specific pixels within the image the …

---

## [I'm trying to run 5p.js code from the example files but it is stuck at "loading..."](https://discourse.processing.org/t/im-trying-to-run-5p-js-code-from-the-example-files-but-it-is-stuck-at-loading/24794)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 3\
**Last updated:** [October 21, 2020, 3:05pm UTC](https://discourse.processing.org/t/im-trying-to-run-5p-js-code-from-the-example-files-but-it-is-stuck-at-loading/24794 "2020-10-21T15:05:36Z")

</div>

I’ve double-clicked the index.html file in the example folder that you can download from the p5js website and it’s stuck at loading. I have copy-pasted 51 lines of code from a project I made in open processing into the s…

---

## [Continuously update drawing during mouseDragged](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762)

<div class="topic-metadata">

**Author:** [@rajmb](https://discourse.processing.org/u/rajmb)\
**Replies:** 6\
**Last updated:** [October 21, 2020, 1:54pm UTC](https://discourse.processing.org/t/continuously-update-drawing-during-mousedragged/24762 "2020-10-21T13:54:41Z")

</div>

I am trying to create a simple mspaint like application on the web using p5 as a learning exercise. I have provided a button to draw an ellipse on the canvas and want to show the ellipse being resized as the mouse is dra…

---

## [Is disabling i18n possible?](https://discourse.processing.org/t/is-disabling-i18n-possible/24792)

<div class="topic-metadata">

**Author:** [@dievardump](https://discourse.processing.org/u/dievardump)\
**Replies:** 0\
**Last updated:** [October 21, 2020, 12:48pm UTC](https://discourse.processing.org/t/is-disabling-i18n-possible/24792 "2020-10-21T12:48:19Z")

</div>

Hi there, I am running p5js in a Sandboxed iframe, with no allow-origin. The used i18n lib tries to access document.cookie which is not safe, throwing an error and preventing p5.js to do its work. Is there any way (li…

---

## [About p5.js sketch](https://discourse.processing.org/t/about-p5-js-sketch/24777)

<div class="topic-metadata">

**Author:** [@Imsso](https://discourse.processing.org/u/Imsso)\
**Replies:** 1\
**Last updated:** [October 21, 2020, 7:31am UTC](https://discourse.processing.org/t/about-p5-js-sketch/24777 "2020-10-21T07:31:35Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Hi I am trying to use p5.js and have a question about all sketches I make on p5.js editor Is anyone can access to sketches I made? Is there a…

---

## [P5.js help with running the compiled js](https://discourse.processing.org/t/p5-js-help-with-running-the-compiled-js/24781)

<div class="topic-metadata">

**Author:** [@Gyuu](https://discourse.processing.org/u/Gyuu)\
**Replies:** 3\
**Last updated:** [October 21, 2020, 7:00am UTC](https://discourse.processing.org/t/p5-js-help-with-running-the-compiled-js/24781 "2020-10-21T07:00:51Z")

</div>

index.html \<!DOCTYPE html\> \<html lang="en"\> \<head\> \<meta charset="utf-8" /\> \<meta name="viewport" content="width=device-width, initial-scale=1.0"\> \<title\>Sketch\</title\> \<link rel="stylesheet" type="tex…

---

## [Send data to p5.js from another program](https://discourse.processing.org/t/send-data-to-p5-js-from-another-program/24717)

<div class="topic-metadata">

**Author:** [@kkscr](https://discourse.processing.org/u/kkscr)\
**Replies:** 1\
**Last updated:** [October 19, 2020, 4:08pm UTC](https://discourse.processing.org/t/send-data-to-p5-js-from-another-program/24717 "2020-10-19T16:08:06Z")

</div>

Hello ! I have some code written in C for a robot, and I would like to make a simulation with processing. I want to send data ( the coordinate of a few robots on a map) from my C program to a processing instance. In an…

---

## [Trying to make a cross on this grid](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676)

<div class="topic-metadata">

**Author:** [@marcospyder](https://discourse.processing.org/u/marcospyder)\
**Replies:** 6\
**Last updated:** [October 19, 2020, 12:09pm UTC](https://discourse.processing.org/t/trying-to-make-a-cross-on-this-grid/24676 "2020-10-19T12:09:09Z")

</div>

Just as the title explains. I managed to make one line go across the grid, but i’m not sure how to do the other line to create a cross. The idea is to make an expression just like “x===y” to automaticly make the other li…

---

## [A Javascript prototype question](https://discourse.processing.org/t/a-javascript-prototype-question/24699)

<div class="topic-metadata">

**Author:** [@flamo](https://discourse.processing.org/u/flamo)\
**Replies:** 3\
**Last updated:** [October 19, 2020, 8:37am UTC](https://discourse.processing.org/t/a-javascript-prototype-question/24699 "2020-10-19T08:37:14Z")

</div>

I am currently learning on how to use prototype in JS. I am curious about what happened after I extended a prototype and then I store the function as variable. why the console.log gives me a Window object for the canvas?…

---

## [Has the Web-Editor a bug when using line in WEBGL renderer?](https://discourse.processing.org/t/has-the-web-editor-a-bug-when-using-line-in-webgl-renderer/24539)

<div class="topic-metadata">

**Author:** [@noel](https://discourse.processing.org/u/noel)\
**Replies:** 2\
**Last updated:** [October 19, 2020, 4:36am UTC](https://discourse.processing.org/t/has-the-web-editor-a-bug-when-using-line-in-webgl-renderer/24539 "2020-10-19T04:36:50Z")

</div>

This code does not draw a line in the P5.js Web-Editor but draws in OpenProcessing and Processing IDE. Should it be reported? function setup() { createCanvas(windowWidth, windowHeight, WEBGL); stroke(255); } func…

---

## [Disappearance of curves in the order they appear](https://discourse.processing.org/t/disappearance-of-curves-in-the-order-they-appear/24553)

<div class="topic-metadata">

**Author:** [@qWici](https://discourse.processing.org/u/qWici)\
**Replies:** 2\
**Last updated:** [October 16, 2020, 7:40pm UTC](https://discourse.processing.org/t/disappearance-of-curves-in-the-order-they-appear/24553 "2020-10-16T19:40:45Z")

</div>

I have this code: var i = 0; function setup() { createCanvas(windowWidth, windowHeight); background(0); colorMode(HSB, 255); } function windowResized() { resizeCanvas(windowWidth, windowHeight); bac…

---

## [Issue with windowWidth under windowResize for mobile](https://discourse.processing.org/t/issue-with-windowwidth-under-windowresize-for-mobile/24621)

<div class="topic-metadata">

**Author:** [@minirachel](https://discourse.processing.org/u/minirachel)\
**Replies:** 2\
**Last updated:** [October 16, 2020, 5:01pm UTC](https://discourse.processing.org/t/issue-with-windowwidth-under-windowresize-for-mobile/24621 "2020-10-16T17:01:42Z")

</div>

Hi, I’m having difficulty resizing a canvas while using instance mode on mobile view. It looks like the final width it lands on is 3x’s the starting width. I’ve included relevant code below (view full published code here)…

---

## [Print in console](https://discourse.processing.org/t/print-in-console/24650)

<div class="topic-metadata">

**Author:** [@Alcys6](https://discourse.processing.org/u/Alcys6)\
**Replies:** 3\
**Last updated:** [October 16, 2020, 4:54pm UTC](https://discourse.processing.org/t/print-in-console/24650 "2020-10-16T16:54:18Z")

</div>

Hello, It has been quite a while that I used processing hence I have old habits that do not seems to work now. Previoulsy I was used to « print » the content of the variables in the console at the bottom of the screen …

---

## [\_decrementPreload and preload](https://discourse.processing.org/t/decrementpreload-and-preload/24618)

<div class="topic-metadata">

**Author:** [@caterpillar](https://discourse.processing.org/u/caterpillar)\
**Replies:** 0\
**Last updated:** [October 15, 2020, 11:36am UTC](https://discourse.processing.org/t/decrementpreload-and-preload/24618 "2020-10-15T11:36:56Z")

</div>

I read libraries tutorial and have a question about Example of async function for callback and preload(). I followed its code and wrote an example. p5.prototype.loadXXX = function(callback) { const ret = {}; …

---

## [Svg library beta testers requested](https://discourse.processing.org/t/svg-library-beta-testers-requested/24551)

<div class="topic-metadata">

**Author:** [@bobcook](https://discourse.processing.org/u/bobcook)\
**Replies:** 3\
**Last updated:** [October 14, 2020, 7:20pm UTC](https://discourse.processing.org/t/svg-library-beta-testers-requested/24551 "2020-10-14T19:20:27Z")

</div>

I have developed an SVG library for P5. It’s unique feature is that it processes any SVG fragment in addition to files. The result is painted on an image with user-specified dimensions. There are numerous examples tog…

---

## [Direction of Particles in simple physics engine interact in weird ways](https://discourse.processing.org/t/direction-of-particles-in-simple-physics-engine-interact-in-weird-ways/24579)

<div class="topic-metadata">

**Author:** [@hensn](https://discourse.processing.org/u/hensn)\
**Replies:** 2\
**Last updated:** [October 14, 2020, 3:23pm UTC](https://discourse.processing.org/t/direction-of-particles-in-simple-physics-engine-interact-in-weird-ways/24579 "2020-10-14T15:23:58Z")

</div>

Hi guys, I’m playing around with the simple physics engine from this video: https://www.youtube.com/watch?v=BjoM9oKOAKY What I wanted to do is to have two particles that just move in one direction. To do this I create …

---

## [Click and point game with array - troubleshooting](https://discourse.processing.org/t/click-and-point-game-with-array-troubleshooting/24504)

<div class="topic-metadata">

**Author:** [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Replies:** 7\
**Last updated:** [October 12, 2020, 9:58pm UTC](https://discourse.processing.org/t/click-and-point-game-with-array-troubleshooting/24504 "2020-10-12T21:58:20Z")

</div>

Hi, I’m making a click and point type of game. I want to sort fishes by their color. I want to remove the blue fishes from the big aquarium and “store” them for further use in the small aquarium. I putting here what I’…

---

## [Tinting a shape in p5js isn't working, how could I tint it then?](https://discourse.processing.org/t/tinting-a-shape-in-p5js-isnt-working-how-could-i-tint-it-then/24550)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 1\
**Last updated:** [October 12, 2020, 7:56pm UTC](https://discourse.processing.org/t/tinting-a-shape-in-p5js-isnt-working-how-could-i-tint-it-then/24550 "2020-10-12T19:56:17Z")

</div>

I did a little bit of processing and now in p5js I’m trying to tint a shape using tint(); but it won’t work, how should I tint it?

---

## [P5.js 2020 Showcase is Open for Submissions!](https://discourse.processing.org/t/p5-js-2020-showcase-is-open-for-submissions/22285)

<div class="topic-metadata">

**Author:** [@connieliu](https://discourse.processing.org/u/connieliu)\
**Replies:** 1\
**Last updated:** [October 12, 2020, 3:05pm UTC](https://discourse.processing.org/t/p5-js-2020-showcase-is-open-for-submissions/22285 "2020-10-12T15:05:07Z")

</div>

The p5.js 2020 showcase is open for submissions until August 3rd! #p5showcase Check out the submission form here: https://bit.ly/p5showcase and the showcase page here: https://p5js.org/showcase/ If you’d like to create…

---

## [Code works correctly in p5, but translation to Processing outputs weird results](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508)

<div class="topic-metadata">

**Author:** [@pablohotsauce](https://discourse.processing.org/u/pablohotsauce)\
**Replies:** 3\
**Last updated:** [October 12, 2020, 6:39am UTC](https://discourse.processing.org/t/code-works-correctly-in-p5-but-translation-to-processing-outputs-weird-results/24508 "2020-10-12T06:39:06Z")

</div>

I threw something together in p5, and it works as intended. Then I tried to translate it to (Java) Processing, and although it runs, the results are weird. I’ve checked everything I can think of, and I’m not sure what th…

---

## [How to detect trackpad actions like pinch, scroll, three finger actions etc](https://discourse.processing.org/t/how-to-detect-trackpad-actions-like-pinch-scroll-three-finger-actions-etc/23646)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 2\
**Last updated:** [October 12, 2020, 3:20am UTC](https://discourse.processing.org/t/how-to-detect-trackpad-actions-like-pinch-scroll-three-finger-actions-etc/23646 "2020-10-12T03:20:30Z")

</div>

Hi all, I recently had a need to detect a two-finger “pinch” action, on a Mac in p5.js, and had some trouble finding info. I found this … https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javas…

---

## [How to change the state of a checkbox created with createCheckbox()?](https://discourse.processing.org/t/how-to-change-the-state-of-a-checkbox-created-with-createcheckbox/24514)

<div class="topic-metadata">

**Author:** [@sipe40](https://discourse.processing.org/u/sipe40)\
**Replies:** 2\
**Last updated:** [October 11, 2020, 1:06pm UTC](https://discourse.processing.org/t/how-to-change-the-state-of-a-checkbox-created-with-createcheckbox/24514 "2020-10-11T13:06:44Z")

</div>

Hi! I’ve created a checkbox using box1 = createCheckbox('test', true); and I want to be able to change the state of that checkbox. However, box1.elt.checked returns undefined. This seems to be, because box1.elt returns …

---

## [Accidental fractal pattern using line(), and wonky line() behavior](https://discourse.processing.org/t/accidental-fractal-pattern-using-line-and-wonky-line-behavior/24425)

<div class="topic-metadata">

**Author:** [@KaliBrain](https://discourse.processing.org/u/KaliBrain)\
**Replies:** 3\
**Last updated:** [October 10, 2020, 8:18pm UTC](https://discourse.processing.org/t/accidental-fractal-pattern-using-line-and-wonky-line-behavior/24425 "2020-10-10T20:18:38Z")

</div>

So playing around with vectors for the first time I created a circle by drawing a line and rotating it: let count = 0 let slice = 6 let oddSize = 0.0625 function unitVectorGrade() { translate(width / 2, height / 2) …

---

## [loadTable - how to handle missing file error?](https://discourse.processing.org/t/loadtable-how-to-handle-missing-file-error/24476)

<div class="topic-metadata">

**Author:** [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Replies:** 3\
**Last updated:** [October 10, 2020, 5:00pm UTC](https://discourse.processing.org/t/loadtable-how-to-handle-missing-file-error/24476 "2020-10-10T17:00:38Z")

</div>

Hi, I have a web-page served by node.js. In the web-page is a loadTable which loads a csv file from disk. loadTable is async and the draw action is controlled by iLoadData. In the good callback, this is incremented …

---

## [Why isn't my canvas resizing in p5.js?](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466)

<div class="topic-metadata">

**Author:** [@sam101](https://discourse.processing.org/u/sam101)\
**Replies:** 2\
**Last updated:** [October 10, 2020, 3:25am UTC](https://discourse.processing.org/t/why-isnt-my-canvas-resizing-in-p5-js/24466 "2020-10-10T03:25:27Z")

</div>

Hey everyone, so I was editing my code and I believe when I added the translate function in my function draw, it somehow prevented my text and other contexts of my sketch to resize when I would resize my browser. Not sur…

---

## [Can you use a Slider to change a circle to square in p5.js?](https://discourse.processing.org/t/can-you-use-a-slider-to-change-a-circle-to-square-in-p5-js/24405)

<div class="topic-metadata">

**Author:** [@sam101](https://discourse.processing.org/u/sam101)\
**Replies:** 2\
**Last updated:** [October 9, 2020, 7:04pm UTC](https://discourse.processing.org/t/can-you-use-a-slider-to-change-a-circle-to-square-in-p5-js/24405 "2020-10-09T19:04:22Z")

</div>

Hey everyone was hoping if someone could direct me in a direction of how to code a slider to change a circle into a square? I’ve achieved being able to change the colour and shape and rotating it, but I haven’t been able…

---

## [How to rotate a single image?](https://discourse.processing.org/t/how-to-rotate-a-single-image/24465)

<div class="topic-metadata">

**Author:** [@Emilia444](https://discourse.processing.org/u/Emilia444)\
**Replies:** 2\
**Last updated:** [October 9, 2020, 1:56pm UTC](https://discourse.processing.org/t/how-to-rotate-a-single-image/24465 "2020-10-09T13:56:08Z")

</div>

Hey guys, I’m rather unfamiliar with ps5, and have recently been trying it out. I’ve tried looking this up and couldn’t find an answer for it, but I’m creating a program with multiple images in it. I was wondering if the…

---

## [How to write my code so that it adjusts to mobile screen for p5.js?](https://discourse.processing.org/t/how-to-write-my-code-so-that-it-adjusts-to-mobile-screen-for-p5-js/24456)

<div class="topic-metadata">

**Author:** [@sam101](https://discourse.processing.org/u/sam101)\
**Replies:** 1\
**Last updated:** [October 9, 2020, 7:02am UTC](https://discourse.processing.org/t/how-to-write-my-code-so-that-it-adjusts-to-mobile-screen-for-p5-js/24456 "2020-10-09T07:02:22Z")

</div>

Hey everyone, I was just wondering if I have a code that when I upload it as a website it works on a desktop, but then how would I write it out so that it also adjusts to a mobile screen as well. The code is in p5.js and…

---

## [Ways to hide the HTML text-input box? Or alternatives?](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429)

<div class="topic-metadata">

**Author:** [@aith](https://discourse.processing.org/u/aith)\
**Replies:** 4\
**Last updated:** [October 9, 2020, 4:22am UTC](https://discourse.processing.org/t/ways-to-hide-the-html-text-input-box-or-alternatives/24429 "2020-10-09T04:22:34Z")

</div>

Hi! I’m using p5 to fake a retro computer terminal for a spooky game. I want the user to be able to type in the terminal, but I find the html text-input box to be visually jarring. Is there a way to let the user click o…

---

## [Can I use shaders with electron and p5js?](https://discourse.processing.org/t/can-i-use-shaders-with-electron-and-p5js/24444)

<div class="topic-metadata">

**Author:** [@stephanschulz](https://discourse.processing.org/u/stephanschulz)\
**Replies:** 3\
**Last updated:** [October 9, 2020, 4:20am UTC](https://discourse.processing.org/t/can-i-use-shaders-with-electron-and-p5js/24444 "2020-10-09T04:20:17Z")

</div>

I am able to run this template, which create an electron app with p5js code. But as soon as I add shader loading the app displays a black window. Everything works fine when running the same code through Brackets as a…

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

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