104321 - PRODUCTION AND PROGRAMMING OF INTERACTIVE APPLICATIONS

Subject type: Mandatory

Coordinator: Jorge Oter Gonzalez

Trimester: Second term

Credits: 4

Academic year: 2025

Teaching course: 3

• 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)

By the time students arrive at this subject, they 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 expands the spectrum of possibilities to enable students to produce interactive applications that use different audiovisual media to generate reactive multimedia results that can be included in different media. The objective is to ensure that students are able to design interactive applications that include audiovisual components (audio, video and images). This involves both the technical aspect of developing the necessary code, and the planning of the production of the audiovisual content needed for a project with an interactive non-linear narrative.

The classroom (physical or virtual) is a safe space, free of sexist, racist, homophobic, transphobic and discriminatory attitudes, either towards students or towards teachers. We trust that together we can create a safe space where we can make mistakes and learn without having to suffer prejudice from others.  

1.- Basic algorithm

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

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.- Streaming and real-time audio analysis

3.- Animations

3.1.- Framerate, speed and acceleration

3.2.- Anchorage points and transformations

3.3.- Value mapping

3.4.- Linear interpolation

3.5.- Oscillations with sines and cosines

3.6.- Perlin noise and randomness

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

A1: Final exam (35%)

A2: Laboratory practice 1 (10%)

A3: Laboratory practice 2 (10%)

A4: Laboratory practice 3 (20%)

A5: Class 1 activity (5%)

A6: Class 2 activity (5%)

A7: Class 3 activity (5%)

A8: Class 4 activity (5%)

A9: Class 5 activity (5%)

A1 0.35+A2 0.10+A3 0.10+A4 0.20+ A5 0.05+ A6 0.05+ A7 0.05+ A8 0.05+ A9 0.05

Considerations:

• To pass the subject it is essential that the theory grade is 5 or higher.
• The retake exam only recovers the theory grade.
• Identification of plagiarism is considered a serious circumstance that may result in a failing grade for an activity. In case of detection of plagiarism, the coordination of the degree will be informed so that the corresponding disciplinary measures can be taken. 
• Attendance at internships is mandatory.
• Given the fundamental nature of this subject, the student is required not only to provide solutions to certain problems, but also to be able to generate them autonomously, without any external help. For this reason, the use of generative artificial intelligences (IAG) to resolve the problems posed in the subject —whether in exercises, practices or tests— is counterproductive. In this sense, the use of IAG to generate programming code is not allowed, not even in the form of fragments.

Any form of academic fraud will be sanctioned in accordance with the center's assessment regulations. If signs of fraud are detected, including the improper use of generative artificial intelligence tools, the subject's teaching staff may call the student for an individual interview with the aim of verifying their authorship.

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

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

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

Shiffman Daniel (2023). The coding train. https://thecodingtrain.com/tracks/code-programming-with-p5-js