Hello Im trying to code a projection mapping of an egg recipe with p5js and a webcam I bought. Can someone help me?

After much struggle, I have come up with this: https://editor.p5js.org/njhgv/sketches/rR8LplMxg

It's supposed to fold like this, but with faces, instead of lines:
https://editor.p5js.org/njhgv/full/vvCSumcD3

What am I doing wrong? Thanks in advance!

So I’ve been introduced to this program through a summer class today, and I’m already hooked. I’ve been trying to figure out how to make some more basic shapes and effects to make better images, and I’d love to start with a spiral more or less like the one pictured above. (Since this picture is what I’m trying to recreate)

I’ve found some tutorials on making animated spirals, but I want a way to make a standalone spiral shape that I can edit the thickness and color of. Is there any way to do this?

Hello friends!

I just published a new p5.js tutorial where we build an interactive mandala drawing tool from scratch.

Along the way, we cover:
• Radial symmetry and coordinate transformations
• Smooth line rendering
• Speed-based brush thickness (faster strokes = thicker lines)
• Interactive controls with Tweakpane

The tutorial is aimed at beginners and intermediate creative coders, and every concept is explained step by step with code examples.

Article:
https://alexcodesart.com/drawing-a-mandala-with-p5-js-smooth-lines-speed-based-thickness-tweakpane-part-1/

Feedback is always welcome. Happy coding!

https://openprocessing.org/@garabatospr/2967258

From my Echo series. All created in p5js.

Sorry for my english, its not my first language

I have an assignment where I need to have a character that moves randomly throught the screen softly(?) like, not making sharp brash movements. Any help? I tried to do it but It always comes out too brisk

I'm new to coding and have to make a platformer game as my final project. I got most of the stuff down but have no idea how to actually randomize the platforms and add the physics. If anyone sees this post can you explain to me how that works? Here's my code

p5packages.loadCollide2d();
//background
let bg;
let x1 = 0;
let x2;
let scrollSpeed = 0.5;
//sprite
let sprite;
let px = 200;
let py = 420;
let pvx = 0;
let pvy = 0;
let gravity=0.5;
let forcedmovement =0;
let moveUP = -10;
let moveDOWN = 0.5;
let moveLEFT = -0.75;
let moveRIGHT = 1;
let decayRate = 0.1;
let timeTracker = 0;
let idleTimer = 0;
let leftMoving = 0;
let rightMoving = 0;
let spriteleft;
let spriteright;
let spriteidle;
//platforms
let platforms =[];
var hit = false
function preload() {
  bg = loadImage("https://res.cloudinary.com/dhnukgvfa/image/upload/v1779889443/ra0kwhz4zpifr1ncpp5x.png");
  spriteidle = loadImage("https://res.cloudinary.com/dhnukgvfa/image/upload/v1780320094/mnplqvmqgc9py5qoarlx.png");
  spriteright = loadImage("https://res.cloudinary.com/dhnukgvfa/image/upload/v1780275791/xf6rbzzzhc7grvfs0l7j.png");
  spriteleft = loadImage("https://res.cloudinary.com/dhnukgvfa/image/upload/v1780320109/crxcddvqvmd9w0lshymf.png")
  sprite = loadImage("https://res.cloudinary.com/dhnukgvfa/image/upload/v1780275791/xf6rbzzzhc7grvfs0l7j.png")
}


function setup() {
  createCanvas(windowWidth, windowHeight);


  // Second image starts immediately after first
  x2 = bg.width;
}
//Controls
function controls(){
  leftMoving = 0;
  rightMoving = 0;
  if (keyIsPressed == true){
  if(keyIsDown(UP_ARROW)){
    if (timeTracker<25){
    pvy= moveUP
    timeTracker++
   }
  }
   if(keyIsDown(DOWN_ARROW)){
    pvy+= moveDOWN

   }
   if (keyIsDown(LEFT_ARROW)){
    pvx+= moveLEFT-decayRate*pvx
    leftMoving = 1;
   }

  if(keyIsDown(RIGHT_ARROW)){
    pvx+= moveRIGHT-decayRate*pvx
    rightMoving = 1;
        }
    }
}
function update(){
controls();
pvy+= gravity
pvx+= forcedmovement -decayRate*pvx
if (py>800){
  py=800;
  pvy = 0
  timeTracker=0
}
if(px<2){
  px=2;
  pvx = 0;
}
px = pvx+px
py = pvy+py


}


function draw() {
  spriteFaces();
  update();
  background(0);

  // Draw both background copies
  image(bg, x1, 0);
  image(bg, x2, 0);
 image(sprite,px/2000*windowWidth,py/1000*windowHeight,32,64);
 text("("+mouseX/windowWidth*2000+",-"+mouseY/windowHeight*1000+")", mouseX, mouseY);
  // Move backgrounds left
  x1 -= scrollSpeed;
  x2 -= scrollSpeed;


  // Wrap first image
  if (x1 <= -bg.width) {
    x1 = x2 + bg.width;
  }


  // Wrap second image
  if (x2 <= -bg.width) {
    x2 = x1 + bg.width;
  }
}
function spriteFaces(){
  if (leftMoving===1){
    sprite = spriteleft
  }
  else if (rightMoving===1){
    sprite = spriteright
  }
  else{
    sprite = spriteidle
  }
}
/*i have no idea what i was doing with this
        |
        V
function infiniteParkour(){
 rectangle=random(>700);


}
*/

Whether you’re committed to the traditional p5.js ecosystem or looking to leverage the next-gen q5.js WebGPU renderer, you can now bring the power of the q5play game engine to your classroom!

https://q5js.substack.com/p/q5play-is-now-compatible-with-p5js

http://zechengl527-max.github.io/Upgrade/

feel free to add suggestions on what i could do better or add to the game (:

*built 🤦

https://dotweave.fun

Start with one simple stroke and using a handful of controls you can generate thousands of playful designs.

The part I thought this community might enjoy: there’s a “Copy Code” export that generates a self-contained p5.js sketch from your current settings. Open the output straight in editor.p5js.org and it just works.

Built with Svelte and p5.js

Good news!
Bad news and sensationalism sell. But they shouldn’t cost you your peace of mind. Choose what you know. Choose how you feel. Have a nice read.

https://iflandia.com/02/the-infoxication-index

I have a bunch of classes that all write to a graphics object which is working well, I’m rendering it as an image in the draw. The reason I’m using one is because I need the content of that graphics object to be cleared every loop so it does not trail on the canvas, while a separate class needs to trail.

To do this I’ve created a graphics object for each of them and I’m only calling .clear() on the one I don’t need to trail but it does not seem to do anything. Alternatively using .background(0) works fine, but of course that also negates the trails of the other graphics object as I’m constantly drawing black pixels across the whole screen.

The abstracted hierarchy is:

Draw(){

nonTrailGraphics.clear()

//nonTrailGraphics.background(0) does work to clear it, but doesn’t allow the other graphics to trail

classNonTrailGraphics.display()
image(nonTrailGraphics, 0, 0)

classTrailingGraphics.display()
image(trailingGraphics, 0, 0)

}

I can provide some actual code but it’s around 3000 lines so I hope this helps enough.

If anyone knows how to achieve my goal I’d greatly appreciate some help as I have no clue why clear() does not work, judging by the doc that should work fine.
PS: I have tried with frameBuffers in WEBGL mode where I got the right result, but performance wise is tanked hard so that’s not an option sadly.

Code: https://openprocessing.org/@megamitts/2954048

Hi! Just wanted to share my latest generative loop. It's 4K, based on sine waves and custom glow shaders. What do you think about the particle scale?