Notes on Software






Foundation Designer App





### Principles of Procedural Art & Design

## Overview

The Foundation Designer Project is an online education resource with a unique approach to art and design education.

**The Lesson Plan**

- The primary focus of Foundation Designer is an online art and design course – see lesson plans below.
- An art-first approach to coding – Students learn to code as a by-product of learning the principles of art and design.
- Other creative code projects, such as *[Processing](https://processing.org/ target="_blank">https://processing.org/)* and *[Scratch](https://scratch.mit.edu/ target="_blank">https://scratch.mit.edu/)*, focus on teaching code from an engineering point of view. Foundation Designer teaches art & design principles such as color, line, and pattern *through* coding.
- A curriculum developed by artists (not engineers) for people who think visually.
- Open-source syllabus and educational material designed for college and high school level students.

**The Foundation Designer App**

- A visual-scripting app for artists.
- Allows non-programmers to explore creative code using a visual, procedural workflow.
- Familiar, Adobe-inspired, graphics toolset allows for intuitive understanding of coding.
- Developed to teach the principles of 2-D design such as color, composition, pattern, etc..
- Targeted towards high-school and college students, but it can be used by anyone interested in creative coding.
- Open-source software.



We believe creative code should be an integral part of an art & design education. That’s why Foundation Designer combines familiar graphics tools with a procedural workflow and text-based coding environment.

Conceived by [RISD](http://www.risd.edu/) Design Professors and inspired by projects such as [Processing](https://processing.org/) and [Scratch](https://scratch.mit.edu/), Foundation is the missing toolset in design education.

Learn directly in-app, everything from basic color theory to advanced generative forms.

Foundation guides students through the fundamentals of two-dimensional design while integrating concepts from computer science. The app provides an intuitive approach to exploring the relationship between design and code.

Developed as an entry point

The place to start before learning more advanced software such as Unreal Engine, Houdini, Blender, Rhino+Grasshopper, Flame, Nuke, etc.

Procedural design is part of standard workflows in industries such as gaming, film/VFX, industrial design, and architecture. Foundation's unique educational toolset helps artists to work and *think* procedurally.

A unique combination of visual and text-based coding, for NeuroDiverse learners.

Artists think differently. Many are visual learners. The Foundation app is being developed by and for people who think and learn in a variety of ways. The visual coding environment allows artists to create algorithms in a way that makes sense to them.

## Development Timeline

### Phase 1: Fundraising & Planning

### Phase 2: Educational Development

- Curriculum Design
- Preparation of Educational Materials
- Exercise files
- Slides and Reference Materials
- Lesson Video Recording

### Phase 3: App Development

- Conceptual Development & Project Planning
- UX Design
- Tool Prototyping
- UI Design
- App Prototyping
- Product-Testing
- Open-Source Deployment

## SYLLABUS

| | | | | | | | |
| --- | --- | --- | --- | --- | --- | --- | --- |
| | FOUNDATION DESIGNER
LESSON PLANS | | | | | | |
| | | | SUBJECT | | DESIGN | | CODE |
| | | | | | | | |
| | Shape & Line | | Drawing lines, curves and closed shapes | | Dividing the canvas
Creating Space, leading lines | | X, Y coordinate system |
| | | | Shape Relationships | | CONTRASTS OF:
Scale
Position
Rotation
Shape
Value
Balance, Spatial Illusions | | Classes
Instances
Z-order |
| | | | Combine & Parent | | Boolean operations
Negative space | | Relative vs Absolute position
Boolean Operations |
| | | | | | | | |
| | | | | | | | |
| | Color | | Color Systems | | Color Wheels
RYB, RGB, CMYK, HSB
Munsell
Gamut | | RGB |
| | | | Color Relationships | | CONTRASTS OF:
Hue
Value
Chroma
Complimentary, Analogous, etc. Controlled Gamuts
Balance, Spatial Illusions | | Variables
(Changing R value changes G and B values) |
| | | | Color Illusions | | Color constancy | | color spaces and conversion |
| | | | | | | | |
| | | | | | | | |
| | REPETITION 1: Patterns & Arrays | | Linear Arrays
Grid Arrays
Radial Arrays
Reflection & Symmetries | | Basic Repeats
Negative space | | Loops
Conditionals
Referencing arrays |
| | | | Guide Structures
(Invisible structures)
Grid offsets
Gutters & Grid spacing
Visible structures | | Grid systems | | Guides and Grid |
| | | | Parent/child Arrays
(i.e. a grid of radial arrays) | | | | Classes continued |
| | | | Anomalies
Referencing array items
Un-instance | | CONTRAST OF:
Shape, Color, Scale, Rotation, Position | | |
| | REPETITION 2: Progression, Sequence, Narrative | | Gradation arrays
(of scale, color, position, etc.)
Gradation grid arrays
Alternating Gradation | | CONTRAST OF:
Shape, Color, Scale, Rotation, Position
Rhythm | | Loops & Conditionals continued:
Intro to Variables |
| | | | Narrative Sequence | | | | |
| | REPETITION 3: Iteration | | Fractals
Growth Simulation
Wave Simulation | | Tautological Repetition | | |
| | | | Grammars
[context-free grammars]
Combinatorial iterations (Every combination of…)
Typologies | | Iterative combinations
Typologies | | |
| | REPETITION 4: Randomization | | Randomization | | Fields: Clustering, Scattering | | Random range |
| | | | Noise | | | | Perlin Noise |
| | TIME & MOTION 1: Basics | | Progressions
Sequence
Gradations | | CONTRAST OF:
Time
On vs off
Static vs Moving
Fast vs slow
Rhythm
Musical concepts applied to design
Motion
Direction
Speed
Position
Rotation
Scale
Color | | Vectors
Loops
Conditionals
Variables
Exporting |
| | | | Grammars and time | | linear vs non-linear sequence | | Random Combination Generator |
| | | | Iterative growth | | Patterns in nature | | |
| | | | Parenting and time | | Clocks and machines | | |
| | | | Narrative time | | Storyboarding | | |
| | TIME & MOTION 2: Physics | | Forces
Oscillation
Particle Systems
Physics & Collision
Autonomous Agents
Cellular Automata
Fractals | | | | |
| | GAMEPLAY & INTERACTIVITY | | Basic interaction
Click on shapes
Follow the mouse
Keypresses
Types of interactivity
Physics and Interactivity
Levels, Boards, Spaces
Non-Linear Storytelling | | | | Mouse inputs
Keyboard inputs
Other inputs |