General information

Subject type: Mandatory

Coordinator: Jorge Oter Gonzalez

Trimester: Second term

Credits: 4

Teaching staff: 

Marco Antonio Rodríguez Fernández
Luca-antonio Saavedra Todd 

Teaching languages

  • Catalan

Les classes de l'assignatura es faran principalment en català, tot i que la bibliografia i el material de suport podran ser en altres llengües (castellà i anglès)


Specific skills
  • E4_Design, plan, edit, program and market interactive multimedia applications

  • E10_Apply processes, methods and techniques to develop creativity and innovation in audiovisual production, multimedia development and video game programming


When arriving at this subject, students have worked on the concepts of basic algorithms and data structuring using markup languages ​​in previous subjects. Taking this knowledge as a basis, this subject widens the spectrum of possibilities to train the student in the production of interactive applications that use different audiovisual media to generate reactive multimedia results that can be included in different media.


Topic 1.- Basic algorithmic

1.1.- Peculiarities of the graphic library (p5js)

1.2.- Basic drawing tools

1.3.- Variables, conditional and sequentiality

1.4.- Interaction

1.4.1.- Mouse interaction

1.4.2.- Calculation of collisions

1.4.3.- Interaction with the keyboard

1.4.- Loops

Topic 2.- Images and video

2.1.- Preloading multimedia files

2.2.- Video playback

2.3.- Filters

2.4.- Pixel manipulation

2.5.- Video streaming management

2.6.- Audio

2.6.1.- Playback of audio files

2.6.2.- Oscillators and filters

2.6.3.- Audio streaming

2.6.4.- Audio analysis

Topic 3.- Animations

3.1.- Framerate, speed and acceleration

3.2.- Anchorage points and transformations

3.3.- Push and pop

Subject 4.- Other functions of utility

4.1.- Relative positions

4.2.-The function map

4.3.- Linear interpolation

4.4.- Oscillations with sines and cosines

4.5.- Noise, random and Perlin

Evaluation system

The final grade is the weighted sum of the grades for the following activities:

A1: Final exam (50%)

A2: Laboratory practice 1 (13%)

A3: Laboratory practice 2 (13%)

A4: Laboratory practice 3 (13%)

A5: Class 1 activity (2%)

A6: Class 2 activity (2%)

A7: Class 3 activity (2%)

A8: Class 4 activity (5%)


• To pass the course it is essential that the theory mark is 5 or higher.

• The retake exam only retrieves the theory note.

• It is the student's responsibility to prevent plagiarism in all its forms. In case of detecting plagiarism in any activity, regardless of its scope, it will be equivalent to having a grade of 0. In this case the teacher will communicate to the head of studies the situation so that applicable measures are taken in the matter of sanctioning regime.

• Attendance at internships is mandatory.



McCarthy Lauren, Reas Casey, & Fry Ben (2015). Getting started with P5. js: Making interactive graphics in JavaScript and processing. Maker Media, Inc.

Arslan Engin (2018). Learn JavaScript with P5. js: Coding for Visual Learners. hurry up

Bohnacker Hartmut, Gross Benedikt, Laub Julia, Lazzeroni Claudius (2018). Generative design: visualize, program, and create with JavaScript in p5.js

Shiffman Daniel (2023). The coding train.


Shiffman Daniel (2012). The Nature of Code: Simulating Natural Systems with Processing.