Fonaments de Programació Visual amb p5.js: Algoritmes, Funcions i Variables

function setup () {createCanvas (amplitud, altura);

Algoritme → passos o regles lògiques que solucionen un problema

- Seqüència de passos o regles definides i ordenades

Descriu solució a un problema concret per a una tasca concreta

- Una sèrie lògica d'instruccions dissenyades per a un propòsit específic

- Exemple → procés per dibuixar un cercle centrat en un canvas

Programa

- Conjunt d'instruccions escrites en llenguatge de programació específic

- En executar, fa una tasca o resol un problema

- Implementació d’un algorisme que es pugui executar per aconseguir resultats concrets

- És l’sketch → el primer que apareix al p5.js i el que permet escriure codi en llenguatge de programació

Sentències

- Instruccions individuals que formen un sketch en p5.js

- Els enunciats simples acaben amb punt i coma

- Exemple → createCanvas (400, 400);

Funcions/mètodes

- Blocs de codi reutilitzables

- Es declaren mitjançant la paraula clau “function”

- Pot englobar sentències i altres elements

- Exemple → function draw () {...}

Setup

- Inicialitza el canvas i altres paràmetres

- S’executa només una vegada

- S’utilitza per a una configuració única

Draw

- S’executa repetidament (per defecte al voltant de 60 FPS)

- S’utilitza per a dibuixos continus i animacions

- Ideal per actualitzar i representar contingut dinàmic

Actualització del monitor → 60 Hz (interval de temps d’1/60 = 0,016 s entre cada fotograma)

- FlipBook → el draw no s’acaba mai → passa tan ràpid que no dona temps de veure-ho

Creant visuals (formes)

Conceptes bàsics de dibuixos

- Utilitzar la funció createCanvas() per configurar el canvas

- Utilitzar background() per definir el fons del canvas

Formes

- Rectangles, el·lipses, línies, arcs i punts

- Personalitzar formes amb paràmetres com la mida, la posició o el color

Paràmetres → utilitzats per passar informació o valors a una funció

- Arc (amplitud, altura, punt inicial, punt final) → angleMode(DEGREES);

Formes personalitzades

- function draw() { background(color); beginShape(); vertex(x, y); endShape(CLOSE); }

Creant visuals (color)

Color

- Per defecte els paràmetres s’interpreten com a RGB

- Es pot utilitzar com a paràmetre per personalitzar completament l’aspecte de les formes

Stroke

- stroke(color);

- strokeWeight(número)

- noStroke();

Fill

- fill(color)

noFill();

Abstracció: 

- Procés de simplificar sistemes complexos centrant-se en les característiques essencials

- Implica crear funcions o procediments per amagar detalls complexos i proporcionar una visió de nivell superior

Descomposició

- Procés de dividir un problema o tasca en parts més petites i manejables

- Implica dividir un programa en funcions o mòduls més petits

Abstracció i descomposició (modularització)

Beneficis

- Facilita la comprensió del codi

- Les funcions es poden reutilitzar en diferents contextos

- Més fàcil de modificar i mantenir

Variables, animacions i nombres aleatoris

Què és?

- Com un contenidor que pot emmagatzemar un sol element de dades (dependrà del tipus de variable)

- Cada variable té un tipus

- Segons el seu tipus pot contenir una mena de dades o una altra

Cada variable

- Té un nom (identificador) → no es pot modificar

- Té un tipus que determina → valors adequats + operacions aplicables

- Pot contenir un valor

Variables data types

- Si porta cometes → string

- Si no porta cometes → boolean

Inicialització de variables (són dinàmiques)

- Quan una variable conté un valor es diu que està inicialitzada (aquest valor pot ser un nombre enter o decimal o una altra cosa)

- Quan una variable no conté cap valor es diu que no està inicialitzada (non initialized)

La inicialització és l’operació de donar el primer valor a una variable

Assignació de variables

- L’operador d’assignació és = → var nomVariable = valorPerALaVariable;

- Significa “emmagatzemar en variable el valor de valorPerALaVariable”

- L’operador d’assignació = és destructiu

- Destrueix els continguts anteriors de la variable que s’assigna

- Es pot canviar dinàmicament el tipus d’una variable assignant-li un valor d’un tipus diferent

Nomenclatura de variables

- Comença amb una lletra minúscula

- El primer caràcter no pot ser un número

- Utilitza “Camel casing” → sense espais, signes de puntuació i posant en majúscula la primera lletra de cada paraula

- Evita els caràcters no anglesos

- Algunes paraules no són vàlides → class, color, else, false... X = x + speed; Y--; = y = y - 1;

Objecte

- Crear un objecte i posar-hi a dins variables

- Contenidor de dades i funcionalitat, agrupant variables i funcions relacionades amb una entitat concreta

- Els objectes encapsulen dades i comportaments (variables) que estan relacionats promovent un codi net i organitzat (estructurat)

- Serveix perquè el codi es vegi molt més net

Random generator

- Funció que permet generar nombres pseudo aleatoris

- Dona variabilitat i impredictibilitat als seus “sketches”

- S'utilitza en → posicionament, mida, color, animació...

- nomVariable = random();

• Program Structure and conditionals
• Què és → disposició i organització dels elements del codi, garantint l’eficàcia, l’execució i llegibilitat
• Inclou

- Inicialització

- Encapsulació

- “Setup” i “draw”

- Comentaris

- Abstracció i descomposició (modularització)

relational operators

logic operators