Today’s Groups

Today’s Groups

Homework Review

Random Strategies Recap



Slides: Parameters



A Blue Square


Imagine a program that generates images, including the one above. What parameters might such a program accept?

Parameters and Interface Design


An interface is the common boundary between two systems. Two of the most important interfaces of software systems are user interfaces (UIs) and application programming interfaces (APIs).


Parameters are factors that control what how a system operates. Exposing parameters allows artists and designers to create systems that can be controlled by others. Choosing which parameters to expose is a core concern of software interface design.

What to Expose


Presenting your Interface

Once you have decided on what to expose via your interface, you must consider how to communicate your interface options to your users.


Feedback shows users the impact their actions have on the system. Without feedback, systems are very hard to learn and use.

In simple cases, showing users the end result of their choices is often enough. In more complex situations, it is often helpful to provide intermediate feedback. For example, if a system will react slowly to user actions, providing immediate confirmation of user input is important.

Parameter Space

A parameter space is the set of all possible combinations of values for the parameters of a system. The parameter space can grow very quickly. A system that has 8 boolean (yes/no) parameters will have 256 possible states. A system with 16 boolean parameters will have 65,536 states. A system that takes just two floating point parameters has 9,223,372,036,854,775,808 (9.2 Quintillion!) states. This is a basically inconceivably large number, but it is quite likely that many of those states would look samey.

Keep Your User in Mind

The way that you think about your software system is often very different from the way your users think about it.

Parametric Design

Parametric Design is a design approach where designs are built as systems which can be influenced by provided parameters. For example a parametric bicycle design might consider the rider’s height to provide a customized frame.


Parametricism is a style within contemporary avant-garde architecture, promoted as a successor to post-modern architecture and modern architecture.

Wikipedia: Parametricism

Activity: Fictional Machines

Begin designing a user interface for a fictional machine by considering which parameters you would expose.

  1. Choose a machine from the list below.
  2. Spend 6 minutes brainstorming possible parameters for your machine.
  3. Choose a user from the list below.
  4. Spend 3 minutes deciding which parameters to expose for your user. Choose exactly 3 parameters.
  5. Spend 3 minutes naming your parameters, and defining the allowed values for each.
  6. Present your machine, user, and chosen parameters to the class. You will have 2 minutes to present.

Machine Types


Globals as Interfaces

A quick-and-dirty way to make your comp form sketches “tweakable” is to use global variables for your parameters and group them at the top of the script.

p5.js Dom Interfaces

The p5 Dom Library provides functions that allow you create html elements and user interface controls. This is a much better choice if you want anyone else to adjust your parameters.

var pos_x_slider, pos_y_slider, size_slider;

function setup() {
    createCanvas(640, 360);

    createP('Horizontal Position');
    pos_x_slider = createSlider(0, width, width * .5);
    createP('Vertical Position');
    pos_y_slider = createSlider(0, height, height * .5);
    size_slider = createSlider(10, 200, 100);

function draw() {

    var pos_x = pos_x_slider.value();
    var pos_y = pos_y_slider.value();
    var size = size_slider.value();

    rect(pos_x, pos_y, size, size);

Get to Know p5

If you havn’t used the following features of p5, take a look. p5 Reference


Working with color in terms of hue, saturation, and brightness is often much better than RGB. Use colorMode() to switch to HSB colors, and to choose your range (0-255, 0-100, 0-1).

ellipseMode(), rectMode()

Sometimes the clearest way to draw a ellipse is to specify the bounding box corners. Sometimes the center and width/height makes more sense. Use these functions to switch how ellipse() and rect() use their arguments.

push() + pop()

Normally if you change your drawing state (fill color, stroke weight, etc), it stays changed after you do your drawing. push() and pop() let you save and restore your state.

lerp(), lerpColor()

These functions let you interpolate between two values.


Use map() to remap values from one range to another.


Keep Sketching! Continue experimenting with procedurally generated images, this time focusing exposing parameters and exploring the parameter spaces of your sketches. You can mix random and parametric elements, but I suggest doing at least a couple of sketches that are not random at all.

Special Assignment

Later in this class I will ask you to create special sketches using equipment available to you through The New School. If you havn’t used the following equipment before, you should sign up for orientations. Be ready to use this equipment by the sixth week of classes.

Bonus Sketches using these tools and posted in the first 5 weeks of class will count as two sketches. Limit one double sketch per week. Limit one double sketch per tool.


Build a face generating tool. This tool will create an image of a face that can be adjusted by the user with sliders and other inputs.

Related Links

[plan.html](Today’s Lesson Plan)