SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
Fam
JUSTIN BAKSE
LEGEND
o
Assignments Homework
StoryboardingIBiamsheiming
ArtistHesigneotolookup
Events prospectstoexplore
25Jan2019
CLASS WEBSITE 5 COMPFORM NET
Marathonofconstantworking 5
assignments a week
NO FINALS NO WRITTEN ASSIGNMENTS
2 minpaper Gamemakerstoolkit
Greatresources
Coding
Model Breadth
first Depthfirst
Assignment DesigningtheSarpinskitriangle
thine
Inthisclass we willmakethingsthatmakethings
Thisclass is Not about a computer
Computation existsphysically as well
JohnCage
4min33sec of no music thinkofthespacearound
Akshansh Chaudhary 1 MFADT | Parsons School of Design
Idea
showing
wireless network overlay on top ofrealworld
CAN
Comp form Reference
Procedurallygeneratedgames
Minecraft DwarfFortress
Abouttheclass Make Make Make Don't think ofthe
concept
Idea
Create
procedurally generateddata create a
story around
that
for staytetting with data
Ideato
Create
projects in comp farm
usingLaserCut Textile
other stuff at theMaking center
Think about Procedur
ally Generated Aet
Idea Following a ritual
Using ML database
ofimages creatingproceduralart
with it CITE THE REFERENCES
Timespent on each sketch thin 60min Max 120 min
Akshansh Chaudhary 2 MFADT | Parsons School of Design
Theme
forthisweek's
assignment TPGimages
THE SETS
Batman Game NES Nintendo EntertainmentSystem
Tile basedgraphics C64 bitsystem
TauchetTiles RotatableTiles
Akshansh Chaudhary 3 MFADT | Parsons School of Design
OIFeb 2019
Nextweek's afterclass 8Discovering OOP inJavaScript
Addedfeatures on the website Campform.net
bcommentwith emoji
CyriakAnimator
RANDOM VALUES
Q Corisidesing thetilesetas a tool howdotoolsimpact
authorship
therelated
projectbyBrookeSmith
Random is
very
valuable in generating stfu Random
can mean unplanned unexpected unpatterned
uncontrolled or unpredictable
Generating Random Numbers
Js Mathrandom c Value
range Co 1
including 0 excluding 1 I
creating a
range
infgargandom
C 5 to
Math
floel
Akshansh Chaudhary 4 MFADT | Parsons School of Design
Be carefulabout random genern
round does notdo equally likely option
o T
MathfloorCraath randomC 7 i
this would
give a o So it won't workfora
rolling die
min
fn in p5 min a b
lowervalue of a b
o Bell aune Informaldistribution
very
common in nature
randomGaussianl
fr in p5 thatgives a value
very randomly I n l 2 3 100000 5 6
use carefully
Randomizeprocess ofthought Dice vs Decks
normally distributed T breliable
To
give
a 10 likelihood in a
fn you
can use8
if randomc L o D
g
console
log a Rarethink I's
Userandom
justonce in a code Rolling it multipletimes
would notgivetherightprobability
Akshansh Chaudhary 5 MFADT | Parsons School of Design
Deck
Normal bias
Thinkin
boutdiffttypesof
High
how
Pure random
x
Pseudorandom values created using a deterministic
process
commonmethod LCG l linear Congauential
Generator
o Modulus operator 1 7 gives remainder
13 5 3
3 5 3
Randomseed control thetype ofrandom nos we
want toget
Trick givetherandom seed a randomnumber
Osing colormade
colorMadeCHSB D Playingwith colors on
Playwith et
Hue Salutation Brightness
Assignment Theme Random Makesketches
post
Recreatetheworkof one
oftheartists clike Mondrian
Akshansh Chaudhary 6 MFADT | Parsons School of Design
08Feb 2019
Craoupquestion Doescomputationallygeneratedarthave an
inherent aesthetic 7
Almostalwaysperfect 1pixelshares
Aestheticvaries with theperceptionoftheartist
IsA lot ofgeometry
Isimilar tonature
y
y y y
honey
QQga comb
ants none
An example
m
thatjustifies
aesthetic
path ofa bouncingball Baliol Ah
PARAMETERS
Parameter
space a setof allpossiblecombine ofvalues
fortheparameters of a
sup
leg 8 boolean parameters 28a
256possibilities
Samey ness Procedurally generated art is not the
same At almestthe same
Parametric Design Creating a system that creates a
design rules to design a layout
Leg Inputheightof a bicyclesides
gyp
makes a bicycle
Akshansh Chaudhary 7 MFADT | Parsons School of Design
Benefits ofParametesign
Bettercode better UX betterresults
INTERFALCE
Thinkabouttheparameters
you
are
usingfordesigning
an interface
eg function sectC n
y w h
3 Think aboutwhich
parameters
you
want toInterface types
offnchparameters we
optional
arethese parameters method valueshouldbe
oriented or
goaloriented accepted
foreachparameter
Idea
creating
a
painting canvas with parameters
Similar tophotoshop
a
whatyoumake
what youdesign
Akshansh Chaudhary 8 MFADT | Parsons School of Design
Iminogramming vs
Declaratinepuegeamming
beg JavaScript beg so
Procedural
A
way ofthinking about an interface
GroupActivity FictionalMachines
lonePotion think
goal
Parameters
Degreeoflove obsession
EEIEE.ie
method Form
Density
Flavour
Usertype Machine a partofthechain
Mlc 2
Para
love
Potion
Akshansh Chaudhary 9 MFADT | Parsons School of Design
choose 3 parameters
foryour
user
Methodoriented 8 formCDenity
Goal oriented 8 Degreeoflove
Hidden
Subject
Datatypes
Degreeoflove mum degreeOflove
O l
FamCDensity mum density
O l
liquid solid
Subject person
class
subject
object
Use psdomlibraryfewadding interactivity Gliders
say
on
a websketch
createPC 7 withing a paragraph
colorpicture 5 var colorPicker createInputl I's
color
Akshansh Chaudhary 10 MFADT | Parsons School of Design
Randomly picking 7
chance ht large chanceN 55 s
if frandomC 40.5 square size 10
normalized
else square size 50 valuefrom
O A I
Ternaryoperator calm
square size
random Lo 5 7 10 so
Using let forvariable declaration
worksonly within C
forglobalworking use van
Using
modulo to choose bw
rings choosing btw o
e
challenge
createafacegeneratingtool
Do 5 sketches on Parameters Cshare min mare sketch
Akshansh Chaudhary 11 MFADT | Parsons School of Design
15 Feb 2019
HomeworkkeviewinthAlionosfina
choose a sketchthat
you
thinkstartedwith aplan What
benefits did starting with a planhare
Anna's project Drawing withnaturallanguage
IsTheendresultis structured
a
Idea Useshadersforcreatinggradients
Neotneek A Upcomingfield
Extraclass on node.js
6Naturalhang processing
a
NOISI
DifferentfromrandomC
Activity Createrandom
frfrom an
array w o usingrandom
fn
Akshansh Chaudhary 12 MFADT | Parsons School of Design
BRAINSTORMING n
Math
floorL 7
it 68761Timeinput
randomvalues
I
CLASSDiscuss.com
Is
fill
ChandanValues
Eid randomValues
CitD random
Ugliness
3
if i 907
i O
Note considerchoosing noiseforwhenever
youfeellikeusing
random Noisegives controlled variation
Noise in p5 PerlinNiese created
byKenPerlin
forthe
filmTron
Diff types ofnoise8ns
gImphonement
over
Peskinnoise simplex
Noise
Perlin wonely value
Noise is used
very oftentomaketerrain mountains clouds
wood texture
randomSeed appliesto all Noisegivesbetter control
Akshansh Chaudhary 13 MFADT | Parsons School of Design
Activity linearInterpolation
Benefits ofNoise
looks
goodThevariation in PerlinNoise is bandlimited
highpass howpassfilters
Visually isotropic looks thesame whenrotated
we can controlthefreq ofvalues with noise
t Amplitude Octane
4 Noofdetailsfrom one valueto
the other
x
Noisedoesn't
generate a random value So it needs a
parameter
4noiseca yo 2
howfast we
vary
these inputs determines the
freq
Noiserange generally 0 I
Morefurs noiseDetailC noiseseedC s
Akshansh Chaudhary 14 MFADT | Parsons School of Design
Noisefrequency
4noise In ooo l y 50
4 hero
freq x g Monefreq y
o challengefornextweek
Generate a Treasure Map
Check syllabus
Akshansh Chaudhary 15 MFADT | Parsons School of Design
22Feb 2019
Today's
group
Noah Kevin
Choose a sketchthat's unlikeothers why so
Felix's p5 soundnoteenvelope
why numbers sound
Create a sketch
byusing
random sketches in noise
STRATEGIES
Abouthow do we
get
better at programming
Thinkingaboutstrategies tactics
for commonproblems
Staffing
picture
peanftachis fPimituies
smallplan 4Building blocks
Strategy withouttactics is theslowestrouteto victory Tactics
withoutstrategy is the noisebeforedefeat
Probably not Sun Tzu
Primitives are atomic indivisible 1smallest unit
usually never broken down
Akshansh Chaudhary 16 MFADT | Parsons School of Design
Trick Recognizedtheabstractsimilarity b w problems
beg bouncing ball changepain collision detection
Similar situations musicnotes
high low
ballcolorplebe
bright dark
Recognize common problems
throughtactics
Activity
Ellipse How was
Clustering
overlap
limited
qty
goodspacing
Thinkaboutthetactic I
putting dotson a square
a
Diffttacties PLACEMENT
Randomplacement Proximity full Placement
Gridplacement Stamp Placement
Noiseplacement
Akshansh Chaudhary 17 MFADT | Parsons School of Design
Diffttactvis DISPLACEMENT
Random Displacement
NoiseDisplacement
Relaxation Displacement
Noiseculling
a
Noisetends tobe centerbiased
4So we see noisepatterns clustered
to theedges
Assignments
Recreate 2 sketches onthe website Reqd challenge
t Put
yourspin on it 2 more sketches
Do all in classchallenges
Read Ch I from PGC
Create a physicalobjectfrom code
so painting Lasercutting CNC mills
Akshansh Chaudhary 18 MFADT | Parsons School of Design
01Mae2019
ClassDiscussion
Choose a workthatcombines computational manually
createdfarm
Scratches byJanice Calligraphic Brushstroke
by Brad
end offoundation unit
Today's topic PIXELDATII
feet
fewweeks
getC setC is reallyslow understanding
So PixelCT
array
is used
vectors rasters ele
When we create an ellipse on canvas we are creating a
vector shape on a pixelgrid
Thisprocess is called Rasterigation
Aliasing effect tryingtomake a
continuous
signaldiscrete
Faa
Anti aliasing creating a smoother
version of a continuous line by
II adding details
Akshansh Chaudhary 19 MFADT | Parsons School of Design
About CathodeRayTube
electrons
goingfrom cathode
anode
ak T9htfifagg.gov
where
rag layerthatlightsupAnode
TearingEffect in Video Games
Refreshing Yaofthescreen with newvaluesfromRAM
thebottom Yz with oldvalues
Documentary Racing
thebeam
Discusses CRT other displays
In IT if we draw outside thesize ofcanvas it would
ex
army That's a
bug
a
Using pixels CT
array
get reads
everypixeleverytime very
slow
eg a 1920 1080
ring willhave atrillion
pixels toprocess browserwouldcrash
Akshansh Chaudhary 20 MFADT | Parsons School of Design
Using a
fnforbypassingthesafetyfeature ofgetC
function getQuick limy x y
var i Cy img width a Y's
East
testImage pixels IT
T
a
logic
I
Thetiedwe are
going
How width ad
1 3 t I
each color has 4 valuesCRa BA So multiply by4
to shiftthrougheachpood
farm
w ad 4
ASSIGNMENT
Create a sketchentirelyfrompiedmapping
Createa sketch
byheading an einage make sth outofit
CHALLENGES create a generationalimage cseewebsite
Akshansh Chaudhary 21 MFADT | Parsons School of Design
08Mae2019
Mindmapfilling Activity
Justin'sTeachingPhilosophy
Creatine
learningSpiral
7
Imagine
Imagine
To
Create
iEmx
Akshansh Chaudhary 22 MFADT | Parsons School of Design
Today's topic TURTLEGRAPHICS
Museum
of Computer
History Seattle
Code on old
computers
Drawing
a line in Ops vs Turtlegraphics
mi the length oftheline
is explicitly in thecode
Drawing a tree in turtle
Draw a line I
Draw a branch over it
Draw a tree on each
ofthese branches
Keepdoing that
Akshansh Chaudhary 23 MFADT | Parsons School of Design
15 Mae2019
Today's group
Noah
Choose a workthatfillets an image Noah's 2 space
Choose
yourfavoritetwitterchallenge response Anna's
Jellyfishsketch
Activity Create a car usingfelt
uh
Benefits offelt Dimensions
More abstract
easytosketch
vs
papersketch realistic
Disadvantages Pasting objects is 1limited 2B
hard
whatqualities
3 Assembly
emerge Easytodo as a team
Howwould e
Stopmotion
1 Flipbook
you
animate
Akshansh Chaudhary 24 MFADT | Parsons School of Design
Today's topic VECTOR GRAPHICS
Using Paperjs
o SvGformat Using XMLscripttodrawshapes
Wedon't use vectordisplays So we havetosasterizethe
mirage toshow on the screen
vector to raster easy
Raster tovector not perfect
Thisweek8 HYBRID WORKFLOW
se paper.js create an SVG
Then loadthatfile in Ai create sketch with it
Paperis
DevelopedbyJing
Lehni once a
faculty at Parsons
created Hekteo a
spraypainting robot
Reallygoodforproceduralvectorgraphics
Usefulfor making a
drawing toolHw
Checkthewebsitepatentsorgfordetails
Conceptualshiftb w paper.js
p5
4Fill can bewritten AFTER drawingtheobject
I Deferredrendering DocumentObjectModel
Akshansh Chaudhary 25 MFADT | Parsons School of Design
Usingfelt Paper.Js PentPaper p5js
Let constdoesn'tworkinpaperscript It only uses raw
I cannotdraw an object Ijust
create it then thewhole
scene is drawn in theend
Great
forcreating stuff forlaser
cutting
Assignments Coding challenges
Create a poster
Laser cut it
Akshansh Chaudhary 26 MFADT | Parsons School of Design
29Mae2019
Paper
js vs other tools
Integrationninth othertools
Sealable vector
clean graphically shadows boolean
operasonshapes
Customizability
oMethod
difft
Hokusai waves Campform 3D
Anna's a layerpiece
Stepping thine Pyramid Gradient Tinsley
o
Resiegraph machine Aquick
way to doscreenperinting
Ascreenprinter compressed in an X hay
machine
Foaming
Actions
you
doto suggesthow
youexpectthemtosee
your work
Akshansh Chaudhary 27 MFADT | Parsons School of Design
Tinsley's art
frompaper.js
lasercut
Today'stopic Animation
Use
anything toanimate Unity Maya cuts AE
Taylo
syncrirth music
Smearframes Showing severalframes at once to
highlighttheimpactofmovement
eg bone in Disney
cartoons
Laika Acompanythatdoes Stop MotionAnimation
using
3D models
Akshansh Chaudhary 28 MFADT | Parsons School of Design
Playdead A
game
advanced belled versionofLimbo
FewVR 60fps isnotenough Min used 90fps
convention
Ishowframeratebag etc reasons
forgetting nausea
Types ofanimation s prerendered vs realtime
daylittletime to draw
frames
GameLoop vs Duanloop
TsimplifiedformofGameloop
Whendrawing aframetakes too long shedropsthe
frame
goes
behindschedule
If it showstheframe immediately as it buffers we
mayget TEARING on thescreen
FrameCount in p5js don'tuseto syncwithmusic
of hardwarerefreshrate is different
So use millisC fear realtimeanimation
for pre renderedanimation frameCountworksbest
caringabouttheframe I'm making
Exportprerenderedanimation thisweek
Akshansh Chaudhary 29 MFADT | Parsons School of Design
Mapfunction
Mapis a
greatfunctionto map thine theposition size
Cohen etc
fine forsmooth motion
A Modulo 1 7function greatto limit themillis l to a
particular value
A FFmpeg a commandline utilityto exportimagesequences
Weekly Challenge Create a Compform Bumper
Refer MTV Bumper
Details on thewebsite
Akshansh Chaudhary 30 MFADT | Parsons School of Design
05Ape2019
Today'sgroup
Noah Felix
Today's topic GENERATINGTEXT2
Use RiTa textlibrary
previouslydone
forwordmap
Readthepaperweitten
byAlan
Turing hompfam.net taeH
Computing Machinery Intelligence
Turing Test was calledThe ImitationGame
by
Alan
Turing
oABC T.AMformats Textformatstogeneratemusic
Computer
programs
are made out of text
you
can create a
generative texttocreate a
program
thatruns a
program
o Quine a
program
thatgenerates a
copyoftext
Pentatmelton a pairofwords that are rhyming
410syllables usually
Shakespearean style ofiambicwriting
Akshansh Chaudhary 31 MFADT | Parsons School of Design
Memes Image memes cat macros
well were
called called
NaNoGenMo so18 creating
novels through code
UsingJavaScripttemplate literals
using
back ticks
I am a mounts
MARKOV CHAINS
modelsthatcan beappliedto
any
series
ofsymbols
start with
any
word
The
nextwordrandom
I
usethis wordtotakethe
next word in thesequence
eye onefish
this one
had a
CONTEXT FREE GRAMMAR
Not alltextshtings are valid HTML
eg din Lb Hithere Lldiv 74 b
Invalid
Akshansh Chaudhary 32 MFADT | Parsons School of Design
substitution
grammar
Incontextfree does not
check
forothersymbols only
looks at thesymbol it is
modifying
Tracey teat modifier
js language
4 s1h whichhasrules ofchange
challenge
details onbcreate a badshout
stayusing aompfoem.net toetcomputation
Twine graphicalengineformaking
choose
your
adventure
text stories
Akshansh Chaudhary 33 MFADT | Parsons School of Design
12Ape2019
This week'stopic Sound
Act I carefullyarrangedSound
lightning
NoApple2C 11,500transistors
I 0231MHz
ooAndieinoUno 100ooot
transistors futz
MacPro I B Transistors
2,3 4 GHz
A Act 2 A Universalleverwith whichtoMoveTheWorld
Computershould have3 parts
Operations
Memory Input Output
Instructions Data
Data
Akshansh Chaudhary 34 MFADT | Parsons School of Design
Punchcards
ElectroBoom ESD ElectrostaticDischarge
Aet3
light
Richard
Feynman's YouTube video on
lightUV Imaging HowtheSunSeesYou
An LEDproduces electromagnetic radiation at
veryspecific
wavelengths
A blueLeo is notemitting
white
light
Thecontroversy
How our eyesperceivecolors
IR Camera
Akshansh Chaudhary 35 MFADT | Parsons School of Design
Beth Sound
VideoaboutHearing Howit works 1Med El
we are better at perceivingfreq with audio
a
IMAGE VS SOUND CODES
Similarity Differences
Outside Source o
Positioning notregal
var declaimreqd o Tine componentonlyforaudio
loading media o
Difftfileextensions
code is similar o
hoopfnforaudio frameBoth have setup rate
forimagepreload o proceduralvs object
Oriented
Both written in
style Programmingagesound
Akshansh Chaudhary 36 MFADT | Parsons School of Design
Change playback rate
slower Lernerfitch
faster Higherpitch
Modfunction tocreateaudiodrumbeats
iffframeCount 15 D
y
hatplay
ifflameComnt Go
g
drum playC
o p5 has audio
recordingfeature
FF T Cfast FourierTransform
Converts Time Inputfromsound convertin
frequency
For
creating
music tonojs is betterthan pssound
This week's challenges
Choose a 15sea videoclip create a
sound
forthat
eg CharlieChaplin
Choose a 15see audioclip create a
Visualforthatsound use FFT
Createbothvideo audio with code
Akshansh Chaudhary 37 MFADT | Parsons School of Design
IgApr2019
Today's group
Noah Anna
Activity Nao workfromlastweeks
compare it wide 3insights
soundvsimage
Phrase in 7words
Soundt
Img moreimmersive
AddSound
img
Soundhasto
syncwithvisual
becomes
more immeisme
Soundneeds visuals
Is qq.eeal should
Interact always
with
the
Sound
Today's topic Music casing tone.js
Differentaspects
ofcreatingcomputationalmusic
Algorithmic music
Aleatoric music howthecomposition willsoundlike
Generativemusic
is not
pre
decided
Akshansh Chaudhary 38 MFADT | Parsons School of Design
Reference
SixMarimbas StoneReich
Thereis a structuretothe
music creation
JohnZorn Cobra
Activity Compare 2 musical instruments
Piano Clarinet
flexible
Sound Its Morevariation why
I Torewindyfeeling inclarinet
faffayaffaffanbine square triangle sawtooth
Timbre a termusedto differentiate soundfoam 1instrument
tothatfromanother
anythingthatisn'tpitch on loudness
CA D s
Otherqualities to
judge
thesound Attack Decay Sustain
Envelope ReleaseCR ADSR
tf shape
ofa sound
AdditiveSynthesis Adding waves togeta complex sound
Otherterms Subtractive
synthesis Wavetablesynthesis Sampled
Synthesis Fra Aonsynthesis
Akshansh Chaudhary 39 MFADT | Parsons School of Design
o Code
synth toMasterc tolistento asound
Speakerplays at 44 tooHg
In SS we create an oscillator havethatfillthebuffer
makeSound 255
Is values inthefuture
Activity whatwould
you
needin Is tocreate a melody
howwould
yourepresentdata
Note pitch
dean
Sequence Arrayofnullobjects
loudness
Arraysofaways
rest time Vines
Constraints Phrase
InScale
major minor
Note
in
Playingwithmusic UseMusl Ceasymath Parameters
UseScientificPitchHolation
30 si f f
lsupported
bytone.jp
G Dby E 4 r
const melody C
EU 4n
154 s Sn rest Im J
Quarternotee 42 1Quarternote
Akshansh Chaudhary 40 MFADT | Parsons School of Design
Activity HowtocreateSound machines
Compositionstructure T Main
away
picking random Lhotesubset
ofnotesnotes
filteringit to a setofkeys
Choose a noteusing a noise
fn insteadofrandom
Markovchain
tightassociationb w states
having a
structure
Guidetocreate a melody
4Planningthetarget
characteristics
Ose C major
Use414time
Only Ya Ya notes
Notests
Term Degree 8 Position in a scale E o l 2
concatfn combine
flattenmelodies
fromdiffarrayinto one
return IT concatCa b a c
Challenge Record make a
song
Akshansh Chaudhary 41 MFADT | Parsons School of Design
26Ape2019
Using Openseats
Constantine
modeling notdoneinMaya
thereofFusion CAD
Create codethatgenerates a model
Difftway to construct3D models
Activity Discuss a challenge response whichdoesn'tuse code
IsAndrew Levinson's Midi MusicPiece
Moviereference Rosencrantz Guildenstern areDead
Great
project
Build a 3Dpainterfromscratch
youlearnaboutaxis
Assignmentideas 3D
MajorMajor3Dform VR Unity
CNC cut CMajorMajor 3Dsetup
Autodesk 3D characters Minami Sketches in
Saransk's
project humanmolecules
Openseed
OpensCAD Using
constructivesolidgeometry
4 with Booleanoperations to createcomplexshapes
Akshansh Chaudhary 42 MFADT | Parsons School of Design
OpenSCAD is its own
language
Ifyou
want Ts version
ofOpensCAD
bOpenseats net
Openseals
org
Opensons is notlike C C languagefamily
Terms Difference operator
cylinder
action
PROGRAMMING PARADIGMS
Functional vs Procedural
programming
how
you
are
Organize steps ink procedures
organizingyou Organizelogic
thoughts in a usingfunctions
program
Imperative vs Declarative
Programming
Iswydb achieve Isdetailing outtheresultthanthe
a
goal leg
e Is stepstodo
eg sa
Specificofthe resultleg Openseats
Akshansh Chaudhary 43 MFADT | Parsons School of Design
objectOriented Programming
Groupsrelateddata proceduresusing objects
logicprogramming
stating a setofsubs bunch
ofstatements
eg
constraintsolving
Immfutatele us thutable Data
eyopensatDZ
µhefise
vs
Infing
Notation
Operated Operation in
variable values comes
first bw operands
assignedlastget 23 6 2 3 76
thatvalue
Named vs
loisitionatayduffindeo
4,1 btw
kyhn
derkho4 ee L anteo true
x
South
Programming paradigm
Fmd
froceduralobject
oriented
logic
imperative declarative
Paradigmfor Js
fnal Imperative ProceduralOOPDeclarative
Paradigm
forOpenseas Declarative procedural logic
Infiometation
functional
Prefixnotation
Akshansh Chaudhary 44 MFADT | Parsons School of Design
to 2 in prefixnotation
Giving instructions si S2 recipe
Immutable8 last var value
cannotchangethevalue
OpensCAD Notes
Openseats use to render an object as a
ghost
fn fa fs control no ofedges
make an objectred i Useful
forselection
echo
paint console
logmodule in Openseals function in TS
forloop naittendifferently
I forloopforany
no
ofvariables
ParametricOpenseats
Reference
fordownloading
a 3D model
forprinting
3Dpainterworks on Sliced
f
G codes
codingfor3Dpainting
Akshansh Chaudhary 45 MFADT | Parsons School of Design
Houdini Node based3D modelingprogramfor VFX
Industryprogram
This week'schallenge Build a castle
e
Akshansh Chaudhary 46 MFADT | Parsons School of Design
03May2019
Today'sgroup
Noah the table3
A ACTIVITY
3D Vs Music
3Dsketches are visualexperiences
not auditory
Iffianfaiae hfFhat
sound absent to
Ifan
Musicdidn'thavespatialcomponent
Similarity
this week
Coheetheory keysignature
Colors
theory keysignature are aesthetic's
Aesthetics in both moduleshave mathematicalproperties
Akshansh Chaudhary 47 MFADT | Parsons School of Design
This week's Topic MICROGAMES
A Minigame
1 2 Switch Interesting mini
game
Plagit seewhyites so weird
warloware exampleofMicrogame
Group these interactive artefacts ink
Games
Toys
Tools
Monopoly
Lego
Photoshop
Chess
Hammer
again
X Tops
Brainstorm atleast 10Defiling on characteristicfeatures of
games mustbepresent commonlytrue
egbirdshave eg
birds can
wings fly
Akshansh Chaudhary 48 MFADT | Parsons School of Design
Parameters Rules Diffaesthetic suspendeids v
Start End Tempo Outcomes
Setting tonne vciual Goals
Player Levels
winChess
Interaction
Rankthem in the orderofimportance
others Agencychoice
Instructions
Emotional
Engagement
Resources
Mastery 1Abilitytoimprove
Addiction
Emergentplay
Obstruction
x
Activity Approaching Learning
Newlibraries
8 tactics
you
usedtostartlearning
tools
Document
page Perogsamniungstructure
Videotutorials
Procedural usfinal
Examplecode
looking atthesourcecode
forlibray
Implementmethods platforms
blog Istackexchange
Ewan reporting Canto console
Akshansh Chaudhary 49 MFADT | Parsons School of Design
Selfapplication
Top 5
Using ps play
E kickAsBookmarklet
therework in setup lessin drawfunction
Coding challenge Couch co op
2playssitting next toeachother competing
example lovers in spacetime
Posted
Toolto createpixel
art
Akshansh Chaudhary 50 MFADT | Parsons School of Design
I0May2019
AboutMicro
game
welldocumented
Interactivesketches
Akshansh Chaudhary 51 MFADT | Parsons School of Design
Top 3 problems withthis class
ClassTiming1Day
Discussion on themindmap activity
Too
many
sketches
duringfinals
No collaboration insketches
No communion b w classes
Some topics aretoo narrow 1similar
Sketchformattoselfdirected
Solvetheproblem I No room
fordeepdine
Trinechangecannotwork constraint
3tickets choose
wisely
Weekwith lowersketches added constraint on
no ofelementsused
Deepdineallowed
forimp topics strategies parameters
Make a sketchfromsomeotherweek
fora weekthat
isn'tthatimp
Oneweek on personal expression
end
ofcourse
Akshansh Chaudhary 52 MFADT | Parsons School of Design

Contenu connexe

Plus de Akshansh Chaudhary

Typography and Visual Design Notes - Akshansh
Typography and Visual Design Notes - AkshanshTypography and Visual Design Notes - Akshansh
Typography and Visual Design Notes - AkshanshAkshansh Chaudhary
 
Storytelling with Data Notes - Akshansh
Storytelling with Data Notes - AkshanshStorytelling with Data Notes - Akshansh
Storytelling with Data Notes - AkshanshAkshansh Chaudhary
 
Collab Tech and Performance Notes - Akshansh
Collab Tech and Performance Notes - AkshanshCollab Tech and Performance Notes - Akshansh
Collab Tech and Performance Notes - AkshanshAkshansh Chaudhary
 
Creativity and Computation Lab Notes - Akshansh Chaudhary
Creativity and Computation Lab Notes - Akshansh ChaudharyCreativity and Computation Lab Notes - Akshansh Chaudhary
Creativity and Computation Lab Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Bootcamp Web Notes - Akshansh Chaudhary
Bootcamp Web Notes - Akshansh ChaudharyBootcamp Web Notes - Akshansh Chaudhary
Bootcamp Web Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Bootcamp Design Notes - Akshansh Chaudhary
Bootcamp Design Notes - Akshansh ChaudharyBootcamp Design Notes - Akshansh Chaudhary
Bootcamp Design Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Bootcamp Code Notes - Akshansh Chaudhary
Bootcamp Code Notes - Akshansh ChaudharyBootcamp Code Notes - Akshansh Chaudhary
Bootcamp Code Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Design for This Century Lecture Notes - Akshansh Chaudhary
Design for This Century Lecture Notes - Akshansh ChaudharyDesign for This Century Lecture Notes - Akshansh Chaudhary
Design for This Century Lecture Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Design for This Century Recitation Notes - Akshansh Chaudhary
Design for This Century Recitation Notes - Akshansh ChaudharyDesign for This Century Recitation Notes - Akshansh Chaudhary
Design for This Century Recitation Notes - Akshansh ChaudharyAkshansh Chaudhary
 
Data Structure and Algorithm Notes - Ronak Sumbaly
Data Structure and Algorithm Notes - Ronak SumbalyData Structure and Algorithm Notes - Ronak Sumbaly
Data Structure and Algorithm Notes - Ronak SumbalyAkshansh Chaudhary
 
Logic in Computer Science Notes - Ronak Sumbaly
Logic in Computer Science Notes - Ronak SumbalyLogic in Computer Science Notes - Ronak Sumbaly
Logic in Computer Science Notes - Ronak SumbalyAkshansh Chaudhary
 
Discrete Structure Notes - Ronak Sumbaly
Discrete Structure Notes - Ronak SumbalyDiscrete Structure Notes - Ronak Sumbaly
Discrete Structure Notes - Ronak SumbalyAkshansh Chaudhary
 
Design and Analysis of Algorithms Notes - Ronak Sumbaly
Design and Analysis of Algorithms Notes - Ronak SumbalyDesign and Analysis of Algorithms Notes - Ronak Sumbaly
Design and Analysis of Algorithms Notes - Ronak SumbalyAkshansh Chaudhary
 
Data Mining Notes - Ronak Sumbaly
Data Mining Notes - Ronak SumbalyData Mining Notes - Ronak Sumbaly
Data Mining Notes - Ronak SumbalyAkshansh Chaudhary
 
Computer Networks Notes - Ronak Sumbaly
Computer Networks Notes - Ronak SumbalyComputer Networks Notes - Ronak Sumbaly
Computer Networks Notes - Ronak SumbalyAkshansh Chaudhary
 
Theory of Computation Notes - Ronak Sumbaly
Theory of Computation Notes - Ronak SumbalyTheory of Computation Notes - Ronak Sumbaly
Theory of Computation Notes - Ronak SumbalyAkshansh Chaudhary
 
Operating System Notes - Ronak Sumbaly
Operating System Notes - Ronak SumbalyOperating System Notes - Ronak Sumbaly
Operating System Notes - Ronak SumbalyAkshansh Chaudhary
 
Computer Architecture Lecture Notes - Ronak Sumbaly
Computer Architecture Lecture Notes - Ronak SumbalyComputer Architecture Lecture Notes - Ronak Sumbaly
Computer Architecture Lecture Notes - Ronak SumbalyAkshansh Chaudhary
 
Computer Architecture Lab Notes - Ronak Sumbaly
Computer Architecture Lab Notes - Ronak SumbalyComputer Architecture Lab Notes - Ronak Sumbaly
Computer Architecture Lab Notes - Ronak SumbalyAkshansh Chaudhary
 
Artificial Intelligence Notes - Ronak Sumbaly
Artificial Intelligence Notes - Ronak SumbalyArtificial Intelligence Notes - Ronak Sumbaly
Artificial Intelligence Notes - Ronak SumbalyAkshansh Chaudhary
 

Plus de Akshansh Chaudhary (20)

Typography and Visual Design Notes - Akshansh
Typography and Visual Design Notes - AkshanshTypography and Visual Design Notes - Akshansh
Typography and Visual Design Notes - Akshansh
 
Storytelling with Data Notes - Akshansh
Storytelling with Data Notes - AkshanshStorytelling with Data Notes - Akshansh
Storytelling with Data Notes - Akshansh
 
Collab Tech and Performance Notes - Akshansh
Collab Tech and Performance Notes - AkshanshCollab Tech and Performance Notes - Akshansh
Collab Tech and Performance Notes - Akshansh
 
Creativity and Computation Lab Notes - Akshansh Chaudhary
Creativity and Computation Lab Notes - Akshansh ChaudharyCreativity and Computation Lab Notes - Akshansh Chaudhary
Creativity and Computation Lab Notes - Akshansh Chaudhary
 
Bootcamp Web Notes - Akshansh Chaudhary
Bootcamp Web Notes - Akshansh ChaudharyBootcamp Web Notes - Akshansh Chaudhary
Bootcamp Web Notes - Akshansh Chaudhary
 
Bootcamp Design Notes - Akshansh Chaudhary
Bootcamp Design Notes - Akshansh ChaudharyBootcamp Design Notes - Akshansh Chaudhary
Bootcamp Design Notes - Akshansh Chaudhary
 
Bootcamp Code Notes - Akshansh Chaudhary
Bootcamp Code Notes - Akshansh ChaudharyBootcamp Code Notes - Akshansh Chaudhary
Bootcamp Code Notes - Akshansh Chaudhary
 
Design for This Century Lecture Notes - Akshansh Chaudhary
Design for This Century Lecture Notes - Akshansh ChaudharyDesign for This Century Lecture Notes - Akshansh Chaudhary
Design for This Century Lecture Notes - Akshansh Chaudhary
 
Design for This Century Recitation Notes - Akshansh Chaudhary
Design for This Century Recitation Notes - Akshansh ChaudharyDesign for This Century Recitation Notes - Akshansh Chaudhary
Design for This Century Recitation Notes - Akshansh Chaudhary
 
Data Structure and Algorithm Notes - Ronak Sumbaly
Data Structure and Algorithm Notes - Ronak SumbalyData Structure and Algorithm Notes - Ronak Sumbaly
Data Structure and Algorithm Notes - Ronak Sumbaly
 
Logic in Computer Science Notes - Ronak Sumbaly
Logic in Computer Science Notes - Ronak SumbalyLogic in Computer Science Notes - Ronak Sumbaly
Logic in Computer Science Notes - Ronak Sumbaly
 
Discrete Structure Notes - Ronak Sumbaly
Discrete Structure Notes - Ronak SumbalyDiscrete Structure Notes - Ronak Sumbaly
Discrete Structure Notes - Ronak Sumbaly
 
Design and Analysis of Algorithms Notes - Ronak Sumbaly
Design and Analysis of Algorithms Notes - Ronak SumbalyDesign and Analysis of Algorithms Notes - Ronak Sumbaly
Design and Analysis of Algorithms Notes - Ronak Sumbaly
 
Data Mining Notes - Ronak Sumbaly
Data Mining Notes - Ronak SumbalyData Mining Notes - Ronak Sumbaly
Data Mining Notes - Ronak Sumbaly
 
Computer Networks Notes - Ronak Sumbaly
Computer Networks Notes - Ronak SumbalyComputer Networks Notes - Ronak Sumbaly
Computer Networks Notes - Ronak Sumbaly
 
Theory of Computation Notes - Ronak Sumbaly
Theory of Computation Notes - Ronak SumbalyTheory of Computation Notes - Ronak Sumbaly
Theory of Computation Notes - Ronak Sumbaly
 
Operating System Notes - Ronak Sumbaly
Operating System Notes - Ronak SumbalyOperating System Notes - Ronak Sumbaly
Operating System Notes - Ronak Sumbaly
 
Computer Architecture Lecture Notes - Ronak Sumbaly
Computer Architecture Lecture Notes - Ronak SumbalyComputer Architecture Lecture Notes - Ronak Sumbaly
Computer Architecture Lecture Notes - Ronak Sumbaly
 
Computer Architecture Lab Notes - Ronak Sumbaly
Computer Architecture Lab Notes - Ronak SumbalyComputer Architecture Lab Notes - Ronak Sumbaly
Computer Architecture Lab Notes - Ronak Sumbaly
 
Artificial Intelligence Notes - Ronak Sumbaly
Artificial Intelligence Notes - Ronak SumbalyArtificial Intelligence Notes - Ronak Sumbaly
Artificial Intelligence Notes - Ronak Sumbaly
 

Dernier

BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...Nguyen Thanh Tu Collection
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxSayali Powar
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQuiz Club NITW
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptshraddhaparab530
 
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvRicaMaeCastro1
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptxmary850239
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptxmary850239
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management SystemChristalin Nelson
 
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...DhatriParmar
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Osopher
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdfMr Bounab Samir
 
Employablity presentation and Future Career Plan.pptx
Employablity presentation and Future Career Plan.pptxEmployablity presentation and Future Career Plan.pptx
Employablity presentation and Future Career Plan.pptxryandux83rd
 
4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptxmary850239
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDhatriParmar
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPCeline George
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfPrerana Jadhav
 

Dernier (20)

Introduction to Research ,Need for research, Need for design of Experiments, ...
Introduction to Research ,Need for research, Need for design of Experiments, ...Introduction to Research ,Need for research, Need for design of Experiments, ...
Introduction to Research ,Need for research, Need for design of Experiments, ...
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
 
Spearman's correlation,Formula,Advantages,
Spearman's correlation,Formula,Advantages,Spearman's correlation,Formula,Advantages,
Spearman's correlation,Formula,Advantages,
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
 
Integumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.pptIntegumentary System SMP B. Pharm Sem I.ppt
Integumentary System SMP B. Pharm Sem I.ppt
 
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnvESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
ESP 4-EDITED.pdfmmcncncncmcmmnmnmncnmncmnnjvnnv
 
4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx4.11.24 Poverty and Inequality in America.pptx
4.11.24 Poverty and Inequality in America.pptx
 
4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx4.9.24 School Desegregation in Boston.pptx
4.9.24 School Desegregation in Boston.pptx
 
Transaction Management in Database Management System
Transaction Management in Database Management SystemTransaction Management in Database Management System
Transaction Management in Database Management System
 
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
Beauty Amidst the Bytes_ Unearthing Unexpected Advantages of the Digital Wast...
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
Employablity presentation and Future Career Plan.pptx
Employablity presentation and Future Career Plan.pptxEmployablity presentation and Future Career Plan.pptx
Employablity presentation and Future Career Plan.pptx
 
4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx4.9.24 Social Capital and Social Exclusion.pptx
4.9.24 Social Capital and Social Exclusion.pptx
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
 
Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERP
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdf
 

Computational Form Notes - Akshansh

  • 1.
  • 3. 25Jan2019 CLASS WEBSITE 5 COMPFORM NET Marathonofconstantworking 5 assignments a week NO FINALS NO WRITTEN ASSIGNMENTS 2 minpaper Gamemakerstoolkit Greatresources Coding Model Breadth first Depthfirst Assignment DesigningtheSarpinskitriangle thine Inthisclass we willmakethingsthatmakethings Thisclass is Not about a computer Computation existsphysically as well JohnCage 4min33sec of no music thinkofthespacearound Akshansh Chaudhary 1 MFADT | Parsons School of Design
  • 4. Idea showing wireless network overlay on top ofrealworld CAN Comp form Reference Procedurallygeneratedgames Minecraft DwarfFortress Abouttheclass Make Make Make Don't think ofthe concept Idea Create procedurally generateddata create a story around that for staytetting with data Ideato Create projects in comp farm usingLaserCut Textile other stuff at theMaking center Think about Procedur ally Generated Aet Idea Following a ritual Using ML database ofimages creatingproceduralart with it CITE THE REFERENCES Timespent on each sketch thin 60min Max 120 min Akshansh Chaudhary 2 MFADT | Parsons School of Design
  • 5. Theme forthisweek's assignment TPGimages THE SETS Batman Game NES Nintendo EntertainmentSystem Tile basedgraphics C64 bitsystem TauchetTiles RotatableTiles Akshansh Chaudhary 3 MFADT | Parsons School of Design
  • 6. OIFeb 2019 Nextweek's afterclass 8Discovering OOP inJavaScript Addedfeatures on the website Campform.net bcommentwith emoji CyriakAnimator RANDOM VALUES Q Corisidesing thetilesetas a tool howdotoolsimpact authorship therelated projectbyBrookeSmith Random is very valuable in generating stfu Random can mean unplanned unexpected unpatterned uncontrolled or unpredictable Generating Random Numbers Js Mathrandom c Value range Co 1 including 0 excluding 1 I creating a range infgargandom C 5 to Math floel Akshansh Chaudhary 4 MFADT | Parsons School of Design
  • 7. Be carefulabout random genern round does notdo equally likely option o T MathfloorCraath randomC 7 i this would give a o So it won't workfora rolling die min fn in p5 min a b lowervalue of a b o Bell aune Informaldistribution very common in nature randomGaussianl fr in p5 thatgives a value very randomly I n l 2 3 100000 5 6 use carefully Randomizeprocess ofthought Dice vs Decks normally distributed T breliable To give a 10 likelihood in a fn you can use8 if randomc L o D g console log a Rarethink I's Userandom justonce in a code Rolling it multipletimes would notgivetherightprobability Akshansh Chaudhary 5 MFADT | Parsons School of Design
  • 8. Deck Normal bias Thinkin boutdiffttypesof High how Pure random x Pseudorandom values created using a deterministic process commonmethod LCG l linear Congauential Generator o Modulus operator 1 7 gives remainder 13 5 3 3 5 3 Randomseed control thetype ofrandom nos we want toget Trick givetherandom seed a randomnumber Osing colormade colorMadeCHSB D Playingwith colors on Playwith et Hue Salutation Brightness Assignment Theme Random Makesketches post Recreatetheworkof one oftheartists clike Mondrian Akshansh Chaudhary 6 MFADT | Parsons School of Design
  • 9. 08Feb 2019 Craoupquestion Doescomputationallygeneratedarthave an inherent aesthetic 7 Almostalwaysperfect 1pixelshares Aestheticvaries with theperceptionoftheartist IsA lot ofgeometry Isimilar tonature y y y y honey QQga comb ants none An example m thatjustifies aesthetic path ofa bouncingball Baliol Ah PARAMETERS Parameter space a setof allpossiblecombine ofvalues fortheparameters of a sup leg 8 boolean parameters 28a 256possibilities Samey ness Procedurally generated art is not the same At almestthe same Parametric Design Creating a system that creates a design rules to design a layout Leg Inputheightof a bicyclesides gyp makes a bicycle Akshansh Chaudhary 7 MFADT | Parsons School of Design
  • 10. Benefits ofParametesign Bettercode better UX betterresults INTERFALCE Thinkabouttheparameters you are usingfordesigning an interface eg function sectC n y w h 3 Think aboutwhich parameters you want toInterface types offnchparameters we optional arethese parameters method valueshouldbe oriented or goaloriented accepted foreachparameter Idea creating a painting canvas with parameters Similar tophotoshop a whatyoumake what youdesign Akshansh Chaudhary 8 MFADT | Parsons School of Design
  • 11. Iminogramming vs Declaratinepuegeamming beg JavaScript beg so Procedural A way ofthinking about an interface GroupActivity FictionalMachines lonePotion think goal Parameters Degreeoflove obsession EEIEE.ie method Form Density Flavour Usertype Machine a partofthechain Mlc 2 Para love Potion Akshansh Chaudhary 9 MFADT | Parsons School of Design
  • 12. choose 3 parameters foryour user Methodoriented 8 formCDenity Goal oriented 8 Degreeoflove Hidden Subject Datatypes Degreeoflove mum degreeOflove O l FamCDensity mum density O l liquid solid Subject person class subject object Use psdomlibraryfewadding interactivity Gliders say on a websketch createPC 7 withing a paragraph colorpicture 5 var colorPicker createInputl I's color Akshansh Chaudhary 10 MFADT | Parsons School of Design
  • 13. Randomly picking 7 chance ht large chanceN 55 s if frandomC 40.5 square size 10 normalized else square size 50 valuefrom O A I Ternaryoperator calm square size random Lo 5 7 10 so Using let forvariable declaration worksonly within C forglobalworking use van Using modulo to choose bw rings choosing btw o e challenge createafacegeneratingtool Do 5 sketches on Parameters Cshare min mare sketch Akshansh Chaudhary 11 MFADT | Parsons School of Design
  • 14. 15 Feb 2019 HomeworkkeviewinthAlionosfina choose a sketchthat you thinkstartedwith aplan What benefits did starting with a planhare Anna's project Drawing withnaturallanguage IsTheendresultis structured a Idea Useshadersforcreatinggradients Neotneek A Upcomingfield Extraclass on node.js 6Naturalhang processing a NOISI DifferentfromrandomC Activity Createrandom frfrom an array w o usingrandom fn Akshansh Chaudhary 12 MFADT | Parsons School of Design
  • 15. BRAINSTORMING n Math floorL 7 it 68761Timeinput randomvalues I CLASSDiscuss.com Is fill ChandanValues Eid randomValues CitD random Ugliness 3 if i 907 i O Note considerchoosing noiseforwhenever youfeellikeusing random Noisegives controlled variation Noise in p5 PerlinNiese created byKenPerlin forthe filmTron Diff types ofnoise8ns gImphonement over Peskinnoise simplex Noise Perlin wonely value Noise is used very oftentomaketerrain mountains clouds wood texture randomSeed appliesto all Noisegivesbetter control Akshansh Chaudhary 13 MFADT | Parsons School of Design
  • 16. Activity linearInterpolation Benefits ofNoise looks goodThevariation in PerlinNoise is bandlimited highpass howpassfilters Visually isotropic looks thesame whenrotated we can controlthefreq ofvalues with noise t Amplitude Octane 4 Noofdetailsfrom one valueto the other x Noisedoesn't generate a random value So it needs a parameter 4noiseca yo 2 howfast we vary these inputs determines the freq Noiserange generally 0 I Morefurs noiseDetailC noiseseedC s Akshansh Chaudhary 14 MFADT | Parsons School of Design
  • 17. Noisefrequency 4noise In ooo l y 50 4 hero freq x g Monefreq y o challengefornextweek Generate a Treasure Map Check syllabus Akshansh Chaudhary 15 MFADT | Parsons School of Design
  • 18. 22Feb 2019 Today's group Noah Kevin Choose a sketchthat's unlikeothers why so Felix's p5 soundnoteenvelope why numbers sound Create a sketch byusing random sketches in noise STRATEGIES Abouthow do we get better at programming Thinkingaboutstrategies tactics for commonproblems Staffing picture peanftachis fPimituies smallplan 4Building blocks Strategy withouttactics is theslowestrouteto victory Tactics withoutstrategy is the noisebeforedefeat Probably not Sun Tzu Primitives are atomic indivisible 1smallest unit usually never broken down Akshansh Chaudhary 16 MFADT | Parsons School of Design
  • 19. Trick Recognizedtheabstractsimilarity b w problems beg bouncing ball changepain collision detection Similar situations musicnotes high low ballcolorplebe bright dark Recognize common problems throughtactics Activity Ellipse How was Clustering overlap limited qty goodspacing Thinkaboutthetactic I putting dotson a square a Diffttacties PLACEMENT Randomplacement Proximity full Placement Gridplacement Stamp Placement Noiseplacement Akshansh Chaudhary 17 MFADT | Parsons School of Design
  • 20. Diffttactvis DISPLACEMENT Random Displacement NoiseDisplacement Relaxation Displacement Noiseculling a Noisetends tobe centerbiased 4So we see noisepatterns clustered to theedges Assignments Recreate 2 sketches onthe website Reqd challenge t Put yourspin on it 2 more sketches Do all in classchallenges Read Ch I from PGC Create a physicalobjectfrom code so painting Lasercutting CNC mills Akshansh Chaudhary 18 MFADT | Parsons School of Design
  • 21. 01Mae2019 ClassDiscussion Choose a workthatcombines computational manually createdfarm Scratches byJanice Calligraphic Brushstroke by Brad end offoundation unit Today's topic PIXELDATII feet fewweeks getC setC is reallyslow understanding So PixelCT array is used vectors rasters ele When we create an ellipse on canvas we are creating a vector shape on a pixelgrid Thisprocess is called Rasterigation Aliasing effect tryingtomake a continuous signaldiscrete Faa Anti aliasing creating a smoother version of a continuous line by II adding details Akshansh Chaudhary 19 MFADT | Parsons School of Design
  • 22. About CathodeRayTube electrons goingfrom cathode anode ak T9htfifagg.gov where rag layerthatlightsupAnode TearingEffect in Video Games Refreshing Yaofthescreen with newvaluesfromRAM thebottom Yz with oldvalues Documentary Racing thebeam Discusses CRT other displays In IT if we draw outside thesize ofcanvas it would ex army That's a bug a Using pixels CT array get reads everypixeleverytime very slow eg a 1920 1080 ring willhave atrillion pixels toprocess browserwouldcrash Akshansh Chaudhary 20 MFADT | Parsons School of Design
  • 23. Using a fnforbypassingthesafetyfeature ofgetC function getQuick limy x y var i Cy img width a Y's East testImage pixels IT T a logic I Thetiedwe are going How width ad 1 3 t I each color has 4 valuesCRa BA So multiply by4 to shiftthrougheachpood farm w ad 4 ASSIGNMENT Create a sketchentirelyfrompiedmapping Createa sketch byheading an einage make sth outofit CHALLENGES create a generationalimage cseewebsite Akshansh Chaudhary 21 MFADT | Parsons School of Design
  • 25. Today's topic TURTLEGRAPHICS Museum of Computer History Seattle Code on old computers Drawing a line in Ops vs Turtlegraphics mi the length oftheline is explicitly in thecode Drawing a tree in turtle Draw a line I Draw a branch over it Draw a tree on each ofthese branches Keepdoing that Akshansh Chaudhary 23 MFADT | Parsons School of Design
  • 26. 15 Mae2019 Today's group Noah Choose a workthatfillets an image Noah's 2 space Choose yourfavoritetwitterchallenge response Anna's Jellyfishsketch Activity Create a car usingfelt uh Benefits offelt Dimensions More abstract easytosketch vs papersketch realistic Disadvantages Pasting objects is 1limited 2B hard whatqualities 3 Assembly emerge Easytodo as a team Howwould e Stopmotion 1 Flipbook you animate Akshansh Chaudhary 24 MFADT | Parsons School of Design
  • 27. Today's topic VECTOR GRAPHICS Using Paperjs o SvGformat Using XMLscripttodrawshapes Wedon't use vectordisplays So we havetosasterizethe mirage toshow on the screen vector to raster easy Raster tovector not perfect Thisweek8 HYBRID WORKFLOW se paper.js create an SVG Then loadthatfile in Ai create sketch with it Paperis DevelopedbyJing Lehni once a faculty at Parsons created Hekteo a spraypainting robot Reallygoodforproceduralvectorgraphics Usefulfor making a drawing toolHw Checkthewebsitepatentsorgfordetails Conceptualshiftb w paper.js p5 4Fill can bewritten AFTER drawingtheobject I Deferredrendering DocumentObjectModel Akshansh Chaudhary 25 MFADT | Parsons School of Design
  • 28. Usingfelt Paper.Js PentPaper p5js Let constdoesn'tworkinpaperscript It only uses raw I cannotdraw an object Ijust create it then thewhole scene is drawn in theend Great forcreating stuff forlaser cutting Assignments Coding challenges Create a poster Laser cut it Akshansh Chaudhary 26 MFADT | Parsons School of Design
  • 29. 29Mae2019 Paper js vs other tools Integrationninth othertools Sealable vector clean graphically shadows boolean operasonshapes Customizability oMethod difft Hokusai waves Campform 3D Anna's a layerpiece Stepping thine Pyramid Gradient Tinsley o Resiegraph machine Aquick way to doscreenperinting Ascreenprinter compressed in an X hay machine Foaming Actions you doto suggesthow youexpectthemtosee your work Akshansh Chaudhary 27 MFADT | Parsons School of Design
  • 30. Tinsley's art frompaper.js lasercut Today'stopic Animation Use anything toanimate Unity Maya cuts AE Taylo syncrirth music Smearframes Showing severalframes at once to highlighttheimpactofmovement eg bone in Disney cartoons Laika Acompanythatdoes Stop MotionAnimation using 3D models Akshansh Chaudhary 28 MFADT | Parsons School of Design
  • 31. Playdead A game advanced belled versionofLimbo FewVR 60fps isnotenough Min used 90fps convention Ishowframeratebag etc reasons forgetting nausea Types ofanimation s prerendered vs realtime daylittletime to draw frames GameLoop vs Duanloop TsimplifiedformofGameloop Whendrawing aframetakes too long shedropsthe frame goes behindschedule If it showstheframe immediately as it buffers we mayget TEARING on thescreen FrameCount in p5js don'tuseto syncwithmusic of hardwarerefreshrate is different So use millisC fear realtimeanimation for pre renderedanimation frameCountworksbest caringabouttheframe I'm making Exportprerenderedanimation thisweek Akshansh Chaudhary 29 MFADT | Parsons School of Design
  • 32. Mapfunction Mapis a greatfunctionto map thine theposition size Cohen etc fine forsmooth motion A Modulo 1 7function greatto limit themillis l to a particular value A FFmpeg a commandline utilityto exportimagesequences Weekly Challenge Create a Compform Bumper Refer MTV Bumper Details on thewebsite Akshansh Chaudhary 30 MFADT | Parsons School of Design
  • 33. 05Ape2019 Today'sgroup Noah Felix Today's topic GENERATINGTEXT2 Use RiTa textlibrary previouslydone forwordmap Readthepaperweitten byAlan Turing hompfam.net taeH Computing Machinery Intelligence Turing Test was calledThe ImitationGame by Alan Turing oABC T.AMformats Textformatstogeneratemusic Computer programs are made out of text you can create a generative texttocreate a program thatruns a program o Quine a program thatgenerates a copyoftext Pentatmelton a pairofwords that are rhyming 410syllables usually Shakespearean style ofiambicwriting Akshansh Chaudhary 31 MFADT | Parsons School of Design
  • 34. Memes Image memes cat macros well were called called NaNoGenMo so18 creating novels through code UsingJavaScripttemplate literals using back ticks I am a mounts MARKOV CHAINS modelsthatcan beappliedto any series ofsymbols start with any word The nextwordrandom I usethis wordtotakethe next word in thesequence eye onefish this one had a CONTEXT FREE GRAMMAR Not alltextshtings are valid HTML eg din Lb Hithere Lldiv 74 b Invalid Akshansh Chaudhary 32 MFADT | Parsons School of Design
  • 35. substitution grammar Incontextfree does not check forothersymbols only looks at thesymbol it is modifying Tracey teat modifier js language 4 s1h whichhasrules ofchange challenge details onbcreate a badshout stayusing aompfoem.net toetcomputation Twine graphicalengineformaking choose your adventure text stories Akshansh Chaudhary 33 MFADT | Parsons School of Design
  • 36. 12Ape2019 This week'stopic Sound Act I carefullyarrangedSound lightning NoApple2C 11,500transistors I 0231MHz ooAndieinoUno 100ooot transistors futz MacPro I B Transistors 2,3 4 GHz A Act 2 A Universalleverwith whichtoMoveTheWorld Computershould have3 parts Operations Memory Input Output Instructions Data Data Akshansh Chaudhary 34 MFADT | Parsons School of Design
  • 37. Punchcards ElectroBoom ESD ElectrostaticDischarge Aet3 light Richard Feynman's YouTube video on lightUV Imaging HowtheSunSeesYou An LEDproduces electromagnetic radiation at veryspecific wavelengths A blueLeo is notemitting white light Thecontroversy How our eyesperceivecolors IR Camera Akshansh Chaudhary 35 MFADT | Parsons School of Design
  • 38. Beth Sound VideoaboutHearing Howit works 1Med El we are better at perceivingfreq with audio a IMAGE VS SOUND CODES Similarity Differences Outside Source o Positioning notregal var declaimreqd o Tine componentonlyforaudio loading media o Difftfileextensions code is similar o hoopfnforaudio frameBoth have setup rate forimagepreload o proceduralvs object Oriented Both written in style Programmingagesound Akshansh Chaudhary 36 MFADT | Parsons School of Design
  • 39. Change playback rate slower Lernerfitch faster Higherpitch Modfunction tocreateaudiodrumbeats iffframeCount 15 D y hatplay ifflameComnt Go g drum playC o p5 has audio recordingfeature FF T Cfast FourierTransform Converts Time Inputfromsound convertin frequency For creating music tonojs is betterthan pssound This week's challenges Choose a 15sea videoclip create a sound forthat eg CharlieChaplin Choose a 15see audioclip create a Visualforthatsound use FFT Createbothvideo audio with code Akshansh Chaudhary 37 MFADT | Parsons School of Design
  • 40. IgApr2019 Today's group Noah Anna Activity Nao workfromlastweeks compare it wide 3insights soundvsimage Phrase in 7words Soundt Img moreimmersive AddSound img Soundhasto syncwithvisual becomes more immeisme Soundneeds visuals Is qq.eeal should Interact always with the Sound Today's topic Music casing tone.js Differentaspects ofcreatingcomputationalmusic Algorithmic music Aleatoric music howthecomposition willsoundlike Generativemusic is not pre decided Akshansh Chaudhary 38 MFADT | Parsons School of Design
  • 41. Reference SixMarimbas StoneReich Thereis a structuretothe music creation JohnZorn Cobra Activity Compare 2 musical instruments Piano Clarinet flexible Sound Its Morevariation why I Torewindyfeeling inclarinet faffayaffaffanbine square triangle sawtooth Timbre a termusedto differentiate soundfoam 1instrument tothatfromanother anythingthatisn'tpitch on loudness CA D s Otherqualities to judge thesound Attack Decay Sustain Envelope ReleaseCR ADSR tf shape ofa sound AdditiveSynthesis Adding waves togeta complex sound Otherterms Subtractive synthesis Wavetablesynthesis Sampled Synthesis Fra Aonsynthesis Akshansh Chaudhary 39 MFADT | Parsons School of Design
  • 42. o Code synth toMasterc tolistento asound Speakerplays at 44 tooHg In SS we create an oscillator havethatfillthebuffer makeSound 255 Is values inthefuture Activity whatwould you needin Is tocreate a melody howwould yourepresentdata Note pitch dean Sequence Arrayofnullobjects loudness Arraysofaways rest time Vines Constraints Phrase InScale major minor Note in Playingwithmusic UseMusl Ceasymath Parameters UseScientificPitchHolation 30 si f f lsupported bytone.jp G Dby E 4 r const melody C EU 4n 154 s Sn rest Im J Quarternotee 42 1Quarternote Akshansh Chaudhary 40 MFADT | Parsons School of Design
  • 43. Activity HowtocreateSound machines Compositionstructure T Main away picking random Lhotesubset ofnotesnotes filteringit to a setofkeys Choose a noteusing a noise fn insteadofrandom Markovchain tightassociationb w states having a structure Guidetocreate a melody 4Planningthetarget characteristics Ose C major Use414time Only Ya Ya notes Notests Term Degree 8 Position in a scale E o l 2 concatfn combine flattenmelodies fromdiffarrayinto one return IT concatCa b a c Challenge Record make a song Akshansh Chaudhary 41 MFADT | Parsons School of Design
  • 44. 26Ape2019 Using Openseats Constantine modeling notdoneinMaya thereofFusion CAD Create codethatgenerates a model Difftway to construct3D models Activity Discuss a challenge response whichdoesn'tuse code IsAndrew Levinson's Midi MusicPiece Moviereference Rosencrantz Guildenstern areDead Great project Build a 3Dpainterfromscratch youlearnaboutaxis Assignmentideas 3D MajorMajor3Dform VR Unity CNC cut CMajorMajor 3Dsetup Autodesk 3D characters Minami Sketches in Saransk's project humanmolecules Openseed OpensCAD Using constructivesolidgeometry 4 with Booleanoperations to createcomplexshapes Akshansh Chaudhary 42 MFADT | Parsons School of Design
  • 45. OpenSCAD is its own language Ifyou want Ts version ofOpensCAD bOpenseats net Openseals org Opensons is notlike C C languagefamily Terms Difference operator cylinder action PROGRAMMING PARADIGMS Functional vs Procedural programming how you are Organize steps ink procedures organizingyou Organizelogic thoughts in a usingfunctions program Imperative vs Declarative Programming Iswydb achieve Isdetailing outtheresultthanthe a goal leg e Is stepstodo eg sa Specificofthe resultleg Openseats Akshansh Chaudhary 43 MFADT | Parsons School of Design
  • 46. objectOriented Programming Groupsrelateddata proceduresusing objects logicprogramming stating a setofsubs bunch ofstatements eg constraintsolving Immfutatele us thutable Data eyopensatDZ µhefise vs Infing Notation Operated Operation in variable values comes first bw operands assignedlastget 23 6 2 3 76 thatvalue Named vs loisitionatayduffindeo 4,1 btw kyhn derkho4 ee L anteo true x South Programming paradigm Fmd froceduralobject oriented logic imperative declarative Paradigmfor Js fnal Imperative ProceduralOOPDeclarative Paradigm forOpenseas Declarative procedural logic Infiometation functional Prefixnotation Akshansh Chaudhary 44 MFADT | Parsons School of Design
  • 47. to 2 in prefixnotation Giving instructions si S2 recipe Immutable8 last var value cannotchangethevalue OpensCAD Notes Openseats use to render an object as a ghost fn fa fs control no ofedges make an objectred i Useful forselection echo paint console logmodule in Openseals function in TS forloop naittendifferently I forloopforany no ofvariables ParametricOpenseats Reference fordownloading a 3D model forprinting 3Dpainterworks on Sliced f G codes codingfor3Dpainting Akshansh Chaudhary 45 MFADT | Parsons School of Design
  • 48. Houdini Node based3D modelingprogramfor VFX Industryprogram This week'schallenge Build a castle e Akshansh Chaudhary 46 MFADT | Parsons School of Design
  • 49. 03May2019 Today'sgroup Noah the table3 A ACTIVITY 3D Vs Music 3Dsketches are visualexperiences not auditory Iffianfaiae hfFhat sound absent to Ifan Musicdidn'thavespatialcomponent Similarity this week Coheetheory keysignature Colors theory keysignature are aesthetic's Aesthetics in both moduleshave mathematicalproperties Akshansh Chaudhary 47 MFADT | Parsons School of Design
  • 50. This week's Topic MICROGAMES A Minigame 1 2 Switch Interesting mini game Plagit seewhyites so weird warloware exampleofMicrogame Group these interactive artefacts ink Games Toys Tools Monopoly Lego Photoshop Chess Hammer again X Tops Brainstorm atleast 10Defiling on characteristicfeatures of games mustbepresent commonlytrue egbirdshave eg birds can wings fly Akshansh Chaudhary 48 MFADT | Parsons School of Design
  • 51. Parameters Rules Diffaesthetic suspendeids v Start End Tempo Outcomes Setting tonne vciual Goals Player Levels winChess Interaction Rankthem in the orderofimportance others Agencychoice Instructions Emotional Engagement Resources Mastery 1Abilitytoimprove Addiction Emergentplay Obstruction x Activity Approaching Learning Newlibraries 8 tactics you usedtostartlearning tools Document page Perogsamniungstructure Videotutorials Procedural usfinal Examplecode looking atthesourcecode forlibray Implementmethods platforms blog Istackexchange Ewan reporting Canto console Akshansh Chaudhary 49 MFADT | Parsons School of Design
  • 52. Selfapplication Top 5 Using ps play E kickAsBookmarklet therework in setup lessin drawfunction Coding challenge Couch co op 2playssitting next toeachother competing example lovers in spacetime Posted Toolto createpixel art Akshansh Chaudhary 50 MFADT | Parsons School of Design
  • 54. Top 3 problems withthis class ClassTiming1Day Discussion on themindmap activity Too many sketches duringfinals No collaboration insketches No communion b w classes Some topics aretoo narrow 1similar Sketchformattoselfdirected Solvetheproblem I No room fordeepdine Trinechangecannotwork constraint 3tickets choose wisely Weekwith lowersketches added constraint on no ofelementsused Deepdineallowed forimp topics strategies parameters Make a sketchfromsomeotherweek fora weekthat isn'tthatimp Oneweek on personal expression end ofcourse Akshansh Chaudhary 52 MFADT | Parsons School of Design