Creators Javascript Getting Started!

Today in Creators, we built on our HTML example of last week and added in some Javascript so we could start coding.  We then learnt how to separate our javascript into different files and folders. At the end of all this we have a template project that we will use for the rest of the year!

Step 1: Add some javascript to our webpage

<html>
  <head>
  <title>p5 Sketch Template</title> 
  <script language="javascript"> 
    alert("Hello, World"); 
  </script>
  </head>
  <body>
    <h1>My Sketch</h1>
  </body>
</html>

This made a rather attention grabbing, if slightly annoying message when the webpage starts.  Some of us added different messages with some more humour involved :).

Step 2: We moved the javascript to a different file

Putting the javascript in the html is cool, but it would be better if we gave it a file all of its own – we did that by moving our javascript code to a new file – sketch.js – another file and changing our html to pull it from there:

<html>
  <head>
  <title>p5 Sketch Template</title> 
  <script language="javascript" src="sketch.js"></script>
  </head>
  <body>
    <h1>My Sketch</h1>
  </body>
</html>

And our javascript was:

alert("Hello, World"); 
alert("And another message!"); 

Step3: Setting up p5.js!

Now, armed with the knowledge of how to combine many javascripts from various sources into a web page, we pulled in a script that someone else has written! We did this by copying the file into the same folder as our project and linking it to the html, just like we did with our own sketch:

<html>
  <head>
  <title>p5 Sketch Template</title> 
  <script language="javascript" src="p5/p5.js"></script>
  <script language="javascript" src="sketch.js"></script>
  </head>
  <body>
    <h1>My Sketch</h1>
  </body>
</html>

p5 has a bunch of functions that are useful for building creative apps that do art, etc. It designed for creative people who want to use javascript to create interesting artistic projects. Using p5 is not essential but will make it a little easier to get going on our apps than starting from scratch.

Getting Started with p5

Next we changed our javascript to include some p5 calls. We did this by adding some code in a setup() function. It is important to note that setup() is a p5 function – it’s not part of the javascript language so code you put there will do nothing if you don’t have p5 in your webpage.!

function setup(){
    createCanvas(400, 400);
    background(0);

    rect(200, 200, 100, 100);

    fill(255, 0, 0);
    ellipse(10, 200, 100, 100);

    fill(255, 255, 0);    
    ellipse(100, 200, 50, 100);    
}

Now we pretty much have a template for our p5 projects! We need to add on more thing to the template and then we will save this project and copy it whenever we create a new project! Next week we will use p5 to start building some REALLY interesting stuff, and learn more javascript while we are at it!

The code for this week’s session are all up on the coderdojo github as usual: https://github.com/coderdojoathenry/creators2017

You can browse the code there or download to your pc as a zip. See you next week!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s