Some answers for quizzes for the first half of class

quiz_answers.md

List two examples of a "programme" that Gerstner lists in your reading.

In Karl's words:

• "Programme as Logic"
• "Programme as morphology"
• "Programme as grid"
• "Programme as commercial design"
• "Programme as computer graphics"
• "Programme as movement"
• "Programme as squaring the circle"
• "Programme as literature"
• "Programme as music"
• "Programme as city planning"
• "Programme as design for the future"

Write JavaScript code to declare a variable named cats and assign it the string value "meow".

var cats = "meow";

Now write a JavaScript function that outputs your cats variable to the browser console.

function goCats() {
  console.log(cats);
}

Name three programming languages mentioned in "What is Code?"

To name a few:

• JavaScript
• Python
• PHP
• Clojure
• Cobol
• LISP
• C
• Java
• Ruby
• Smalltalk
• C#
• C++

What is code?

Write JavaScript code to declare a variable named dogs and assign it the string value "woof".

var dogs = "woof";

Now write JavaScript code to output your dogs variable to the browser console

console.log(dogs);

Now write a custom JavaScript function that outputs your dogs variable to the browser console.

function goDogs() {
  console.log(dogs);
}

Now write JavaScript code to print the text of your dogs variable to the canvas using p5.js

Use the text function:

text(dogs, width/2, height/2);

What is "subtraction of color" as described by Albers?

Hold plate VII-4 with the deep green ground on the left, and the light grey ground on the right.

Below them are 2 contiguous horizontal stripes, the upper one a brownish-green on top of a thin ochreous yellow.

The small rectangles in the centers of the large rectangles seem to be alike.

For the best simultaneous comparison do not look from one center to the other but focus firmly on a point in the middle between them, which will be within the boundary of the grounds.

This is a courageous example of making very different colors look alike. It proves that its author understood the meaning of "subtraction of color." In other words, how to get rid of too much dark or light in a color, or too much hue, as the green or yellow.

Write JavaScript code to declare a variable named fingers and assign it the string value "0".

var fingers = 0;

Now write an if statement that will output one message to the console if fingers is greater than 3, and another message if fingers is less than zero.

if(fingers > 3) {
  console.log("More than three!");
} else {
  console.log("Three or less");
}

Now write a for loop that will keep adding 1 to fingers until it reaches the value 5.

for(var i = 0;  i < 6; i++) {
  fingers = fingers + 1;
  // fingers++;
}

Now write a while loop that decreases fingers until it reaches 0.

while(fingers != 0) {
  // NOT fingers++
  fingers--;
}

What was Vera Molnar's profession?

She was an artist.

Vera Molnar believed that computers would replace human artists because they were better at generating visual compositions (true/false).

False.

"In spite of their advantages, computers, no more than other simpler tools, do not guarantee that a work of art of good quality will result, for it is an artist’s skill that is the decisive factor."

• Vera Molnar, “Toward Aesthetic Guidelines for Paintings with the Aid of a Computer”

What does the p5js translate function do?

The translate function, according to the p5.js reference:

Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation. Transformations are cumulative and apply to everything that happens after and subsequent calls to the function accumulates the effect.

So basically, it move things around on the canvas. An important aspect of this is that it changes the origin, which means it changes where 0, 0 is on the canvas. For example:

rect(0, 0, 55, 55);  // Draw rect at original 0,0
translate(30, 20);
rect(0, 0, 55, 55);  // Draw rect at new 0,0
translate(14, 14);
rect(0, 0, 55, 55);  // Draw rect at new 0,0

Will draw rectangeles in three different locations, even though they are each being drawn with the same x and y.

What color will color(0) give you in p5js?

Black. There are many ways to use the color function, each of which behaves slightly differently. When only a single number is provided, that's shorthand for a greyscale color. color(0) is the same as color(0, 0, 0): 0 red, 0 green, 0 blue (which adds up to no color, or black). Some more examples:

• color(255) -> white (100% red, 100% green, 100% blue)
• color(200) -> light grey (80% red, 80% green, 80% blue)
• color(50) -> dark grey (20% red, 20% green, 20% blue)
• color(0, 0, 255) -> blue (0% red, 0% green, 100% blue)
• color(255, 255, 0) -> yellow (100% red, 100% green, 0% blue)

If you use the color function in p5js with 3 arguments, what does each argument mean?

As explained above, the three arguments are red, green, and blue.

What do you use the beginShape, endShape, and vertex p5js functions for?

You use them for drawing shapes point-by-point, kind of like you might in Adobe Illustrator. For example:

// draw a 50 x 50 square
beginShape();
  vertex(0, 0);
  vertex(50, 0);
  vertex(50, 50);
  vertex(0, 50);
endShape(CLOSE);

// draw a triangle
beginShape();
  vertex(25, 0);
  vertex(50, 50);
  vertex(0, 50);
endShape(CLOSE);

// draw an arrow pointing up
beginShape();
  vertex(25, 0);
  vertex(50, 50);
  vertex(30, 50);
  vertex(30, 100);
  vertex(20, 100);
  vertex(20, 50);
  vertex(0, 50);
endShape(CLOSE);

What is an IDE?

The first line of part 6 in Fords "What is Code" is "One of the privileges of owning a Mac is that you can download a program by Apple called Xcode. This is an IDE, an Integrated Development Environment." If you read the footnote, there's a bit more wisdom:

A language is a way of perceiving the world. A standard library is a way of organizing the world. And an IDE is a way of bringing those things together in a lively and dynamic way.