Stack Overflow
Stack Overflow

Questions tagged [p5.js]

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.

p5.js is a JavaScript library that starts with the original goal of processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web. p5.js has a full set of drawing functionality too.

See also:

3071 questions
6
votes
4 answers

loadImage() failing to load image (P5.js WebGL)

I'm trying to load an image called "border.bmp" so that I can use it as a texture for WebGL. Here's how I reference the image. var img; function preload() { img = loadImage("assets/border.bmp"); } I then get this error in the console. Access to…
Randy Matinee
  • 71
  • 1
  • 5
6
votes
1 answer

Texture on sphere not aligned correctly? Lat/Lon -> Cartesian xyz

I'm wondering if the texture to my sphere is somehow not being applied correctly, and if I can offset it somehow? I am trying to place a box at Sydney, Australia by supplying the lat/lon and converting to cartesian xyz coordinates. However, the…
Blake S.
  • 401
  • 1
  • 4
  • 10
6
votes
1 answer

p5.js manually call setup and draw

I am making an online game with p5.js and I would like to manually call setup, and once setup is called I want draw() to run. For example, if I click a button: Then the canvas will be…
Big Ben GamerGuyKSPMC
  • 139
  • 2
  • 13
5
votes
5 answers

How to smoothly align rotated bitmaps side by side without jerkiness?

My current program draw a rotated bitmap (64x64) and tile it on the screen by drawing it again but adding an offset based on the computed position of the bitmap top right corner (after rotation), it works fine but i experience some jerkiness of the…
Onirom
  • 532
  • 1
  • 7
  • 22
5
votes
2 answers

Optimizing p5.js project / sandbox/pixel simulator

I've started on a pixel sim project and it doesn't run well. What can I do to optimize it? I'm fairly confident that the issue is in all the checks that are done involving the particles array. I'm looking for any solution, to do anything different,…
user19897564
5
votes
2 answers

Minimising p5.min.js further for production

So as of today, p5.js is on version 1.4.2 and the minified file stands at a whopping 804KB filesize. I am a website developer and have been learning and getting better at it since some months now and want to use it on client sites as animated…
Tornado_code
  • 199
  • 8
5
votes
2 answers

React component is duplicated with p5.js canvas

I'm trying to create a React app with a single p5.js sketch. However, the component containing the p5 sketch is being duplicated on my page. Not sure why it would be rendered this way. Here you can see the code:…
chris
  • 2,490
  • 4
  • 32
  • 56
5
votes
3 answers

Fill a 6x6 grid with 6 colors without same colors touching each other

I'm trying to create a board game with p5.js (Javascript) To set up the game board which is a 6 by 6 grid, I have to fill the grid with 6 colors in a way that no horizontal or vertical touching cells have the same color. And all 6 colors have to be…
simusch
  • 51
  • 4
5
votes
1 answer

Matter.Query.region not returning any collisions even though the bound is clearly intersecting other bodies

I'm trying to use Matter.Query.region to see if the character in my game is grounded. But, when I try to run region with a bounds object that I created (displayed with the dots shown in the game), it doesn't come up with any collisions even though…
CrazyVideoGamer
  • 754
  • 8
  • 22
5
votes
2 answers

Collision Handling in p5.js

I've been working with p5.js a bit, and I've figured out how to get an object to detect collisions, but I'm quite confused on how to handle those collisions. I try setting the player velocity to 0, but then the player gets stuck. I've also tried…
Scollier
  • 575
  • 6
  • 19
5
votes
1 answer

P5 image gallery animation

I am trying to dynamically load a set of images and translate them in the Z direction at a constant speed while having randomised values for the X and Y I am working with the following code and I am stuck on how to use the image texture property. I…
Ahmed Meeran
  • 105
  • 6
5
votes
1 answer

Merge images in P5.js

I'm making a game on p5.js and I want to Merge the image of each component to get the background of the game, but using createGraphics doesn't work. Here is the code: createGameMapImg() { let gameImg = createGraphics(this.width * this.boxSize,…
Sonya
  • 103
  • 2
  • 8
5
votes
1 answer

How would I rotate a vector in 3D space? P5.js

This is actually my first question on stackoverflow :) Firstly, I wanted to say that I am new to coding and I am wanting to get an understanding of some syntax. Basically, I am following a tutorial by the codetrain - creating an object orientated…
tommyk
  • 51
  • 4
5
votes
1 answer

Is there a way to use p5.js in a react native app?

Is there a way to use p5.js in a react native app? Found an old post from 2017 that said it was not possible. But many things changed on both front since then and i am new go this. Any guidance would be helpful
Debashis Das
  • 51
  • 2
5
votes
1 answer

Modifying properies of in a Javascript object

I've been working on a library in JavaScript using p5.js for sprite rendering. I've got an object for storing sprite information which is then added to an array that has a function that updates every frame. function createsprite(img, x, y, width,…
Zach Mohammed
  • 109
  • 4
1 2 3
…
99 100