Embedding .pde to html does not work/ .pde to p5.js

Processing Coding Questions
1

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


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.


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

1 Like
2

Use the “index.html” file from the link below as a minimum template for “.pde” files under Pjs: :robot:

1 Like
3

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:

<html>
<head>
<script defer src=https://Unpkg.com/processing-js></script>
</head>
<body>
<canvas data-processing-sources="sketch.pde"></canvas>
</body>
</html>

there are some things missing, aren’t they?

4

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

Just make sure to 1st switch engine to “Processingjs” before clicking :arrow_forward:.

1 Like
5

yes its named sketch.pde
and yes it works in openprocessing: https://www.openprocessing.org/sketch/806668

1 Like
6
  • 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:
  • 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.
2 Likes
7

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. :slightly_smiling_face: