D3 Examples - test block

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    
// Ignore all the stuff above, we'll worry about it later ...
    
/*     
   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
    
*/
    
//     basic variables
    var msg = ["h","e","l","l","o"," ","w","o","r","l","d",];
    var index = 0;
    var textColor;
    var displayText;
//     this is what calls P5.js helper functions in the first place
    function setup(){
      
//       define the space in which everything is going to 'happen'
      createCanvas(960,500);
      
//       making the text pretty
      textFont('Georgia',50);
      textStyle(ITALIC)
      textAlign(CENTER);
      noStroke();
      
//       putting the message together
      var out = msg.join('');
//       putting it on the screen
//       text(out,width/2,height/2);
      
    }
    
//     ignore this for now ...
    function draw(){
      
    }
  
// a 'listener' for whenever the mouse is moved within the canvas (defined above)
    function mouseMoved() {
      
//   same text prettification as above
      textFont('Georgia',50);
      textStyle(ITALIC)
      textAlign(RIGHT);
      textAlign(CENTER);
      noStroke();
  // same message concatenation as above
      var out = msg.join('');
     
      // THE MAGIC!
      
        // changes the fill color with every mouse movement
      fill(random(200),random(200),random(200),150);
      
      // put the text onto the canvas
//       text(out,width/2,height/2);
//         fill(random(200),random(200),random(200),150);
//       text(msg[index],mouseX,mouseY);
//       if(index == msg.length - 1){ index = 0; }
//       else { index += 1; }
//       return false;
    }
    
  </script>
</body>
    