Week 07

Multiple JS, DOM, Events and Callback Function

Week6 #7

1. Multiple JS files

https://editor.p5js.org/kdoodoo/sketches/B1yC6roi7

You can keep your file in a separate js file.

2. DOM element and Callback Function

Document Object Model (DOM)

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>

P5.dom library

https://p5js.org/reference/#/libraries/p5.dom

Example

https://editor.p5js.org/kdoodoo/sketches/rJfcgPsjm

Example

https://editor.p5js.org/kdoodoo/sketches/rJ9XZwijm

Example

https://editor.p5js.org/kdoodoo/sketches/SJfe7PjsX

Callback function

Callback function is simple that

1. The function createButton is attached to the variable button.

2. And when the button is pressed, I want changeColor function os called.

   button.mousePressed(changeColor);

Callback is simply one function is called and the other function is continuously called.

  var button = createButton("Color??");
  button.mousePressed(changeColor);

Example

https://editor.p5js.org/kdoodoo/sketches/rJS8rDjsm

Assignment

1. Have multiple .js file (at least 2)

2. Have DOM element (it can be anything, button, slider, check, wordform, etc)

https://goo.gl/forms/BLQxwU8giiMkDzxk2