• Creative Coding with p5.js

    Title animation from Zach Lieberman.

    Trainer/innen

  • Overview

    Introduction:

    In this course, we are going to learn the basics of Creative Coding using p5.js (javascript), a web-based JavaScript library. We will focus on the creation of visual, interactive algorithms using the platform Openprocessing. 


    Format:

    • Inputs and mentoring will take place physically at ZHdK 
    • Meeting other students will be helpful in developing and building your final outcomes, but the projects are individual
    • All participants will have their own Openprocessing account, where they will upload and share code

    Goals:

    At the end of the course, students will have learned core principles for coding and apply them to creative outcomes. Final results can be embedded in a personal website and shared on the openProcessing community.

    • Expectations and Grading

      Deliverables

      • Workbook: Numerous short assignments are set throughout the course. Students will need to share their outcomes throughout the course on openprocessing.com 
      • Final project and presentation 
      • Documentation of the assignments and final project

      Criteria for evaluation

      • Final Project 40%
      • Exam 30%
      • Documentation including short assignments 30%

      Attendance

      A minimum of 80% attendance is required to pass the course.

      Documentation

      Complete all the required exercises on openProcessing.

      Document a short selection of exercises, and all of the main assignments in a pdf form. Include screenshots, and brief comments explaining the process and results. Only short code samples if appropriate, otherwise just have it documented on openProcessing. 

      Submit a PDF documentation to:  

      /DDE/BDE_VIAD/01_ABGABEN/21_HS/Sem1_CreativeCoding

      • Schedule

        11.11.2021 Seminarraum 4.K15 (Paulina)

        • Loops
        • Nested Loops
        • Arrays 


        12.11.2021 Seminarraum 4.K15 (Paulina)

        • 2D Arrays
        • Easing


        17.11.2021 Seminarraum 4.K15 (Luke)

        • 9-12:00 Kick-off Collaboration Project "Reactive Signs"
        • Vectors


        18.11.2021 Seminarraum 4.K15 (Luke)

        • Classes and Objects
        • SVG + Images


        19.11.2021 Seminarraum 4.K15 (Luke + Paulina)

        • 9:00 Classes and Objects continued.
        • 10:30 Main Assignment Typography Introduction (Luke + Paulina)
        • Main Assignment + Mentoring


        23.11.2021 Seminarraum 4.T06 (Luke + Paulina)

        • 9:00 Libraries
        • 10:00 Main Assignment Microinteractions Introduction
        • 10:30 - 12:00 Mentoring Luke
        • 13:00 - 15:00 Mentoring Paulina


        24.11.2021 Seminarraum 5.D02 (Luke + Paulina)

        • 09:00 Main Assignment Freestyle Introduction (Luke + Paulina)
        • 09:30 - 12:00 Mentoring Luke
        • 13:00 - 15:00 Mentoring Paulina


        25.11.2021 Seminarraum 4.T06 (Luke + Paulina)

        •  Mentoring depending on need


        26.11.2021 Seminarraum 4.T06 (Luke + Paulina)

        • 10:00 Exam 
        • 13:00 Final Presentation Main Assignment


        08.12.2021 

        • Documentation Deadline



      • Ressources

        Course Material:

        openprocessing.org/class/71508

        wiki.iad.zhdk.ch/PB

        Software:

        Programming ressources:

        • Books

          1 Datei

        • Slides

          1 Datei

        • Main Assignment

          For the main Assignment, students are to develop 3 separate outcomes:

          Interactive Typography: Produce interactive typography that responds to some input from the user, such as a mouse or keyboard interaction.  

          Unconventional Micro-Interaction: Microinteractions are small moments where the user and design interact, such as in the individual interface components. Choose a typical micro-interaction such as volume control, or colour selector, and create a playful reinterpretation.   

          Freestyle: Produce a visual outcome of your own choosing. The only constraints are that you must use a library and object-oriented coding. 

          Guidelines: 

          • Use the template provided for all of your outcomes
          • Share your work on openProcessing from the start of the assignment 
          • Save iterations of your code throughout your process.