# Beginners

**URL:** https://discourse.processing.org/c/p5js/p5js-beginners/16.md?page=14

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

**Page:** 15

---

## [Where to put loadBytes()?](https://discourse.processing.org/t/where-to-put-loadbytes/13818)

<div class="topic-metadata">

**Author:** [@shedMusic](https://discourse.processing.org/u/shedMusic)\
**Replies:** 2\
**Last updated:** [September 5, 2019, 10:31am UTC](https://discourse.processing.org/t/where-to-put-loadbytes/13818 "2019-09-05T10:31:13Z")

</div>

Hi Can anyone confirm … can loadBytes() only be used in preload() ? If I try in setup() or anywhere else (e.g. in a new class) it doesn’t work. let data; function preload() { data = loadBytes('assets/kick.wav'); }…

---

## [Instance mode events affecting entire html](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785)

<div class="topic-metadata">

**Author:** [@Brodie](https://discourse.processing.org/u/Brodie)\
**Replies:** 3\
**Last updated:** [September 4, 2019, 11:15am UTC](https://discourse.processing.org/t/instance-mode-events-affecting-entire-html/13785 "2019-09-04T11:15:50Z")

</div>

I am having an issue where the events associated with p are being applied to the entire HTML document. If I am clicking on or off the canvas, the event will be fired. Returning false also prevents default for the entire …

---

## [Save different returns for looped function](https://discourse.processing.org/t/save-different-returns-for-looped-function/13686)

<div class="topic-metadata">

**Author:** [@b\_and\_z](https://discourse.processing.org/u/b_and_z)\
**Replies:** 5\
**Last updated:** [August 31, 2019, 10:43am UTC](https://discourse.processing.org/t/save-different-returns-for-looped-function/13686 "2019-08-31T10:43:37Z")

</div>

Hi all So I have a function that creates multiple sliders. The function is then looped to create multiple sliders. I want the slider values to be stored in an array, for each slider a single array element. How would I h…

---

## [Pie Chart with only 5 datasets/arrays (Noob)](https://discourse.processing.org/t/pie-chart-with-only-5-datasets-arrays-noob/13464)

<div class="topic-metadata">

**Author:** [@harlo1](https://discourse.processing.org/u/harlo1)\
**Replies:** 2\
**Last updated:** [August 19, 2019, 5:24am UTC](https://discourse.processing.org/t/pie-chart-with-only-5-datasets-arrays-noob/13464 "2019-08-19T05:24:17Z")

</div>

I’m just getting started (noob) - I’m confused about using the pie chart to represent data - I converted data into 360 degrees but it still doesn’t seem to be working. Any advice? Here’s the code for reference: let ang…

---

## [New to coding; need a lotta help!](https://discourse.processing.org/t/new-to-coding-need-a-lotta-help/13372)

<div class="topic-metadata">

**Author:** [@CipherMan](https://discourse.processing.org/u/CipherMan)\
**Replies:** 14\
**Last updated:** [August 15, 2019, 11:35am UTC](https://discourse.processing.org/t/new-to-coding-need-a-lotta-help/13372 "2019-08-15T11:35:45Z")

</div>

I have been following along with Daniel Shiffman’s tutorial videos on YouTube, and some codes work but others don’t. I’m new to coding, but it seems that the problem is the variables I put in, that the reader(?) doesn’t …

---

## [Drawing arc in WEBGL](https://discourse.processing.org/t/drawing-arc-in-webgl/13065)

<div class="topic-metadata">

**Author:** [@Jithin](https://discourse.processing.org/u/Jithin)\
**Replies:** 5\
**Last updated:** [August 7, 2019, 10:36pm UTC](https://discourse.processing.org/t/drawing-arc-in-webgl/13065 "2019-08-07T22:36:36Z")

</div>

Is it possible to draw arc in WEBGL mode?

---

## [KeyTyped not working until mouse is pressed](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 5\
**Last updated:** [August 7, 2019, 7:43am UTC](https://discourse.processing.org/t/keytyped-not-working-until-mouse-is-pressed/13151 "2019-08-07T07:43:56Z")

</div>

Hello, I’ve taken the below code from this example: https://p5js.org/reference/#/p5/keyTyped and I’m using openprocessing.org as an editor, if that’s helpful in this situation. In order to be able to get the sketch t…

---

## [Code 800A0404 issue](https://discourse.processing.org/t/code-800a0404-issue/2036)

<div class="topic-metadata">

**Author:** [@mary.mauntz](https://discourse.processing.org/u/mary.mauntz)\
**Replies:** 14\
**Last updated:** [August 5, 2019, 2:47pm UTC](https://discourse.processing.org/t/code-800a0404-issue/2036 "2019-08-05T14:47:34Z")

</div>

So I am new to HTML and Javscript, and I 'm trying to setup p5.js , however I received windows script host problem Code 800A0405 source microsoft JScript compilation error…how can I fix this ? Please help me!!! Thanks!!! …

---

## ['is equal to': == vs ===](https://discourse.processing.org/t/is-equal-to-vs/13150)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 2\
**Last updated:** [August 3, 2019, 11:34am UTC](https://discourse.processing.org/t/is-equal-to-vs/13150 "2019-08-03T11:34:34Z")

</div>

Hi all, I come from Processing where ‘is equal to’ is represented by ‘==’. Lauren McCarthy’s book “Getting Started with Processing” uses this standard as well. However I’ve noted that here: https://p5js.org/examples/co…

---

## [How to get preview in a separate window](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924)

<div class="topic-metadata">

**Author:** [@Kris1](https://discourse.processing.org/u/Kris1)\
**Replies:** 13\
**Last updated:** [July 29, 2019, 7:52pm UTC](https://discourse.processing.org/t/how-to-get-preview-in-a-separate-window/12924 "2019-07-29T19:52:55Z")

</div>

Hi- Very new user with a basic question- I would like the preview window to open in a separate window from the sketch editor. How do I do this?

---

## [Web Editor says there's an error. I think it fibs!](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025)

<div class="topic-metadata">

**Author:** [@mbrasseau](https://discourse.processing.org/u/mbrasseau)\
**Replies:** 8\
**Last updated:** [July 28, 2019, 8:49pm UTC](https://discourse.processing.org/t/web-editor-says-theres-an-error-i-think-it-fibs/13025 "2019-07-28T20:49:48Z")

</div>

I’m using the p5.js Web Editor. I wrote this function that draws a star. function star(paintBrush.x, paintBrush.y) { stroke(69, 33, 5); fill(255, 255, 0); ellipse(paintBrush.x, paintBrush.y, 15, 15); line(paint…

---

## [Alpha not working in fill()](https://discourse.processing.org/t/alpha-not-working-in-fill/12916)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 3\
**Last updated:** [July 23, 2019, 2:31pm UTC](https://discourse.processing.org/t/alpha-not-working-in-fill/12916 "2019-07-23T14:31:28Z")

</div>

Hello, I’m taking a number of Processing sketches and converting them to p5.js. I have converted this sketch from Processing to p5 but I can’t quite figure out why the alpha isn’t working here. Any insights? // Arrays …

---

## [What are the enclosed numbers on the left hand side in the console when I "print"?](https://discourse.processing.org/t/what-are-the-enclosed-numbers-on-the-left-hand-side-in-the-console-when-i-print/12874)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 1\
**Last updated:** [July 22, 2019, 10:22pm UTC](https://discourse.processing.org/t/what-are-the-enclosed-numbers-on-the-left-hand-side-in-the-console-when-i-print/12874 "2019-07-22T22:22:27Z")

</div>

What are the enclosed numbers on the left hand side in the console when I “print”? https://editor.p5js.org/femkeblanco/sketches/GFcm8qZgP Thanks in advance.

---

## [I cannot declare and create an object in one line](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879)

<div class="topic-metadata">

**Author:** [@femke.blanco](https://discourse.processing.org/u/femke.blanco)\
**Replies:** 1\
**Last updated:** [July 22, 2019, 12:25am UTC](https://discourse.processing.org/t/i-cannot-declare-and-create-an-object-in-one-line/12879 "2019-07-22T00:25:59Z")

</div>

I’ve come across two ways of defining classes in p5.js. The first: https://editor.p5js.org/femkeblanco/sketches/Vycw0YkNr The second: https://editor.p5js.org/femkeblanco/sketches/YXi8pCrRQ I presume the second way, …

---

## [Is there a way to load pictures from client without preload?](https://discourse.processing.org/t/is-there-a-way-to-load-pictures-from-client-without-preload/12686)

<div class="topic-metadata">

**Author:** [@josebv](https://discourse.processing.org/u/josebv)\
**Replies:** 2\
**Last updated:** [July 12, 2019, 8:06pm UTC](https://discourse.processing.org/t/is-there-a-way-to-load-pictures-from-client-without-preload/12686 "2019-07-12T20:06:31Z")

</div>

Im thinking maybe like a button that opens a finder window so I can load the picture

---

## [\[SOLVED\] Properties in Processing](https://discourse.processing.org/t/solved-properties-in-processing/12569)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 4\
**Last updated:** [July 7, 2019, 9:22pm UTC](https://discourse.processing.org/t/solved-properties-in-processing/12569 "2019-07-07T21:22:00Z")

</div>

I’m converting a project from p5.js to processing and am struggling to find the equivalent in processing. I’m using the p5.js properties var a = {}; so that I can later access and update this variable as such; var b =…

---

## [Empty p5js Template File (Link to GitHub download)](https://discourse.processing.org/t/empty-p5js-template-file-link-to-github-download/7352)

<div class="topic-metadata">

**Author:** [@faxinadu](https://discourse.processing.org/u/faxinadu)\
**Replies:** 1\
**Last updated:** [July 3, 2019, 10:17pm UTC](https://discourse.processing.org/t/empty-p5js-template-file-link-to-github-download/7352 "2019-07-03T22:17:07Z")

</div>

Empty template for a p5js project with ready to use html, css and js files. Expands a bit on the other empty project examples. Includes a reference to css class for the sketch, preload-setup-draw functions with some qui…

---

## [What is the difference between pixelDensity() and displayDensity()?](https://discourse.processing.org/t/what-is-the-difference-between-pixeldensity-and-displaydensity/12381)

<div class="topic-metadata">

**Author:** [@matias.silva](https://discourse.processing.org/u/matias.silva)\
**Replies:** 2\
**Last updated:** [June 29, 2019, 2:31pm UTC](https://discourse.processing.org/t/what-is-the-difference-between-pixeldensity-and-displaydensity/12381 "2019-06-29T14:31:36Z")

</div>

Hey! I’ve started to use p5.Graphics in my sketches and ran into a problem with pixel densities. I’m familiar with p5 and Processing but can’t quite grasp the meaning of these two functions and how they differ. Also, wh…

---

## [P5.js vs javascript](https://discourse.processing.org/t/p5-js-vs-javascript/11866)

<div class="topic-metadata">

**Author:** [@CodingIsLife](https://discourse.processing.org/u/CodingIsLife)\
**Replies:** 5\
**Last updated:** [June 7, 2019, 4:26pm UTC](https://discourse.processing.org/t/p5-js-vs-javascript/11866 "2019-06-07T16:26:13Z")

</div>

I started p5.js recently. I never learnt javascript (the main javascript) at all. I have been learning only p5.js for almost 5 months… But I always had a question in my mind that - “I have not learnt javascript. Can p5.…

---

## [Webgl, Rotate object from different rotation origin?](https://discourse.processing.org/t/webgl-rotate-object-from-different-rotation-origin/11765)

<div class="topic-metadata">

**Author:** [@KeirMeDear](https://discourse.processing.org/u/KeirMeDear)\
**Replies:** 6\
**Last updated:** [June 5, 2019, 5:25pm UTC](https://discourse.processing.org/t/webgl-rotate-object-from-different-rotation-origin/11765 "2019-06-05T17:25:11Z")

</div>

Is there a way in P5.js to rotate an object by an origin other than 0,0. For example, if I was making a human character, it it a way I would be able to rotate their arm from the shoulder joint instead of just the center…

---

## [When can you use cos and sin outside of setup or draw](https://discourse.processing.org/t/when-can-you-use-cos-and-sin-outside-of-setup-or-draw/11805)

<div class="topic-metadata">

**Author:** [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Replies:** 4\
**Last updated:** [June 3, 2019, 6:22pm UTC](https://discourse.processing.org/t/when-can-you-use-cos-and-sin-outside-of-setup-or-draw/11805 "2019-06-03T18:22:42Z")

</div>

Is there any instances where you can do this. So far I understand that you can create a function outside of setup or draw which contain cos or sin, but they have to be called in draw or setup to work or it will give you …

---

## [Save canvas image to a variable \[p5.js\]](https://discourse.processing.org/t/save-canvas-image-to-a-variable-p5-js/11657)

<div class="topic-metadata">

**Author:** [@josebv](https://discourse.processing.org/u/josebv)\
**Replies:** 2\
**Last updated:** [May 30, 2019, 5:45pm UTC](https://discourse.processing.org/t/save-canvas-image-to-a-variable-p5-js/11657 "2019-05-30T17:45:47Z")

</div>

Hey, I’m trying to save a canvas image to variable, because later y want to push that variable into a an array, that at end of the loop goes to a database. I know that: saveCanvas(canvas, name,".png") downloads an im…

---

## [Generate one random number](https://discourse.processing.org/t/generate-one-random-number/11707)

<div class="topic-metadata">

**Author:** [@l3ehfar](https://discourse.processing.org/u/l3ehfar)\
**Replies:** 5\
**Last updated:** [May 30, 2019, 11:33am UTC](https://discourse.processing.org/t/generate-one-random-number/11707 "2019-05-30T11:33:47Z")

</div>

how can I generate only one random number per 200 frameCount? my code does produce many random numbers per 200 frameCount but I want it to repeat only once.

---

## [How to draw text that follows scale and translations? GUI?](https://discourse.processing.org/t/how-to-draw-text-that-follows-scale-and-translations-gui/11683)

<div class="topic-metadata">

**Author:** [@oOoOoO](https://discourse.processing.org/u/oOoOoO)\
**Replies:** 2\
**Last updated:** [May 29, 2019, 4:35pm UTC](https://discourse.processing.org/t/how-to-draw-text-that-follows-scale-and-translations-gui/11683 "2019-05-29T16:35:49Z")

</div>

I want to draw a highscore table over my game, but I am constantly scaling and translating the canvas, so it wont stay where I want it to. How do I create a GUI type thing that will stay in the top right corner of the sc…

---

## [Square is not defined (?)](https://discourse.processing.org/t/square-is-not-defined/11536)

<div class="topic-metadata">

**Author:** [@Laurent](https://discourse.processing.org/u/Laurent)\
**Replies:** 1\
**Last updated:** [May 24, 2019, 9:09am UTC](https://discourse.processing.org/t/square-is-not-defined/11536 "2019-05-24T09:09:56Z")

</div>

Hi everyone, Sorry for this very basic question, but I’ve got the following error when using the square() function of p5.js, even if using the rect() function instead works very well : Uncaught ReferenceError: square i…

---

## [Problem with code p5js](https://discourse.processing.org/t/problem-with-code-p5js/11379)

<div class="topic-metadata">

**Author:** [@bitCrasher](https://discourse.processing.org/u/bitCrasher)\
**Replies:** 5\
**Last updated:** [May 19, 2019, 12:54pm UTC](https://discourse.processing.org/t/problem-with-code-p5js/11379 "2019-05-19T12:54:03Z")

</div>

hello! i’m trying to rewrite this code in processing: https://www.openprocessing.org/sketch/617540 but there is a part i don’t understand row 8: noiseSeed = noiseSeed || 1 this code pass to block function an int: …

---

## [\[SOLVED\] Adding createButton() causes an error](https://discourse.processing.org/t/solved-adding-createbutton-causes-an-error/11296)

<div class="topic-metadata">

**Author:** [@akathewb](https://discourse.processing.org/u/akathewb)\
**Replies:** 1\
**Last updated:** [May 16, 2019, 5:37am UTC](https://discourse.processing.org/t/solved-adding-createbutton-causes-an-error/11296 "2019-05-16T05:37:41Z")

</div>

Error: Uncaught ReferenceError: createButton is not defined Things I’ve tried to fix: I tried replacing the script tag to the CDN version of p5 8.0 thinking maybe I was not using the latest code base, but this did no…

---

## [\[resolved\] Bootstrap and p5 invisble canvas in jumbotron](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256)

<div class="topic-metadata">

**Author:** [@Valoute\_GS](https://discourse.processing.org/u/Valoute_GS)\
**Replies:** 2\
**Last updated:** [May 15, 2019, 9:47am UTC](https://discourse.processing.org/t/resolved-bootstrap-and-p5-invisble-canvas-in-jumbotron/11256 "2019-05-15T09:47:34Z")

</div>

Hello, I’ve got a small problem, I was trying the bootstrap and p5 exemple here and it works great, but not when I try it localy. I’ve make some modification (path to the sketch) and simplify but the code but nothing wo…

---

## [Tip: Do NOT addEventListener to draw()](https://discourse.processing.org/t/tip-do-not-addeventlistener-to-draw/8462)

<div class="topic-metadata">

**Author:** [@2000mater](https://discourse.processing.org/u/2000mater)\
**Replies:** 2\
**Last updated:** [May 15, 2019, 9:31am UTC](https://discourse.processing.org/t/tip-do-not-addeventlistener-to-draw/8462 "2019-05-15T09:31:41Z")

</div>

I don’t know if I have permission to leave tips but as a beginner I made the mistake of assuming an event listener works like keyIsDown(). As it turns out it doesn’t. I struggled so much with my framerate before finally …

---

## [My code doesn't work](https://discourse.processing.org/t/my-code-doesnt-work/10891)

<div class="topic-metadata">

**Author:** [@emilyabcde](https://discourse.processing.org/u/emilyabcde)\
**Replies:** 3\
**Last updated:** [May 8, 2019, 7:27pm UTC](https://discourse.processing.org/t/my-code-doesnt-work/10891 "2019-05-08T19:27:56Z")

</div>

Hello to anyone who is reading this… I’m using p5js in my class and I’m having some trouble with a flappy bird game I’m trying to remix. Me and my teacher figured out that it was because the game was set to “rectMode(CE…

[Previous page](https://discourse.processing.org/c/p5js/p5js-beginners/16.md?page=13)

[Next page](https://discourse.processing.org/c/p5js/p5js-beginners/16.md?page=15)