Week 7: Abstraction

Tuesday, February 16th Overview


  • Review of Color Picker assignment: 3:30-4:20

In Groups of 2, let your partner try out your color picker. One person will act as the "observer", the other person will act as the "user". Observers will give the user their color picker to try out. Observers can provide basic instructions when the user gets stuck, but try to avoid explaining the program that drives the color picker functionality. Users- during your exploration, select one basic palette (3 - 5 colors, or whatever constraints enabled by the system). Screen capture your selected palette for use in the group discussion. (You many have to perform multiple screen-captures for pickers that only enable the selection of one color at a time)

Engage in a short discussion with your partner (7 minutes).

  • How did the color picker constrain your selections in ways that were useful, interesting, or productive?

  • How did it constrain you in ways that were undesirable or limiting?

  • What elements of the interface were the most confusing or counterintuitive and why?

  • What elements of the interface were the easiest to discover?

Follow with a joint group discussion where we talk about the results of the observation.

What was unexpectedly challenging or difficult about designing the color picker?

How did you approach making decisions between the appearance and functionality of the interface and the ways in which you wanted to enable people to interact with color?

How did working with these new color pickers make you think about color in a different way?


  • Break: 4:20-4:30

  • Computational Abstractions for Creative Expression: 4:30-5:10

    • Aspects of Programming Languages and Abstractions

Victor argues that all languages should provide:

  1. Identity and metaphor -- how can a person relate the computer's world to their own?

  2. Decomposition -- how does a person break down their thoughts into mind-sized pieces?

  3. Recomposition -- how does a person glue pieces together?

  4. Readability -- How does a person understand what individual terms mean?

  • Processing and OpenFrameworks

    • Identity and metaphor -- Programming as sketching. The programming environment as a sketchbook.

Drawing metaphor: The painter's algorithm- the system places shapes on the screen in the order they are specified, similar to drawing on the canvas.
Global state defines drawing operations.

Users create visual output by combining simple geometric primitives and stylistic operations with general purpose programming abstractions.

    • Decomposition -- Top-level drawing and interaction functions (ie Draw and mouseDown) combined with user-defined functions and classes.

    • Recomposition -- Numerous simple example programs are provided to demonstrate the functionality of the language. Users build off an individual example, or make edits to recombine existing examples.

    • Readability -- Drawing primitives use visual-art related terminology.

  • Dataflow

VVVV

Grasshopper (for CAD)

Nodebox (for vectors)

  • Identity and metaphor--Builds off the digital-signal-processing metaphor. Geometry is represented as data that is "filtered" through a series of operations in linear sequence to produce a target outcome. Programs are represented as a directed graph where operations are represented as nodes, and uni-directional edges specify control flow.
    Repeating operations are performed by passing lists (spreads) of objects to a node, which will operate on each object in sequence, rather than by defining explicit loops.

  • Decomposition -- In some data-flow languages, subroutines can be created by abstracting an existing graph into a node with pre-defined inputs and outputs. Dataflow languages may also incorporate other abstractions- ie VVVV adds the ability to also program in a visual object-oriented representation.

  • Recomposition -- Dataflow's graph structure lends itself to visual representation. Visual languages can be more-easily modified and manipulated in an exploratory manner in comparison to text-based languages. Many nodes accept different data-structures and dynamically adjust their functionality according to the input.

  • Readability -- Nodes frequently correspond to operations in direct-manipulation based CAD and graphics tools. Node functionality based on input datatype is often obscured to the user.

  • Logo

  • Identity and metaphor--Programming is structured around sending commands to a "turtle" which can draw lines as it moves. Programmers are encouraged to identify with the turtle and solve geometric operations in a body-syntonic context.

  • Decomposition -- Uses the metaphor of teaching the turtle a new word to describe the process of creating user-defined functions.

  • Recomposition -- Turtle state is equivalent with global state and will determine output of subroutines until explicitly modified.

  • Readability -- Language syntax is minimal, reducing range of terminology. Operations focus on turtle actions (forward, left, right) conditionals, and repeats.

  • SmallTalk

  • Identity and metaphor-- Objects interact exclusively by sending messages to one another. When modifying the object's functionality the programmer casts herself in the role of the object i.e self.

  • Decomposition -- Everything is an object, even classes, blocks (closures), activation records, etc. Structures object oriented programing around the definition of goals for each object.

  • Recomposition -- Object functionality is solely subject to its interpretation of a received message. Essentially a server-like relationship where every object is a server offering services whose deployment and discretion depend entirely on the server's notion of relationship with the servee.

  • Readability -- Arguments are provided context with via function naming.

  • Scratch

  • Identity and metaphor-- Programming as storytelling where actions occur in sequence. Code associated with sprites- characters, backgrounds and other graphical elements. Sprites communicate with one-another via messaging inspired by SmallTalk.

  • Decomposition -- Users can define their own blocks, though this functionality was implemented with caution due to the concern that it would raise the ceiling of the platform for new programmers.

  • Recomposition -- Multiple block "threads" can exist simultaneously for the same sprite. All published programs are inspectable and cloneable by default. Backpacks enable users to store code and assets and share them between projects.

  • Readability -- Block geometry specifies how it can be combined with other blocks and what arguments it can accept. All code is organized in a palette and available to access directly in the programming environment.

  • Dynamic Brushes

  • Identity and metaphor-- Programming centered on the creation of brushes: interactive agents that accept stylus input and output strokes on the canvas. Brush behaviors are determined by declarative data bindings between live input and brush geometric and stylistic properties. Mappings can be activated and deactivated through stylus-event driven transitions.

  • Decomposition -- Uses a modified object-oriented paradigm. Brushes can be manually activated by the artist, or dynamically instantiated by other brushes.

  • Recomposition -- Brush functionality is encapsulated within the brush behavior definition. Multiple brushes can be active simultaneously, but must have a parent-child relationship to interact with one-another.

  • Readability -- Brush state is represented in a geometric format on the canvas. Generators are visualized relative to the canvas.


Assignment

  • Reading

Reflections on Designing Construction Kits for Kids by Mitchel Resnick and Brian Silverman

OPTIONAL READING: Learnable Programming by Bret Victor

Extending Manual Drawing Practices with Artist-Centric Programming Tools by Jennifer Jacobs, Joel Brandt, Radomir Mech, and Mitchel Resnick

  • Complete a reading reflection in the slide deck by Wednesday, 6pm