Vector Bending

PreviousGlossery of Terms NextImage-2-Text

Last updated 4 months ago

Vector Bending

Circuit bending is the act of interrupting electrical connections using various switches, potentiometers, or even just a few static resistors. By doing this, the user is able to modulate the electrical signals passing through the circuit. In practice, usually in audio applications this can result in strange drone-like sounds. In 2018 Youtuber Sam Battle or Look Mum No Computer took this to an extreme with the creation of “The Furby Organ''. Housed in a traditionally oak finished electric organ composed of 44 furbys each with the ability to be keyed to a different octave. With the flick of the “collective awakening switch”, the furbys all spring to life in unison. Their eyes start to blink, their furry groans of 90’s nostalgia begin to sync. A looping-freeze button sustains them into an endless tone - reminiscent of the jarring sound of a computer program freezing. The guts of the machine are a nest of wires and terminal strips connected to each Furby’s PCB board.

Oddly enough, this idea of bending signals can be applied to digital applications as well. Digital images or video are composed of data. Opening a .jpeg into a text editor results in a seemingly incomprehensible series of characters. By modifying this text even a little results in a jpeg with large sections of recolored areas of the image. Modifying this text significantly might result in the image being corrupted. Below is an example of a .jpeg file opened in a text editor:

IHDR  (  ž   ¾vúp   sRGB ®Îé    IDATx^ì½i“$Ç•$¨~{ÜyÖ�£  	²§wfšóaöÿ‹ì×mö4I udefÜ‡ß¾¢jæ‘Q™Y Av½‘”¼âðÃÌžš>}úÇÔµëcôì}€Ä‰P¸!Ü0 &I!\TðP AópQ;jÇEmÿâ pj€ßï|Øÿßûœ½»u§ÌÐ‹CTYŠÅtŒÙõŠd�2O †[V¨Š¥ãÀ	¤eøâVq·/
QÙ¬ks´ÛïúÍA}ã¨u&÷�Åö�<_×9|.?Ã^ÇüÔ\£ÛÞôÝ×ß|–ãþ°cùA|ø$Ýs„ÎÁy¸Žk®UQ .*¤ë
6‹%ª$Cèùè¶ÚèuHÖÊ¢B]—¨ªŽË÷ªõ=@‰ Ý Þ,Pd
Ã _�ú~õâD¨põö%>>AV&˜/˜-—¨jÀ�BdEŽÅbŽt3Gìy8êöqÜéã¼w„Ü¼D‘ep¾ï¡F�¼,à…>¢VŒ²ª°\.‘â8†ë¹ÈŠ›dƒåz�ÙbŽë4AÚëaíù¨9Î[üùí%®—k¬Ë
uØAu‘—.œÊEà†p*yZ¡.~€ª*‘®×@Q

.SVG files [vectors], opposed to .JPEG files [rasters], are based on XML and are human readable when opened in a text editor. Looking closely at the code that makes up an .SVG file we’re able to recognize recurring syntax. The "Fill" for instance refers to the colors used in the vector file. “Path” refers to the specific node handles that make up each vector shape. Vectors are simply shapes determined by points. Similar to a connect the dots puzzle. Each “node” represents a dot, with the string of numbers corresponding to where these nodes exist on the virtual canvas. Since vectors rely on geometry rather than pixels, they are infinitely scalable. There are no low quality images, simply shapes and paths filled with a color. A vector could be scaled from the size of a sheet of paper to the side of a building. Below is an example of a .svg file opened in a text editor:

<style type="text/css">
	.st0{fill:#7BA0CD;}
	.st1{fill:#F2E6C8;}
 </style>
 <g>
	<g>
		<path class="st0" d="M677.3,261.8c26.5,0,53,0,79.5,0c0,9.8,0,19.5,0,29.3c-4.7,0-9.4,0-14.1,0c0,0.9,0,1.5,0,2.5
	c3.7-1.2,7.2,1.3,10.7-0.2c0.3-0.1,0.8,0.4,1.3,0.4c0.7,0.1,1.4,0.2,2.1,0.3c0,0.5,0,1,0,1.5c-2.2,0-4.4,0-6.6,0
			c-0.3,0-0.6,0.5-0.9,0.7c-0.5,0-1,0-1.5,0c-0.3-0.3-0.5-0.5-0.8-0.8c-0.7,0-1.4-0.1-2.1,0c-0.3,0.1-0.6,0.5-0.9**

Hypothetically, if given the correct information - any image could be created using these methods. This might be humanly impossible, however since vectors are a lot more human readable this feels a little easier. By modifying existing node handles we can visualize change within the file. By automating this process, a dataset could be applied and the changes could be generative and more quickly recognized. For the purposes of this text I will be using the programming language Processing. Initiated in 2001 by Casey Reas and Benjamin Fry, Processing is an open-source programming language for artists. I will be assuming you’ve familiarized yourself with some of its concepts for this next part.

The Code

import processing.svg.*; 
 import drop.*; 
 /////////////////////////////////////////////////  
 // Brandon A. Dalmer 2022 - SVG Glitcher  
 // load SVG file as XML - format as string  
 // find and replace random numbers - save as .svg 
 /////////////////////////////////////////////////  
  
 String[] svgText; 
 String newData; 
 String[] colorPack; 
 File myFile; 
 SDrop drop; 
 PrintWriter output; 
 int numCopy = 5; // number of files I want 
 int corLevel = 8500; // corruption level 
 boolean colorRefresh = true; 
 int colorNum = 6; 
  
 /////////////////////////////////////////////////  
 public void setup() { 
   size(250, 250); 
   background(#0000AA); 
   textSize(32); 
   textAlign(CENTER); 
   fill(#0088FF); 
   drop = new SDrop(this); 
   text("DRAG 2 BEND", width/2, height/2); 
   text("do not close", width/2, height/2+40); 
   colorPack = new String[colorNum]; 
 } 
  
 ///////////////////////////////////////////////// GENERATE IMAGES 
 public void draw() { 
   if(myFile != null) { 
     svgText = loadStrings(myFile.toString()); // load file as string 
     for(int i = 0; i < colorNum; i++){ 
       colorPack[i] = Comm64Pick(); 
      } 
     for(int i = 0; i < numCopy; i++) { 
       output = createWriter("BEND-"+month()+year()+"_"+(int)random(1000)+".svg"); // create a document 
       for(int j = 0; j < svgText.length; j++) { 
         if(j > 30) { // start the bend 
           for(int c = 0; c < corLevel; c++) { 
             newData = svgText[j].replace(str((int)random(10, 150)), str((int)random(500))); // find and replace 
           } 
         } 
         else{ 
           recolor(svgText[j]); 
         } 
         output.println(newData); 
       } 
     output.flush(); // save as svg/text 
     output.close(); 
     corLevel += 500; 
     } 
   exit(); 
   } 
 } 
  
 ///////////////////////////////////////////////// COLORFILL VECTORS 
 public void recolor(String oldData){ 
   String[] c = match(oldData, "fill:(.*?);}");   
   if(c != null){ 
     if(colorRefresh){ 
       newData = oldData.replace(c[0], Comm64Pick()); 
     } 
     else{ 
       newData = oldData.replace(c[0], colorPack[(int)random(colorPack.length)]); 
     } 
   } 
   else{ 
     newData = oldData; 
   } 
 } 
  
 ///////////////////////////////////////////////// LISTEN FOR DROP 
 public void dropEvent(DropEvent theDropEvent) { 
   if(theDropEvent.isFile()) { 
     myFile = theDropEvent.file(); 
   } 
 }

Global Settings

numCopy - the number of output files we ultimately want. Be careful with this number.

corLevel - the corruption level. The higher the number the more extreme the bend. I keep this below 10,000.

colorRefresh - true or false, this allows the program to grab new colors for each file. Some colors might be picked more than once.

colorNum - how many colors we might want. Maximum is 16.

Draw

This is where the magic happens. This program is essentially translating a vector file into a String, or series of characters. It will skip the first 30 lines of the selected file in order to prevent corruption. Then, based on the value of corLevel, it will cycle through each character looking for a random number (between 10 and 150). Once found, it then replaces this number with another number (between 0 and 500). This section can be modified; however, I’ve found an aesthetic sweet spot here.

Recolor

Before outputting a file. The program will replace the original color data or the fill section of the file with a new color. These new colors are pulled from a list, taken from the 16 unique colors of the Commodore 64 system. A nostalgic source of computing for me.

We can simply drag and drop a .SVG image into the sketch and start getting some outputs. Let's start with this image.

The new file is then saved in the sketch folder of the program. Here are some examples: