Skip to content

Latest commit

 

History

History
257 lines (231 loc) · 7.84 KB

notes.md

File metadata and controls

257 lines (231 loc) · 7.84 KB

Readings introduce materials. Lectures cover questions from the reading. Start problem sets in class. Problem sets are due next class.

https://www.scullinsteel.com/apple2/#dos33master

09-07 semester starts

 01 - 09-13 intro / git                         ⬅ git resources
 02 - 09-20 git / html / linking / publishing   ⬅ Reading EJ Intro
 03 - 09-27 html, css, behaviors, code-pen      ⬅ EJ 12, 13 ½
 04 - 10-04 gestalt principles, svg js in dom
 05 - 10-11 js: in the dom                      ⬅ EJ 1, 2, 16
 06 - 10-18 js: variables, types, loops, canvas ⬅ EJ 3
 07 - 10-25 ★ js: functions, random, timing 1   ⬅ EJ 4
 08 - 11-01 js: arrays, objects
 09 - 11-08 js: external functions & libraries. ⬅ EJ5
 10 - 11-15 js: interaction: JSON callbacks.
 11 - 11-22 js: libraries: jquery, lowdash
 12 - 11-29 js: libraries: d3
 13 - 12-06 js: libraries: threejs
 14 - 12-13 ★ FINAL PRESENTATIONS.

Visual Inspiration: Twitter Accounts to troll:

14 days

ARTE 5901.04 Sketching With Code 2016-SWC

4 main topics 3 days each? + 1

Exercise: How to sketch / actual sketching / benefits of sketching / anyone can sketch. Thinking visually & interactively, modeling with pencil.

01: Intro: Set expectations and meet each other. How to communicate. Shape of the course.

  • In class

    • review syllabus
      • draw map of course
    • communication expectations / guidelines
    • post office hours / slack / email
    • about me
    • about students
    • sketches:
      • Yourself as a pokemon or baseball card
      • Yourself as a busines card
      • Map of where you are right now (physically)
      • Mind map
      • share the 1 sketch you find most interesting
    • about problem sets
      • file naming convention 2016-SWC/01/index.html
      • other PS expectations
    • Git & Github review & discussion and demo
      • unixy things
        • commandline
        • paths structures, directories, wildcards
        • ls
      • git from the command line
        • clone / add / commit / push / log /diff
      • git gui clients
        • github cient
        • stree
        • looking at file history
        • looking at differences
      • a few words on good commit style
      • ignoring files with git
      • configuration options
      • github pages for publishing

  • PS:

    • read: (handout) How to critique.
    • watch: git & github for poets
    • create github account
    • create github repo
    • first github page ARTE-5901/01/index.html
      • should include

02: HTML CSS (dom).

  • Lecture

    • Q & A about Git and git problems
    • Editors and editing files
      • webstorm
      • atom
      • vs code
      • alternates (vim / emacs / …)

  • CSS & HTML

    • What they are / how they work together.
    • How network requests happen
    • How browsers render things
    • Debugging and getting help
      • trying things in code pen
      • browser debugging
      • Stack overflow

  • PS:

    • ARTE-5901/02/index.html
    • repo name should be
    • Put up a github pages page.

03: SVG & JS: Gestalt Principles of design (overview).

  • CSS & HTML
    • What they are / how they work together.
    • How network requests happen
    • How browsers render things
    • Debugging: How to look at what the browser is doing.
    • Intro to code-pen.
  • PS:
    • Link to code-pen.
    • Better Hello world page. (sketches multiple)
    • Giving attribution / stack exchange something.

04: HTML CSS: Gestalt Principles of design (overview).

05: Javascript: Program flow, Dom manipulation, Debugging. * Canvas drawing. (SVG or Canvas) * Program flow * Javsript in the browser: How it loads &etc.

06: Javascript: simple variables & loops. The HTML canvas, random numbers. 07: Javascript: Build your own functions(!) 08: Javascript: Interactions / Puppetry 09: Javascript: Better timing and animation. Including libraries. 10: Javascript: ThreeJS 11: Study the masters (copy code?) 12: Javascript: Other tools 13: Final presentations.

  • Software development from 30K feet.
    • Compilation examples C => ASM => Obj code.
    • Similar in web development, at a higher level of abstraction

Technical Topics:

  • Getting help
  • Git / github / code-pen
  • HTML & CSS
    • HTML basics.
      • Including other resources
      • Paths
      • How markup represents content
      • Boilerplate
      • Key elements
        • Head
        • Body
        • Div
        • Span
    • CSS
      • Selectors
        • Specificity
        • Cascades
      • Styling
        • Layout
        • Type
        • Colors
        • Animation
  • Javascript
    • Linear evaluation
    • Web API's (part of the DOM)
      • DOM Interaction
        • Querying and updating without jQuery
        • Handling Events
      • The Canvas API
      • Others (later)
    • Basics
      • Boiler plate in a web document
      • Loading JS files, evaluating JS.
      • Syntax, formatting and nitpicking
    • Elements of programming:
      • Variables:
        • Simple variable 'types': strings & numbers.
        • Pass by value vs Pass by reference
      • Functions:
        • Defining functions
        • Calling functions
        • Passing functions
        • Return values
      • Complex types:
        • Arrays
        • Objects
        • Functions as types

Design Topics / Themes:

  • Gestalt Principles of Design
    • Based on principles of cognition and the layers of the visual cortex. How external stimuli are translated to meaning. (George Mather)
    • Visual elements:
      • Dot
      • Line
      • Shape
      • Direction
      • Tone
      • Color
      • Texture
      • Scale
      • Dimension
      • Movement (implied / real)
    • Gestalt LAWS of perception (grouping)
      • Proximity
      • Similarity
      • Closure
      • Good Continuation
      • Common Fate
      • Good Form
    • Sharpening vs Leveling along a perceptual axis:
      • Contrasting Vs. Harmonious
      • Balance ⟷ nstability
      • Asymmetry ⟷ Symmetry
      • Irregularity ⟷ Regularity
      • Complexity ⟷ Simplicity
      • Fragmentation ⟷ Unity
      • Spontaneity ⟷ Predictability
      • Activeness ⟷ Stasis
      • Variation ⟷ Consistency
      • Distortion ⟷ Accuracy
      • Depth ⟷ Flatness
      • Juxtaposition ⟷ Singularity
      • Randomness ⟷ Sequentiality
      • Sharpness ⟷ Diffusion
  • Randomness & Accidents
  • Lying, Cheating, and stealing like an artist:
    • The secret of painting
    • The secret of photography
    • Steeling and attribution
    • The technology and art
    • The importance of the frame

Project ideas:

  • Hello world html
  • Present a info-sheet on a certain CSS attribute.
  • Create a skelleton document for HTML assignments.
  • Secret message, encoded, subliminal message.
  • misuse of HTML and CSS
  • Screen reader
  • 1,10,100 squares circles in code
  • 100,1000,1000 dots / lines
  • Redo the work of a famous early computer artist.
  • Exquisite corpse drawing program (person 1 creates a function that takes (x,y,z, radom parameter)
  • Random number generation
  • Geometry explainer
  • Stuff from Golan
  • Interpret isntructions from Casey Raes