Converting .pde to p5.js

Processing Beginners
1

Hi there,

Can someone please help me…

I’m trying to convert a .pde sketch to p5.js.

this is what I have so far but its still now working…

Can someone please help :slight_smile:

String message = "dddddddddddddddddddddddddddddddddddddddddddd";
char[] messageAsChars = message.toCharArray();
int charCount = messageAsChars.length;
float charCountToStep = 1.0 / float(charCount);

float ap0x, ap0y, 
  cp0x, cp0y, 
  cp1x, cp1y, 
  ap1x, ap1y;

void setup() {
  size(1024, 512);
  smooth(8);
  randomizePoints();
  textSize(10);
  textAlign(CENTER, CENTER);
  textMode(MODEL);
}

void draw() {
  background(#2E3B97);
  noFill();
  stroke(#2E3B97);
  bezier(ap0x, ap0y, 
    cp0x, cp0y, 
    cp1x, cp1y, 
    ap1x, ap1y);

  noStroke();
  fill(#FBE44D);
  
  float step0 = frameCount * 0.0;
  
  for (int i = 0; i < charCount; ++i) {
    float step1 = i * charCountToStep;
    float step2 = (step0 + step1) % 2.0;
    
    float x = bezierPoint(ap0x, cp0x, cp1x, ap1x, step2);
    float y = bezierPoint(ap0y, cp0y, cp1y, ap1y, step2);
    
    float tanx = bezierTangent(ap0x, cp0x, cp1x, ap1x, step2);
    float tany = bezierTangent(ap0y, cp0y, cp1y, ap1y, step2);
    
    float angle = atan2(tany, tanx);

    pushMatrix();
    translate(x, y);
    rotate(angle);
    text(messageAsChars[i], 0.0, 0.0);
    popMatrix();
  }
}

void mouseMoved() {
  randomizePoints();
}

void randomizePoints() {
  float halfw = width * 0.5;
  float halfh = height * 0.5;
  ap0x = random(0.0, halfw);
  cp0x = random(0.0, width);
  cp1x = random(0.0, width);
  ap1x = random(halfw, width);

  ap0y = random(0.0, halfh);
  cp0y = random(0.0, height);
  cp1y = random(0.0, height);
  ap1y = random(halfh, height);
}
2

Hi @dnganeko.
All you need to know is here : https://github.com/processing/p5.js/wiki/Processing-transition
Feel free to ask if you’re stuck at some point :smiley:

3

Thanks @colin ! :slight_smile:

Can I ask another question if that’s cool…

What I’m trying to do is to embed a processing .pde sketch on a website that I’m making in webflow… with a bit of research I found out how to embed a p5.js sketch to a website so I thought I should convert my .pde and do it that way? Or is there an easier way of doing it?

Note that I’m new to coding and all this sort of thing.

Appreciate any help

:slight_smile:

4

I think it’s an excellent reason to switch into p5. You can make you sketches embed or even run it straight from your web page. The unique var type can be confusing a the start but it worth the effort !

5