# p5.js

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

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

**Page:** 27

---

## [Fragment shaders need width and height multiplied by pixelDensity()](https://discourse.processing.org/t/fragment-shaders-need-width-and-height-multiplied-by-pixeldensity/36045)

<div class="topic-metadata">

**Author:** [@DaveH](https://discourse.processing.org/u/DaveH)\
**Replies:** 1\
**Last updated:** [March 31, 2022, 12:38pm UTC](https://discourse.processing.org/t/fragment-shaders-need-width-and-height-multiplied-by-pixeldensity/36045 "2022-03-31T12:38:15Z")

</div>

I’ve spent days trying to figure out why my rendering was off on my Android phone. Then I realised I was fixing things for the Windows computer I’m writing on had 150% scaling. Which means it was broken elsewhere. And …

---

## [Help visualizing the Mandelbrot set](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974)

<div class="topic-metadata">

**Author:** [@TerminatorP](https://discourse.processing.org/u/TerminatorP)\
**Replies:** 7\
**Last updated:** [March 31, 2022, 7:37am UTC](https://discourse.processing.org/t/help-visualizing-the-mandelbrot-set/35974 "2022-03-31T07:37:32Z")

</div>

Hey folks I am trying to create a simple mandelbrot set visualization using p5js library. I read the wikipedia article on the Mandelbrot Set and came up a quick visualization. It seems to have worked correctly, but I did…

---

## [Our Google Workspace for Edu account users cant login w/ SSO](https://discourse.processing.org/t/our-google-workspace-for-edu-account-users-cant-login-w-sso/36041)

<div class="topic-metadata">

**Author:** [@coachpaco](https://discourse.processing.org/u/coachpaco)\
**Replies:** 0\
**Last updated:** [March 30, 2022, 6:39pm UTC](https://discourse.processing.org/t/our-google-workspace-for-edu-account-users-cant-login-w-sso/36041 "2022-03-30T18:39:52Z")

</div>

Our Google Workspace for Edu accounts are not able to log in to p5js.org. We recently lost access to our projects for most of our domain account users. I reached out to the Google Workspace for Edu support team and after…

---

## [Status of mobile editor.p5.js](https://discourse.processing.org/t/status-of-mobile-editor-p5-js/36040)

<div class="topic-metadata">

**Author:** [@kizusu](https://discourse.processing.org/u/kizusu)\
**Replies:** 0\
**Last updated:** [March 30, 2022, 6:38pm UTC](https://discourse.processing.org/t/status-of-mobile-editor-p5-js/36040 "2022-03-30T18:38:04Z")

</div>

Hi: I’ve been reading the relevant repo and issues in GitHub, but I’m still unsure… Is there a way to access a working version of a mobile-friendly editor.p5js.org at this time? (Via url…?) I thought the editor UI mig…

---

## [Disable scrolling on mobile](https://discourse.processing.org/t/disable-scrolling-on-mobile/20719)

<div class="topic-metadata">

**Author:** [@calfish](https://discourse.processing.org/u/calfish)\
**Replies:** 2\
**Last updated:** [March 30, 2022, 6:15pm UTC](https://discourse.processing.org/t/disable-scrolling-on-mobile/20719 "2022-03-30T18:15:58Z")

</div>

Hi, I am working on a sketch where the user moves objects around. on mobile moving objects also causes the page to scroll around which is very annoying. I have found posts addressing this issue but am still confused. I…

---

## [Undefined Error](https://discourse.processing.org/t/undefined-error/36023)

<div class="topic-metadata">

**Author:** [@throwaway](https://discourse.processing.org/u/throwaway)\
**Replies:** 2\
**Last updated:** [March 30, 2022, 3:22pm UTC](https://discourse.processing.org/t/undefined-error/36023 "2022-03-30T15:22:14Z")

</div>

Here is my code. /\*eslint-env es6\*/ const button = document.querySelector('button') const body = document.querySelector('body') const colors = getRandomColor() body.style.backgroundColor = 'violet' button.addEventListe…

---

## [P5 convert to Processing problem](https://discourse.processing.org/t/p5-convert-to-processing-problem/36018)

<div class="topic-metadata">

**Author:** [@AbleYudada](https://discourse.processing.org/u/AbleYudada)\
**Replies:** 2\
**Last updated:** [March 30, 2022, 2:19pm UTC](https://discourse.processing.org/t/p5-convert-to-processing-problem/36018 "2022-03-30T14:19:09Z")

</div>

hello guys! Recently I am rewriting a p5js code to Processing but there is a strange problem. I have checked that the data is normal, but Processing cannot update the status of the screen in real time. It seems that the…

---

## [Token Error: Colors](https://discourse.processing.org/t/token-error-colors/36000)

<div class="topic-metadata">

**Author:** [@throwaway](https://discourse.processing.org/u/throwaway)\
**Replies:** 2\
**Last updated:** [March 30, 2022, 11:27am UTC](https://discourse.processing.org/t/token-error-colors/36000 "2022-03-30T11:27:02Z")

</div>

Here is my code /\*eslint-env es6\*/ const button = document.querySelector('button') const body = document.querySelector('body') const colors = getRandomColor() body.style.backgroundColor = 'violet' button.addEventListen…

---

## [WebGL alpha can't be used as a texture](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981)

<div class="topic-metadata">

**Author:** [@DaveH](https://discourse.processing.org/u/DaveH)\
**Replies:** 3\
**Last updated:** [March 30, 2022, 5:48am UTC](https://discourse.processing.org/t/webgl-alpha-cant-be-used-as-a-texture/35981 "2022-03-30T05:48:56Z")

</div>

Hi, I’m using WebGL as a createGraphics object for rendering a texture. My fragment shader uses the alpha channel in gl\_FragColor for a smooth cut-out. I want to render the webGL context using this alpha channel, but i…

---

## [Easy use recording library 🎉](https://discourse.processing.org/t/easy-use-recording-library/35960)

<div class="topic-metadata">

**Author:** [@rux](https://discourse.processing.org/u/rux)\
**Replies:** 0\
**Last updated:** [March 27, 2022, 5:45am UTC](https://discourse.processing.org/t/easy-use-recording-library/35960 "2022-03-27T05:45:30Z")

</div>

Hi everyone! I’ve found a great library of recording p5.js work, and I’d like to share it with you here! :point\_down: Check out the demo: Demo on p5.js Web Editor Demo on OpenProcessing Demo on CodePen It is ca…

---

## [My first p5.js sketches](https://discourse.processing.org/t/my-first-p5-js-sketches/35700)

<div class="topic-metadata">

**Author:** [@quark](https://discourse.processing.org/u/quark)\
**Replies:** 1\
**Last updated:** [March 28, 2022, 2:55pm UTC](https://discourse.processing.org/t/my-first-p5-js-sketches/35700 "2022-03-28T14:55:39Z")

</div>

I finally decided to make the effort to learn Javascript, so I have been converting some of my old Applets / Java projects to p5.js You can see some of my new sketches here Elastic Canvas I still have the Java project…

---

## [Nowadays, p5.js website is supported by which Java version?](https://discourse.processing.org/t/nowadays-p5-js-website-is-supported-by-which-java-version/35908)

<div class="topic-metadata">

**Author:** [@dikshashukla455](https://discourse.processing.org/u/dikshashukla455)\
**Replies:** 5\
**Last updated:** [March 25, 2022, 7:29pm UTC](https://discourse.processing.org/t/nowadays-p5-js-website-is-supported-by-which-java-version/35908 "2022-03-25T19:29:52Z")

</div>

Hello everyone, This is Diksha shukla. I am a front-end developer and programmer. I am excited to contribute to the processing foundation. I was started to contribute to the p5.js website but got stuck in the setup part…

---

## [Chromakey with shadertoy example](https://discourse.processing.org/t/chromakey-with-shadertoy-example/17378)

<div class="topic-metadata">

**Author:** [@hbarone](https://discourse.processing.org/u/hbarone)\
**Replies:** 1\
**Last updated:** [March 23, 2022, 4:42pm UTC](https://discourse.processing.org/t/chromakey-with-shadertoy-example/17378 "2022-03-23T16:42:13Z")

</div>

I’m try to addapt the shadertoy chromakey example to p5 with webcam as video source. After many time reading documentations of shaders my code seems not working. I need some help ShaderToy Chroma Key My test

---

## [Instance mode : accessing \`p5\` functions in an external class](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875)

<div class="topic-metadata">

**Author:** [@sylcha](https://discourse.processing.org/u/sylcha)\
**Replies:** 6\
**Last updated:** [March 21, 2022, 1:02pm UTC](https://discourse.processing.org/t/instance-mode-accessing-p5-functions-in-an-external-class/35875 "2022-03-21T13:02:02Z")

</div>

Hi everyone ! I’m using p5.js in a project (code here). I have to use p5.js in instance mode and attach the p5 object to the canvas which is just working fine so far. Now I would like to create a class in a separate fo…

---

## [How do I contribute to the references of p5.js?](https://discourse.processing.org/t/how-do-i-contribute-to-the-references-of-p5-js/17951)

<div class="topic-metadata">

**Author:** [@teddysphotos](https://discourse.processing.org/u/teddysphotos)\
**Replies:** 1\
**Last updated:** [March 20, 2022, 4:40pm UTC](https://discourse.processing.org/t/how-do-i-contribute-to-the-references-of-p5-js/17951 "2022-03-20T16:40:55Z")

</div>

I have contributed a few examples to p5js.org, but I want to contribute to references as well. What should I know, or in other words, what should be the prerequisite knowledge for contributing to the references section o…

---

## [If you don't talk for a while, speech recognition will not work](https://discourse.processing.org/t/if-you-dont-talk-for-a-while-speech-recognition-will-not-work/6432)

<div class="topic-metadata">

**Author:** [@SL7080](https://discourse.processing.org/u/SL7080)\
**Replies:** 1\
**Last updated:** [March 20, 2022, 1:24pm UTC](https://discourse.processing.org/t/if-you-dont-talk-for-a-while-speech-recognition-will-not-work/6432 "2022-03-20T13:24:25Z")

</div>

I use p5.speech library to do continuous recognition in my project. The problem is the recognition will not work if I don’t talk for a while. How could I active it again?

---

## [Use deviceorientation and devicemotion events](https://discourse.processing.org/t/use-deviceorientation-and-devicemotion-events/35845)

<div class="topic-metadata">

**Author:** [@ch3](https://discourse.processing.org/u/ch3)\
**Replies:** 0\
**Last updated:** [March 20, 2022, 1:26am UTC](https://discourse.processing.org/t/use-deviceorientation-and-devicemotion-events/35845 "2022-03-20T01:26:37Z")

</div>

Hi there, I came across the sensor-js demo and I am trying to figure out how to pull the orientation values in a p5 sketch running on a mobile. How would you go about attaching and using the deviceorientation and devic…

---

## [Infinite loop when using image()](https://discourse.processing.org/t/infinite-loop-when-using-image/35826)

<div class="topic-metadata">

**Author:** [@rustyrobison](https://discourse.processing.org/u/rustyrobison)\
**Replies:** 8\
**Last updated:** [March 19, 2022, 1:28am UTC](https://discourse.processing.org/t/infinite-loop-when-using-image/35826 "2022-03-19T01:28:36Z")

</div>

I made a simple loop, but when the image() function is called inside it, it comes up as an infinite loop. Any ideas? for (let i = 0; i \< 255; i++) { tint(255, i); image(img, 0, 0); }

---

## [Scaling Images on a Custom Axis](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801)

<div class="topic-metadata">

**Author:** [@AmethystMoon](https://discourse.processing.org/u/AmethystMoon)\
**Replies:** 1\
**Last updated:** [March 17, 2022, 9:23pm UTC](https://discourse.processing.org/t/scaling-images-on-a-custom-axis/35801 "2022-03-17T21:23:25Z")

</div>

I’m working on a cell-based game where the player walks around a world made of cells. I’m trying to give it an isometric perspective, so instead of just plain squares I rotate the canvas by 45 degrees, then draw the cell…

---

## [Masking several polygons](https://discourse.processing.org/t/masking-several-polygons/35718)

<div class="topic-metadata">

**Author:** [@ricardgarcia](https://discourse.processing.org/u/ricardgarcia)\
**Replies:** 2\
**Last updated:** [March 16, 2022, 8:02am UTC](https://discourse.processing.org/t/masking-several-polygons/35718 "2022-03-16T08:02:38Z")

</div>

Hey there, I’m a bit new to creative coding and even more using p5js. I’m currently working on a sketch in which I need to mask a letter several times (several rows and a cut letter inside) in the canvas. I was approac…

---

## [How to get smooth lines at an angle](https://discourse.processing.org/t/how-to-get-smooth-lines-at-an-angle/35767)

<div class="topic-metadata">

**Author:** [@GaryHomewood](https://discourse.processing.org/u/GaryHomewood)\
**Replies:** 1\
**Last updated:** [March 16, 2022, 2:46am UTC](https://discourse.processing.org/t/how-to-get-smooth-lines-at-an-angle/35767 "2022-03-16T02:46:33Z")

</div>

Just drawing lines, at some rotations they appear very blurry and pixelated. Is there anything I can do to make them sharper? Example here: https://editor.p5js.org/GaryHomewood/sketches/hBDmOiOHq

---

## [Getting x and y coordinates along a curve](https://discourse.processing.org/t/getting-x-and-y-coordinates-along-a-curve/35760)

<div class="topic-metadata">

**Author:** [@bringmeflowers](https://discourse.processing.org/u/bringmeflowers)\
**Replies:** 2\
**Last updated:** [March 15, 2022, 10:50am UTC](https://discourse.processing.org/t/getting-x-and-y-coordinates-along-a-curve/35760 "2022-03-15T10:50:05Z")

</div>

Aim: to get (x,y) coordinates for circles along an arc. Hi, I have been trying to plot circles along an arc and get their locations. I wonder if there is some theta stuff that I need to look into… this is the design t…

---

## [Horizontal gradient for line](https://discourse.processing.org/t/horizontal-gradient-for-line/35687)

<div class="topic-metadata">

**Author:** [@bringmeflowers](https://discourse.processing.org/u/bringmeflowers)\
**Replies:** 2\
**Last updated:** [March 15, 2022, 9:22am UTC](https://discourse.processing.org/t/horizontal-gradient-for-line/35687 "2022-03-15T09:22:39Z")

</div>

Hi, I have been trying out different ways to display horizontal gradients within lines, for example, do gradient for each circle and then put into lines. But it did not work. I just wonder if the effect is possible to …

---

## [Bresenham line generation not working? Making a line out of points](https://discourse.processing.org/t/bresenham-line-generation-not-working-making-a-line-out-of-points/35753)

<div class="topic-metadata">

**Author:** [@tinywitchdraws](https://discourse.processing.org/u/tinywitchdraws)\
**Replies:** 2\
**Last updated:** [March 15, 2022, 8:17am UTC](https://discourse.processing.org/t/bresenham-line-generation-not-working-making-a-line-out-of-points/35753 "2022-03-15T08:17:04Z")

</div>

I want to figure out how to make a line out of a series of points for implementation in another project in p5js, I heard that bresenham line generation was probably the best way to do this, however in the sketch I’ve imp…

---

## [Install P5. js mode for all user in a computer](https://discourse.processing.org/t/install-p5-js-mode-for-all-user-in-a-computer/35178)

<div class="topic-metadata">

**Author:** [@Yingyi](https://discourse.processing.org/u/Yingyi)\
**Replies:** 2\
**Last updated:** [March 15, 2022, 6:34am UTC](https://discourse.processing.org/t/install-p5-js-mode-for-all-user-in-a-computer/35178 "2022-03-15T06:34:24Z")

</div>

please format code with \</\> button \* homework policy \* asking questions Good Day! This is IT technician, I am install Processing 4 in our Mac Computer Lab, and install P5.js mode by click " Add mode" button locates …

---

## [Can shapes be limited by a border inside the canvas?](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679)

<div class="topic-metadata">

**Author:** [@cottonchipper](https://discourse.processing.org/u/cottonchipper)\
**Replies:** 2\
**Last updated:** [March 13, 2022, 3:48pm UTC](https://discourse.processing.org/t/can-shapes-be-limited-by-a-border-inside-the-canvas/35679 "2022-03-13T15:48:53Z")

</div>

The following sketch sets up my question https://editor.p5js.org/cottonchipper/sketches/f7yKwh53v background(220); fill('red'); rect(0,0,200,200); rect(200,200,200,200); fill('white'); const y = (400)/2 + sin(…

---

## [Manually Coding B-Splines](https://discourse.processing.org/t/manually-coding-b-splines/35673)

<div class="topic-metadata">

**Author:** [@TheSynchronomicon](https://discourse.processing.org/u/TheSynchronomicon)\
**Replies:** 3\
**Last updated:** [March 11, 2022, 4:05pm UTC](https://discourse.processing.org/t/manually-coding-b-splines/35673 "2022-03-11T16:05:36Z")

</div>

So I’ve been trying to manually code a b-spline for a set of any number of user defined points, but I’ve hit a bit of a snag when it comes to the actually coding part of it. I first tested it with a specific knot vector …

---

## [My P5.js software doesn't run anymore, please help!](https://discourse.processing.org/t/my-p5-js-software-doesnt-run-anymore-please-help/35678)

<div class="topic-metadata">

**Author:** [@blom.faes](https://discourse.processing.org/u/blom.faes)\
**Replies:** 2\
**Last updated:** [March 11, 2022, 12:53pm UTC](https://discourse.processing.org/t/my-p5-js-software-doesnt-run-anymore-please-help/35678 "2022-03-11T12:53:31Z")

</div>

I am working on a project, but have accidently clicked some button which linked my “Microsoft Print” software to my Run button(also to the keybind). So everytime I try to run my software this windows tab opens up …

---

## [Image filter gets stronger every loop - p5.js](https://discourse.processing.org/t/image-filter-gets-stronger-every-loop-p5-js/35641)

<div class="topic-metadata">

**Author:** [@emihardej](https://discourse.processing.org/u/emihardej)\
**Replies:** 2\
**Last updated:** [March 10, 2022, 9:55pm UTC](https://discourse.processing.org/t/image-filter-gets-stronger-every-loop-p5-js/35641 "2022-03-10T21:55:28Z")

</div>

I have made my own image filters sepia and blur. When the mouse is clicked on the original (left) image, it is meant to create a radial blur effect on the processed (right) image. However, after testing it I have found t…

---

## [Fill not overwriting the last fill](https://discourse.processing.org/t/fill-not-overwriting-the-last-fill/35491)

<div class="topic-metadata">

**Author:** [@Bepishibe](https://discourse.processing.org/u/Bepishibe)\
**Replies:** 4\
**Last updated:** [March 10, 2022, 11:11am UTC](https://discourse.processing.org/t/fill-not-overwriting-the-last-fill/35491 "2022-03-10T11:11:04Z")

</div>

so im trying to make a code for a school project where the german empire flag turns into the german flag when i drag on it. until the second ellipse(mouseX,mouseY,50,50); part, everything works fine, but in the if(200 \<=…

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

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