codexdesign

code and design experiences for beginners

Motion Design ( javascript )

code notes: Motion Design introduces several important and powerful code concepts including program flow, variables, incrementation, and conditionals.

design notes: Motion Design introduces code that enables a program to change over time. Elements can move and change. Movement and change can be very ordered (for structured results) or they can randomized (for surprise results). Frame rate can be controlled.

design card

code: setup and draw blocks
motion: program flow

design card

code: console.log()
motion: console area feedback

design card

code: system variables, width and height keywords
motion: introducing variables

design card

code: system variables, mouseX and mouseY keywords
motion: enabling change

design card

code: custom variable, global scope
motion: enabling change

design card

code: custom variable, local scope
motion: enabling change

design card

code: custom variables
motion: enabling change

design card

code: custom variable, in position
motion: incrementation, x=x+1
background in draw()
source code does not loop

design card

code: custom variable, in position
motion: incrementation, x=x+1
background in draw()
source code does not loop

design card

code: custom variable, in position
motion: incrementation, x=x-1
background in draw()
source code does not loop

design card

code: custom variables, in position
motion: incrementation
background in draw()
source code does not loop

design card

code: custom variables, in width and height
motion: incrementation
source code does not loop

design card

code: custom variable, in rotate
motion: incrementation
source code does loop

design card

code: custom variables, in position
motion: incrementation
source code does not loop

design card

code: custom variable, in rotate
motion: incrementation
source code does loop

design card

code: review, elements
motion: no conditional, incrementation forever
going going gone

design card

code: conditional if, position
motion: incrementation with reset
going going gone reset

design card

code: conditional if, position
motion: incrementation with reset
going going gone reset

design card

code: conditional if, positions
motion: incrementation with sign flip
going going test flip going going gone

design card

code: conditional if, positions
motion: incrementation with sign flips

design card

code: conditional if, positions
motion: incrementation with sign flips

design card

code: conditional if, positions
motion: incrementation with sign flips

design card

code: conditional if, positions
motion: incrementation with nested loop

design card

code: conditional if, positions
motion: incrementation with nested loop

design card

code: conditional if, positions
motion: incrementation with nested loop

design card

code: conditional if, else if, else
motion: requires interaction

design card

code: conditional if, variables, keywords
motion: requires interation, collision detection

design card

code: conditional if, boolean
motion: requires interaction, mouse click

design card

code: conditional case, switch
motion: no