Studies
Admissions
The Institute
Resources
Studies
Admissions
The Institute
Resources
Studies
Admissions
The Institute
Resources

ID404a

Programming Interactivity II

Barcelona Campus
Nov 30, 2020 - Dec 18, 2020
Continuing the Programming Interactivity I course, students will dive deeper into the world of programming, and learn how to create interactions within a screen or an interactive installation.
Barcelona Campus
Nov 30, 2020 - Dec 18, 2020
Ricardo Mendieta

Faculty

Ricardo Mendieta

Head of Digital, Harbour.Space

Course length

3 weeks

Duration

3 hours
per day

Total hours

45 hours

Credits

4 ECTS

Language

English

Course type

Offline

Fee for single course

€1500

Fee for degree students

€750

Skills you’ll learn

Human Computer InteractionData VisualisationInteractive Experiences
OverviewCourse outlineCourse materialsPrerequisites

Overview

This course deepens into programming, diving into user interactions, physics, motion, sound, and inputs. Students will obtain a solid foundation of programming that will allow them to create interactive experiences and animations. Learning how to create printable artwork, navigate a real-time generated 3D environment or detect user poses with a webcam are just a few themes that will allow students to create interactions within a screen or an interactive installation where their creativity is the limit, while extending their knowledge of programming through fun and interactive exercises. The final project will be a real-time creative coding experiment on a theme of the students’ choosing.

Learning highlights

  • Learn to draw vectors and manipulate images by code
  • Understand how physics and maths are used to create movement
  • Learn to visualize data structures in a creative way
  • Learn how to create artwork with code for offline and online media
  • Increase knowledge of programming fundamentals and methodologies
  • Discover how 3D interactive experiences are built
  • Discover creative ways of using different inputs and outputs for interactive experiences

Course outline

15 classes

Dive into the details of the course and get a sense of what each class will cover.
Monday
Tuesday
Wednesday
Thursday
Friday
Monday
1

Class 1

Drawing with code

  • HTML Canvas
  • Drawing shapes
  • Drawing images
  • Creating Masks
  • *Exercise
Tuesday
2

Class 2

Physics Fundamentals I

  • Coordinate Systems
  • Vectors
  • Translation
  • Drag
  • Proximity
  • *Exercise
Wednesday
3

Class 3

Physics Fundamentals II

  • Attraction
  • Gravity
  • Resting Position
  • Bounds
  • *Exercise
Thursday
4

Class 4

Creating Particles Systems

  • How does a Particle system work?
  • Harmonic Random Movement
  • Perlin Noise
  • *Exercise
Friday
5

Class 5

Practice Session

Monday
6

Class 6

Sound and Audio

  • Interactions and Sound
  • Music Visualizations
  • Generating sound with code
  • *Exercise
Tuesday
7

Class 7

Pixels and Images

  • Image effects
  • Manipulating pixels
  • *Exercise
Wednesday
8

Class 8

Exploring the third dimension

  • THREE.js
  • Cameras
  • Materials
  • Meshes
  • *Exercise
Thursday
9

Class 9

Interactive Data Visualization

  • D3 Library
  • Layouts
  • Selections
  • Geomapping
  • *Exercise
Friday
10

Class 10

Practice Session

Monday
11

Class 11

Creating Printable Artworks

  • Canvas Sketch
  • PenPlotter files
  • *Exercise
Tuesday
12

Class 12

Camera and Interactivity

  • Using cameras as input
  • Detecting colors
  • Detecting user poses
  • *Exercise
Wednesday
13

Class 13

Wrapping it Up

  • The class will debate the final assignment topic
  • Work on the final assignment
Thursday
14

Class 14

Work on final assignment, ask the teacher questions.

Friday
15

Class 15

Final assignment presentation and evaluation

Ricardo Mendieta

Faculty

Ricardo Mendieta

Head of Digital, Harbour.Space

A career in web design requires different degrees of interaction with developers, sometimes even moving into a frontend developer career. Getting familiar with the basics of programming and acquiring essential knowledge of Web Development will improve how you communicate with the developer members of your team to create better projects more efficiently. In this course, we will learn the principles of interactivity with code. Using Javascript, HTML, and CSS, a parallax scrollable landing page will be created that will challenge our creativity.

See full profile

Apply for this course

Snap up your chance to enroll before all spaces fill up.

Programming Interactivity II

by Ricardo Mendieta

Total hours

45 Hours

Dates

Nov 30 - Dec 18, 2020

Fee for single course

€1500

Fee for degree students

€750

How to secure your spot

Complete the form below to kickstart your application

Schedule your Harbour.Space interview

If successful, get ready to join us on campus

FAQ

Will I receive a certificate after completion?

Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.

Do I need a visa?

This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.

Can I get a discount?

Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.