/*     

   1) Find the first text output function (i.e., what *actually* puts 'hello world' on to the screen and 'uncomment' it
   
   2) Find the second interactive 'hello world' function
   
   3) Alter or edit in some way, either just editing the code below or looking at the p5.js examples
        
    a couple of useful keyboard shortcuts for this (and other text environments)
    
     - CMD/CTL + '/' = comment or uncomment
     - CMD/CTL + '[' or ']' = adjust the level of indentation
    
*/

// for this version, we have to 'wrap' everything up in
// a parent function
var sketch = function( p5 ) {

//     basic variables

    // 'hello world' appears as a list below 
    // so you can more easily play with it
    var msg = ["H","E","L","L","O"," ","W","O","R","L","D",];


    // if you want to be able to share variables between different
    // functions, you'll need to do that here
    var index = 0;

/* ----- p5 set up ----- */
    p5.setup = function (){
      
        // creates the element on which everything is going to 'happen'
        p5.createCanvas(667,375); // portrait mobile phone dimensions

        //    examples of helper functions available to style text
        //    I encourage you to explore others on the p5.js reference site 
        p5.textFont('Roboto',60);
        p5.textStyle(p5.BOLD)
        p5.textStyle(p5.Italic)
        p5.textAlign(p5.CENTER);
        p5.noStroke();

        //    puts the message 'hello world' back together into
        //    one string
        var out = msg.join('');

        /*    THIS IS WHAT DRAWS THE LETTERS    */
//         p5.text(out,p5.width/2,p5.height/2);
    }
/* ----- p5 end setup ----- */


/* ----- p5 draw ----- */
    p5.draw = function (){

        p5.frameRate(5);      

        // changes the fill color with every mouse movement
        p5.fill(p5.random(200),p5.random(200),p5.random(200),150);

  //    puts the message 'hello world' back together into
  //    one string
        var out = msg.join('');

        /*    THIS IS WHAT DRAWS THE LETTERS    */
        p5.text(out,p5.width/2,p5.height/2);

    }
/* ----- p5 end draw ----- */

/* ----- p5 mouseMoved ----- */

// a function that does something (listens) for every time the mouse moves
    p5.mouseMoved = function (){
      
    
        //    puts the message 'hello world' back together into
        //    one string
        var out = msg.join('');

        // an example of how you might change the colors
        // randomly --
        p5.fill(p5.random(200),p5.random(200),p5.random(200),150);

        /*    THIS IS WHAT DRAWS THE LETTERS    */
        p5.text(msg[index],p5.mouseX,p5.mouseY);

        // this is only to increment the index so that the 
        // individual letters appear in order
        if(index == msg.length - 1){ index = 0; }
        else { index += 1; }

        return false;
    }
    /* ----- p5 end mouseMoved ----- */
}

var sketch1 = new p5(sketch, 'container1');