index2018-11-11

Week 3 ~ concrete poetry

I’m in love with cheating quines. A quine is a computer program that outputs a copy of its own source code. Even though its not a true quine I think a quine that reads its own source code as an input in order to produce it as an output is more interesting. A cheating javascript quine is especially useful in that the source code of any webpage can be exploited without having to re-write the code itself as a string inside of a pre-existing HTML element.

I once made a website called website with the sound of its own making which is a sort of homage to box with the sounds of its own making by Robert Morris. For this assignment I made a website called website with the code of its own making.

Screen Shot 2018-11-11 at 5.13.07 PM

With the sound website the idea was to expose the physical process of writing code. With this assignment I thought it would be interesting to use quines and javascript to expose the code itself. Because a webpage is always delivered as some kind of rectangle in the browser I wanted the code to always fill up that space on a grid. The only time white space affects code is when it is used to separate selectors or names of functions, for these kinds of spaces I drew a border around them to help highlight the grid structure and that each letter inside the code occupied its own space.

Here is what the code looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>website with the code of its own making</title>
  </head>
  <body>
    <script type="text/javascript">
      let letterPlace=0;let title=[];function javascriptFunction(){document.body.style.margin='0';document.body.style.padding='0px';let arr=[];const allOfTheCode=javascriptFunction+'()';for(let val of allOfTheCode){arr.push(val)}arr.forEach(function(val,index){const letter=document.createElement("span");document.body.style.display="flex";document.body.style.flexWrap="wrap";document.body.style.justifyContent="center";letter.style.fontFamily="monospace";letter.style.display="inline-flex";letter.style.alignItems="center";letter.style.justifyContent="center";letter.style.height="20px";letter.style.width="20px";document.body.appendChild(letter);document.body.style.height="calc(100vh)";if(val===" "){letter.innerHTML=`<span style="width:75%"></span>`;letter.style.fontSize="3px";letter.style.border="1px solid black";letter.style.textAlign="center"}else{letter.innerHTML=`<span>${val}</span>`;if(val==="w"){if(!title.includes(val)&&index>letterPlace){highlightLetter(letter);letterPlace=index;title.push(val)}}if(val==="e"){checkLetter(letter,val,"w",index)}if(val==="b"){checkLetter(letter,val,"e",index)}if(val==="s"){checkLetter(letter,val,"b",index)}if(val==="i"){checkLetter(letter,val,"s",index)}if(val==="t"){checkLetter(letter,val,"i",index)}if(val==="e"){if(title.includes("t")&&index>letterPlace&&index<374){highlightLetter(letter);letterPlace=index;title.push(val)}}}});function checkLetter(letter,val,lastLetter,index){if(!title.includes(val)&&title.includes(lastLetter)&&index>letterPlace){highlightLetter(letter);letterPlace=index;title.push(val)}}function highlightLetter(letter){letter.style.fontSize="40px"}}
      javascriptFunction()
    </script>
  </body>
</html>

Here is a screenshot of version II (currently deployed). With this version I wanted to create a bit more variation in space and scale. I am writing parts of the sentence “this is a website with the code of its own making” wherever there is a space in the code.

Screen Shot 2018-11-12 at 11.11.09 PM

Updated (but far from clean) code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>website with the code of its own making</title>
  </head>
  <body>
    <script type="text/javascript">
      let letterPlace=0;let title=[];function javascriptFunction(){document.body.style.margin='0';document.body.style.padding='0px';let arr=[];const allOfTheCode=javascriptFunction+'()';for(let val of allOfTheCode){arr.push(val)}
      arr.forEach(function(val,index){const letter=document.createElement("span");document.body.style.display="flex";document.body.style.flexWrap="wrap";document.body.style.justifyContent="center";letter.style.fontFamily="monospace";letter.style.display="inline-flex";letter.style.alignItems="center";letter.style.justifyContent="center";letter.style.height="20px";letter.style.width="20px";document.body.appendChild(letter);document.body.style.height="calc(100vh)";if(val===" "){letter.innerHTML=`<span style="width:75%"></span>`;letter.style.fontSize="3px";letter.style.border="1px solid transparent";letter.style.textAlign="center"
      console.log(index);if(index===8){letter.innerHTML=`<span style="width:75%">this</span>`;letter.style.fontSize="33px"}
      if(index===194){letter.innerHTML=`<span style="width:75%">is</span>`;letter.style.fontSize="43px"}
      if(index===236){letter.innerHTML=`<span style="width:75%">a</span>`;letter.style.fontSize="53px"}
      if(index===669){letter.innerHTML=`<span style="width:75%">website</span>`;letter.style.fontSize="63px"}
      if(index===828){letter.innerHTML=`<span style="width:75%">with</span>`;letter.style.fontSize="33px"}
      if(index===952){letter.innerHTML=`<span style="width:75%">the code</span>`;letter.style.fontSize="43px"}
      if(index===1060){letter.innerHTML=`<span style="width:75%">of its</span>`;letter.style.fontSize="53px"}
      if(index===1276){letter.innerHTML=`<span style="width:75%">own</span>`;letter.style.fontSize="63px"}
      if(index===1383){letter.innerHTML=`<span style="width:75%">making</span>`;letter.style.fontSize="33px"}}else{letter.innerHTML=`<span>${val}</span>`}})}
      javascriptFunction()
    </script>
  </body>
</html>