**Author:**  [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 6, 2019, 5:03pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/1 "2019-12-06T17:03:47Z")
Hello y’all,
im trying to embed a processing sketch I just made in html but it didn’t work. I read some manuals on this and others forum but Im doing something wrong. (like this article: [http://processingjs.org/articles/jsQuickStart.html#processingcodetojavascript](http://processingjs.org/articles/jsQuickStart.html#processingcodetojavascript) ) - when im doing this, nothing happens. Unfortunately im a noob at programming and I just learned processing so I really don’t have a clue what im doing.
I also tried to convert my .pde sketch into p5.js cause I think thats the best option. I know that I need to change the int to var/let but honestly - thats all I know. As I don’t think its too complicated and im just a beginner I hope some of you can help me to get this work.
What im doing in the sketch is an animation of gradients.
heres my .pde sketch
```auto
color red = color(255, 0, 0, 255);
color blue = color(0, 0, 255, 255);
color yellow = color(0, 255, 0, 20);
color currentStroke;
int margin = 0;
int bottom0;
int bottom1;
int left = margin;
int right;
int top0 = margin;
int top1;
int bottom2;
int top2;
float loopStep;
float animStep;
void setup() {
size(1024, 576);
noSmooth();
right = width - margin;
bottom0 = height / 2;
top1 = bottom0 + 1;
bottom1 = height - margin;
top2 = 0;
bottom2 = width;
}
void draw() {
animStep = abs(sin(frameCount * 0.0002));
for (int i = top2; i <= bottom2; i += 1.5) {
loopStep = map(i, top1, bottom1, 0.5, 2);
currentStroke = lerpColor(red, blue, (loopStep + animStep) * 0.5, RGB);
stroke(currentStroke*2);
int wave2 = int(sin(i * animStep) * 200);
//line(i, 0, 400, i);
line(i, 0, wave2, width);
}
for (int i = top1; i <= bottom1; i += 2) {
loopStep = map(i, top2, bottom2, 0.25, 2);
currentStroke = lerpColor(yellow, blue, (loopStep * animStep) * 2, RGB);
stroke(currentStroke);
int wave = int(sin((i * loopStep) * animStep) * 500);
line(i+500, 576, wave, i);
}
for (int i = top1; i <= bottom1; i += 1) {
loopStep = map(i, top1, bottom2, 0.5, 4);
currentStroke = lerpColor(blue, yellow, (loopStep + animStep) * 0.5, RGB);
stroke(currentStroke*2);
int wave3 = int(sin(loopStep * animStep/2) * 200);
int wave4 = int(sin(i * animStep) * 300);
line(i+730, -20, i+150+wave4, 576+wave3);
}
}
```
and here is a (cleaned up, so its not so confusing) version of what I tried in p5js. as you see its just black with a little animation in the beginning.
```auto
function setup() {
createCanvas(1024, 576);
noSmooth();
}
function draw() {
var margin = 0;
var bottom0;
var bottom1;
var left = margin;
var right;
var top0 = margin;
var top1;
var bottom2;
var top2;
right = width - margin;
bottom0 = height / 2;
top1 = bottom0 + 1;
bottom1 = height - margin;
top2 = 0;
bottom2 = width;
var loopStep;
var animStep;
animStep = abs(sin(frameCount * 0.000002));
var red = color(255,0,0);
var blue = color(0,0,255);
var yellow = color(0,255,0);
var currentStroke;
for (var i = top2; i <= bottom2; i += 1.5) {
loopStep = map(i, top1, bottom1, 0.5, 2);
currentStroke = lerpColor( blue, red, (loopStep + animStep) * 0.5);
stroke(currentStroke*2);
var wave2 = (sin(i * animStep) * 200);
//line(i, 0, 400, i);
line(i, 0, wave2, width);
}
}
```
thank you in advance
---
**Author:**  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2019, 5:15pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/2 "2019-12-06T17:15:47Z")
> [@hannes](#):
>
> I’m trying to embed a Processing sketch I just made in HTML but it didn’t work.
Use the “index.html” file from the link below as a minimum template for “.pde” files under Pjs: 🤖
>
>
> There are more than three files. show original
---
**Author:**  [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 6, 2019, 5:33pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/3 "2019-12-06T17:33:08Z")
thank you for this!
unfortunately it doesn’t help. maybe its because I write the html code the wrong away. Sorry for this dumb question - but I’ve never written something in html. I just went to textEdit on my Mac and wrote this:
```auto
```
there are some things missing, aren’t they?
---
**Author:**  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2019, 5:38pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/4 "2019-12-06T17:38:29Z")
> [@hannes](#):
>
> ``
Have you checked whether your “.pde” filename is indeed “sketch.pde”?
You can also test your “.pde” code by pasting it here: [My Sketch - OpenProcessing](http://OpenProcessing.org/sketch/create)
Just make sure to 1st switch engine to “Processingjs” before clicking ▶.
---
**Author:**  [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 6, 2019, 5:43pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/5 "2019-12-06T17:43:14Z")
yes its named sketch.pde
and yes it works in openprocessing: [https://www.openprocessing.org/sketch/806668](https://www.openprocessing.org/sketch/806668)
---
**Author:**  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 6, 2019, 6:14pm UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/6 "2019-12-06T18:14:28Z")
- The problem is that browsers block loadings from “file://” scheme.
- You’re gonna need some local server in order to run “.js” scripts as “http://” scheme instead.
- Alternatively, you can install Firefox:
> **[Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)**
>
> Firefox Developer Edition is the blazing fast browser that offers cutting edge developer tools and latest features like CSS Grid support and framework debugging
- Once installed, go to its about:config page.
- Then at the search box there, type in privacy.file\_unique\_origin, and toggle it to `false`.
- Now you can run most sketches from there via the “file://” scheme.
---
**Author:**  [@hannes](https://discourse.processing.org/u/hannes)\
**Post date:** [December 9, 2019, 8:38am UTC](https://discourse.processing.org/t/embedding-pde-to-html-does-not-work-pde-to-p5-js/16181/7 "2019-12-09T08:38:31Z")
my man, thank you so much! I should have asked a bit earlier, but now I know for the next time. Thank you very much for the help. I really appreciate it. 🙂