Schedule

Intro to Web and Code

Day 1

• Introductions
• Tour of Gray Area
• Javascript and P5js Basics
• Installing Github, text editors and recommended Atom packages
• Review of the internet and Servers
• Homework: Finding and sharing cool web art

Day 2

• Look at New Media Artists
• Making sure that we have all of the software intalled correctly
• Setting up Github Pages and editing our page
• Learning how to sync and clone repositories with Github Desktop
• Overview of CSS
• Homework: use your github.io page and add three images of your work with a link to something and description of the work.

Day 3

• Homework Review
• Intro to the Console and Command Line
• Discuss Debugging
• Do a Debugging exercize
• Explore some tools that help with Debugging
• Group Design/Code Challange!
  • Break into groups and pick a contemporary art movement and represent it in HTML and CSS only.
  • Make sure that the importance and message of the art movement is reflected in the aesthetic of the webpage.😎
  • Use a Google Font, embed a video, sound, find/create and add an animated GIF to your page .

Day 1

• Homework Review
• A Presentation:Javascript Basics
• Three In Class Code Challanges This is a great resource for JS
• Explore JS Libraries
• Homework: Read Chapters 3 - 4 of Eloquent Javascript

Day 2

• Review Homework
• Learning about Functions and Classes!
• In class code challanges
• Homework: Read Chapters 5 and 6 of Eloquent Javascript

Day 3

• Javascript Code Challange: use two data structures ie array/object to include in your meme website. Bonus if you can include a JS library.
• Some inspiration: Animation, Modal Boxes, Quote Generator

Day 1

• Gettign Started with p5js!
• P5js Basics
• Starting a local web server to view your p5js sketches
• Homework: Pick an example from Nature of Code or Codepen and find out how and why it works then make changes to two of the following: speed, color, size, directon, pitch, frequency, interaction (click, keypress, etc)

Day 2

• New Media Artists
• The Post-it Note Design Process for Deciding Anything
• Meet with groups and share findings
• Make a copy of the Project Concept Template and complete it with your group and post to blog.
• Using advanced inputs with p5js! Face Tracking Example,a More sophisticated Face Tracking Example

Day 3

• Group Work
• Make a P5js sketch that respons to the selected topic. Include animated GIFs, Sound, or Video. Post project to Blog.
• Share work out with group
• If time permits: Learn how to make gifs the easy wayand the hard way