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​

​