# Beginners

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

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

**Page:** 14

---

## [Scrolling on one canvas only (instance mode)](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802)

<div class="topic-metadata">

**Author:** [@calornorte](https://discourse.processing.org/u/calornorte)\
**Replies:** 2\
**Last updated:** [February 14, 2020, 3:47am UTC](https://discourse.processing.org/t/scrolling-on-one-canvas-only-instance-mode/17802 "2020-02-14T03:47:03Z")

</div>

hello! I’m producing two canvases on Instance Mode, my plan is to be able to mouseScroll on just one canvas, but I can’t make it work. I believe… I’m making a name function that is called from mousewheel in the first c…

---

## [Multiple instances of the same p5js sketch?](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765)

<div class="topic-metadata">

**Author:** [@89apt89](https://discourse.processing.org/u/89apt89)\
**Replies:** 1\
**Last updated:** [February 12, 2020, 6:21am UTC](https://discourse.processing.org/t/multiple-instances-of-the-same-p5js-sketch/17765 "2020-02-12T06:21:32Z")

</div>

Hello. I’m looking for a way to put multiple instances of the same p5js sketch on my site. I know the obvious method is copy-and-pasting my sketch.js and changing the IDs for each, but I want to have a dynamic amount of …

---

## [Problems with "this.x" variable in a class](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621)

<div class="topic-metadata">

**Author:** [@Rahul](https://discourse.processing.org/u/Rahul)\
**Replies:** 2\
**Last updated:** [February 8, 2020, 1:42am UTC](https://discourse.processing.org/t/problems-with-this-x-variable-in-a-class/17621 "2020-02-08T01:42:07Z")

</div>

Hello, everyone! As practice, I am working on a small sketch that has a black circle appear and move right from a black square if I hit the space bar. So far, everything looks good, but the circle isn’t moving — this.x …

---

## [P5js pixels not working](https://discourse.processing.org/t/p5js-pixels-not-working/17561)

<div class="topic-metadata">

**Author:** [@thunderball](https://discourse.processing.org/u/thunderball)\
**Replies:** 2\
**Last updated:** [February 5, 2020, 3:46am UTC](https://discourse.processing.org/t/p5js-pixels-not-working/17561 "2020-02-05T03:46:11Z")

</div>

hi all, this program does not work, I am copying a tutorial from The Coding Train which seems to work: https://youtu.be/nMUMZ5YRxHI?t=533 My test has no pixel being displayed, why? \<head\> \<script src="https://cdn.jsdel…

---

## [Reference is Null, p5 load order?](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330)

<div class="topic-metadata">

**Author:** [@Skranker](https://discourse.processing.org/u/Skranker)\
**Replies:** 3\
**Last updated:** [January 26, 2020, 1:22am UTC](https://discourse.processing.org/t/reference-is-null-p5-load-order/17330 "2020-01-26T01:22:05Z")

</div>

Hello, at the moment i am trying to reference a div object from my index.html witin the p5 sketch but i keep getting an object is null error. I think this happens because the script is loaded too early and the object h…

---

## [Error Create Canvas not defined- While trying to save sample project](https://discourse.processing.org/t/error-create-canvas-not-defined-while-trying-to-save-sample-project/16799)

<div class="topic-metadata">

**Author:** [@TechTrail](https://discourse.processing.org/u/TechTrail)\
**Replies:** 1\
**Last updated:** [January 3, 2020, 10:03pm UTC](https://discourse.processing.org/t/error-create-canvas-not-defined-while-trying-to-save-sample-project/16799 "2020-01-03T22:03:12Z")

</div>

I am trying to learn Java Script and I referring to Daniel Shiffman videos. I have installed Bracket and have downloaded the example project, On writing an implementation for setup and draw method I am getting the error…

---

## [KeyPressed doesn’t work](https://discourse.processing.org/t/keypressed-doesn-t-work/16787)

<div class="topic-metadata">

**Author:** [@All\_Rise](https://discourse.processing.org/u/All_Rise)\
**Replies:** 10\
**Last updated:** [January 2, 2020, 11:58am UTC](https://discourse.processing.org/t/keypressed-doesn-t-work/16787 "2020-01-02T11:58:21Z")

</div>

I’m pretty new to coding, and I have been trying to follow some of The Coding Train’s videos. But every video that he uses the keyPressed function, or anything that involves the keyboard in gameplay, nothing happens for …

---

## [Javascript Error reporting variable already declared](https://discourse.processing.org/t/javascript-error-reporting-variable-already-declared/16551)

<div class="topic-metadata">

**Author:** [@Dandada](https://discourse.processing.org/u/Dandada)\
**Replies:** 2\
**Last updated:** [December 21, 2019, 5:06pm UTC](https://discourse.processing.org/t/javascript-error-reporting-variable-already-declared/16551 "2019-12-21T17:06:01Z")

</div>

I created an example of a simply particle system after watching one of Dan Shiffman’s video. However it gives an error “Uncaught SyntaxError: Identifier ‘location’ has already been declared (sketch: line 1)” which make n…

---

## [How to upload an image from a URL?](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020)

<div class="topic-metadata">

**Author:** [@willianxz](https://discourse.processing.org/u/willianxz)\
**Replies:** 8\
**Last updated:** [December 2, 2019, 11:24am UTC](https://discourse.processing.org/t/how-to-upload-an-image-from-a-url/16020 "2019-12-02T11:24:43Z")

</div>

Hi, I tried to upload an image from a URL, but from what I see it doesn’t work, only for images that I place locally. The purpose of uploading images using URL is because in the JSON I receive it contains their URL. Ex…

---

## [How to draw a triangle shape using for loop from array](https://discourse.processing.org/t/how-to-draw-a-triangle-shape-using-for-loop-from-array/15955)

<div class="topic-metadata">

**Author:** [@b001](https://discourse.processing.org/u/b001)\
**Replies:** 3\
**Last updated:** [November 29, 2019, 4:37pm UTC](https://discourse.processing.org/t/how-to-draw-a-triangle-shape-using-for-loop-from-array/15955 "2019-11-29T16:37:13Z")

</div>

var door=\[403, 402, 427, 646, 639, 830, 809, 844, 802, 683, 552, 629, 712, 783, 415, 561, 562, 751, 680, 626, 701, 838, 322, 468, 625\]; for(b=0; b\<door.length; b++) { triangle(x1,y1,x2,y2,x3,y3); } how do …

---

## [Why is the distance increasing when I draw objects in a line with while loop?](https://discourse.processing.org/t/why-is-the-distance-increasing-when-i-draw-objects-in-a-line-with-while-loop/15872)

<div class="topic-metadata">

**Author:** [@Hangmansraven](https://discourse.processing.org/u/Hangmansraven)\
**Replies:** 2\
**Last updated:** [November 27, 2019, 1:29pm UTC](https://discourse.processing.org/t/why-is-the-distance-increasing-when-i-draw-objects-in-a-line-with-while-loop/15872 "2019-11-27T13:29:18Z")

</div>

Dear community, I am quite new to coding and doing some typical beginner’s exercises to learn more. My current exercise is about repeatedly drawing objects by using while loops. Therefore I declared the variables posi…

---

## [P5.js split() questions](https://discourse.processing.org/t/p5-js-split-questions/15701)

<div class="topic-metadata">

**Author:** [@humanperson](https://discourse.processing.org/u/humanperson)\
**Replies:** 1\
**Last updated:** [November 21, 2019, 9:00pm UTC](https://discourse.processing.org/t/p5-js-split-questions/15701 "2019-11-21T21:00:57Z")

</div>

Hello guys, I’m new here. I was wondering if it was possible to get the split function in p5.js to just split the letters of a word without the delim value. Answers as to how I would do this would also be very helpful. t…

---

## [Binding mouseDragged to function](https://discourse.processing.org/t/binding-mousedragged-to-function/15516)

<div class="topic-metadata">

**Author:** [@BSiemens](https://discourse.processing.org/u/BSiemens)\
**Replies:** 8\
**Last updated:** [November 18, 2019, 1:18am UTC](https://discourse.processing.org/t/binding-mousedragged-to-function/15516 "2019-11-18T01:18:42Z")

</div>

I’m binding mouse events to functions and they all work fine apart from: cnv.mouseDragged(mDragged); Anyone have any idea why?

---

## [Image files loading issue](https://discourse.processing.org/t/image-files-loading-issue/15410)

<div class="topic-metadata">

**Author:** [@byxx](https://discourse.processing.org/u/byxx)\
**Replies:** 9\
**Last updated:** [November 12, 2019, 3:32pm UTC](https://discourse.processing.org/t/image-files-loading-issue/15410 "2019-11-12T15:32:45Z")

</div>

Dear Community, wheras the p5 online editor runs the code of the sketch.js perfectly, I cant run it in my browser after downloading it.(Saying: loading…) Where is the problem? You see the containing files in the pic, …

---

## [Trouble setting up p5 in Visual Studio Code](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324)

<div class="topic-metadata">

**Author:** [@GiaFil7](https://discourse.processing.org/u/GiaFil7)\
**Replies:** 7\
**Last updated:** [November 11, 2019, 7:18pm UTC](https://discourse.processing.org/t/trouble-setting-up-p5-in-visual-studio-code/1324 "2019-11-11T19:18:40Z")

</div>

So I am new to HTML and Javscript, and I 'm trying to setup p5.js in VSC. I’ve installed the p5 snippets extension and my index.html file looks like this: \<html\> \<head\> \<title\>p5 Test\</title\> \<script src="https:…

---

## [Sketch is displayed twice inside my index.html page](https://discourse.processing.org/t/sketch-is-displayed-twice-inside-my-index-html-page/15335)

<div class="topic-metadata">

**Author:** [@MsMonicaAraujo](https://discourse.processing.org/u/MsMonicaAraujo)\
**Replies:** 16\
**Last updated:** [November 8, 2019, 5:46pm UTC](https://discourse.processing.org/t/sketch-is-displayed-twice-inside-my-index-html-page/15335 "2019-11-08T17:46:27Z")

</div>

Hi, I’m trying to run my sketches in a pretty simple webpage, just to show students how to put P5.js and index.html together and run it. What happens is that the canvas and its elements and behavior are created twice on …

---

## [How to use images on windows 10](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284)

<div class="topic-metadata">

**Author:** [@jpmills13](https://discourse.processing.org/u/jpmills13)\
**Replies:** 2\
**Last updated:** [November 7, 2019, 1:43am UTC](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284 "2019-11-07T01:43:20Z")

</div>

Im trying to insert custom images into p5JS, I cant enter any images period. Even if I change the name of the base files and rename them excatly what they were before hand the images now dont work. My code and files are …

---

## [Why wont the ball animate?](https://discourse.processing.org/t/why-wont-the-ball-animate/15273)

<div class="topic-metadata">

**Author:** [@drawrs](https://discourse.processing.org/u/drawrs)\
**Replies:** 8\
**Last updated:** [November 6, 2019, 9:11am UTC](https://discourse.processing.org/t/why-wont-the-ball-animate/15273 "2019-11-06T09:11:57Z")

</div>

// Where is the circle let x, y; function setup() { createCanvas(720, 400); // Starts in the middle } function draw() { background(200); ball(); } function ball(x, y) { x = width / 2; y = height; // D…

---

## [Problem with loadImage()](https://discourse.processing.org/t/problem-with-loadimage/14907)

<div class="topic-metadata">

**Author:** [@vinceibay](https://discourse.processing.org/u/vinceibay)\
**Replies:** 5\
**Last updated:** [October 24, 2019, 7:46am UTC](https://discourse.processing.org/t/problem-with-loadimage/14907 "2019-10-24T07:46:17Z")

</div>

I am currently on Dan Shiffmans 7.8 p5js tutorial https://www.youtube.com/watch?v=i2C1hrJMwz0&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=36 and I have encountered this error “p5.js says: It looks like there was a prob…

---

## [loadImage issue](https://discourse.processing.org/t/loadimage-issue/14837)

<div class="topic-metadata">

**Author:** [@ylh](https://discourse.processing.org/u/ylh)\
**Replies:** 4\
**Last updated:** [October 21, 2019, 1:10pm UTC](https://discourse.processing.org/t/loadimage-issue/14837 "2019-10-21T13:10:17Z")

</div>

I have a trivial problem. I can’t seem to load an image file, which is in the same directory as the html code here https://editor.p5js.org/ylh888/sketches/wNPt1-pbY Running on my local browser, it shows the same “Loadin…

---

## [Error when embedding one class inside another](https://discourse.processing.org/t/error-when-embedding-one-class-inside-another/14762)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 5\
**Last updated:** [October 17, 2019, 7:49pm UTC](https://discourse.processing.org/t/error-when-embedding-one-class-inside-another/14762 "2019-10-17T19:49:09Z")

</div>

Hi all, I’m trying to translate code from Processing to p5. The code embeds one class (Wheel) inside another (Car). I think that I’m close, but I’m getting an error message on line 70: backWheel is not defined. Is my i…

---

## [Creating and saving file localy on p5](https://discourse.processing.org/t/creating-and-saving-file-localy-on-p5/14727)

<div class="topic-metadata">

**Author:** [@GuilhermeVolker](https://discourse.processing.org/u/GuilhermeVolker)\
**Replies:** 1\
**Last updated:** [October 16, 2019, 1:08am UTC](https://discourse.processing.org/t/creating-and-saving-file-localy-on-p5/14727 "2019-10-16T01:08:09Z")

</div>

Hi! I’m creating a file and i need to save inside a folder but wen i execute the createWriter() and close it, it’s automatically downloads on bowser. Is there a way to make it works as processing do? function preload()…

---

## [CreateCanvas - actual size is double?](https://discourse.processing.org/t/createcanvas-actual-size-is-double/14728)

<div class="topic-metadata">

**Author:** [@rdyar](https://discourse.processing.org/u/rdyar)\
**Replies:** 2\
**Last updated:** [October 15, 2019, 11:37pm UTC](https://discourse.processing.org/t/createcanvas-actual-size-is-double/14728 "2019-10-15T23:37:05Z")

</div>

if I make a canvas as 400x400 like (copied from p5 editor): function setup() { createCanvas(400, 400); } function draw() { background(220); } and then inspect the canvas element in Chrome I get: \<canvas id="defau…

---

## [File path for loading table](https://discourse.processing.org/t/file-path-for-loading-table/14697)

<div class="topic-metadata">

**Author:** [@GuilhermeVolker](https://discourse.processing.org/u/GuilhermeVolker)\
**Replies:** 1\
**Last updated:** [October 14, 2019, 5:18pm UTC](https://discourse.processing.org/t/file-path-for-loading-table/14697 "2019-10-14T17:18:51Z")

</div>

I have to load a file in a different folder. the current folder is “FileConverter”, and i have to open at “upload/FDR.csv” I try the following code but it doesent work function preload(){ table = loadTable(".…

---

## [applyMatrix to mouseX and mouseY](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242)

<div class="topic-metadata">

**Author:** [@Jithin](https://discourse.processing.org/u/Jithin)\
**Replies:** 9\
**Last updated:** [October 2, 2019, 6:54am UTC](https://discourse.processing.org/t/applymatrix-to-mousex-and-mousey/14242 "2019-10-02T06:54:04Z")

</div>

When I use applyMatrix in a sketch to transform the coordinates, the mouseX and mouseY is not transformed accordingly. The sketch explains the problem. https://editor.p5js.org/jithunni.ks/sketches/p9Q0JnE\_l Is there a…

---

## [Understanding rotate before translate](https://discourse.processing.org/t/understanding-rotate-before-translate/8631)

<div class="topic-metadata">

**Author:** [@dougouverson](https://discourse.processing.org/u/dougouverson)\
**Replies:** 14\
**Last updated:** [February 24, 2019, 9:58pm UTC](https://discourse.processing.org/t/understanding-rotate-before-translate/8631 "2019-02-24T21:58:32Z")

</div>

I’m on page 168 of “Getting Started with P5.js” and having a difficulty wrapping my head around the rotate() before translate() vs translate() before rotate(): When rotate() is before translate(), why does "The shape no…

---

## [Easy 'for loop' question](https://discourse.processing.org/t/easy-for-loop-question/14075)

<div class="topic-metadata">

**Author:** [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Replies:** 3\
**Last updated:** [September 19, 2019, 8:44pm UTC](https://discourse.processing.org/t/easy-for-loop-question/14075 "2019-09-19T20:44:27Z")

</div>

What am I missing here? I’m expecting that the background should cycle through from black to white. …it’s not. function setup() { createCanvas(100, 100); } function draw() { for (let x = 0; x \< 256; x++) { backgrou…

---

## [Need help for p5.js ellipse "detail"](https://discourse.processing.org/t/need-help-for-p5-js-ellipse-detail/13983)

<div class="topic-metadata">

**Author:** [@SayokoWang](https://discourse.processing.org/u/SayokoWang)\
**Replies:** 2\
**Last updated:** [September 14, 2019, 6:35am UTC](https://discourse.processing.org/t/need-help-for-p5-js-ellipse-detail/13983 "2019-09-14T06:35:13Z")

</div>

Hi, I am new to p5.js; now I can draw ellipse ; but I don’t understand the “detail” in ellipse(x, y, w, h, detail) , how to use “detail”, I found no one example for it.

---

## [Font from Adobe Font Library](https://discourse.processing.org/t/font-from-adobe-font-library/13856)

<div class="topic-metadata">

**Author:** [@VMK](https://discourse.processing.org/u/VMK)\
**Replies:** 2\
**Last updated:** [September 7, 2019, 2:05am UTC](https://discourse.processing.org/t/font-from-adobe-font-library/13856 "2019-09-07T02:05:53Z")

</div>

Greetings! I’d like to use fonts from the Adobe Font Library into my sketch using P5js. Adobe give a link to a CSS file that I’m able to add to the html file and then in the CSS file I add an @import url(same link) I’…

---

## [Directory of Images Associated With Project](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529)

<div class="topic-metadata">

**Author:** [@hbtousa](https://discourse.processing.org/u/hbtousa)\
**Replies:** 5\
**Last updated:** [September 7, 2019, 2:07am UTC](https://discourse.processing.org/t/directory-of-images-associated-with-project/13529 "2019-09-07T02:07:41Z")

</div>

I need to load,one at the time, lots of images that are sitting at my desktop. A single picture can be displayed by using : function setup() { createCanvas(576, 720); img = createImg(‘image3.jpg’); img.hide(); } I…

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

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