Melanie Richards

Text

Melanie Richards

Text

4) Data Structures: Objects and Arrays

  • method: a property that contains a function
  • Some array methods:
    • push: add to end
    • pop: remove value at end and return it
    • join: flatten an array of strings; argument is the string that joins these values
    • shift: add value to start of array
    • unshift: remove value from start of array
    • indexOf: first index of value in array (or -1 if not found)
    • lastIndexOf: what it says on the tin
    • slice: "takes a start index and an end index and returns an array that has only the elements between those indices"; start value = inclusive, end value = exclusive
    • concat: combine arrays
  • object: arbitrary collection of properties
  • An array has type of "object"
  • object operators:
    • delete: not very common; completely destroys prop from object
    • in: Boolean value, whether property in object
  • Numbers, strings, and Boolean values are all immutable; object property values are mutable
  • A map is a way to go from values in one domain to corresponding values in another domain
  • arguments: special object representing a function's arguments; unfortunately does not have array methods

5) Higher-Order Functions

  • higher-order functions: functions that operate on other functions, either by taking them as arguments or by returning them
  • forEach(), filter(), map(), reduce() are standard methods on arrays
  • Functions have an apply() method; you pass it arguments, and it will call the function with those arguments
  • JSON.stringify and JSON.parse convert data to and from JSON
  • A pure function does not modify the data it was given
  • Code elegance and perf can be opposing forces, however
    • Perf matters less when handling small data sets, or say, doing something when the user presses a button and the difference in time is not noticeable

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

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