Studio Notes
  • Brandon A. Dalmer
  • // Studio
    • Sourcery
    • Artifical Aesthetics
    • Glossery of Terms
  • // Codecs
    • Vector Bending
    • Image-2-Text
    • HEX
  • // FILES
    • Pen Lift [with suspension]
    • Airbrush [servo motor]
Powered by GitBook
On this page
  1. // Codecs

Vector Bending

PreviousGlossery of TermsNextImage-2-Text

Last updated 6 months ago

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 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
<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**

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


Recolor


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:

, are based on 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 . 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:

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 . 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.

This is where the magic happens. This program is essentially translating a vector file into a , 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.

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 . A nostalgic source of computing for me.

.SVG files [vectors], opposed to .JPEG files [rasters]
XML
connect the dots puzzle
Processing
String
16 unique colors of the Commodore 64 system
Youtuber Sam Battle or Look Mum No Computer
Original Image
Example Output 01
Example Output 02
Example Output 03
THE FURBY ORGAN, A MUSICAL INSTRUMENT MADE FROM FURBIES -
https://www.youtube.com/watch?v=GYLBjScgb7o