Riccardo Faccin – Coding Art

INIZIO:

• Creo un canvas 400px x 400px
• Cambio il colore in HEX prendendolo col contagocce dalla foto originale in figma

Prima di disegnare i quadrati specifico che li voglio disegnare:

• Senza riempimento
• Con lo stroke bianco
• Lo spessore (sottile) dello stroke

3 FILE DI QUADRATI:

• Prima fila:
  • Primo quadrato (specifico coordinate x,y come origine del primo vertice e la misura del lato che sarà sempre uguale)
  • Secondo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del primo quadrato)
  • Terzo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del secondo quadrato)
• Seconda fila:
  • Primo quadrato (per la sua origine, la x rimane uguale e la y aumenta del valore del lato rispetto all’ordinata del vertice inferiore sinistro del primo quadrato della prima fila)
  • Secondo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del primo quadrato)
  • Terzo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del secondo quadrato)
• Terza fila:
  • Primo quadrato (per la sua origine, la x rimane uguale e la y aumenta del valore del lato rispetto all’ordinata del vertice inferiore sinistro del secondo quadrato della seconda fila)
  • Secondo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del primo quadrato)
  • Terzo quadrato (la y rimane uguale e la x aumenta del valore del lato rispetto al valore in ascissa del secondo quadrato)

LINEE INTERNE AI QUADRATI:

Per arrivare ad un risultato più simile possibile, rispetto un margine interno ai quadrati di:

• 20px per le linee dritte (verticali e orizzontali)
• 30px per le linee oblique (diagonali)
• (Per calcolarmi le coordinate di ogni punto di ogni linea prendo come riferimento i 50px del bordo esterno e la misura dei quadrati che è di 100px per fare delle addizioni e sottrazioni e capire bene dove far partire la linea e dove farla arrivare)

Prima fila: 

• Primo quadrato —> linea verticale: x1 e x2 coincidono con il centro orizzontale del quadrato, y1 parte a 20px dal bordo superiore e y2 arriva a 20px dal bordo inferiore
• Secondo quadrato —> linea obliqua: (dal basso sx all’alto dx) x1 parte a 30px dal bordo sinistro, y1 a 30px dal bordo inferiore; x2 arriva a 30px dal bordo destro, y2 a 30px dal bordo superiore
• Terzo quadrato —> linea orizzontale: y1 e y2 coincidono con il centro verticale del quadrato, x1 parte a 20px dal bordo sinistro e x2 arriva a 20px dal bordo destro

Seconda fila:

• Primo quadrato —> linea obliqua: (dall’alto sx al basso dx) x1 a 30px dal bordo sinistro, y1 a 30px dal bordo superiore; x2 a 30px dal bordo destro, y2 a 30px dal bordo inferiore
• Secondo quadrato —> X: prima diagonale dall’alto sx al basso dx, seconda diagonale dal basso sx all’alto dx, entrambe con margine di 30px da tutti i bordi
• Terzo quadrato —> linea obliqua: (dall’alto sx al basso dx) stessa logica della diagonale nel primo quadrato ma con le coordinate spostate

Terza fila:

• Primo quadrato —> linea orizzontale: y1 e y2 coincidono con il centro verticale del quadrato, x1 a 20px dal bordo sinistro, x2 a 20px dal bordo destro
• Secondo quadrato —> linea obliqua: (dal basso sx all’alto dx) stessa logica della diagonale della prima fila secondo quadrato ma con le coordinate spostate
• Terzo quadrato —> linea verticale: x1 e x2 coincidono con il centro orizzontale del quadrato, y1 a 20px dal bordo superiore, y2 a 20px dal bordo inferiore

ciao 🙂 <3