Introduction

The module "Design Coding" is a beginners course in coding for designers. It is split into two parts: "Design Coding 1" in the first semester and "Design Coding 2" in the second.

More details can be found here: HfG Prüfungen und Ordnungen

Topics

Basics

Basic computer knowledge is taught and practiced. Topics contain Files, folders and data organization methods. File naming conventions are mentioned and explained.

Text Editors

The difference between Rich Text Editors and Plain Text Editors is explained and demonstrated. The students install Visual Studio Code on their systems.

Version Control

The benefits of version control (git) are demonstrated and explained. The students register an account on our own gitea instance and install git on their systems.

Screen Sizes and Coordinate Systems

Different coordinate systems that are used in 2D computer graphics are explained. Screen coordinates, resolution and physical screen size are brought into perspective. The difference between raster images and vector images is also part of this topic.

Coding

Coding is taught with the help of a creative coding framework named p5.js. It is the web version of Processing and a good visual tool to learn the basics of coding. The students install the p5js.vscode extension for Visual Studio Code.

The structure of a p5.js project is explained and the basics of variable scope are mentioned.

A few examples are shown and the necessary information sources are introduced. (Tutorials, reference)

Basics Shapes and Colors

p5.js functions for basic shapes and colors are explained and demonstrated.

Basic Control Flow

Loops and branching are explained and demonstrated. (for, if, switch/case)

Datatypes

Basic datatypes are explained. JSON is mentioned and demonstrated.

3D Basics

Meshes and 3D operations are explained. Parts of meshes, vertices, edges, faces are explained and shown. Generation of 3D models, exporting and importing into p5.js is explained and demonstrated.

3D Primitives

3D setup of a p5.js project is demonstrated and 3D primitives in p5.js are shown.

Animation

Concepts of computer animation are explained and demonstrated. Basic topics like framerate, frametime, deltatime, event loop are explained.

Oscillation / Randomness

Basic techniques of creating oscillating movements and randomness are demonstrated and explained. (sin/cos/random)

Interaction

Methods of interacting with p5.js via mouse and keyboard are explained and demonstrated. Further methods for example webcams, microphones are mentioned.

Coding Project

The second half of the semester is used to practice coding. The goal is to create an interactive game-like project.