Melanie Richards

Text

Melanie Richards

Text

So you want to build a generator…

  1. Write down what you want to make, as specific as you can ("The easiest generators to make are the ones where you can describe “good” artifacts as sets concrete properties")
  2. What makes a good one of these? A bad one?
  3. List constraints: things that absolutely must not happen

Methods that make a good generator allow the computer/machine to:

  • Encapsulate knowledge of options (skill A)
  • Create some structure (skill B)
  • Encode conditional rules for options (A2)
  • Create variability in structure (B2)
  • Be able to ask itself questions about its constraints (have I solved this?) (skill C)

Types of generator methods

  • Distributive: distribute a collection of items over space and/or time
  • Parametric: tweak an already well-made object
  • Tile-based: equal divisions of space/time/whatever, pre-made items randomly fill that space (think Settlers of Catan)
  • Grammar: making something large and complex out of smaller items, perhaps several layers of these (example)
    • Tracery library

Constraint solvers

  • Brute force solving: creating every possible option for the generator to pick through
  • General purpose solvers: plug in some values for constraints etc and it will help you find shortcuts
  • Steering behaviors (don't really understand what this is, need to look more into it)
  • Genetic algorithms

Aesthetics

  • 10,000 Bowls of Oatmeal problem: "I can easily generate 10,000 bowls of plain oatmeal, with each oat being in a different position and different orientation, and mathematically speaking they will all be completely unique. But the user will likely just see a lot of oatmeal..."

Melanie Richards

Text

Melanie Richards

Text

Melanie Richards

Text

Eloquent JS

1. Values

  • type coercion: conversion from one data type to another, often when an operation is applied to the "wrong" type of value, leading to unexpected behavior/results
  • Receiving NaN as a value is a good code smell for accidental type conversions
  • 0, NaN, and empty strings are considered false
  • Use === and !== if you don't want automatic type conversions (should pretty much be in the habit of doing this)
  • || can be used to provide a default value; for example if you have an empty string generated by some other operation, you can supply the value on the other side of the || instead. Ex: console.log(null || "user")

2. Program Structure

  • expression: a fragment of code that produces a value
  • statement: the "sentence" of a program. The simplest in JS would be an expression with a ; after it.
  • side effects: changes created by the function/expression outside its scope
  • bindings hold variables. var, let, const
  • const value cannot change
  • Executing a function is called invoking, calling, or applying it
  • arguments: values given to a function
Types of control flow
  • Straight line, one statement after another
  • Conditional execution (if / else if / else)
  • while and do loops: go back to some point in the program where we were before and repeat it with our current program state
    • while (condition) {}
    • "A do loop always executes its body at least once, and it starts testing whether it should stop only after that first execution. To reflect this, the test appears after the body of the loop.
    • do { yourName = prompt("Who are you?"); } while (!yourName);
  • Number.isNaN: standard function that returns true only if argument is NaN
  • break; statement can specially jump you out of a for loop
switch (prompt("What is the weather like?")) { case "rainy": console.log("Remember to bring an umbrella."); break; case "sunny": console.log("Dress lightly."); case "cloudy": console.log("Go outside."); break; default: console.log("Unknown weather type!"); break; }

^ Make sure to include break; where you need it!

Notes on exercises

  • A way to make "fizzbuzz" more efficient is to write console.log(myString || i) instead of doing a third check to see that 3 and 5 don't go evenly into i (after checking individually that they do)

3. Functions

  • A function's body contains the statements that are to be executed when the function is called
  • A return statement determines the value the function returns
  • A return keyword without an expression after it will cause the function to return undefined (also the case if no return statement)
  • global scope applies to the entire program; within functions the scope is local
    • Each time a function is called, the local bindings are created again
  • lexical scoping: scope is dependent on where the binding is defined. In JS, each local scope can "see" the scopes that encapsulate it, but not vice-versa.
  • A function's body can be redefined:
let launchMissiles = function() { missileSystem.launch("now"); }; if (safeMode) { launchMissiles = function() {/* do nothing */}; }

4. Data structures: objects and arrays

Arrays
  • array: data structure for storing a sequence of values. Ex: [1, 2, 3] or ["a", "b", "c"]
    • myarray[#] to get value from the array, where # is the item's index
Properties
  • Most JS values have properties; exceptions are null and undefined
  • Accessed like value.prop or value[prop]. Dot notation is for literal properties (like length), bracket notation gets evaluated
Methods
  • Properties that hold function values are the method of the value they belong to
Objects
  • Arbitrary collections of values

Syntax:

let myObject = { foo: "bar", sample: "code" };

A value could be an array, and you can have an array of objects (each object still wrapped in brackets).

  • delete completely removes a property from an object; uncommon
  • Can also set a property to undefined
  • in operator tells whether a property is in an object. Ex: "foo" in myObject
  • Object.keys function returns an array of properties in an object. Ex: Object.keys(myObject)
  • Object.assign copies properties over to an object: Object.assign(myObject, {b: 3, c: 4}); where myObject is target object

Melanie Richards

Text

Research

  • Draplin kind of composes his logo research in an interesting way: different artboards for each concept that could be incorporated, artboards for just shapes

Shape

  • Often, pleasing logos have a symmetry (Saul Bass, Paul Rand)
  • How can you break down something complex into simple, pleasing, possibly symmetrical shapes? Perhaps you take a part to stand for the whole? (good ex. is NBC logo where plumes stand in for a peacock)
  • One thing I've noticed about logos/illustrations I like is that the designer will use familiar shapes and icons, but give it some little twist or differentiating detail. Spending time making variants seems like a good idea for this reason.
  • Grids you can use for keeping your logo consistent: dot, square, isometric, other angles (30deg lines, for example)
  • Curves, in this case, would then bisect the grid blocks
  • Sometimes, it helps to visually balance positive and negative space by making the negative space slightly smaller than the positive space next to it. Same principle as white on black feeling heavier than black on white.

Typography

  • How can you match the qualities of the shapes/linework in your typeface selection?
  • Ways to play with type/wordmarks:
    • Clip a corner or shape
    • Leave cross bars or other shapes open
    • Find rhythms or through-lines between characters
    • Extend letters to create shapes
    • Exaggerate shapes
    • Play with contrasts of thick and thin
    • Unexpected angles and curves

Workflow

Personally, a good one seems to me:

  1. Gather references, research, concepts
  2. Sketch loosely on paper
  3. If appropriate, "grid" the logo on paper
  4. Take to digital B&W
  5. Choose colors

With the caveat: there's always room for goofing around and exploring in the gridded or digital context, and sometimes formal play can yield interesting results.

Digital workflow

  • Before tinkering with an option, duplicate it in the file so you don't lose the history of the mark's evolution
  • Complex and scary-looking forms can be broken down into simple shapes

Etc

  • Always ask yourself: what is the cheapest way to do this project? That might yield some refreshing and creative production ideas

Sources

  • Logo Design with Draplin: Secrets of Shape, Type and Color
  • Dynamic Brand Identity: Designing Logos That Evolve
  • Logo Design with Grids: Timeless Style from Simple Shapes (worth a re-watch)

Melanie Richards

Text

Melanie Richards

Text