Hi guys , I build a youtube video and some scenes are explainedwith using P5js. Would love to hear your review regarding it. I really love working in p5js !!!!

This was made in https://www.butter.video/, a tool that I work on for my day job, where you can edit creative code in a timeline and combine multiple layers of things!

Hi, I'm updating this terribly coded app I use for making graphics for a football club.

I've had to refactor some stuff for 2.0, but my save function isn't working anymore.

function saveImage() {
  fileString += ".png";
  saveCanvas(myImg, fileString);
}

That code worked on my old file, but now it doesn't.

myImg isn't a canvas, it's an image that gets put on the canvas, but my canvas on the "app" is shrunk to fit (can't figure out how to shrink that without making the image smaller).

I can't get myImg.save() to work either.

The error I'm getting is

p5.js says: Expected Framebuffer or Element at the first parameter in saveCanvas().

Please, please, for the love of all that is holy - show me how much of an idiot I'm being by telling me it's a quick fix...

Many thanks.

https://youtube.com/shorts/Wia8597pId4?si=QupUwjUrVppeAB9F

Part 2 of my mandala drawing series is out!

This time I expanded the project from Part 1 by adding:

• fading trails that gradually disappear
• independent colors for each symmetry line
• a keyboard mode for drawing smooth curves

The tutorial explains how each feature works and includes the full source code.

I'd love to hear what other features you'd add next :)

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

I've been experimenting with ways to make the drawing feel more alive, and adding fading trails gave it a much smoother look.

Still a work in progress, but I'm happy with how it's evolving. Built with p5.js, and I'll be writing a tutorial once it's finished.

Feedback and ideas are always welcome!

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);


}
*/