file.js

// Daniel Shiffman
// Programming from A to Z, Fall 2014
// https://github.com/shiffman/Programming-from-A-to-Z-F14

// This examples builds a very simple DOM visualization of concordance
// It reads the text one word a a time and animates the words growing according to their counts

var concordance;
var wutang;
var canvas;
var stuff;
var back = 0;


function preload() {
wutang = loadImage("fidel4.jpg",0,0);
stuff = loadStrings('fidel1.txt');
 
}

function setup() {

canvas = createCanvas(700, 400);

/*
div = createDiv('cancan');
div.style('can', can);
div.position(0,0);
div.position(windowWidth/2- div.elt.offsetWidth/2, windowHeight/2);



*/
  
  // Make a concordance object
  // This will hold every word and its count
  concordance = new Concordance();
  
  console.log(stuff);
  process(stuff);
  
  /* textSize(value); */
	
  }

function draw(){
background(back);


//image(wutang,0,0);

   var words = concordance.keys;
   
   var allwords = words.join('');
   console.log(allwords);
   
   // for (var i = 0; i < allwords.length; i++) {
   // var achar = allwords.charAt(i);
   
  /*  console.log(words); */
   
   var x = 40;
   var y = 20;
   fill(0);
   noStroke();
 

   for (var i = 0; i < words.length; i++) {
   var word = words[i];
      
   var c = wutang.get(x, y);
   var value = 8;
   fill(c);
   textSize(mouseX/20);//changes when your mouse changes x position 
   text(word, x, y);
	  
   x += textWidth(word + "");
   
   
	   	  
	   
	  if (x >= width){
		 x = 40;
		 y += 8;//spacing 
	  }
	  
	  if (y > height){
	  y =+ height;
		  
	  //}
	 }//the max font size 
	 value = mouseX ;
	 if (x == mouseX ){
	   value = 100;
   }
/* mouseClicked(); */
 /* noLoop(); */
}


}
/*

function mouseClicked(){
if (back == 0){
back = 255;
}else{
back = 0;
}

}
*/

function process(data) {
  var text;

  // Did we get an array from loadStrings()
  // or just some raw text
  if (data instanceof Array) {
    text = data.join(' ');
  } else {
    text = data;
  }

  // We are actually going to make the DIVs inside the concordance object
  // This is a bit problematic as its confusing to follow
  // So would be good to refactor 
  concordance.process(text);
  
}

/*
function makeSizer(value){
	return function (){
		value = "20"; 
	};
}


function makeSizer(value){
	return function() {
	textSize(value);
}
}


function mouseClicked(){
if (value == makeSizer(8)){
value = makeSizer(20);
}else{
value = makeSizer(8);
}
}
*/