-
Notifications
You must be signed in to change notification settings - Fork 18
(ARCHIVED) Week 3 Notes
Announcement This week's reading response assignment has changed, as of 11/11/14. We'll be reading the Jer Thorpe article this week, which was originally on the syllabus for next week. See week 3 on the syllabus for full details.
Read:
- Intro to DOM manipulation and events in generic javascript
- Beyond the Canvas - using the p5.dom library
Examples on jsfiddle.net
Along with the code in this repo, I've put a few examples on jsfiddle.net so you can play around with them live.
- Accessing the DOM jsfiddle | github
- Dynamically create DOM elements jsfiddle | github
- Mouse listener jsfiddle | github
- Keyboard listener jsfiddle | github (Note: uses a switch statement)
- Button listener jsfiddle | github
- Add DOM elements with a button jsfiddle
p5.dom
- p5.dom with Canvas jsfiddle | github (This is possible in jsfiddle by using the hosted versions of p5.js and p5.dom.js in the "External Resources" area on the right sidebar in jsfiddle)
For a walk-through of how to use jsFiddle, see the official tutorial. Note that the tutorial uses the MooTools library, which you won't need for my examples.
####Listeners
In plain Javascript (not P5), here's a list Javascript Events. These are the possible options in the addEventListener() function. For example, in this code:
document.addEventListener('mouseup',doSomething);Some common events are keyup, click, drag, focus, blur.
In p5.js, event listeners are designed to work much like the mouse and keyboard functions you're used to in Processing. There are also Touch events available for mobile applications. Note that these are part of the main p5.js library and not p5.dom.js. See the list of event functions available in p5.
The documentation for MouseClicked() in the p5 reference includes an example that's a good place to start.
#####More examples https://github.com/lmccart/itp-networked-media/tree/master/week3
Javascript has a rather unique way of dealing with functions compared to other programming languages. You can add function definitions within other function definitions. The syntax can be very confusing at first. You'll encounter a variety of different approaches when you research how to make things work in Javascript. Let's attempt to demystify a bit.
Named Functions
You're familiar already with defining a function and giving it a name, as in this code:
function doSomething(){
console.log("something!");
}In the event listener examples above, we passed the name of a function into another function as a parameter, as in:
document.addEventListener('click',doSomething);Anonymous Functions
Javascript also lets you write the function itself right into a function call, without giving it a name. That's called an anonymous function and looks like this:
document.addEventListener('click',function(){
console.log("something!");
});Why do this? Let's say the only thing you ever need the function doSomething() for is to respond to the click event. Since you only need it in that one place, javascript lets you skip the step of defining and naming it. It also means that you can see what the function does right there in the code, instead of having to search through the script and find the doSomething function. Some people find that easier to read. Others disagree. Whichever you choose to use personally, it's good to be able to understand both approaches.
If you find that your project needs a lot of fine-tuned DOM control and you don't need the p5 drawing tools, you might try using the jQuery library instead of the p5.dom library. (That's not to say you have to use only one -- there may be projects where you make use of both at once.) jQuery makes it easy to access DOM elements using CSS syntax, and add event listeners to them. Start with this jQuery introduction to get a sense of how it works.