Sketch to Webpage

Processing Coding Questions
1

Any help on how I can turn this Sketch in to an interactive webpage?

void setup () {

size(1920,1080);

background(0);

}

void draw () {

if (mousePressed) {
noStroke();
fill(0);
ellipse(mouseX, mouseY, 460, 460);
} else {
noStroke();
fill(255);
ellipse(mouseX, mouseY, 460, 460);
}

}

2

Take a look at p5.js ; it’s the Javascript library similar to Processing, so you can easily translate your code above in js. You won’t need to change your code actually, except two things : the type of the functions ; void is function in js. And you won’t declare the size of a window but of a canvas wich is in you browser window…

https://p5js.org/

3

Other than changing void to function, is there anything else I would need to change?

boolean paint = true;
public boolean mousePresent = false;


void setup () {
  size(1920, 1080);
  noStroke();
  if ( paint) background(0);
  println("use: key [p]");
}
void draw () {
  if ( !paint ) background(0);
  if ( mousePresent && focused ) {
    if (mousePressed)  fill(0);
    else               fill(255);
    ellipse(mouseX, mouseY, width/5, width/5);
  }
}

void keyPressed() {
  if ( key == 'p' ) paint = !paint;
}

public void mouseExited() {
  mousePresent = false;
}

public void mouseEntered() {
  mousePresent = true;
}

I have set up a html file to test it. Do I need to assign the .js file to a div? It is linked in the

4
5

check out this example:

https://editor.p5js.org/kll/sketches/u6C9vjBLX