# Artful Coding - web-based games development

## Concept

Two part course (of the type: Vorlesung mit Übung), with 2 SWS/2 ECTS in winter term as part I and 2 SWS/2 ECTS in summer term as part II.

Major contents of part I:
* Approaching coding in an artful way - diverse aims and means to build web based games and applications
* Recap on HTML/CSS/JS and intro to ES6+ & jquery
* State & Storage
* HTML5 Canvas
* (Re)implementing simple games: typing game, memory game, jumping block game

Major contents of part II:
* Using frameworks and scaffolds
* Phaser.io
* Final project: build your own game prototype

Requirements:
* for part I: some experience with HTML/CSS/JS or other programming langues (e.g. students who already visited one of the Web Design, Creative Coding or Python courses at the Angewandte). Materials will be provided for recap and getting up-to speed until the second course session.
* for part II: finished part I or has some reference project applying the techniques demonstrated in part I

## Artful Coding I (WT 2021/22)

The final mini project in this course consits of a students own (experimental) modification of one of the three games developed so far in the course.

Grading:
* 25%: 5 coding exercises after sessions 2, 3, 4, 5, and 6
* 25%: Attendance & active participation
* 25%: Peer code review & feedback
* 25%: Final mini project

General schedule of the sessions 2-6:
* 20min : Recap and Q&A from last session
* 60min : Input on session topic by lecturer
* 15min break
* 45min : Intro to exercises, in-class coding
* 40min : Recap on in-class coding session, peer problem solving

### Description

Artful coding can be many things. Besides the creative mastery of the tools of the trade, it often also means a playful approach to developing computer programmes. More specifically it can also mean to create playful digital content by applying a (playful) approach to computer programming. In this course we will approach this kind of coding and you will learn the basic skills to develop simple games that can be run in (almost) any web browser and be integrated into (almost) any web page.

The course will get you up to speed with the basics of web development, based on HTML5, CSS and modern Javascript (ES6>). While the first three sessions aim at getting everyone to a point where you have the basic skills to create simple web based games, the later sessions focus on implementing three different kinds of simple games: a typing game, a memory game and a physics-based jumping block game. At the end of the course you will be tasked with a final project, the contents of which will be chosen throughout the course. The minimal version of a final project is an individual adaptation of one of the three games implemented in the course (e.g. build you own experimental extension, quirky and whacky mechanics, reflective/engaging/provocative content, ...).

As a teaser, this course also readies you to attend the Artful Coding II course in summer semester, which will introduce you to a professional and mobile ready HTML5 game engine and facilitate a more open approach to create your very own kind of web based game.

Requirements:

There is no formal requirement to attend. But you should be familiar to some extent with basic web design and/or programming. If you have already completed one or more of the following courses at the Angewandte you are all set:

* Web Design 1 or 2
* Creative Coding 1 or 2
* Physical Computing
* Grundlagen des Programmierens

If you have not visited any of these or similar courses and are not sure, and if you did not learn those skills in some other settings on your own, you still can attend and get up to speed with additional materials pointed out in the first session. It just means, that you will have an increased workload until the third session. In case of doubt please send an e-mail to [e-mail] , then we can discuss if it makes sense for you to participate.

ECTS breakdown:

2 ECTS = 50 hours

* 20 hours: scheduled teaching sessions
* 15 hours: exercises alongside the teaching sessions
* 5 hours: peer code review & feedback
* 10 hours: final project

### Examination Modalities

Grading will be based on:

* 25%: Attendance & active participation
* 25%: 5 coding exercises after sessions 2, 3, 4, 5, and 6
* 25%: Peer code review & feedback
* 25%: Final mini project

### Comments

Blocked, roughly every other week, on Wednesdays from 14:00 to 17:00. Online consultation for your exercises is available at the same time in the weeks where no sessions are scheduled. For detailed schedule see dates below.

BYOD policy:

Please bring your own device (ideally a laptop computer), to get most out of the course, as part of the course sessions will facilitate hands-on exercises in coding. In case you do not have a laptop or cannot bring one, it is possible to team up with another person with laptop. You can also send a mail to [e-mail] and we might find some spare device that you can use for the course.

### Key Words

coding, programming, web development, HTML, CSS, Javascript, games, digital art, computational art, media art, creative coding, Programmieren, Spiele, Webentwicklung, Computerkunst, Medienkunst, Digitale Kunst

### Dates

1. [Oct. 13]: Intro & evaluation of expectations & tooling
2. [Oct. 27]: HTML, CSS & JS basics refresher
3. [Nov. 17]: Advanced Javascript, ES6 and beyond, jquery
4. [Nov. 24]: Typing game
5. [Dec. 15]: State & storage, memory game
6. [Jan. 12]: HTML5 Canvas & jumping block game
7. [Jan. 26]: Final mini project, recap, closing

### Course Enrolment

From 13 September 2021, 05:23 to 11 October 2021, 23:05
Via online registration
via email: [e-mail]

### Curriculum Allocation

Already assigned:
* co-registration: possible
* Cross-Disciplinary Strategies (Bachelor): Science and Technology: Deepening / Application
* Cross-Disciplinary Strategies (Master): Study Areas: Study Area 2: Science and Technology
* Design: Specialisation in Graphic Design (2. Section): Technical Basics: Human Computer Interaction
* Design: Specialisation in Graphics and Advertising (2. Section): Technical Basics: Design for Digital Media
* Design: Specialisation in Applied Photography and Time-based Media (2. Section): Technical Basics: Applied Photography - Ways of Presentation
* Fine Arts (2. Section): Artistic Practice in Technical Context: Workshops
* Fine Arts (2. Section): Artistic Practice in Technical Context: Free Electives out of Artistic Practice in Technical Context
* Industrial Design (1. Section): Transfer Techniques: Experimental Lab
* TransArts - Transdisciplinary Arts (Bachelor): Artistic and art technology foundations: Artistic and art technology foundations
* Individual courses: possible

Also interesting:
* Experimental Game Cultures (Master): Free Electives: Free Electives

## Mail announcements

### To early registrants:

Dear students,

welcome to the Artful Coding course on web based game dev. I am looking forward to kick off this course with all of you on Oct. 13.

Until then I wanted to let you know, that your registration is noted. So you have a fixed place for the course. Only the actual registration confirmation will be done after our first session. So please make sure to be there. Or write me, in case anything happens that makes it impossible for you be at the first session.

Also in case you have any other question, please don't hesitate to write me. Either by mail to [e-mail] or by sending a DM to @andrea.klaura on the Angewandte's Rocket Chat (https://chat.uni-ak.ac.at/)
I will send out another reminder in the beginning of October. Until then, I wish you a playful start into this new semester.

all the best,
jackie

--
jackie / Andrea Ida Malkah Klaura
Backend & DevOps Engineer @ base dev team
Support Kunst und Forschung | Support Art and Research

Universität für angewandte Kunst Wien | University of Applied Arts Vienna
A-1010 Wien, Oskar Kokoschka-Platz 2
https://dieangewandte.at

### One week before the course

Dear students,

only one week left until we can kick off the Artful Coding course on web based game dev. I am very much looking forward to seeing you all next Wednesday at 14:00 in seminar room 24 at the VZA7.

So far, there are 24 people registered for the course. This means for all of you, who already registered, there is a fixed place in the course. But please note that your final registration will only be confirmed at the kick-off meeting next Wednesday. Make sure to be there. Or write me, in case anything happens that makes it impossible for you to be at the first session.

As some have already asked: the course will take place in person at the Angewandte, as this is the rectorates current policy on teaching. We can certainly talk about some additional remote options in the kick-off session. If you cannot participate in the kick-off session please write me an e-mail in advance, so we can find another solution. Otherwise I will have to cancel your reserveration.

Also in case you have any other question, please don't hesitate to write me. Either by mail to [e-mail] or by sending a DM to @andrea.klaura on the Angewandte's Rocket Chat (https://chat.uni-ak.ac.at/)

See you next week then. Until then, I wish you a playful start into this new semester.

all the best,
jackie

--
jackie / Andrea Ida Malkah Klaura
Backend & DevOps Engineer @ base dev team
Support Kunst und Forschung | Support Art and Research

Universität für angewandte Kunst Wien | University of Applied Arts Vienna
A-1010 Wien, Oskar Kokoschka-Platz 2
https://dieangewandte.at

---
This page is part of the course website at https://tantemalkah.at/2021/artful-coding
All contents, where not otherwise noted, are licensed by [Andrea Ida Malkah Klaura](https://tantemalkah.at/) under a [CC-BY-SA 4.0 license](http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1).