# Coding Questions

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

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

**Page:** 38

---

## [Update canvas when scrolling](https://discourse.processing.org/t/update-canvas-when-scrolling/16160)

<div class="topic-metadata">

**Author:** [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Replies:** 2\
**Last updated:** [December 12, 2019, 8:42am UTC](https://discourse.processing.org/t/update-canvas-when-scrolling/16160 "2019-12-12T08:42:07Z")

</div>

I have elements in the dom and I draw certain overlays using a canvas. The problem is that often the render of the dom happens before the canvas is updated and therefore they are not in sync: Is there any way to make…

---

## [Play Animation within p5js/Hover Effect on Objects](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306)

<div class="topic-metadata">

**Author:** [@van326](https://discourse.processing.org/u/van326)\
**Replies:** 4\
**Last updated:** [December 11, 2019, 4:21am UTC](https://discourse.processing.org/t/play-animation-within-p5js-hover-effect-on-objects/16306 "2019-12-11T04:21:31Z")

</div>

Hello! Long story short, I am trying to have animations and audio play in a loop when the user clicks on certain objects. I have looked up the Coding Train videos and have gotten some help for most parts of my project, b…

---

## [The Fault in my Stars (or drawing on top of looping background)](https://discourse.processing.org/t/the-fault-in-my-stars-or-drawing-on-top-of-looping-background/16162)

<div class="topic-metadata">

**Author:** [@AwkwardOwl17](https://discourse.processing.org/u/AwkwardOwl17)\
**Replies:** 2\
**Last updated:** [December 6, 2019, 7:26am UTC](https://discourse.processing.org/t/the-fault-in-my-stars-or-drawing-on-top-of-looping-background/16162 "2019-12-06T07:26:40Z")

</div>

Hello! I’m fairly new to p5.js and object-oriented programming (or programming in general), though I have been playing around in processing for a while. However, I have run into a problem with my code: What I’m trying …

---

## [Brightness with original background image](https://discourse.processing.org/t/brightness-with-original-background-image/15792)

<div class="topic-metadata">

**Author:** [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Replies:** 9\
**Last updated:** [December 5, 2019, 6:12pm UTC](https://discourse.processing.org/t/brightness-with-original-background-image/15792 "2019-12-05T18:12:35Z")

</div>

Hi to all, it is possible to modify the code for brightness, preserving the original color background ? https://p5js.org/examples/color-brightness.html In the example above, the image is only black and white,and i’m tr…

---

## [Function to change Background opacity to an image](https://discourse.processing.org/t/function-to-change-background-opacity-to-an-image/16112)

<div class="topic-metadata">

**Author:** [@Fadelast](https://discourse.processing.org/u/Fadelast)\
**Replies:** 1\
**Last updated:** [December 4, 2019, 6:30pm UTC](https://discourse.processing.org/t/function-to-change-background-opacity-to-an-image/16112 "2019-12-04T18:30:38Z")

</div>

Hi to all, I need a function to change the opacity of a canvas containing an image. How can i achieve this ? Thanks function preload() { img = loadImage("./asset/img/image.jpg"); } function setup() { var can…

---

## [Modifying line type in WebGL](https://discourse.processing.org/t/modifying-line-type-in-webgl/15339)

<div class="topic-metadata">

**Author:** [@AshaSato](https://discourse.processing.org/u/AshaSato)\
**Replies:** 7\
**Last updated:** [December 4, 2019, 11:45am UTC](https://discourse.processing.org/t/modifying-line-type-in-webgl/15339 "2019-12-04T11:45:56Z")

</div>

Hello! In the past to draw a dashed line I have used the following: drawingContext.setLineDash(\[5, 15\]); This does not appear to work with WebGL. Is there a simple way to get a dashed/dotted line with WebGL?

---

## [What do you think about my program?](https://discourse.processing.org/t/what-do-you-think-about-my-program/16042)

<div class="topic-metadata">

**Author:** [@willianxz](https://discourse.processing.org/u/willianxz)\
**Replies:** 17\
**Last updated:** [December 2, 2019, 10:06pm UTC](https://discourse.processing.org/t/what-do-you-think-about-my-program/16042 "2019-12-02T22:06:41Z")

</div>

It’s an example of how to consume data from a JSON API using text and even 3D. I had a hard time putting the text () command together with the 3D “box”, because it gave a strange font error, so I ended up creating a gra…

---

## [Running multiple interact sketches](https://discourse.processing.org/t/running-multiple-interact-sketches/16044)

<div class="topic-metadata">

**Author:** [@otji](https://discourse.processing.org/u/otji)\
**Replies:** 2\
**Last updated:** [December 2, 2019, 5:09pm UTC](https://discourse.processing.org/t/running-multiple-interact-sketches/16044 "2019-12-02T17:09:25Z")

</div>

Hi there, I am beginning to use P5.JS to create a small experience and one of the things i’m trying to do is to have a sketch that runs another sketch when an icon is clicked. I’m pretty sure this is a basic function bu…

---

## [Make object array move as one unit](https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994)

<div class="topic-metadata">

**Author:** [@samm](https://discourse.processing.org/u/samm)\
**Replies:** 1\
**Last updated:** [December 1, 2019, 2:43am UTC](https://discourse.processing.org/t/make-object-array-move-as-one-unit/15994 "2019-12-01T02:43:08Z")

</div>

I am fairly new to P5.js and am trying to make an entity of lines move around the screen and rotate (like a twirling motion). I have the array of lines created but I can’t figure out how to make a statement that will app…

---

## [Save image created via createGraphics to server](https://discourse.processing.org/t/save-image-created-via-creategraphics-to-server/15940)

<div class="topic-metadata">

**Author:** [@rashuan](https://discourse.processing.org/u/rashuan)\
**Replies:** 1\
**Last updated:** [November 29, 2019, 7:59am UTC](https://discourse.processing.org/t/save-image-created-via-creategraphics-to-server/15940 "2019-11-29T07:59:29Z")

</div>

Hello, I’ve got a simple (probably not so simple) problem - sending an image generated via createGraphics function to an e-mail. So what I thought is - use a php script on the server to send an e-mail. So far so good, bu…

---

## [My rect() is not working](https://discourse.processing.org/t/my-rect-is-not-working/15894)

<div class="topic-metadata">

**Author:** [@Andererlets\_play](https://discourse.processing.org/u/Andererlets_play)\
**Replies:** 1\
**Last updated:** [November 27, 2019, 9:05pm UTC](https://discourse.processing.org/t/my-rect-is-not-working/15894 "2019-11-27T21:05:41Z")

</div>

At the bottom, the rect is not working. String display\[\]\[\]; int dificulty; int size; int position; int ammount; int margin; float randomcol1 \[\]; float randomcol2 \[\]; float randomcol3 \[\]; float displaycol1 \[\]\[\]; float di…

---

## [How i extends class in p5.js?](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894)

<div class="topic-metadata">

**Author:** [@erkosone](https://discourse.processing.org/u/erkosone)\
**Replies:** 16\
**Last updated:** [November 27, 2019, 9:11am UTC](https://discourse.processing.org/t/how-i-extends-class-in-p5-js/894 "2019-11-27T09:11:10Z")

</div>

Hi, i try to extends class in p5.js sketch, but not works… How do you make this? Any simple example please?

---

## [Help with P5.js Project](https://discourse.processing.org/t/help-with-p5-js-project/15823)

<div class="topic-metadata">

**Author:** [@Sheikah](https://discourse.processing.org/u/Sheikah)\
**Replies:** 1\
**Last updated:** [November 26, 2019, 3:02am UTC](https://discourse.processing.org/t/help-with-p5-js-project/15823 "2019-11-26T03:02:21Z")

</div>

Hi, I’m new to coding and I’m struggling trying to get my code to do what I want it to. My idea was to have 4 different buttons that, when clicked, change the colour scheme of the composition and have a unique effect t…

---

## [mouseOver created object does not trigger function in p5](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752)

<div class="topic-metadata">

**Author:** [@gjs](https://discourse.processing.org/u/gjs)\
**Replies:** 6\
**Last updated:** [November 24, 2019, 9:36pm UTC](https://discourse.processing.org/t/mouseover-created-object-does-not-trigger-function-in-p5/15752 "2019-11-24T21:36:54Z")

</div>

Hi. I would be grateful for your thoughts as to why my code fails to print “mouse is over graphic” when I move the mouse over the image “pg.” (However, if I set it up as createCanvas rather than createGraphics, it works.…

---

## [Input does not work on mobile devices](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660)

<div class="topic-metadata">

**Author:** [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Replies:** 9\
**Last updated:** [November 23, 2019, 10:17pm UTC](https://discourse.processing.org/t/input-does-not-work-on-mobile-devices/15660 "2019-11-23T22:17:50Z")

</div>

I have a very simple p5 sketch that is running in my desktop computer pretty well. But when I hosted that with github pages just to see if it works on mobile devices I found it not working properly. I had just a single i…

---

## [How do change the shape of a 'point' in p5js?](https://discourse.processing.org/t/how-do-change-the-shape-of-a-point-in-p5js/15492)

<div class="topic-metadata">

**Author:** [@poppyseeds](https://discourse.processing.org/u/poppyseeds)\
**Replies:** 1\
**Last updated:** [November 22, 2019, 6:48pm UTC](https://discourse.processing.org/t/how-do-change-the-shape-of-a-point-in-p5js/15492 "2019-11-22T18:48:13Z")

</div>

I have created a text animation which has split the word into points using the font.toTextPoints() function. this function makes the points in circular shapes and only on the borders of the word. How can I change the cod…

---

## [Background color change with accelerometer](https://discourse.processing.org/t/background-color-change-with-accelerometer/15443)

<div class="topic-metadata">

**Author:** [@rhgrafix](https://discourse.processing.org/u/rhgrafix)\
**Replies:** 3\
**Last updated:** [November 22, 2019, 5:21pm UTC](https://discourse.processing.org/t/background-color-change-with-accelerometer/15443 "2019-11-22T17:21:44Z")

</div>

Can anyone get https://p5js.org/examples/mobile-acceleration-color.html to work? I’ve tried it on multiple devices that have accelerometers and the background color does not change with movement, Thanks, R.L. Hamm

---

## [Incremental name for image save](https://discourse.processing.org/t/incremental-name-for-image-save/15599)

<div class="topic-metadata">

**Author:** [@nicolas](https://discourse.processing.org/u/nicolas)\
**Replies:** 6\
**Last updated:** [November 18, 2019, 12:04pm UTC](https://discourse.processing.org/t/incremental-name-for-image-save/15599 "2019-11-18T12:04:57Z")

</div>

Hello, I would like to know how to name images so that each image is numbered in the order of recording. Names numbered incrementally. I use this code: save("image01.png"); And i want names like: image01, image02, im…

---

## [Fade Animation of character arrays](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409)

<div class="topic-metadata">

**Author:** [@byxx](https://discourse.processing.org/u/byxx)\
**Replies:** 2\
**Last updated:** [November 14, 2019, 6:14pm UTC](https://discourse.processing.org/t/fade-animation-of-character-arrays/15409 "2019-11-14T18:14:54Z")

</div>

Dear p5 community, I build some character arrays as two shapes (shape1 and shape2) I would like to blend over with a fade animation (1 sec) from shape 1 into shape2, after having been displayed for 10 secs. During the…

---

## [Removing and respawning sprites](https://discourse.processing.org/t/removing-and-respawning-sprites/15387)

<div class="topic-metadata">

**Author:** [@jakobfree](https://discourse.processing.org/u/jakobfree)\
**Replies:** 2\
**Last updated:** [November 13, 2019, 10:29pm UTC](https://discourse.processing.org/t/removing-and-respawning-sprites/15387 "2019-11-13T22:29:18Z")

</div>

Hi all, Programming uber-beginner here. Having a bit of trouble figuring out one (of many) problem(s) with a current small-scale game project: https://editor.p5js.org/jakobfree/sketches/B09u80zKh I’m trying to create a…

---

## [Alpha animation start with delay](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427)

<div class="topic-metadata">

**Author:** [@byxx](https://discourse.processing.org/u/byxx)\
**Replies:** 6\
**Last updated:** [November 13, 2019, 11:11am UTC](https://discourse.processing.org/t/alpha-animation-start-with-delay/15427 "2019-11-13T11:11:08Z")

</div>

Hey there, Here´s a alpha animation I work on as a beginner, starting immediately to fade out the shape containing a character array. That is okay. var f = 255; //alpha variable var speed = 0.1; // decreasing alpha mu…

---

## [Accessing class methods](https://discourse.processing.org/t/accessing-class-methods/15415)

<div class="topic-metadata">

**Author:** [@Zyxon](https://discourse.processing.org/u/Zyxon)\
**Replies:** 5\
**Last updated:** [November 12, 2019, 4:38am UTC](https://discourse.processing.org/t/accessing-class-methods/15415 "2019-11-12T04:38:27Z")

</div>

Hi, I’m new to javascript so I’m not familiar with classes in javascript (I’m from Java). I declared a class like so: class Obj { constructor(name, distance, description, colour, size) { //constructor } draw() { …

---

## [How do I dictate where my link is located in the canvas?](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 9\
**Last updated:** [November 12, 2019, 12:48am UTC](https://discourse.processing.org/t/how-do-i-dictate-where-my-link-is-located-in-the-canvas/15352 "2019-11-12T00:48:27Z")

</div>

Hi all, I would like to have a clickable link in my canvas. However the help page for createA doesn’t let you know how to draw it at, say, (200, 400) on the canvas. How do I do this? I tried translate, but it doesn’t wo…

---

## [How to save logs in a Processing web app using processing.js?](https://discourse.processing.org/t/how-to-save-logs-in-a-processing-web-app-using-processing-js/15196)

<div class="topic-metadata">

**Author:** [@emabiatch](https://discourse.processing.org/u/emabiatch)\
**Replies:** 2\
**Last updated:** [November 8, 2019, 4:40am UTC](https://discourse.processing.org/t/how-to-save-logs-in-a-processing-web-app-using-processing-js/15196 "2019-11-08T04:40:53Z")

</div>

I am building a simulation of a microwave web app for my thesis. I found out that with Processing was exactly what I was looking for and with the processing.js it is possible to run it in a web page that I’ll use to shar…

---

## [saveCanvas file name issues](https://discourse.processing.org/t/savecanvas-file-name-issues/15320)

<div class="topic-metadata">

**Author:** [@andylion](https://discourse.processing.org/u/andylion)\
**Replies:** 3\
**Last updated:** [November 8, 2019, 1:48am UTC](https://discourse.processing.org/t/savecanvas-file-name-issues/15320 "2019-11-08T01:48:00Z")

</div>

So I’ve been searching through various forums trying to find a solution, and I’ve turned up empty. I’m wondering if someone here can help. I’ve created a simple sketch that generates a series of random shapes as part of…

---

## [Variable to read an array of numbers in p5?](https://discourse.processing.org/t/variable-to-read-an-array-of-numbers-in-p5/13377)

<div class="topic-metadata">

**Author:** [@calornorte](https://discourse.processing.org/u/calornorte)\
**Replies:** 4\
**Last updated:** [November 7, 2019, 10:58pm UTC](https://discourse.processing.org/t/variable-to-read-an-array-of-numbers-in-p5/13377 "2019-11-07T22:58:18Z")

</div>

I come from modular programing, (Max/puredata) world, the pic above explains better (at least for me) what I want to do in p5. I have a variable that goes in between 0 and 100, I want to use this variable to read from…

---

## [Switching between front and rear camera on a smartphone using P5.js #4140](https://discourse.processing.org/t/switching-between-front-and-rear-camera-on-a-smartphone-using-p5-js-4140/15316)

<div class="topic-metadata">

**Author:** [@GeeveGeorge](https://discourse.processing.org/u/GeeveGeorge)\
**Replies:** 0\
**Last updated:** [November 7, 2019, 4:01pm UTC](https://discourse.processing.org/t/switching-between-front-and-rear-camera-on-a-smartphone-using-p5-js-4140/15316 "2019-11-07T16:01:55Z")

</div>

Hi Guys, I have written the program below for switching between front and rear camera on a phone when clicking on the switchBtn. On cliking the button, it doesn’t switch as intended. Hope you could have a look at my cod…

---

## [Splice function](https://discourse.processing.org/t/splice-function/15185)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 6\
**Last updated:** [November 5, 2019, 5:51pm UTC](https://discourse.processing.org/t/splice-function/15185 "2019-11-05T17:51:09Z")

</div>

Hi all, I’m trying to use the splice function for an array as described here and here but it’s not working in my code. I’ve implemented it on line 161. Does anyone have any insights? Thanks! Here’s a link to the code …

---

## [P5.js : Trouble with clicking buttons and make object move around on canvas](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242)

<div class="topic-metadata">

**Author:** [@Jenny1227](https://discourse.processing.org/u/Jenny1227)\
**Replies:** 2\
**Last updated:** [November 5, 2019, 6:00am UTC](https://discourse.processing.org/t/p5-js-trouble-with-clicking-buttons-and-make-object-move-around-on-canvas/15242 "2019-11-05T06:00:23Z")

</div>

I am really new to p5.js, and I’m trying to find a solution to this. I have a button. I wish to make my rabbit appear on canvas and jump up and down when the button is clicked. Now the rabbit only appear on canvas with …

---

## [P5.js WEBGL how to deal with big image files?](https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972)

<div class="topic-metadata">

**Author:** [@hilkeros](https://discourse.processing.org/u/hilkeros)\
**Replies:** 1\
**Last updated:** [November 3, 2019, 1:36pm UTC](https://discourse.processing.org/t/p5-js-webgl-how-to-deal-with-big-image-files/14972 "2019-11-03T13:36:15Z")

</div>

disclaimer: the links to my work in progress contain nudity. I consider the images as art, but I want to inform you about that before you click. I am working on an audiovisual project. First, I was doing everything with…

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

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