# Sketch to Webpage

**URL:** <https://discourse.processing.org/t/sketch-to-webpage/8543>\
**Category:** Coding Questions\
**Created:** [February 19, 2019, 5:19pm UTC](https://discourse.processing.org/t/sketch-to-webpage/8543 "2019-02-19T17:19:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevenoneilsteven](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@stevenoneilsteven](https://discourse.processing.org/u/stevenoneilsteven)\
**Post date:** [February 19, 2019, 5:19pm UTC](https://discourse.processing.org/t/sketch-to-webpage/8543/1 "2019-02-19T17:19:50Z")

</div>

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

}

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 19, 2019, 9:56pm UTC](https://discourse.processing.org/t/sketch-to-webpage/8543/2 "2019-02-19T21:56:59Z")

</div>

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/](https://p5js.org/)

---

<div class="post-metadata">

**Author:** ![stevenoneilsteven](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@stevenoneilsteven](https://discourse.processing.org/u/stevenoneilsteven)\
**Post date:** [February 20, 2019, 9:26am UTC](https://discourse.processing.org/t/sketch-to-webpage/8543/3 "2019-02-20T09:26:20Z")

</div>

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

```auto
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

---

<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:** [February 20, 2019, 12:12pm UTC](https://discourse.processing.org/t/sketch-to-webpage/8543/4 "2019-02-20T12:12: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):
>
> This is the most basic “index.html” template for running “.pde” sketches under Pjs: \<script defer src=http://CDN.JSDelivr.net/processing.js/latest\>\</script\> \<canvas data-processing-sources=sketch.pde\>\</canvas\> Just replace the “sketch.pde” w/ the actual name of your “.pde” file. Here’s an online example: angel[https://GoSubRoutine.GitHub.io/Grumbo/Grumbo\_Adventure\_OOP/Grumbo\_Adventure/](https://GoSubRoutine.GitHub.io/Grumbo/Grumbo_Adventure_OOP/Grumbo_Adventure/) And its corresponding “index.html” file: For multiple “.pde” files for the same sketch, just place …

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 20, 2019, 12:53pm UTC](https://discourse.processing.org/t/sketch-to-webpage/8543/5 "2019-02-20T12:53:47Z")

</div>

check out this example:

[https://editor.p5js.org/kll/sketches/u6C9vjBLX](https://editor.p5js.org/kll/sketches/u6C9vjBLX)