# Coding Questions

**URL:** https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=23

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

**Page:** 24

---

## [Array has error every other object](https://discourse.processing.org/t/array-has-error-every-other-object/27068)

<div class="topic-metadata">

**Author:** [@georg2a](https://discourse.processing.org/u/georg2a)\
**Replies:** 6\
**Last updated:** [January 19, 2021, 8:48pm UTC](https://discourse.processing.org/t/array-has-error-every-other-object/27068 "2021-01-19T20:48:41Z")

</div>

hi, the array seems to not work for every other object; on the second click, another object is spawned even if the click is outside of the contains/bounds of the shape. thanks to anyone who takes the time to read/respo…

---

## [P5.js iframe not loading?](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066)

<div class="topic-metadata">

**Author:** [@georg2a](https://discourse.processing.org/u/georg2a)\
**Replies:** 4\
**Last updated:** [January 19, 2021, 12:30am UTC](https://discourse.processing.org/t/p5-js-iframe-not-loading/27066 "2021-01-19T00:30:40Z")

</div>

hi, https://editor.p5js.org/georg2a/present/DjlxhZ2W6T i’ve embedded multiple p5.js files into a website and all have worked except the one above; it freezes on “Loading…” as it does on processing.org. i’m not sure why…

---

## [Using createFileInput() to load JSON files during runtime](https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149)

<div class="topic-metadata">

**Author:** [@polygonfuture](https://discourse.processing.org/u/polygonfuture)\
**Replies:** 1\
**Last updated:** [January 18, 2021, 2:00am UTC](https://discourse.processing.org/t/using-createfileinput-to-load-json-files-during-runtime/27149 "2021-01-18T02:00:40Z")

</div>

Hi all, Overview I am making a simple p5.js front-end for controlling some electro-mechanical displays. Its a simple drawing app with the ability to save a drawing out as JSON and load it back as JSON. The output JSON…

---

## [Mask image with Text](https://discourse.processing.org/t/mask-image-with-text/27122)

<div class="topic-metadata">

**Author:** [@anarts\_3](https://discourse.processing.org/u/anarts_3)\
**Replies:** 3\
**Last updated:** [January 17, 2021, 2:52pm UTC](https://discourse.processing.org/t/mask-image-with-text/27122 "2021-01-17T14:52:48Z")

</div>

Hello everyone! So, quick question, I want to mask a image with a string of text from the code, but I can’t seem to figure out how to mask with text… I’m trying to achieve something like this: When I search about thi…

---

## [How to add text into randomly generated bubbles](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950)

<div class="topic-metadata">

**Author:** [@add2fic](https://discourse.processing.org/u/add2fic)\
**Replies:** 7\
**Last updated:** [January 17, 2021, 11:21am UTC](https://discourse.processing.org/t/how-to-add-text-into-randomly-generated-bubbles/26950 "2021-01-17T11:21:36Z")

</div>

I found and edited this open processing example, right now it is just creating random bubbles but I want text to appear at the center of these bubbles. For example an array n=\[‘A’,‘B’,‘C’\] and have them appear in the bub…

---

## [Can't get smooth-moving p5 blur in Safari](https://discourse.processing.org/t/cant-get-smooth-moving-p5-blur-in-safari/11292)

<div class="topic-metadata">

**Author:** [@maxbatt](https://discourse.processing.org/u/maxbatt)\
**Replies:** 3\
**Last updated:** [January 16, 2021, 2:17pm UTC](https://discourse.processing.org/t/cant-get-smooth-moving-p5-blur-in-safari/11292 "2021-01-16T14:17:18Z")

</div>

Hello! First off - thanks in advance for help. I’m looking to create an ambient, almost blurred lava-lamp-like effect as exemplified in the design below: I decided to blur various circles, you can see the un-…

---

## [Stuck with replicating the mouseover function](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039)

<div class="topic-metadata">

**Author:** [@georg2a](https://discourse.processing.org/u/georg2a)\
**Replies:** 4\
**Last updated:** [January 14, 2021, 8:53am UTC](https://discourse.processing.org/t/stuck-with-replicating-the-mouseover-function/27039 "2021-01-14T08:53:49Z")

</div>

hello, i’m having some trouble constricting the box space that triggers a change in visuals. i’ve drawn an outline of the area i want the visuals/mouse to change within. as the cursor moves out of this box, it should ret…

---

## [Draw angle curve between two vectors](https://discourse.processing.org/t/draw-angle-curve-between-two-vectors/27033)

<div class="topic-metadata">

**Author:** [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Replies:** 1\
**Last updated:** [January 13, 2021, 10:49pm UTC](https://discourse.processing.org/t/draw-angle-curve-between-two-vectors/27033 "2021-01-13T22:49:45Z")

</div>

How to draw angle curve between two vectors like below pictures in p5js My current drawing looks like below Here is the example sketch: https://editor.p5js.org/sarathjasrin/sketches/EVFh7Ni3n Thanks in advance

---

## [Responsive canvas](https://discourse.processing.org/t/responsive-canvas/26983)

<div class="topic-metadata">

**Author:** [@seicaratteri](https://discourse.processing.org/u/seicaratteri)\
**Replies:** 5\
**Last updated:** [January 12, 2021, 10:36am UTC](https://discourse.processing.org/t/responsive-canvas/26983 "2021-01-12T10:36:18Z")

</div>

Hello all! I am very new with p5js, and as an exercise I created a very simple sketch that generates an abstract landscape based on a lot of lines tied to a vector field originated by perlin noise. I am trying to mak…

---

## [How to trigger P5js sketch with scroll](https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990)

<div class="topic-metadata">

**Author:** [@robert](https://discourse.processing.org/u/robert)\
**Replies:** 1\
**Last updated:** [January 12, 2021, 6:57am UTC](https://discourse.processing.org/t/how-to-trigger-p5js-sketch-with-scroll/26990 "2021-01-12T06:57:45Z")

</div>

please format code with \</\> button \* homework policy \* asking questions I am currently working on a project where I need to have multiple p5 sketches on the same page. For this, I am going to use p5 instance mode. Th…

---

## [Find new point based on relative angle and distance](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921)

<div class="topic-metadata">

**Author:** [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Replies:** 2\
**Last updated:** [January 11, 2021, 8:31pm UTC](https://discourse.processing.org/t/find-new-point-based-on-relative-angle-and-distance/26921 "2021-01-11T20:31:13Z")

</div>

Hi how to find the new point based on relative angle and distance in the graph system. My drawing looks like below Lets say when I change angle between two points (A and c…

---

## [\[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 (…

---

## [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…

---

## [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…

---

## [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…

---

## [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…

---

## [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…

---

## [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…

---

## [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…

---

## [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…

---

## [Getting the error Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0](https://discourse.processing.org/t/getting-the-error-uncaught-domexception-failed-to-execute-drawimage-on-canvasrenderingcontext2d-the-image-argument-is-a-canvas-element-with-a-width-or-height-of-0/26419)

<div class="topic-metadata">

**Author:** [@EliteDaMyth](https://discourse.processing.org/u/EliteDaMyth)\
**Replies:** 1\
**Last updated:** [December 22, 2020, 8:45am UTC](https://discourse.processing.org/t/getting-the-error-uncaught-domexception-failed-to-execute-drawimage-on-canvasrenderingcontext2d-the-image-argument-is-a-canvas-element-with-a-width-or-height-of-0/26419 "2020-12-22T08:45:58Z")

</div>

I am trying to make a Delaunay triangulation sketch in p5. i have successfully made it to work with an image url. i want to allow the user to upload some images too, but when i am trying to do so, i get the following err…

---

## [Error (: line 0)](https://discourse.processing.org/t/error-line-0/26427)

<div class="topic-metadata">

**Author:** [@iris.go](https://discourse.processing.org/u/iris.go)\
**Replies:** 5\
**Last updated:** [December 21, 2020, 10:56pm UTC](https://discourse.processing.org/t/error-line-0/26427 "2020-12-21T22:56:07Z")

</div>

Good day, I am new to this forum and would like to have your advice concerning an error which I am not able to solve. When I run the code below (tree simulation) in p5js, it gives me this error : Script error. (: line …

---

## [Why do I get this error message? Ellipse was expecting Number](https://discourse.processing.org/t/why-do-i-get-this-error-message-ellipse-was-expecting-number/26428)

<div class="topic-metadata">

**Author:** [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Replies:** 2\
**Last updated:** [December 21, 2020, 9:06pm UTC](https://discourse.processing.org/t/why-do-i-get-this-error-message-ellipse-was-expecting-number/26428 "2020-12-21T21:06:50Z")

</div>

This is my code https://www.openprocessing.org/sketch/1048449# if you’re wondering what the image I’m using is it’s my gf.

---

## [EndShape call inside mouseDragged doesn't work in instanciated mode](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413)

<div class="topic-metadata">

**Author:** [@nahiko](https://discourse.processing.org/u/nahiko)\
**Replies:** 3\
**Last updated:** [December 21, 2020, 3:26pm UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413 "2020-12-21T15:26:39Z")

</div>

Hi guys, It’s all in the title, here is an example of the code: var s1 = function( sketch ) { sketch.setup = function() { let canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL); canvas1.position(0,0); canvas1.ba…

---

## [My variables will log to the console but not write to a div](https://discourse.processing.org/t/my-variables-will-log-to-the-console-but-not-write-to-a-div/25843)

<div class="topic-metadata">

**Author:** [@epignosis567](https://discourse.processing.org/u/epignosis567)\
**Replies:** 11\
**Last updated:** [December 17, 2020, 12:50am UTC](https://discourse.processing.org/t/my-variables-will-log-to-the-console-but-not-write-to-a-div/25843 "2020-12-17T00:50:21Z")

</div>

Hi. So I’ve again been following a p5 tutorial on youtube (coding train woowoo!) and I’ve adapted it to use my own data to map Covid statistics by state. And everything works in terms of the data showing up in the consol…

[Previous page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=22)

[Next page](https://discourse.processing.org/c/p5js/p5js-questions/18.md?page=24)