Expressing Data Final – 99 Names of Allah

For my final project, I wanted to analyze the 99 names of Allah by using their frequency in the Quran and then visualize it using traditional Islamic art and calligraphy methods.

Some existing projects on data I looked at while ideating:

[ Word Frequency Comparison Between Bible + Quran ]  

[ The Periodic Table of Islam ]

[ 786: Math + Quran ]

[ Oneness ]

The 99 names of Allah is a concept in Islam that represents the 99 different qualities or facets of God. These names describe the One God (one of the names is also “The One”): He is the Protector, the King, the Friend, and the One that Knows all at the same time. I thought it would be worthwhile to explore these names using the analysis and visualization techniques we used in class to see what the relationships between them were and if these relationships can be mapped using mathematical and generative models.

Getting data from the text file and saving it to a JSON file.

Getting data from the text file and saving it to a JSON file.

screen-shot-2016-12-14-at-12-36-03-am

I initially had a lot of trouble figuring out how to get the data without extracting it manually. This, along with understanding how to visualize the conceptual complexities behind the names, ended up taking up a lot of time. Even after finally understanding how to get the API to work, I had a lot of trouble in terms of quality control. There were many English translations for the Quran available, and there is no consistency on how specific words can be translated (it’s not a complete mess; just more a complication involving synonyms. Arabic is a complex language and each word has multiple meanings. I could have used the simple Arabic one to scrape the data but even though I can read Arabic, my understanding is not too good and I didn’t feel comfortable doing it. After struggling with it, following Roopa’s suggestion, I switched to simple text as my data did not change. Still, because of the translation issue, I had to manually search up the names in an online web-based Quran to make sure that my array of names matched up to how they were described in that particular translation.

 

It was also difficult visualizing the data because I wanted it to be symmetrical and reminiscent of Islamic geometry but some names were very obviously more mentioned than others (which was the point). Also, it was interesting to consider how the names could be compared to each other, other than frequency. I wish I had expanded more than just evaluating frequency. But I do want to continue working on this and polish it, so hopefully that can happen.

Drafts + Tests:

screen-shot-2016-12-15-at-1-27-28-am screen-shot-2016-12-15-at-4-59-36-pm screen-shot-2016-12-15-at-5-00-06-pm

screen-shot-2016-12-12-at-2-56-14-am

 

Final iteration:

screen-shot-2016-12-15-at-4-59-26-pmscreen-shot-2016-12-12-at-4-28-50-am screen-shot-2016-12-12-at-4-28-56-am screen-shot-2016-12-12-at-4-29-07-am screen-shot-2016-12-12-at-4-30-46-am screen-shot-2016-12-12-at-4-30-56-am screen-shot-2016-12-12-at-4-30-57-am

Below is the code for the last final orbit one. I also have the code for getting and organizing the data and the more even iteration.

//orbit variables
var maxScroll=30000;
var radiusX=400;
var radiusY=200;
var orbitTop=260; // position of orbit
var orbitLeft=500;
var speed=1000; // bigger number = slower
	
// initial setup	
var howFar=0;
x=(Math.sin(howFar/speed)*radiusX)+orbitLeft;
y=(Math.cos(howFar/speed)*radiusY)+orbitTop;
var planet;
var planetborder;

//data variables
var names99;
var lengtharray = new Array();
var namesArray = new Array("Allah","Beneficent","Merciful","King","Holy", "Giver of peace", 
              "Granter of security", "Guardian","Mighty","Supreme", "Creator", "Maker", "Fashioner", 
              "most Forgiving", "Subduer","Giver", "Provider", "Judge", "Knowing", "straitens", "multiply",
              "Abasing", "exalt","givest the kingdom", "takest away the kingdom","Hearing","Seeing", "will judge between you",
              "Knower of subtleties", "Aware", "Forbearing", "the Great", "Grateful","High", "Preserver", 
              "Keeper", "Reckoner", "Lord of glory", "Gracious", "watcher", "Answering", "Ample-giving", "Wise",
              "Loving", "Glorious", "raise up those who are in the graves", "Witness", "Protector", "Strong", "Helper", "Praised",
              "record", "Originator", "originates", "gives life", "causes death", "Everliving", "Self-subsisting",
              "We found", "Honorable", "One", "He on Whom all depend", "He has the power", "Powerful", "He respites them", 
              "grant you a delay", "First", "Last", "Ascendant", "Knower of hidden things", "protector",
              "Most High", "Benign", "Oft-returning", "inflict retribution", "Pardoning", "Kind",
              "Master of the Kingdom", "Lord of glory and honor", "maintaining His creation with justice",
              "Gatherer", "Self-sufficient", "enrich", "Allah touch you with affliction",
              "Allah makes ample provision", "His light", "Guide", "Wonderful Originator", "for ever the person of your Lord",
              "We are the heirs", "means to bring them good" , "Allah is with the patient");
var knowing = new Array("Knowing", "Hearing", "Seeing","Knower of subtleties", "Aware", "watcher", "Wise","Witness","record", "Knower of hidden things");
var original = new Array("Originator", "originates", "One","Wonderful Originator", "Creator", "Maker", "Fashioner");
var forgiving = new Array("Merciful","most Forgiving", "Pardoning");
var glory = new Array("Glorious", "Lord of glory", "Lord of glory and honor", "Praised");
var giver = new Array("Allah makes ample provision", "Helper","Ample-giving","Provider","Giver of peace", "Granter of security","gives life", "givest the kingdom", "grant you a delay", "Gracious", "means to bring them good");
var selfreliant = new Array("Self-sufficient","Self-subsisting","Everliving");
var judge = new Array("Judge","will judge between you","inflict retribution","maintaining His creation with justice");
var protector = new Array("Granter of security", "Guardian", "Protector", "Strong","protector");
var reliant = new Array("Answering","He on Whom all depend", "He respites them","Oft-returning")

var arrayColor = new Array (knowing, original, forgiving, glory, selfreliant, judge, protector, reliant);
var colorArrays = new Array([165, 105, 189, 120],[133, 193, 233,120], [118, 215, 196,120],[247, 220, 111, 120],
                [229, 232, 232,120], [236, 112, 99,120], [22, 160, 133,120],[41, 128, 185,120]);

//organizing variables
var counter = 0;
var circlecounter = 0;
var naming = new Array();
var prevname = 0;
var arabic;
var bkg; 
var centerpiece;
function preload() {
  names99 = loadJSON("names99v2.json", loaded, error);
  arabic = [];
  for(var i=1; i<99; i++) {
    var fileName = "img/" + i + ".png";
    arabic[i] = loadImage(fileName);
  }
  bkg = loadImage("bkg.jpg");
  centerpiece = loadImage("allahname.png");
}

function setup() {
  createCanvas(1350,760);
  noStroke();
  ellipseMode(CENTER);
  imageMode(CENTER);
  //image(bkg,width/2,height/2);
  
  for(var name in names99) {
    
    if(names99[name] == names99[1]) {
      var counts = names99[name].length + 114;
      append(lengtharray,counts);
    } else if(names99[name] == names99[2]) {
      var counts = names99[name].length + 114;
      append(lengtharray, counts);
    } else {
      append(lengtharray,names99[name].length);
    }
  }
  count = lengtharray.length;
  var sample = lengtharray;
  lengtharray = sort(lengtharray, count);
  naming = namesArray;
  naming.sort(sortLengths);

  
  
}

// scroll function 


function mouseWheel() {
  howFar += event.delta;
}

function draw() {
  background(0);
  image(bkg, width/2, height/2);
  
  translate(width/2, height/2);

  biggestnames = 90; //i =1, 89,i = 2, 88
  mediumnames = 85;
  shortestnames = 0;
  shortcounter = 1;

  // i is biggest 3 names
  //j is next biggest 6 names
  for(var i = 0; i < 3; i ++) {
    push();
    x=(Math.sin((howFar/speed)*(lengtharray[biggestnames]))*radiusX)+orbitLeft;
    y=(Math.cos((howFar/speed)*(lengtharray[biggestnames]))*radiusY)+orbitTop;
    for(var attribute in arrayColor) {
      var thename = arrayColor[attribute];
      for(var quality in thename) {
        //console.log(naming[biggestnames]);
      if(naming[biggestnames].includes(thename[quality])>0) {
        
        var col = colorArrays[attribute];
        fill(col);
      } else {
        // fill(200);
      }
    }
    }
    //fill(random(255),random(255),random(255));
    rotate(TWO_PI * i/5);
    translate(360/3);
    //ellipse(x,y,y+lengtharray[biggestnames],y+lengtharray[biggestnames]);
    drawHexagon(x,y,y+lengtharray[biggestnames]);
    image(arabic[biggestnames],x,y,(y-(2*lengtharray[biggestnames]))/2,(y-(2*lengtharray[biggestnames]))/2);
    for(var j = 0; j < 8; j++) {
      push();
      rotate(TWO_PI*j/8);
      for(var attribute in arrayColor) {
      var thename = arrayColor[attribute];
      for(var quality in thename) {
      if(naming[mediumnames].includes(thename[quality])) {
        var col = colorArrays[attribute];
        fill(col);
      } else {
       // fill(200);
      }
    }
    }
    // x=(Math.sin((howFar/speed)*(lengtharray[mediumnames]))*radiusX)+orbitLeft;
    // y=(Math.cos((howFar/speed)*(lengtharray[mediumnames]))*radiusY)+orbitTop;
    //   
      //ellipse(x,y,y-lengtharray[mediumnames], y - lengtharray[mediumnames]);
      drawHexagon(x,y,y-lengtharray[mediumnames]);
      if(mediumnames > shortestnames) {
      image(arabic[mediumnames],x,y, (y-(2*lengtharray[mediumnames]))/2,(y-(2*lengtharray[mediumnames]))/2);
      }
      mediumnames--;
      // console.log(lengtharray[mediumnames]);
      counter++;
      for(var m = 0; m < 3; m++) {
        push();
        rotate(TWO_PI*m/3);
        for(var attribute in arrayColor) {
          var thename = arrayColor[attribute];
          for(var quality in thename) {
            if(naming[shortestnames].includes(thename[quality])) {
              var col = colorArrays[attribute];
              fill(col);
            }
            else {
             // fill(200);
            }
          }
       }
    //     x=(Math.sin((howFar/speed)*(lengtharray[shortestnames]))*radiusX)+orbitLeft;
    // y=(Math.cos((howFar/speed)*(lengtharray[shortestnames]))*radiusY)+orbitTop;
       //ellipse(x,y,y-(lengtharray[shortestnames]*20),y-(lengtharray[shortestnames]*20))
        drawHexagon(x,y,y-(lengtharray[shortestnames]*20));
        if(shortestnames < arabic.length) {

          image(arabic[shortcounter],x,y, (y-(20*lengtharray[shortestnames]))/2,(y-(20*lengtharray[shortestnames]))/2);
        }
        
        translate();
        shortestnames++;
        shortcounter++;
        counter++
        if(lengtharray[shortestnames] == lengtharray[mediumnames]) {
          //console.log("REPEAT REPEAT REPEAT");
          break;
        }
        pop();
      }
      
      pop();
    }
    translate();
    biggestnames--;
    counter++;
    //console.log(biggestnames);
    pop();
    // console.log(shortestnames)
  }
 //console.log(counter);
 
  push();
  rotate(360*1.9/2);
  fill(255, 255, 0,200);
  ellipseMode(CENTER);
  ellipse(0,0,150,150);
  image(centerpiece,0,0,50,50);
  pop();
}

function loaded(d) {
  names99 = d;
  console.log("loaded");
}

function error(err) {
  console.log(err);
}

function sortLengths(currentstring, prevstring) {
  var currentstringnumber = namesArray.indexOf(currentstring);
  var prevstringnumber = namesArray.indexOf(prevstring);
  // console.log(currentstring + ": " + currentstringnumber);
  //check in names 99 whihc on is greater
  if(names99[currentstringnumber].length > names99[prevstringnumber].length) {
    return 1;
  } else if(names99[currentstringnumber] < names99[prevstringnumber].length) {
    return -1;
  } else {
    return 0;
  }
}

function drawHexagon(x,y, radius) {
  push();
  noStroke();
  translate(x,y);
  beginShape();
  for(var i = 0; i < 6; i++) {
    push();
    var angular = PI * i/3;
    vertex(cos(angular)*radius, sin(angular)*radius);
    pop();
  }
  endShape(CLOSE);
  pop();
}


	 

Leave a Reply