Obiettivo: Effettuare una semplice elaborazione di una immagine in scilab con l’obiettivo di aumentare o diminuire la luminosità di una foto.

Teoria Rappresentazione di una immagine:

Un’immagine in scala di grigi a 8 bit rappresenta ogni pixel con un singolo valore che descrive la sua luminosità. Questi valori possono variare da 0 (completamente nero) a 255 (completamente bianco), con 256 livelli intermedi che rappresentano diverse sfumature di grigio. Ogni pixel dell’immagine è associato a una matrice bidimensionale, dove ogni elemento della matrice contiene un valore di luminosità che definisce il tono di grigio di quel pixel. Nel contesto delle immagini a 8 bit, un’immagine in scala di grigi è generalmente memorizzata come una matrice di interi compresi tra 0 e 255. La rappresentazione in scala di grigi è particolarmente utile per applicazioni che richiedono analisi di luminosità o contrasto, come nel caso della visione artificiale, della fotografia in bianco e nero e nell’elaborazione delle immagini mediche.

Funzioni non lineari per modificare la luminosità:

Oltre alle funzioni iperboliche, altre funzioni non lineari come i logaritmi e le funzioni polinomiali sono utilizzate per modificare la luminosità dei pixel in modo non uniforme. Queste funzioni consentono di alterare l’intensità dei pixel in modo che alcune aree dell’immagine vengano più schiarite o scurite rispetto ad altre, permettendo così di applicare effetti visivi complessi.

Funzione Logaritmica:

Una delle funzioni più comuni per manipolare la luminosità in modo non lineare è la funzione logaritmica. La funzione logaritmica è utile per schiarire le aree scure dell’immagine senza modificare troppo le aree già chiare. La formula logaritmica applicata ai valori dei pixel può essere espressa come:

h(x) = 255*log(x+1)/log(255)

Questa funzione ha l’effetto di aumentare la luminosità nelle aree scure dell’immagine, rendendo più visibili i dettagli nelle ombre. Tuttavia, non ha un impatto significativo sulle aree già luminose, poiché il logaritmo cresce più lentamente man mano che x x aumenta. È particolarmente utile quando si desidera “illuminare” le ombre senza sovraesporre le luci.

Funzione Polinomiale:

Le funzioni polinomiali sono un’altra classe di funzioni non lineari utilizzate per modificare la luminosità. Una funzione polinomiale di grado nn applicata ai valori dei pixel può essere scritta come:

f(x) = 255*x^2/255^2

Questa funzione ha l’effetto di diminuire la luminosità nelle aree chiare dell’immagine.

CONFRONTO TRA LE FUNZIONI:
Per comprendere al meglio l’effetto di queste funzioni sulle immagini vengono in seguito riproposti i differenti studi di funzione confrontati con l’equalizzazione della retta bisettrice del primo e del terzo quadrante

Codice SCILAB:
Il codice SCILAB presentato, si occupa di caricare un’immagine in formato .dat, applicare una trasformazione logaritmica per alterarne la luminosità e quindi visualizzare sia l’immagine originale che quella elaborata. Il codice è caratterizzato da differenti fasi:

• Lettura dell’immagine: Il codice legge un’immagine salvata in formato .dat (un formato di dati binari). La matrice che rappresenta l’immagine viene creata usando i valori di luminosità per ogni pixel. L’immagine è rappresentata come una matrice di dimensioni 1024×683.
• Elaborazione dell’immagine: Viene applicata una funzione logaritmica a ciascun pixel dell’immagine per modificarne la luminosità. La trasformazione logaritmica è progettata per schiarire le aree più scure dell’immagine, modificando l’intensità dei pixel.
• Visualizzazione delle immagini: Il codice mostra due versioni dell’immagine:

  • La versione originale, letta dal file .dat.
  • La versione elaborata, che ha subito la trasformazione logaritmica per modificare la luminosità.

In sostanza, l’immagine viene letta e poi trasformata utilizzando una formula logaritmica per migliorare la visibilità delle aree scure, per poi visualizzare entrambe le immagini.

FILE immagine:

https://www.arduinofacile.it/wp-content/uploads/2025/02/immagine.dat_.zip

Arduino è collegabile al PC tramite un cavo USB. L’IDE (Integrated Development Environment) è l’ambiente in cui si scrive e si carica il codice sulla scheda Arduino (scaricabile dal sito ufficiale di Arduino (https://www.arduino.cc/). E’ possibile anche usare l’Arduino Web Editor per programmare online, anch’esso disponibile nel sito ufficiale di Arduino.

Un programma Arduino è chiamato sketch e usa un linguaggio simile a C/C++. Ogni sketch ha due funzioni fondamentali (spiegate nel dettaglio qui)

• setup(): Configura i pin o inizializza componenti (eseguito una sola volta all’inizio).
• loop(): Contiene il codice che viene eseguito continuamente.

[crayon-67ec6f46b0b69475265236/]

Ogni funzione e in generale ogni blocco di codice, viene racchiuso tra parentesi graffe { e }. Il totale delle parentesi aperte {  deve essere lo stesso di quelle chiuse }.

Ogni istruzione di programma termina con un punto e virgola ;

E’ possibile inserire dei commenti nel codice, utilizzando la doppia barra  // per commentare su una linea e  barra asterisco (e asterisco barra) /* … */ per commenti su più linee.

Nella funzione setup(), vengono tipicamente configurati i pin. La funzione da usare è pinMode. Ad esempio:

[crayon-67ec6f46b0b7d427755553/]
[crayon-67ec6f46b0b87719434737/]

Altre funzioni importanti e ricorrenti sono:

• digitalWrite(pin, valore): Imposta un pin su HIGH o LOW.
• digitalRead(pin): Legge lo stato di un pin digitale (HIGH o LOW).
• analogWrite(pin, valore): Imposta un’uscita PWM (valori tra 0 e 255).
• analogRead(pin): Legge un valore analogico da un pin (da 0 a 1023).
• delay(millisecondi): Imposta una pausa nell’esecuzione del programma. La pausa è espressa in millisecondi

Esistono molte altre funzioni, che vengono illustrate con gli esempi presenti nel sito.

Per altre funzioni, si rimanda ai tutorial ufficiali di Arduino.

Obiettivo: Realizzare un programma che implementi il gioco della Roulotte utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco della Roulotte.
Nello specifico, la pagina è caratterizzata da:

• Un titolo principale (“Roulette”).
• Immagine della roulette (che si trova in img/Roulette.png).
• Visualizzazione del saldo (fisso a 100$).
• Input per inserire un numero proposto dal giocatore.
• Bottone SPIN per avviare l’estrazione. Premendo il tasto SPIN viene eseguita la funzione Spin() che genera un numero randomico e lo scrive nel relativo spazio.
• Visualizzazione del numero estratto, inizialmente impostato su “0”.

Modifiche:
Al fine di terminare il gioco è necessario introdurre una serie di modifiche:

• Completare il codice gestendo i casi di vittoria e sconfitta (il giocatore perde dei soldi nel caso di sconfitta oppure vince dei soldi nel caso di vittoria)
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Dare la possibilità all’utente di scegliere la puntata.
• Dare la possibilità all’utente di scegliere se puntare sul colore oppure sul numero
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/Roulette.zip

Obiettivo: Realizzare un programma che implementi il gioco del TRIS utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione del gioco del TRIS.
Nello specifico, la pagina è caratterizzata da:

• Nove immagini rappresentanti la matrice 3×3 del TRIS (inizialmente impostate su img/0.png immagine vuota). Premendo su ogni immagine viene lanciata una funziona denominata Premuto alla quale viene passato un parametro che riporta l’informazione del pulsante che è stato premuto attraverso un identificativo da 0 a 8. Premendo i pulsanti cambiano le immagini riportate sul matrice 3×3 diventano rispettivamente croci oppure cerchi.
• Due paragrafi (i.e., giocatore1 e giocatore2 che dovrebbero riportare lo status delle vittorie di ogni giocatore).

Modifiche:
Al fine di terminare il gioco è necessario introdurre una serie di modifiche:

• Completare il codice associando la funzione Premuto a tutte le immagini della matrice 3×3.
• Introdurre un meccanismo utile per determinare il giocatore vincitore.
• Impedire all’utente di premere una casella già scelta.
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Aggiungere un contatore delle vittorie.
• Introdurre una intelligenza artificiale per giocare contro il computer.
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/Tris.zip

Obiettivo: Realizzare un programma che implementi una Slot Machine utilizzando il linguaggio di programmazione HTML, CSS e JAVASCRIPT.

Codice:

Viene in seguito illustrato il codice utilizzato per implementare una semplice versione di una Slot Machine.
Nello specifico, la pagina è caratterizzata da:

• Tre immagini riportanti i simboli di una slot machine (inizialmente impostati su img/0.png)
• Un campo input (disabilitato) sul quale viene visualizzato il saldo.
• Un pulsante “Spin” il quale avvia la funzione javascript Spin(). Quando il pulsante viene premuto, il saldo diminuisce di 1$ e vengono generati tre numeri casuali per determinare il risultato della slot. Se il numero è inferiore a 50, viene imposta l’immagine su “img/0.png”, altrimenti su “img/1.png”. Inoltre viene riprotodotto un suono di spinning (spin.wav).
• È presente anche un’area per inserire soldi, ma la funzione non è ancora implementata.

Modifiche:
Al fine di rendere il gioco più avvincente è possibile introdurre una serie di modifiche:

• Completare il codice aggiungendo le immagini mancanti e gestire in modo corretto le probabilità di vincita e le relative vincite.
• Introdurre una legenda riportante le possibili vincite.
• Introdurre una pagina di accesso alla slot machine nella quale deve essere riportata la data dell’utilizzatore. L’utente può accedere alla solto solo nel caso in cui risulti maggiorenne.
• Aggiungere una animazione legata alla vincita o alle possibili vincite.
• Modificare l’aspetto della slot introducendo un numero maggiore di immagini (ad esempio matrice 3×3)
• Aggiungere suoni nel caso di vincite

E’ possibile scaricare il progetto completo cliccando sul link:
https://www.arduinofacile.it/wp-content/uploads/2025/03/SlotMachine.zip

Obiettivo: Sono riportati in seguito una serie di esercizi utili per testare le proprie conoscenze nell’ambito del linguaggio di programmazione javascript.

Per la risoluzione degli esercizi si suggerisce l’utilizzo del compilatore online:

https://www.onlinegdb.com/online_c++_compiler

ESERCIZI JAVASCRIPT (FACILI)

1) Verifica del Triangolo Crea una pagina HTML con tre input per inserire i lati di un triangolo e un pulsante che verifica se i numeri possono formare un triangolo. Il risultato deve essere riportato in uno specifico paragrafo nella forma affermativa: “I lati inseriti possono rappresentare un triangolo” o negativa “I lati inseriti non possono rappresentare un triangolo”. IMPORTANTE: Per poter rappresentare un triangolo la somma di ogni coppia di lati deve essere maggiore del terzo.

2) Indovina il Numero Crea una pagina HTML con un input in cui l’utente può inserire un numero e un pulsante per verificare se il numero corrisponde a quello segreto scelto casualmente dal computer. Il risultato deve essere riportato in uno specifico paragrafo nella forma affermativa: “Complimenti! Hai indovinato il numero” o negativa con un suggerimento “Troppo alto!” o “Troppo basso!”, a seconda del valore inserito. Il numero segreto è generato casualmente tra 1 e 100 utilizzando il seguente codice:

var numeroSegreto = Math.floor(Math.random() * 100) + 1;

3) Semplice somma: Crea una pagina HTML con due input per inserire numeri e una serie di pulsanti per eseguire le operazioni matematiche di base: addizione, sottrazione, moltiplicazione e divisione. Il risultato deve essere visualizzato in un paragrafo dedicato subito dopo l’operazione eseguita. IMPORTANTE: L’utente inserisce due numeri e seleziona l’operazione desiderata premendo il corrispondente pulsante.

4) Convertitore di Temperatura: Crea una pagina HTML che permetta all’utente di inserire una temperatura in gradi Celsius e convertirla in Fahrenheit o Kelvin.
La pagina deve contenere un input per l’inserimento della temperatura in Celsius, e due pulsanti: “Converti in Fahrenheit” e “Converti in Kelvin”. Il risultato della conversione deve essere visualizzato in un paragrafo. FORMULE DI CONVERSIONE:
– Fahrenheit = (Celsius × 9/5) + 32
– Kelvin = Celsius + 273.15

5) Generatore di Giudizio del Voto: Crea una pagina HTML con un input per inserire un voto numerico tra 0 e 10. In base al voto inserito, viene generato un giudizio testuale:
– tra 9 e 10: “Ottimo”
– tra 7 e 8: “Buono”
– tra 5 e 6: “Sufficiente”
– tra 0 e 4: “Insufficiente”
Se il voto non è valido (non compreso tra 0 e 10), viene mostrato un messaggio di errore.

6) Calcolatrice Grafica: Crea una pagina HTML che simuli il comportamento di una calcolatrice.

Obiettivo: Effettuare una semplice somma tra dati inseriti in una pagina web utilizzando il linguaggio di programmazione javascript.

Pre-requisiti:

HTML #1 Titoli, Paragrafi, Liste, Immagini, Ritorni a capo

HTML #3 CSS

Teoria

JavaScript è un linguaggio di programmazione versatile e potente, utilizzato principalmente per creare contenuti interattivi e dinamici su pagine web. Introdotto nel 1995, è diventato uno dei pilastri dello sviluppo web, insieme a HTML e CSS. Grazie alla sua natura interpretata e alla compatibilità con tutti i browser moderni, JavaScript permette di manipolare il DOM (Document Object Model) per aggiornare contenuti, gestire eventi e migliorare l’esperienza utente senza dover ricaricare la pagina. Con l’avvento di tecnologie come Node.js, JavaScript è andato oltre il frontend, consentendo lo sviluppo di applicazioni server-side e multipiattaforma. Inoltre, le numerose librerie e framework, come React, Angular e Vue.js, hanno ampliato le possibilità di sviluppo, rendendolo un linguaggio essenziale per i programmatori moderni.

Codice HTML:
Il codice HTML presentato definisce una semplice pagina web che consente agli utenti di effettuare una somma tra due numeri utilizzando JavaScript. Ecco i dettagli del suo funzionamento:

• Titolo della pagina: È presente un’intestazione <h1> che descrive lo scopo della pagina: “Effettuare una semplice somma in Javascript”.
• Input: Due elementi consentono agli utenti di inserire i numeri da sommare. Nello specifico questi due elementi caratterizzati dal tag input sono identificati da due differenti identificativi inputA e inputB. Il primo campo viene inizializzato con un valore predefinito di 0. Il secondo campo, con un valore predefinito di 1.
• Output: L’output, viene gestito attraverso un paragrafo caratterizzato dall’identificativo output. Tale valore viene modificato dallo script javascript e definito come la somma dei due input.
• Pulsante: Un pulsante viene utilizzato per lanciare lo script javascript il quale presi i valori dei due input calcola il valore dell’output e va a modificare il relativo codice HTML.

Codice JAVASCRIPT:
La funzione document.getElementById() è uno dei metodi più utilizzati da Javascript. Tale funzione consente di selezionare un elemento HTML specifico della pagina utilizzando il suo attributo id. Questo metodo è ampiamente utilizzato per interagire e manipolare dinamicamente gli elementi del documento.

Ad esempio per ottenere il valore di uno specifico elemento è possibile utilizzare il seguente codice:

var a = parseInt(document.getElementById(“inputA”).value);

Mentre per modificare un elemento della pagina HTML si utilizza il seguente codice:

document.getElementById(“output”).innerHTML = “Risultato: ” + c;

Obiettivo: Applicare i principi dei linguaggi html, css e javascript per creare un semplice slideshow per la gestione di immagini multiple.

Pre-requisiti:

HTML #3 CSS

HTML #4 Tre modi per includere un CSS in un file HTML

Teoria

Codice:

Obiettivo: Applicare i principi del css per ricreare l’effetto Parallax nello scrolling di immagini.

Pre-requisiti:

HTML #3 CSS

HTML #4 Tre modi per includere un CSS in un file HTML

Teoria

L’effetto parallax è una tecnica di design sempre più utilizzata nella realizzazione di siti web per creare esperienze visivamente accattivanti e dinamiche. Si basa su un’illusione ottica in cui gli elementi di sfondo si muovono più lentamente rispetto agli elementi in primo piano quando si scorre la pagina, dando una sensazione di profondità e tridimensionalità. Questo effetto migliora l’estetica del sito e può guidare l’attenzione dell’utente verso sezioni specifiche, contribuendo a raccontare una storia o enfatizzare determinati contenuti. Tuttavia, è importante utilizzarlo con moderazione, poiché un uso eccessivo può rallentare le prestazioni del sito o distrarre l’utente dall’obiettivo principale.

Codice:

Viene in seguito riportato il codice HTML utile per realizzare l’effetto parallax in una singola immagine.
Nello specifico, nel tag <style> si definisce lo stile per l’elemento con classe .parallax. Sono in seguito riportate le principali proprietà di questa classe:Proprietà dello stile: background-image: . min-height: L. background-attachment: fixed: . background-position: center: L’immagine è centrata. background-repeat: no-repeat: L’immagine non viene ripetuta. background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.</p>

• Background-image: URL dell’immagine utilizzata come sfondo.
• Min-height: L’altezza minima della sezione è impostata a 750px.
• Background-attachment: fixed Impostando questo valore a fixed, l’immagine di sfondo rimane fissata mentre il contenuto si muove durante lo scrolling, creando l’effetto parallax.
• Background-position: center: L’immagine è centrata
• Background-repeat: no-repeat: L’immagine non viene ripetuta
• Background-size: cover: L’immagine occupa l’intera area disponibile, mantenendo le proporzioni.

Obiettivo: Applicare i principi delle media queries per creare un sistema a griglia per applicazioni complesse.

Pre-requisiti:

HTML #5 Realizzare applicazioni responsive utilizzando le Media Queries

Teoria

Il sistema a griglia realizzato con le media queries è un approccio efficace per rendere i layout web responsivi e adattabili a diversi dispositivi. Grazie a questa tecnica, è possibile modificare la struttura della pagina in base alle dimensioni dello schermo: ad esempio, su schermi di grandi dimensioni, una griglia potrebbe avere più colonne per sfruttare al meglio lo spazio disponibile, mentre su dispositivi mobili le stesse colonne potrebbero ridursi a una sola, impilando i contenuti in modo verticale per una migliore leggibilità. Nel caso specifico, non viene utilizzato nessun framework o approcci bassati su flexbox o CSS Grid piuttosto viene costruito un proprio sistema utile a comprendere dal punto didattico come funzionano questi approcci.

Codice:

Viene in seguito riportato il codice CSS utile per realizzare il sistema a griglia.
Questo codice crea una griglia responsive utilizzando classi per colonne e media queries per adattare il layout a diversi schermi:
Nello specifico interessanti elementi presenti nel codice sono:

• Box Sizing: L’elemento universale * { box-sizing: border-box; } assicura che padding e bordi siano inclusi nelle dimensioni totali degli elementi, facilitando la gestione dei layout.
• Paragrafi: Gli elementi hanno uno sfondo giallo chiaro, un’altezza di 150px, nessun margine e un bordo nero.
• Righe: La classe .row è impostata per occupare l’intera larghezza disponibile (width: 100%).
• Colonne:
  – Per i larghi schermi (min-width: 1200px), le colonne .col-lg-* vengono impostate con dimensioni proporzionali per realizzare una griglia di 12 colonne, con classi da .col-lg-1 (8.33%) a .col-lg-12 (100%). Ogni colonna ha il float: left per allineare le colonne affiancate.
  – Per i medi schermi (min-width: 950px e max-width: 1199px), le classi .col-md-* seguono la stessa logica, adattandosi a dispositivi di medie dimensioni.
  – Per i piccoli schermi (max-width: 949px), le classi .col-sm-* applicano proporzioni simili, garantendo un layout responsive anche su dispositivi mobili. In questo modo, il layout risponde in modo fluido e si adatta alle dimensioni dello schermo, migliorando l’usabilità su diversi dispositivi.

Viene in seguito riportato il codice HTML utile per realizzazione il sistema a griglia
Questo codice definisce una pagina web con un layout responsive, che si adatta a diverse dimensioni di schermo grazie a classi CSS collegate. Ecco una breve descrizione degli elementi principali:

• Foglio di stile: Il link a "Lezione6.css" permette di caricare uno stile CSS esterno, che contiene le regole di stile per la pagina, tra cui le classi .row, .col-lg-*, .col-md-*, e .col-sm-* che gestiscono il layout responsivo.
• L’intestazione <h1> con testo “Responsive Layout” introduce il tema della pagina.
• La div con classe row contiene otto elementi div, ciascuno con una classe di colonna (col-lg-3, col-md-6, col-sm-12), ognuno dei quali visualizza un elemento p con testo (“Item 1”, “Item 2”, ecc.). Ogni colonna si adatta in base alle dimensioni dello schermo: – Larghi schermi: Ogni div occupa un quarto della larghezza (col-lg-3). – Medi schermi: Ogni div occupa metà larghezza (col-md-6). – Piccoli schermi: Ogni div occupa l’intera larghezza (col-sm-12), creando una visualizzazione a blocchi.