Week 4: February 18: p5.js DOM Interactions

Itinerary

  • Discuss readings
  • Portfolio Critique
  • Sign up for p5.js web editor
  • Introduce p5.js/DOM interactions/console.log()
  • Variables/Functions/Reference
  • Basic mouse events in webpage
  • Integrate JavaScript/p5.js libraries into your own page
  • Studio

The DOM

DOM stands for the Document Object Model. The DOM represents the document as nodes and objects, so that programs can change the document structure, style, and content. .This way, programming languages can connect to the page through accessing specific elements (EG: <p>,<div>,<footer>  tags) , IDs (EG: #khalo), and classes (EG .painting).

Image result for DOM

JavaScript allows us to dynamically select any object inside the DOM, and attach an event to it. An event from the mouse can be (among others):
mousePressed()
doubleClicked()
mouseWheel()
mouseReleased()
mouseClicked()
mouseMoved()
mouseOver()
mouseOut()

Declaring Variables

Often times in program, you will need to declare a variable so you can reuse that same information over and over again in multiple places. Variables in JavaScript can be named anything – but as with CSS – there are a few guidelines to follow.

  • Avoid using numbers and no spaces.
  • Variables are case sensitive
    • the variable bike is different than a variable called Bike
  • In JavaScript, we declare using a function by putting the word let in front of it. All of the methods below are valid
    • let dog;
    • let dog = “dog”;
    • let dog=5;
    • let dog =true;
  • Declaring a variable at the very top of your javascript sketch is a global variable. This means it can be accessed anywhere inside your file.
    • Notice that I can use bgSlider inside the setup function, even though it was declared at the top.
  • Declaring a variable inside a function means it can only be accessed inside that function.
    • Notice that the variable bg is declared inside the draw function. This means I can only access and use it inside this function.

 

p5.js web editor

We’ll be using the p5.js web editor during class today for working with p5.js examples.  Sign up for an account here.

Adding JavaScript + p5.js Libraries to your websites and html pages

Just like we linked to an external CSS page and external Google Fonts, we will do the same for linking to JavaScript libraries and scripts. Working within the web editor – all of this is conveniently done for us. But, to add to our own pages, you will have to go through a few steps.

 

Leave a Reply

Your email address will not be published. Required fields are marked *