Putting Your Processingjs Games on an HTML Page

Planning
Step 1
In this lesson we will learn how to take a processingjs repo and embed it in an html file

We will need to:
- include the processingjs library
- make sure our JS repo has a setup() function which calls size()
- add a container around our JS

We'll get started in the next step

Step 2
Add head and body tags to you page
Step 3
Add this link to the "head" to include the processingjs library

Including the library means our page will "understand" this type of JavaScript

Copy and Paste this link:

<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> 
Step 4
Go to your processing repo and copy all of your code
Step 5
Add a canvas element to the body of the page

Canvas elements allow the user to display graphics.

We need an id in order to "attach" our JavaScript to the correct canvas
(We could have multiple canvases)

Step 6
Next we need a "container" to run our program

Add this code to the body

<script>

    var sketchProc = function(p) {
        with (p) {




        }
    }

    var canvas = document.getElementById("myCanvas"); 
    var p = new Processing(canvas, sketchProc); 

</script>

Here's a quick diagram of what's going on

We need to show our page which program to run and which canvas to use.

Step 7
Paste your code inside of the "sketchProc()" function
Planning
Step 8
Lastly we need to make sure the processing program calls "size()" from the "setup()" function

Go in to your code and add: size(500,500) to your setup() function

If you don't have a setup() function. Add one.

Check Your Work
Step 9
You should now see your project on the page!

Common Problems:

  • You do not have a setup function
    • you are not calling size(500,500) inside of setup
  • Your canvas id does not match the canvas name in your sketch container (See step 6 getElementById()
Challenge
Step 10
Add CSS to your page to make it look more interesting
Planning
Step 11
In the next lesson we will be creating a Navigation bar so users can navigate around your site
Putting Your Processingjs Games on an HTML Page Info

Account

MVCode

Created By

jamie

Course:

Create a Portfolio

Access Level

public

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach