# p5.js

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

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

**Page:** 103

---

## [Trying to create a jumping character](https://discourse.processing.org/t/trying-to-create-a-jumping-character/7448)

<div class="topic-metadata">

**Author:** [@jadenfigger](https://discourse.processing.org/u/jadenfigger)\
**Replies:** 2\
**Last updated:** [January 13, 2019, 4:49pm UTC](https://discourse.processing.org/t/trying-to-create-a-jumping-character/7448 "2019-01-13T16:49:12Z")

</div>

I’m trying to create a character that jumps when ever i press the up arrow. let r = 20; let x = 200; let y = 380; let speed = 8; let gravity = 0.2; function setup() { createCanvas(400, 400); } function draw() { ba…

---

## [Adding reverb to microphone input and play it through speakers?](https://discourse.processing.org/t/adding-reverb-to-microphone-input-and-play-it-through-speakers/7415)

<div class="topic-metadata">

**Author:** [@AndreasRef](https://discourse.processing.org/u/AndreasRef)\
**Replies:** 1\
**Last updated:** [January 11, 2019, 1:14pm UTC](https://discourse.processing.org/t/adding-reverb-to-microphone-input-and-play-it-through-speakers/7415 "2019-01-11T13:14:18Z")

</div>

Hi I am wondering if it is possible to use p5js and the p5sound library to do the following: Get user input through the microphone Add reverb to the signal Output the wet signal (input + reverb) through the computers …

---

## [Using the draw method as one giant listener](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306)

<div class="topic-metadata">

**Author:** [@faxinadu](https://discourse.processing.org/u/faxinadu)\
**Replies:** 5\
**Last updated:** [January 10, 2019, 6:29pm UTC](https://discourse.processing.org/t/using-the-draw-method-as-one-giant-listener/7306 "2019-01-10T18:29:55Z")

</div>

We have been experimenting with using p5js’s draw function as one giant listener for normal html created dom elements, mostly range sliders that then manipulate p5js.sound objects. Obviously this is not “the right way” …

---

## [Use createVideo with vimeo or youtube assets](https://discourse.processing.org/t/use-createvideo-with-vimeo-or-youtube-assets/7386)

<div class="topic-metadata">

**Author:** [@fgraux](https://discourse.processing.org/u/fgraux)\
**Replies:** 5\
**Last updated:** [January 10, 2019, 3:52pm UTC](https://discourse.processing.org/t/use-createvideo-with-vimeo-or-youtube-assets/7386 "2019-01-10T15:52:05Z")

</div>

Hi there I’m trying to use p5.js and seriously.js to display a vimeo video chromakeyed in a canvas. video = createVideo(’//player.vimeo.com/video/…’); But the wevbsite returns an error : "Access to video at ‘…’ (red…

---

## [P5.js: Save only part of the canvas](https://discourse.processing.org/t/p5-js-save-only-part-of-the-canvas/7286)

<div class="topic-metadata">

**Author:** [@TheWizardBear](https://discourse.processing.org/u/TheWizardBear)\
**Replies:** 4\
**Last updated:** [January 9, 2019, 7:53pm UTC](https://discourse.processing.org/t/p5-js-save-only-part-of-the-canvas/7286 "2019-01-09T19:53:15Z")

</div>

How can I save/download only a part of the canvas (save a cropped part of the whole image)? e.g. function setup() { createCanvas(windowWidth, windowHeight); background(255); } function draw() { ellipse(mouseX, mou…

---

## [Why is the above grammar not showing up?](https://discourse.processing.org/t/why-is-the-above-grammar-not-showing-up/7341)

<div class="topic-metadata">

**Author:** [@alk5603](https://discourse.processing.org/u/alk5603)\
**Replies:** 4\
**Last updated:** [January 9, 2019, 12:43pm UTC](https://discourse.processing.org/t/why-is-the-above-grammar-not-showing-up/7341 "2019-01-09T12:43:49Z")

</div>

var mass = \[\]; var positionX = \[\]; var positionY = \[\]; var velocityX = \[\]; var velocityY = \[\]; ///////////////////////////////////////////////////////////////////////////////////////////////////// function setup() …

---

## [How do I change the color of the rectangle after hitting a bounce?](https://discourse.processing.org/t/how-do-i-change-the-color-of-the-rectangle-after-hitting-a-bounce/7335)

<div class="topic-metadata">

**Author:** [@anon98404100](https://discourse.processing.org/u/anon98404100)\
**Replies:** 2\
**Last updated:** [January 9, 2019, 7:26am UTC](https://discourse.processing.org/t/how-do-i-change-the-color-of-the-rectangle-after-hitting-a-bounce/7335 "2019-01-09T07:26:01Z")

</div>

For a school project I am learning P5.Js at the moment. one of my assignments is that I have a moving rectangle. It bounces of the walls from the xPosition and yPosition, so it can go any direction. My assignment is tha…

---

## [Trouble you greatly help thanks](https://discourse.processing.org/t/trouble-you-greatly-help-thanks/7342)

<div class="topic-metadata">

**Author:** [@alk5603](https://discourse.processing.org/u/alk5603)\
**Replies:** 1\
**Last updated:** [January 9, 2019, 3:47am UTC](https://discourse.processing.org/t/trouble-you-greatly-help-thanks/7342 "2019-01-09T03:47:10Z")

</div>

Randomly generate 5,000 balls with a diameter of 10, random colors, and bouncing within the canvas. When the mouse clicks, a fixed ball (which does not run) is generated at the position where the mouse clicks. Whe…

---

## [Retrieve model vertices](https://discourse.processing.org/t/retrieve-model-vertices/7339)

<div class="topic-metadata">

**Author:** [@Sudev](https://discourse.processing.org/u/Sudev)\
**Replies:** 0\
**Last updated:** [January 9, 2019, 1:20am UTC](https://discourse.processing.org/t/retrieve-model-vertices/7339 "2019-01-09T01:20:41Z")

</div>

Is there a way to retrieve vertex coordinates of a model ? Am trying to find out the equivalent of getVertex() in P5JS.

---

## [Building a Walker in p5](https://discourse.processing.org/t/building-a-walker-in-p5/7336)

<div class="topic-metadata">

**Author:** [@pers0n](https://discourse.processing.org/u/pers0n)\
**Replies:** 1\
**Last updated:** [January 9, 2019, 1:17am UTC](https://discourse.processing.org/t/building-a-walker-in-p5/7336 "2019-01-09T01:17:30Z")

</div>

I’m having trouble writing a Walker in P5, mostly due to Classes/Objects. I’ve tried it 2 ways, but am not having any luck :frowning: https://editor.p5js.org/pers0n/sketches/HyFphoMzV https://editor.p5js.org/pers0n/ske…

---

## [noFill() not working in processing 3.4](https://discourse.processing.org/t/nofill-not-working-in-processing-3-4/7275)

<div class="topic-metadata">

**Author:** [@formap](https://discourse.processing.org/u/formap)\
**Replies:** 6\
**Last updated:** [January 8, 2019, 4:13pm UTC](https://discourse.processing.org/t/nofill-not-working-in-processing-3-4/7275 "2019-01-08T16:13:44Z")

</div>

I’m testing the example found in this link where I create either a rectangle or a box and try to draw it without a fill but it doesn’t seem to be working for me. Instead of transparent, I see it filled up with colours. I…

---

## [P5 game ball bouncing bug](https://discourse.processing.org/t/p5-game-ball-bouncing-bug/6768)

<div class="topic-metadata">

**Author:** [@avafgrey](https://discourse.processing.org/u/avafgrey)\
**Replies:** 2\
**Last updated:** [January 7, 2019, 9:23pm UTC](https://discourse.processing.org/t/p5-game-ball-bouncing-bug/6768 "2019-01-07T21:23:35Z")

</div>

I am trying to make a game with a ball that bounces off the platforms, but every once in a while the ball falls through the platform and I can’t figure out when or why. https://github.com/lizzybrooks/Bouncingball/blob/m…

---

## [Recursive Backtracking](https://discourse.processing.org/t/recursive-backtracking/6914)

<div class="topic-metadata">

**Author:** [@SineadF](https://discourse.processing.org/u/SineadF)\
**Replies:** 3\
**Last updated:** [January 6, 2019, 11:14pm UTC](https://discourse.processing.org/t/recursive-backtracking/6914 "2019-01-06T23:14:36Z")

</div>

Hello, I’ve been watching the Coding Trains Maze Generation videos (https://www.youtube.com/watch?v=\_p5IH0L63wo) that uses the depth-first search and recursive backtracking method to generate a maze. The video covers th…

---

## [How to take screenshots of the canvas?](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824)

<div class="topic-metadata">

**Author:** [@jnsjknn](https://discourse.processing.org/u/jnsjknn)\
**Replies:** 2\
**Last updated:** [January 6, 2019, 7:21pm UTC](https://discourse.processing.org/t/how-to-take-screenshots-of-the-canvas/6824 "2019-01-06T19:21:57Z")

</div>

Is there a way in the p5.js web editor to take and save several screenshots of the canvas automatically? For example every x frames or according to some other programmed rule?

---

## [Insert sketch in tumblr](https://discourse.processing.org/t/insert-sketch-in-tumblr/7252)

<div class="topic-metadata">

**Author:** [@ihi](https://discourse.processing.org/u/ihi)\
**Replies:** 2\
**Last updated:** [January 6, 2019, 9:46pm UTC](https://discourse.processing.org/t/insert-sketch-in-tumblr/7252 "2019-01-06T21:46:34Z")

</div>

Hi ! I am a beginner on processing. I have managed to do what I wanted, I have a code that works. But I can not put this code on Tumblr. I read a lot of pages about it but I can not do it. I do not understand if I have …

---

## [3D Mode(WEBGL) Changes the colors of mysketch](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199)

<div class="topic-metadata">

**Author:** [@gio](https://discourse.processing.org/u/gio)\
**Replies:** 5\
**Last updated:** [January 6, 2019, 6:08am UTC](https://discourse.processing.org/t/3d-mode-webgl-changes-the-colors-of-mysketch/6199 "2019-01-06T06:08:08Z")

</div>

Hi, I just changed a 2d sketch to be 3D with the WEBGL option. I wanted to shift perpective, and that works perfectly, but somehow the colors are now different. Im guessing now its using some kind of 3d lamp, but i wan…

---

## [Processing code to p5.js](https://discourse.processing.org/t/processing-code-to-p5-js/7173)

<div class="topic-metadata">

**Author:** [@Lillbre](https://discourse.processing.org/u/Lillbre)\
**Replies:** 5\
**Last updated:** [January 5, 2019, 6:14pm UTC](https://discourse.processing.org/t/processing-code-to-p5-js/7173 "2019-01-05T18:14:21Z")

</div>

I wonder how to translate this PImage magnified, normal; to p5.js. My guess is let magnified= new p5.Image(); let normal= new p5.Image(); but that didn’t make it work. I am trying to do make a magnifying glass like…

---

## [\[SOLVED\] Undefined Error](https://discourse.processing.org/t/solved-undefined-error/7176)

<div class="topic-metadata">

**Author:** [@Quillbert1](https://discourse.processing.org/u/Quillbert1)\
**Replies:** 4\
**Last updated:** [January 4, 2019, 7:09pm UTC](https://discourse.processing.org/t/solved-undefined-error/7176 "2019-01-04T19:09:39Z")

</div>

I am having an issue with some code. Whenever I run it, i get an error saying Population is undefined in setup. The code is at the github link below.

---

## [Need help regarding UV mapping of Octahedron](https://discourse.processing.org/t/need-help-regarding-uv-mapping-of-octahedron/7114)

<div class="topic-metadata">

**Author:** [@Sudev](https://discourse.processing.org/u/Sudev)\
**Replies:** 4\
**Last updated:** [January 4, 2019, 4:53pm UTC](https://discourse.processing.org/t/need-help-regarding-uv-mapping-of-octahedron/7114 "2019-01-04T16:53:41Z")

</div>

I need some help with UV mapping an octahedron. Here’s my code : let w = 0; let h = 0; let th = 400; beginShape(); vertex(w - side, h - side, 0, 0, 1); vertex(w + side, h - side, 0, 0, 0); vertex(w, …

---

## [Messy code and issues in it](https://discourse.processing.org/t/messy-code-and-issues-in-it/7107)

<div class="topic-metadata">

**Author:** [@tojoco](https://discourse.processing.org/u/tojoco)\
**Replies:** 3\
**Last updated:** [January 3, 2019, 7:22am UTC](https://discourse.processing.org/t/messy-code-and-issues-in-it/7107 "2019-01-03T07:22:19Z")

</div>

Im making a program like the amazon echo using p5.speech. My code is not only messy and confusing but every time it hears speech it runs the else instead of what is supposed to happen let carl = 'hey carl'; var value = …

---

## [Basic httpPost() Image/Data to Server](https://discourse.processing.org/t/basic-httppost-image-data-to-server/7040)

<div class="topic-metadata">

**Author:** [@lightning](https://discourse.processing.org/u/lightning)\
**Replies:** 1\
**Last updated:** [January 1, 2019, 2:27am UTC](https://discourse.processing.org/t/basic-httppost-image-data-to-server/7040 "2019-01-01T02:27:14Z")

</div>

Ive been pulling my hair out for weeks trying to accomplish something that seemed pretty straight forward… I want to make a javascript plug in with p5.js that resembles a t-shirt designer. I want a user to be able to up…

---

## [Temporary layers / Multiple canvases using p5](https://discourse.processing.org/t/temporary-layers-multiple-canvases-using-p5/7016)

<div class="topic-metadata">

**Author:** [@davidjj](https://discourse.processing.org/u/davidjj)\
**Replies:** 2\
**Last updated:** [December 31, 2018, 11:46pm UTC](https://discourse.processing.org/t/temporary-layers-multiple-canvases-using-p5/7016 "2018-12-31T23:46:31Z")

</div>

Hey - I’m an experienced javascript developer and have done a bit with plain javascript and html5 canvas. What I’m doing is something similar to the spirograph example on the examples page - the difference being that I …

---

## [TypeError: np\_d.changed is not a function](https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056)

<div class="topic-metadata">

**Author:** [@Strex](https://discourse.processing.org/u/Strex)\
**Replies:** 1\
**Last updated:** [December 31, 2018, 5:48pm UTC](https://discourse.processing.org/t/typeerror-np-d-changed-is-not-a-function/7056 "2018-12-31T17:48:02Z")

</div>

i have this error and i don;t know how fix it. code: var np; var r = 300; var t; var alp; var point1 = \[\]; function setup() { createCanvas(windowWidth, windowHeight); np\_d = document.getElementById("points")…

---

## [Beta testers required](https://discourse.processing.org/t/beta-testers-required/6983)

<div class="topic-metadata">

**Author:** [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Replies:** 7\
**Last updated:** [December 31, 2018, 3:55pm UTC](https://discourse.processing.org/t/beta-testers-required/6983 "2018-12-31T15:55:05Z")

</div>

Hieveryone, I’ve almost done my project, wich is a remake of the concept of jonobr1 and lullatone : a visualization of sounds, wich are corresponding to one letter of the keyboard. See https://www.patatap.com/ for the o…

---

## [Writeln in p5.js](https://discourse.processing.org/t/writeln-in-p5-js/7010)

<div class="topic-metadata">

**Author:** [@willianxz](https://discourse.processing.org/u/willianxz)\
**Replies:** 9\
**Last updated:** [December 30, 2018, 2:15am UTC](https://discourse.processing.org/t/writeln-in-p5-js/7010 "2018-12-30T02:15:05Z")

</div>

Hello my friends, I would like to save a txt file with the broken lines, but I am not finding a command similar to println to write to the .txt file The only one I found was the write.print which unfortunately does not …

---

## [Uploading and parsing files](https://discourse.processing.org/t/uploading-and-parsing-files/6999)

<div class="topic-metadata">

**Author:** [@lmccandless](https://discourse.processing.org/u/lmccandless)\
**Replies:** 1\
**Last updated:** [December 30, 2018, 12:09am UTC](https://discourse.processing.org/t/uploading-and-parsing-files/6999 "2018-12-30T00:09:31Z")

</div>

New to webdev. I’ve made a Processing program to open a proprietary game map file, generate a .png preview of the map and extract the meta data like the mapmakers name, map description, dimensions, etc. I want to make …

---

## [Use an array of color \[RESOLVED\]](https://discourse.processing.org/t/use-an-array-of-color-resolved/6936)

<div class="topic-metadata">

**Author:** [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Replies:** 6\
**Last updated:** [December 28, 2018, 12:59am UTC](https://discourse.processing.org/t/use-an-array-of-color-resolved/6936 "2018-12-28T00:59:32Z")

</div>

Hi everyone, I have trouble with the use of an array of colors : once I setup it, I want to call randomly one of the colors inside. For now, I have that : var palette = \[\] function setup(){ palette\[0\] = color(154, 2…

---

## [typeScript and Webpack](https://discourse.processing.org/t/typescript-and-webpack/6700)

<div class="topic-metadata">

**Author:** [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Replies:** 7\
**Last updated:** [December 24, 2018, 2:06pm UTC](https://discourse.processing.org/t/typescript-and-webpack/6700 "2018-12-24T14:06:12Z")

</div>

I code a little template for typeScript via webPack, my first step but that’s work. So if you’r like me and want type and class your code in javaScript…go it. And no hesitation to improve this newby template !

---

## [Looking for a p5.js Color Chooser widget](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868)

<div class="topic-metadata">

**Author:** [@grege2](https://discourse.processing.org/u/grege2)\
**Replies:** 6\
**Last updated:** [December 24, 2018, 10:12am UTC](https://discourse.processing.org/t/looking-for-a-p5-js-color-chooser-widget/6868 "2018-12-24T10:12:14Z")

</div>

Hi all, Happy Christmas Eve ! Coding away on Christmas Eve, sad eh? But it’s actually a great time to make some progress on hobbies. Got the day off, everything is ready for Christmas. Anyone know a Color Chooser in Ja…

---

## [Help needed for random change of image on mouse hover/click](https://discourse.processing.org/t/help-needed-for-random-change-of-image-on-mouse-hover-click/6820)

<div class="topic-metadata">

**Author:** [@jesspayne](https://discourse.processing.org/u/jesspayne)\
**Replies:** 9\
**Last updated:** [December 23, 2018, 8:44pm UTC](https://discourse.processing.org/t/help-needed-for-random-change-of-image-on-mouse-hover-click/6820 "2018-12-23T20:44:19Z")

</div>

Hi! I’m a student at Anglia Ruskin University’s School of Art (UK) and am working on a piece that I’d like to make interactive. I’ve recently discovered Processing and P5.js and think this could be what I need but am a …

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

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