# Converting .pde to p5.js

**URL:** <https://discourse.processing.org/t/converting-pde-to-p5-js/2502>\
**Category:** Beginners\
**Created:** [August 9, 2018, 7:37am UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502 "2018-08-09T07:37:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dnganeko](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dnganeko](https://discourse.processing.org/u/dnganeko)\
**Post date:** [August 9, 2018, 7:37am UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502/1 "2018-08-09T07:37:21Z")

</div>

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 🙂

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [August 9, 2018, 9:12am UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502/2 "2018-08-09T09:12:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dnganeko](https://avatars.discourse-cdn.com/v4/letter/d/e95f7d/32.png) [@dnganeko](https://discourse.processing.org/u/dnganeko)\
**Post date:** [August 9, 2018, 12:49pm UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502/3 "2018-08-09T12:49:43Z")

</div>

Thanks @colin ! 🙂

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

🙂

---

<div class="post-metadata">

**Author:** ![colin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/colin/32/230_2.png) [@colin](https://discourse.processing.org/u/colin)\
**Post date:** [August 9, 2018, 2:14pm UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502/4 "2018-08-09T14:14:39Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 9, 2018, 2:28pm UTC](https://discourse.processing.org/t/converting-pde-to-p5-js/2502/5 "2018-08-09T14:28:35Z")

</div>

> **[Can i import my stuff into wallpaper engine?](https://Discourse.Processing.org/t/can-i-import-my-stuff-into-wallpaper-engine/153/5?u=gotoloop)**
>
> This is the most basic “index.html” template for running “.pde” sketches under Pjs: Just replace the “sketch.pde” w/ the...