chore(import all gallery content):

Author: Fabian Morón Zirfas

.netlify/state.json

@@ -0,0 +1,3 @@
+{
+	"siteId": "c081644c-312b-486e-8594-8bb5c3a869ca"
+}

.node-version

@@ -0,0 +1 @@
+v11.9.0

_source/_layouts/gallery-item.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+<section>
+<h1>{{page.title}}</h1>
+<p>{{page.description}}</p>
+{%- for author in page.authors -%}
+  {%- if author.url != null -%}
+    <a href="{{author.url}}">{{author.name}}</a><span>, </span>
+  {%- else -%}
+    {{author.name}}</a><span>, </span>
+  {%- endif -%}
+{%- endfor -%}
+</section>
+
+<main>
+{{content}}
+</main>

_source/gallery/affected-perception/images/1____DSC_0402_191-466x350.jpg

@@ -0,0 +1,97 @@
+---
+authors:
+  - name: Felicitas Katharina Merz
+    url: http://www.felicitas-merz.de
+  - name: Inken Zierenberg
+    url: null
+
+layout: gallery-item
+title: "Affected  Perception"
+description: The automated design works with the typographical layout content. Out of the manual word categorization eight arrays are sorted after the word importance. The automated scripting changes the words in the single arrays after the defined objectstyles. Through this the most important word groups stay readable and the less important word groups get less readable.
+---
+
+
+![](./images/7_DSC_0402_17.jpg)
+
+The developed theme „Affected perception“, refers to an abridgment of the text „Program or be programmed“ by Douglas Rushkoff. The goal was to create an appereance based on the manipulated perception of the typographical layout content. The project should represent an example of the field of abstraction, modification, readability and alienation. The improvement of the workflow consists of the steps: Manually creation by hand , generating and modifying by code and re-editing for print publishing by hand. The concept is based on eight classified word groups (arrays). Every word is sorted after its importance in the text. The goal is to automate the determinations of a single word group by a certain defined object style. The object styles hel- ped to define the difference of the visual appearance. Through the defined object styles the color changed into transparent and a cast shadow is added. The cast shadow gets bigger with the unimportance and the opacity is reduced with the unimportance of the words. The soft edges and the additional drop shadows help to create a liquid shade of words hierarchical sorted after importance. As result of the code the most important word group stays readable and the less important words get unreadable.
+
+![](./images/1____DSC_0402_191-466x350.jpg)
+
+![](./images/2_DSC_0363_2-492x350.jpg)
+
+![](./images/4____DSC_0436_32-527x350.jpg)
+
+![](./images/6_DSC_0393_13-489x350.jpg)
+
+### Source
+
+{%- highlight javascript -%}
+#includepath "~/Documents/;%USERPROFILE%Documents"; 
+#include "basiljs/bundle/basil.js";
+
+function draw() {
+   
+    var impWords1 = ["human", "beings", "listen", "speak", "read", "write", "digital", "reality", "programs", "programmed", "landscape", "software", "Program", "access", "control", "panel", "digital", "technologies", "Computers", "networks", "living", "things", "technology",  "future", "programming", "cooperation", "blueprint", "design", "progress", "knowledge", "civilization"]; 
+    var impWords2 = ["language", "literacy ", "choice", "tools", "instructions", "characterize", "shaping", "possibilities", "ability"];
+    var impWords3 = ["acquired", "learned", "gained", "use", "increasingly", "make", "emerging", "create", "Choose", "ways", "natural", "means", "way", "live", "work", "world", "creating", "collective", "social", "economic", "practical", "artistic", "spiritual", "tremendous", "gave", "shared", "inconceivably", "conceivable", "entirely", "engaged","connected", "responding", "unpredictably", "opposed", "interactive", "incapable", "learn", "works", "give"];
+    var impWords4 = ["move", "highly", "simple", "former", "latter", "real", "get", "many", "growth", "went", "markedly", "different", "more", "mere", "comes", "come", "take", "increasingly", "important", "explicit", "matters", "together"];
+    var impWords5 = ["not", " just", "into", "must", "but", "ahead,", "will", "really", "gain", "could", "last", "make", "while", "out", "before", "like", "Unlike", "even", "also", "as", " such", "After", "pass", "now"];
+    var impWords6 = ["rake", "pen", "jackhammer", "words", "people", "call", "role"];
+    var impWords7 = ["When", "we", "how", "them", "you", "be", "it", "are", "what", "They", "themselves", "with", "itself", "our", "will", "both", "without", "why", "We", "they"];
+    var impWords8 = ["to", "And", "In", "an", "or", "It´s", "the", "and", "For", "than", "a", "This", "is", "it", "its", "of", "on", "it's", "itself.", "in", "That's", "that,", "them.", "themselves", "that", "That´s", "this", "The", "for", "to",  "so"];
+
+    var story = b.doc().stories[0]; // first story in document
+
+    var words = b.words( story );
+
+    b.layer("generated");
+
+    for( var i = 0; i < words.length; i++ ) {
+
+        if(!words[i].isValid) {
+            b.warning("ungültiges Wort, vermutlich ausserhalb der TextFrames!");
+            return;
+        }
+
+        var tf = words[i].parentTextFrames[0];
+        b.page(tf);
+        
+        var bounds = b.bounds(words[i]); 
+        var newTf = b.text(words[i].contents, bounds.left, bounds.top, bounds.width + 3, bounds.height);
+
+        try{
+            lookUpWord(words[i], newTf, impWords1, "imp1");
+            lookUpWord(words[i], newTf, impWords2, "imp2");
+            lookUpWord(words[i], newTf, impWords3, "imp3");
+            lookUpWord(words[i], newTf, impWords4, "imp4");
+            lookUpWord(words[i], newTf, impWords5, "imp5");
+            lookUpWord(words[i], newTf, impWords6, "imp6");
+            lookUpWord(words[i], newTf, impWords7, "imp7");
+            lookUpWord(words[i], newTf, impWords8, "imp8");
+        } catch(exception) {
+            continue; // gehe zum nächsten wort
+        }
+
+}
+
+
+function lookUpWord(word, newTf, stringArray, objStyleName){
+
+    for( var q = 0; q < stringArray.length; q++ ) {
+
+        if(  stringArray[q] === word.contents ){ 
+            b.println(objStyleName); 
+            var style = b.doc().objectStyles.itemByName(objStyleName);
+            newTf.applyObjectStyle(style); 
+            throw new Exception();
+            } 
+        }
+
+    }
+        
+}
+
+
+b.go(); 
+
+{%- endhighlight -%}

_source/gallery/affected-perception/images/2_DSC_0363_2-492x350.jpg

@@ -0,0 +1,93 @@
+---
+authors:
+  - name: Jessica Campbell
+    url: null
+  - name: Riem Ibrahim
+    url: null
+
+layout: gallery-item
+title: "Alphabet  Bars"
+description: Our designs visualize the text, Program or Be Programmed by Douglas Rushkoff, alphabetically with rectangles of varying length. The length of each rectangle or bar is determined by the amount of times a letter or character appears on the page. Our goal was to use JavaScript to deconstruct the meaning of text completely, and reorganize and restructure the way it is read.
+
+---
+
+![](./images/alpha1-246x350.jpg)
+
+We used the alphabet as an organizing principle of this deconstruction to conserve some level of readability. There are two codes. One draws horizontal alphabet bars, the other draws vertical alphabet bars.
+
+The images on this page represent three pages of Douglas Rushkoff’s book.
+
+![](./images/alpha2-246x350.jpg)
+
+![](./images/alpha3-246x350.jpg)
+
+### Source
+
+  
+[Download Source](./downloads/alphabet_bars.zip)
+
+{%- highlight javascript -%}
+    #includepath "~/Documents/;%USERPROFILE%Documents";
+#include "basiljs/bundle/basil.js";
+
+function draw() {
+
+   b.canvasMode(b.MARGIN);
+
+   var hash = new HashList();
+   var preString = b.selections()[0];
+   var longString = preString.contents;
+
+  var tf1 = b.text( longString, 0,0,b.width,200 );
+   var words = b.characters(tf1);
+
+   var str;
+   for( var i = 0; i < words.length; i++){
+       str = words[i].contents;
+       switch(str.toString()){
+           case "SINGLE_RIGHT_QUOTE":
+            str="'";
+           break;
+           case "EM_DASH":
+            str="-";
+           break;
+           case "DOUBLE_LEFT_QUOTE":
+            str='"';
+           break;
+            case "DOUBLE_RIGHT_QUOTE":
+            str='"';
+           break;
+           }
+
+       str = b.trimWord(str);
+       str = str.toLowerCase();
+       if(hash.hasKey(str) ){
+           hash.set(str, hash.get(str) + 1);
+       } else {
+           hash.set( str, 1 );
+       }
+   }
+
+  tf1.remove();
+  preString.remove();
+   var keys = hash.getSortedKeys();
+   var valueKeys = hash.getKeysByValues();
+
+   for(var i = 0; i < hash.length; i++) {
+       b.println(hash.get( keys[i] ));
+
+       b.text(keys[i], 0, b.height/hash.length*i, 20, b.width/30);
+
+       b.textAlign(Justification.CENTER_ALIGN);
+       b.textFont("American Typewriter","Light");
+       b.textSize(9);
+
+       var bars = b.map(hash.get( keys[i] ),1,hash.get( valueKeys[0] ), 10, b.width-30);
+
+       b.rect(20, b.height/hash.length*i, bars, b.width/35);
+}
+
+}
+
+b.go();
+{%- endhighlight -%}

_source/gallery/affected-perception/images/4____DSC_0436_32-527x350.jpg

@@ -0,0 +1,75 @@
+---
+authors:
+  - name: Kate Marie Koyama
+    url: null
+  - name: Kyulee Kim
+    url: null
+  - name: Fatima Montiel
+    url: null
+
+layout: gallery-item
+title: "Breaking the Grid"
+description: Our goal was to relate our experiments to the given text (Program or Be Programmed by Douglas Rushkoff), for example, when you take a program as it is you find yourself in a grid with certain limitations; however when you learn to control the program you allow yourself to stray from the grid, break free from it.
+---
+
+
+
+![](http://basiljs.ch/wp-content/uploads/2013/03/Sudoku_MainImage.jpg)
+
+After analyzing the text “Program or Be Programmed”—by Douglas Rushkoff—we developed a series of experiments using a grid as our basis. With the use of Javascript, we divided the area within the margins of the page into 750 equally sized and distributed rectangles. Then, we highlighted a portion of the text and placed the individual letters in the boxes. Each time the characters exceeded the number of boxes in the page, a new rule would apply. The rules varied from position on the page, size, baseline and addition of elements such as bars.
+
+![](http://basiljs.ch/wp-content/uploads/2013/03/Explorations-246x350.jpg)
+
+![](http://basiljs.ch/wp-content/uploads/2013/03/Explorations-copy-21-246x350.jpg)
+
+![](http://basiljs.ch/wp-content/uploads/2013/03/Explorations-copy-3-246x350.jpg)
+
+### Source
+
+{%- highlight javascript -%}
+    #includepath "~/Documents/;%USERPROFILE%Documents";
+#include "basiljs/bundle/basil.js";
+
+var myBoxes = new Array();    
+var myCounter = 0;
+
+function draw() {
+  b.canvasMode(b.MARGIN);
+  b.noStroke();
+  buildBoxes();
+   
+  var selItems = b.selections();    
+  b.characters(selItems[0], function(ch, n){
+    if(n > myCounter){
+        b.addPage(b.AFTER);
+        buildBoxes();
+    }
+    if(n > 750 && n<1500){
+      b.typo(tf, "baselineShift", b.random(50,-100));
+    }
+    if(n > 1500){
+      b.typo(tf, "pointSize", 7);
+      b.typo(tf, "underline", true);
+      b.typo(tf, "underlineWeight", b.random(.25, 10));
+    }
+      tf = myBoxes[n];
+      b.typo(tf, "contents", ch.contents);
+      b.typo(tf, "capitalization", Capitalization.ALL_CAPS );
+      b.typo(tf, "pointSize", b.random(2,9));
+  });
+}
+  
+function buildBoxes(){ 
+  for (var j = 0; j < b.height-1; j+=b.height/30){
+   for (var i= 0; i < b.width-1; i+=b.width/25){
+   b.textAlign(Justification.CENTER_ALIGN, VerticalJustification.CENTER_ALIGN);
+   b.stroke("preto");
+   b.strokeWeight(.25);
+   myBoxes[myCounter] = b.text(" ",i, j ,b.width/25, b.height/30); 
+    myCounter++;
+    }
+  }
+}
+
+b.go();
+{%- endhighlight -%}

_source/gallery/affected-perception/images/6_DSC_0393_13-489x350.jpg

@@ -0,0 +1,17 @@
+---
+authors:
+  - name: Bettina Schneebeli
+    url: null
+layout: gallery-item
+title: Ending  the  Depression  through  Amazon
+description: A text – image correlation between an article by Bernhard London from 1932 and according product pictures from amazon.com.
+---
+
+
+<iframe src="http://player.vimeo.com/video/57749978?portrait=0" width="600" height="337" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
+
+This book results from delving into the topics of data and consumption and from the exploration of basil.js. The text of Bernhard London from the year 1932 proposes the solution of the economic crisis at that time through the introduction of a law that would force the citizens to hand in their products for destruction after a certain amount of time. The visual correlation of the text’s words with product images from Amazon results in a dialogue between the essay from the thirties with an economic system typical for today – the online shop. The flood of goods that is proposed by the author is therefore visible as a flood of product images and the imagined system is set into a relationship with today’s intensity of consumption and the currently often short lifetime of products. Through the way of the images being defined by the text, they form a seemingly random accumulation of goods. Those hereby suffer from a loss in value. This is depicting a change of attitude towards products, that would be a precondition for the system demanded by London.
+
+![](./images/schneebeli2_1.jpg)
+
+![](./images/schneebeli1-524x350.jpg)

_source/gallery/affected-perception/images/7_DSC_0402_17.jpg

@@ -0,0 +1,29 @@
+---
+authors:
+  - name: Simon Ziffermeyer
+    url: http://simon-ziffermayer.ch/
+layout: gallery-item
+title: Flow of Goods / Data Stream
+description: Twelve per cent of all imported goods in Switzerland are coming through the seaport of Basel. The piece «flow of goods / data stream» gives an overview over all goods and streams in the year of 2012.
+---
+
+
+[Simon Ziffermeyer](http://simon-ziffermayer.ch)
+
+Twelve per cent of all imported goods in Switzerland are coming through the seaport of Basel. The piece «flow of goods / data stream» gives an overview over all goods and streams in the year of 2012.
+
+[http://simon-ziffermayer.ch/bachelor-thesis-3/](http://simon-ziffermayer.ch/bachelor-thesis-3/)
+
+![](./images/ZEM8253_b1-e1395762362440.jpg)
+
+Many resources that we use are coming through the ports of Basel. Therefore year per year resources with a total weight of about seven million tons passed the Swiss Rheinports. Especially for the import this harbor takes an essential role. Between ten and 12 per cent of all imported goods reach Switzerland by water.
+
+For the starting position I have used a document in which all involved countries were listed. Each product and its weight is listed and ordered according to its country of origin. The goal of the project is to give an overview of the whole import and export situation in contrast to complex data sets. The visualization allows the viewers to see the intensity and quantity at a glance. This way of representation also allows for a comparative analysis of the origins of the continents where the goods come from or where the final destinations are.
+
+By applying a script the data is made representable as forms. The size of the forms visualizes the weight. Each shape is representing a product such as green shapes for organic products as example.
+
+![](./images/ZEM8212_b1-552x800.jpg)
+
+![](./images/ZEM8287_b1-600x399.jpg)
+
+![](./images/ZEM8301_b1-600x399.jpg)