loading

code


Cuneiform script, one of the earliest known systems of writing

Machine Code



as we learned last week computers only “understand” binary code, also known as machine code or sometimes object code. machine code, however, doesn’t have to be written in binary. to make it a bit more palatable we usually write machine code in hexadecimal code ( or hex ). hex is base 16 and uses the following 16 characters: 0 1 2 3 4 5 6 7 8 9 A B C D E F. it’s very rare that you’ll ever have to deal with machine code, but when you do, it’ll likely be written in hex.



decimal

0
1
2
3
4
5

10
11
12

100
125
255
binary (byte)

00000000
00000001
00000010
00000011
00000100
00000101

00001010
00001011
00001100

01100100
01111101
11111111
hexadecimal (byte)

00
01
02
03
04
05

0A
0B
0C

64
7D
FF

Programming



People imagine that programming is logical, a process like fixing a clock. Nothing could be further from the truth. [...] The problem with programming is not that the computer isn't logical --the computer is terribly logical, relentlessly literal-minded. Computers are supposed to be like brains, but in fact they are idiots because they take everything you say completely at face value. I can say to a toddler, "Are yew okay tewday?" But it's not possible for a programmer to say anything like that to a computer. There will be a syntax error

Ellen Ullman 1


Paper Programs





the "first" program ever written ( 1840's )
Ada Lovelace



Manchester Mark1 ( late 1940's early 50's ) initially programs were input by key switches ( eventually whole punched tape ) and output dots and dashes on a CRT

punch card programming


Assembly



assembly code to add 4 and 3
section .text
global _start

_start:
mov eax, '3'
sub eax, '0'

mov ebx, '4'
sub ebx, '0'
add eax, ebx
add eax, '0'

mov [sum], eax
mov ecx,msg
mov edx, len
mov ebx,1
mov eax,4
int 0x80

mov ecx,sum
mov edx, 1
mov ebx,1
mov eax,4
int 0x80

mov eax,1
int 0x80

section .data
msg db "The sum is:", 0xA,0xD
len equ $ - msg
segment .bss
sum resb 1

more or less one-to-one relationship with machine code. cpu-specific language
machine code to add 4 and 3
7f45 4c46 0101 0100 0000 0000 0000 0000
0100 0300 0100 0000 0000 0000 0000 0000
4000 0000 0000 0000 3400 0000 0000 2800
0800 0400 0000 0000 0000 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0000
0000 0000 0000 0000 0100 0000 0100 0000
0600 0000 0000 0000 8001 0000 4d00 0000
0000 0000 0000 0000 1000 0000 0000 0000
0700 0000 0100 0000 0300 0000 0000 0000
d001 0000 0d00 0000 0000 0000 0000 0000
0400 0000 0000 0000 0d00 0000 0800 0000
0300 0000 0000 0000 e001 0000 0100 0000
0000 0000 0000 0000 0400 0000 0000 0000
1200 0000 0300 0000 0000 0000 0000 0000
e001 0000 3600 0000 0000 0000 0000 0000
0100 0000 0000 0000 1c00 0000 0200 0000
0000 0000 0000 0000 2002 0000 9000 0000
0600 0000 0800 0000 0400 0000 1000 0000
2400 0000 0300 0000 0000 0000 0000 0000
b002 0000 1c00 0000 0000 0000 0000 0000
0100 0000 0000 0000 2c00 0000 0900 0000
0000 0000 0000 0000 d002 0000 1800 0000
0500 0000 0100 0000 0400 0000 0800 0000
b833 0000 0083 e830 bb34 0000 0083 eb30
01d8 83c0 30a3 0000 0000 b900 0000 00ba
0d00 0000 bb01 0000 00b8 0400 0000 cd80
b900 0000 00ba 0100 0000 bb01 0000 00b8
0400 0000 cd80 b801 0000 00cd 8000 0000
5468 6520 7375 6d20 6973 3a0a 0d00 0000
002e 7465 7874 002e 6461 7461 002e 6273
7300 2e73 6873 7472 7461 6200 2e73 796d
7461 6200 2e73 7472 7461 6200 2e72 656c
2e74 6578 7400 0000 0000 0000 0000 0000
0000 0000 0000 0000 0000 0000 0000 0000
0100 0000 0000 0000 0000 0000 0400 f1ff
0000 0000 0000 0000 0000 0000 0300 0100
0000 0000 0000 0000 0000 0000 0300 0200
0000 0000 0000 0000 0000 0000 0300 0300
1000 0000 0000 0000 0000 0000 0000 0200
1400 0000 0d00 0000 0000 0000 0000 f1ff
1800 0000 0000 0000 0000 0000 0000 0300
0900 0000 0000 0000 0000 0000 1000 0100
0061 6464 2e61 736d 005f 7374 6172 7400
6d73 6700 6c65 6e00 7375 6d00 0000 0000
1600 0000 0104 0000 1b00 0000 0103 0000
3100 0000 0104 0000 0000 0000 0000 0000

abstraction





Grace Hopper
FLOW-MATIC code to add 4 and 3
INPUT FIRST FILE=A SECOND FILE=B,
OUTPUT SUM FILE=C;
HSP D.
ADD A TO B
TRANSFER B TO SUM
CLOSE-OUT FILE SUM
STOP.

disclaimer: that's not super accurate FLOW-MATIC code ( it's an obscure langauge, but that's as close as i can approximate what it might look like to add 4 to 3 ...assuming those numbers are in the 'FIRST' and 'SECOND' files )


Admiral Grace Hopper, invented the first* compiler. the code above is an example of FLOW-MATIC, the first "english-like" language developed under Admiral Hopper ( which eventually led to COBOL ). Admiral Hopper also popularized the idea of machine-independent programming languages which is generally how we think of programming languages today.



"C is as big a deal as you can get in computing. Created by Dennis Ritchie starting in the late 1960s at Bell Labs, it’s the principal development language of the UNIX operating system. Unix (lowercased now, to refer to the idea of Unix instead of the branded version) is a simple operating system—basically it’s a kernel that manages memory and runs software, a large collection of very small utility programs, and a “shell” that helps you knit programs into “shell scripts.” If you couldn’t do what you needed with shell scripts, you might write a new utility in C and add it to the utility library. This was a nice and practical way of working, and it coincided with the rise of various kinds of networks that today we refer to collectively as the Internet. So Unix spread from Bell Labs to academia, to large industrial systems, and eventually leached into the water supply of computing until it was everywhere. And everywhere that Unix went, C was sure to go."



#include <stdio.h>

int main(void){
int A = 4;
int B = 3;
int sum = A + B;

printf("The sum is %d", sum);
printf("\n");
}

yet another implementation of the idea of 4 added to 3

"C is a simple language, simple like a shotgun that can blow off your foot. It allows you to manage every last part of a computer—the memory, files, a hard drive—which is great if you’re meticulous and dangerous if you’re sloppy." 2





code = software = concept = art

"Software, Information Technology: Its New Meaning for Art. Art historian Jack Burnham curated the show in 1970 at the Jewish Museum [...] Technology in art, for Burnham, was meaningful only to the extent it contributed to stripping away signifiers to reveal the mythic structure of art.Ý Perhaps we a getting close to a moment in which the deconstruction of artís mythic structure is approaching completion.Ý And perhaps information technology has become, as Burnhamís own theory demanded, 'pervasively, if not subconsciously present in the lifestyle of [our] culture," such that its aesthetic implications are sufficiently manifest to play a constructive role in proposing new artistic paradigms'"3




"Triangulate your thoughts", collaborations between conceptual artist Agnes Denes (right) and the rag-tag punk computer-wiz-kid crew: the R.E.S.I.S.T.O.R.S. (left)
"Interactive Paper Systems" by Sonia Sheridan ( example )5



Ted Nelson ( left ) in collaboration with programmer Ned Woodman created an interactive exhibiion catalog for the show called "Labyrinth", "by choosing their own narrative paths through an interlinked database of texts, then receive a print-out of their particular "user history." The self-constructed, non-linear unfolding of Labyrinth shares affinities with structuralist critiques of authorship, narrative structure, and "writerly" (as opposed to "readerly") texts, made by Barthes. [...] It should be noted that this first public exhibition of a hypertext system occurred, and this was perhaps not just a coincidence, in the context of experimental art."3

The strange revolution of our information environment has only begun; yet it has begun in such an obscured and clouded form that the public sees only various meaning less disguises. The all-purpose machine, as von Neumann called it, has been falsely promulgated to the public as the socalled computer, numerical, uncompromising, demanding and intractable. [...] I would like to employ the word cybercrud to mean, in general, putting things over on people using computers. [...] The promotion of false or clumsy approaches to a problem as "scientific," the frequent claim that "the computer has to have it that way" [...] The new age will not be "scientific." The word "scientific" is obsolete [...]The technological imperative is a fake, computerization can take whatever form we wish it to; therefore we must learn about computers in orde rto wish better. As Burnham says at the end: "...Software makes none of the usual qualitative distinctions between the artistic and technical subcultures. At a time when esthetic insight must become a part of technological decision-making , would such divisions make sense?"

Ted Nelson 4






"The idea becomes a machine that makes the art"
Sol Lewitt 6







Sol Lewitt




Yoko Ono


Drawing with code



"This idea of emergence is that you put a few simple rules together and something comes out of that which is entirely unexpected and moves beyond what you could imagine those simple rules producing. So if you're a composter the final piece you produce is a score, that is your end piece, and I think of a lot of the software that I write as being a score. In the case of a music performance every performance is different because the performer injects their own interpretation on top of that. In my case every time the software is performed it's performed differently in software by the computer and some elements perform differently each times." — Casey Reas







"Code is my art more than the visuals that the code actually produces. Gesture makes way for independent algorithmic systems. The hell with humans... let's play god" — Joshua Davis



JavaScript



German media and literary theorist Friedrich Kittler wrote that students today should know at least two software langauge: only "then they'll be able to say something about what 'culture' is at the moment"

Lev Manovich 7




"[Netscape, 1995 ] displayed Web pages that were not very lively. You could have a nice cartoon of a monkey on the Web page, but there was no way to make the monkey dance when you moved over it with your mouse. Figuring out how to make that happen was the job of a language developer named Brendan Eich. He sat down and in a few weeks created a language called JavaScript [...] as browsers proliferated and the Web grew from a document-delivery platform into a software-delivery platform, JavaScript became, arguably, the most widely deployed language runtime in the world. If you wrote some JavaScript code, you could run it wherever the Web was—everywhere."2
popularity of languages on github from 2008 - 2013


functions



in programming each line of code is an instruction to the computer. just like we end every sentence with a period when we write english, in javascript, typically we end each line with a semicolon: ;. the following line draws a rectangle ( edit the number values to see how the ellipse changes ).




javascript syntax breakdown ( what does it all mean )




the screen's coordinate system






variables



we use variables to store data, think of them like buckets, you can store all kinds of stuff in buckets like water. and if you later decide you don't want to store water in your bucket you can poor it out and store sand in that bucket instead. variables are like code buckets for data.





there's a few different kinds of data types we can store in variables, these include numbers ( which can be either whole numbers called integers or decimal numbers called floats ) or these can be words ( these are called strings and always have to be surrounded by quotes ).

you can name variables whatever you want, so long as you start with var ( to declare a new variable ) and use the proper syntax, in this case the = after the name and the ; after the value.


  var age = 28;		// integer value
  var height = 5.9;	// float value
  var name = "nick";	// string value

  var me = name;	// returns "nick"

  age = 29;		// overrides age





arithmetic

	var a = 4;
	var b = 3;
	var sum = a + b; // sum i 7

	sum = a - b; // sum is now 1
	sum = a * b; // sum is now 12
	sum = a / b; // sum is now 1.333...


	// incrementing values
	a = a + 1; // a is now 5

	// another way to increment by a number is
	a += 1; // a is now 6 

	// and to decrement
	a -= 1; // a is now back to 5

color



you can change the fill color of a shape by using the fill() function, likewise you can change the outline (or stroke) of a shape by using the stroke() function. you can also remove the stroke and/or fill by using the noStroke() and noFill(). the stroke and fill functions can take different kinds of arguments. to the right are a few different ways of doing the same thing ( changing the color to red );


  fill('red');

  // r, g, b ( from 0 - 255 )
  fill(255,0,0); 

  // fourth parameter is alpha (transparency)
  fill(255,0,0,150)

  // 3 digit hex rgb code; 
  fill('#f00');  

  // 6digit hex rgb code
  fill('#ff0000'); 

  // rgb percentage string
  fill('rgb(100%,0%,0%)'); 




photoshop color picker tool

there are only so many colors that have names ( green, purple, pink ). if you want to assign a specific color in your fill or stroke you need to use numerical values.

These come in different forms the most common is HEX which looks like "#00ff33",

or RGB which looks like
"rgb( 0, 255, 204 )"

or RGBA with the A ( or fourth parameter ) being used to specify alpha ( transparency )





decisions




coding decisions into your compositions are called “conditional statements” in programming lingo ( sometimes also boolean tests after George Boole from our week 2 lecture ). you create these decisions ( or conditional statements ) by asking questions in the form of boolean expressions: ( x > y ) which reads “is x greater than y” ( where x and y are variables declared beforehand ). then you can write different outcomes to be executed depending on whether the answer is true or false. here are a few different ways to structure your conditional statements.


//an ultimatum...............................
if(boolean expression) {
	// code that runs if the expression is true
}

//a fork in the road.........................
if(boolean expression) {
	// code that runs if the expression is true...
}
else {
	// ...but if it's false run this code
}

// a few options...............................
if(boolean expression 1){
	// if expression 1 is true run this
}
else if(boolean expression 2){
	// if not, check if expression 2 is true
	// and if expression 2 is true run this
}
else if(boolean expression 3){
	// if neither 1 or 2 are true
	// but expression 3 is true run this
}
else {
	// if 1, 2 and 3 are all false run this
}


we use relational operators to ask our questions, these are == (equal to), != (not equal to), > (greater than), >= (greater than or equal to), < (less than), <= (less than or equal to). so for example the expression if(x==y) asks if x is equal to y ( if it's exactly the same value ), the expression if(x<=y) asks if x is less than or equal to y, if it is the statement returns true otherwise it is false.

we can combine more than one question in a single expression using logical operators: && ( and ), || ( or ). so for example if(x<y && x>z) asks if x is less than y and also if x is greater than z ( in other words is the value of x somewhere inbetween z and y )



loops




let’s say we want to draw tons of circles ( maybe dozens maybe hundreds! ) that’s gonna be a lot of code because we’ll have to call our ellipse() function tons of times. one way to avoid having to type the same thing over and over again is to use a kind of loop called a for loop





in the example below we create a for loop that starts a variable ( i ) at 0, and it increments it by 40 each loop. the loop is set to keep going until it reaches 200, and because 40 goes into 200 5 times, the loop should run 5 times and we should get 5 circles on the screen.





a few more usefull tools



we can generate random values between two numbers with the random() function. the example below also makes use of the global width and height variables, these return the width and height of the page ( which varies depending on the size of your browser )




	// random number between 0 and however wide the page is
	var rX = random( 0, width ); 

	// random number between 0 and however tall the page is
	var rY = random( 0, height );

	// random number between 100 and 200
	var rS = random( 100, 200 );

	// this draws a circle randomly on the screen
	ellipse( rX, rY, rS, rS );




while you can’t rotate shapes per se, you can rotate() the entire canvas before drawing. To define the rotation point, we need to first translate() ( move ) the canvas such that the top left corner of the canvas lies on the desired rotation point.









putting it all together




open full page editor




before we continue writing any more code it’s important to open up your “console”, firefox's javascript console can be opened by clicking option + command + K on Mac ( or control + shift + K on PC ) or in the menu Tools > Web Developers > Web Console. the console will let us know if we made a mistake in our code and which line the mistake is on. the console is also a place for testing out javascript, for example if you type the follow code and hit enter: width. the console should return the width of your page ( which is different for everyone depending on how wide they have their window open )



homework



watch How Algorithms Shape our World by Kevin Slavin

then watch Algorithms Are Taking Over The World, by Christopher Steiner

then listen to the Radiolab Podcast on Facebook's "Trust Engineers"





keep working on the sketches we started in class. submit one of you images below


endnotes

  1. Ullman, Ellen. Out Of Time: Reflections on the Programming Life. Educom Review Vol.31 Issue4. 1996.
  2. Ford, Paul. What Is Code. Bloomberg Business. June 11, 2015. ( the whole issue! )
  3. Shanken, Edward. The House That Jack Built: Jack Burnham's Concept of "Software" as a Metaphor for Art. Leonardo Electronic Almanac. Nov 1998
  4. Nelson, Theodor H. The crafting of Media. Software, Information technology: its new meaning for art. 1970.
  5. Sonia Sheridan Biography
  6. LeWitt, Sol. Paragraphs on Conceptual Art. Artforum. 1967.
  7. Manovich, Lev. Software Takes Command. Bloomsbury Publishing. 2013.