Dezvoltatea tehnicilor de design utilizând mai multe programe grafice [306450]

UNIVERSITATEA POLITEHNICA BUCUREȘTI

FACULTATEA DE INGINERIE AEROSPAȚIALĂ

DEPARTAMENTUL GRAFICĂ INGINEREASCĂ ȘI DESIGN INDUSTRIAL

OBȚINEREA DE PERFORMANȚE ÎN DESIGN PRIN MIXAREA MAI MULTOR PROGRAME GRAFICE DEDICATE

Coordonator științific: Absolvent: [anonimizat].Univ.Dr.Ing. [anonimizat]

2017

[anonimizat], schițare, inovație. Există foarte multe ramuri ale designului printre care putem sublinia câteva mai importante : cel mai popular este designul grafic (afiș, [anonimizat]); printre categoriile mai recente din sfera designului grafic se află designul de pagini web numit de altfel și webdesign . Mai misterios pentru publicul larg este designul industrial (conceperea obiectelor și a ansamblurilor de obiecte de care omul are nevoie și cu care acesta interacționează : mobilier, [anonimizat], electrocasnice, [anonimizat], ce se proiectează pentru producție în serie largă sau limitată).

[anonimizat]. Ideea principala a [anonimizat] o [anonimizat]. Se mulează nevoilor societății actuale iar pe cele ale societății viitoare le anticipează. Designerul este vizionarul de care orice fabricant are nevoie imperativă pentru a putea evolua și inova. Astfel în realizarea unui proiect nu trebuie să ne limităm doar la un program pe care îl stapanim foarte bine; este util a [anonimizat]-ți ușurezi munca și să îmbunătățești rezultatul final.

A face design înseamnă a crea, iar asta e valabil în orice profesie. Designul este un termen general ce se manifestă în tot ceea ce înseamnă creativitate și inovație. Astfel, [anonimizat].

Oamenii au nevoie de design în viața lor. [anonimizat], înseamna mult mai mult decât văd ochii. Nu e [anonimizat]. Frumosul e ușor perceput de ochiul uman dar designul înseamna a crea un obiect care să corespundă scopului acestuia. Designul înseamnă idee pusă în practică cu rolul de a ușura munca oamenilor. [anonimizat]-[anonimizat]:

Am scurtat timpii în proiectarea unui spațiu 3D

Am creat un design de ambient unic și mai impunător

Am scurtat timpii și am îmbunătațit performanțele grafice în realizarea unui design de spot publicitar

Am redus din resursele necesare realizării unor proiecte multimedia

Am realizat o aplicație pentru mobil rapid si eficient

Am redus drastic munca depusă unor aplicații și jocuri 3D

Introducere

“[anonimizat], schiță de concepție. Folosirea termenului în domeniul desenului liber (artă) este forțat și deci nerecomandată.” [1]

“Termenul de "design" a apărut in 1851, în legătură cu complicatele realități ale producției industriale. Este o concepție și o metodă de creație care urmărește să asigure fiecărui produs un înalt randament funcțional, însoțit de un aspect agreabil. În toate epocile de înflorire umană a existat o corelare între posibilitățile materiale, nivelul tehnologic, relațiile economice interne și externe, orizontul spiritual exprimat prin gustul artistic și capacitatea de creație. Mai mult chiar, tehnologul și artistul se confundau la început într-o singură persoană.” [1]

“Arta, tehnica și știința nu sunt domenii incompatibile, contradictorii sau concurente, ci doar specifice și solidare. Ele se implică și se condiționează reciproc. Designerul știe că funcționalul, ergonomicul, esteticul și economicul conlucrează pentru a se ajunge la eficiență.” [1]

Lucrarea de față propune îmbunătățirea tehnicilor de design și scurtarea timpilor de realizare a unui proiect. Programele folosite pentru demonstrație sunt :”Cinema4D”, “After Effects”, “Photoshop”, “AutoCAD”,”Wordpress” si “Android Studio”.

“CINEMA 4D Studio este cel mai bun produs pentru designeri 3D profesioniști. Este folosit în crearea de grafică 3D avansată, conținând unelte de modelare a caracterelor, funcții de generare de păr, un motor de randare fizică,etc. Cinema 4D Studio poate aborda cu ușurință orice proiect fără probleme.” [2]

“Instrumentele specializate de modelare conferă lejeritate în crearea de caractere și animații de caractere avansate. Adăugarea de păr sau blană pe caractere se face rapid și simplu, cu o suită puternică de instrumente de generare a părului care permit să se creeze modele cât mai realistice și ușor de animat. Motorul de fizică face simplă efectuarea de coliziuni complexe și interacțiunea dintre obiecte, indifferent de numărul acestora.” [2]

Cinema 4D oferă un spațiu 3D fără limite și user-friendly unde imaginația devine realitate.

ADOBE AFTER AFFECTS este un program specializat în efecte vizuale , grafică în mișcare utilizate în procesul de post-producție a filmelor și în televiziune. Printre altele, After Effects poate fi folosit pentru urmărire, editare, compoziție și animație . De asemenea, funcționează ca un editor non-linear , editor audio și transcodificator mass-media.

PHOTOSHOP a fost creat în 1988 de către Thomas și John Knoll. De atunci, el a devenit standardul de facto în industria de editare grafică, astfel încât termenul "photoshopping" s-a născut. Cu acesta se pot edita și compune imagini în mai multe straturi și măști, suportă compunere alfa și mai multe palete de culori, inclusiv RGB, CMYK. Photoshop suportă diferite formate de fișiere grafice și folosește, de asemenea, propriul format PSD care susține toate caracteristicile menționate mai sus. Are abilități de a edita sau crea texte, grafică vectorială, grafică 3D.

Dezvoltat și comercializat de către Autodesk , AUTOCAD a fost lansat în decembrie 1982 pe microcalculatoare cu controlere grafice interne. Este cel mai bun program pentru crearea de schițe și este folosit într-o gamă largă de industrii , de către arhitecți , manageri de proiect , ingineri , designeri, și alți profesioniști .

WORDPRESS a început în anul 2003 cu o mica parte de cod pentru a îmbunătăți tipografia scrisului zilnic și cu mai puțini utilizatori decât putem număra pe degetele de la mâini și picioare. De atunci, acesta a devenit cel mai mare instrument de creare blog-uri auto-găzduite din lume, folosit pe milioane de site-uri și văzută de zeci de milioane de oameni în fiecare zi.

WordPress este un proiect Open Source, ceea ce înseamnă că există sute de oameni din întreaga lume care lucrează la acesta. (Mai mult decât majoritatea platformelor comerciale). Înseamnă, de asemenea, că suntem liberi să îl utilizam pentru crearea unui site fără a plăti nimănui o taxă de licență și o serie de alte libertăți importante.

WordPress a început doar ca un sistem de blogging, dar a evoluat pentru a fi folosit ca sistem complet de gestionare a conținutului și mult mai mult prin mii de pluginuri și widget-uri și teme, WordPress este limitat doar de imaginația noastra.

Android Studio este mediul oficial de dezvoltare integrat (IDE) pentru dezvoltarea aplicațiilor Android, bazat pe IntelliJ IDEA. În plus față de puternicul editor IntelliJ și instrumentele de dezvoltare a acestuia, Android Studio oferă și mai multe caracteristici care îmbunătățesc productivitatea atunci când construiți aplicații Android, cum ar fi: Un sistem flexibil de construcție bazat pe Gradle, un emulator rapid și bogat în caracteristici, Se poate dezvolta pentru toate dispozitivele Android, Run instant pentru a aplica modificările aplicației dvs. în desfășurare, fără a construi un nou fișier APK, șabloane de cod, instrumente de testare și cadre extinse și multe altele.

De ce am ales această temă?

Designul presupune analiză, imaginație, schițare, inovație. Astfel am ales să extindem design-ul la un alt nivel, la un nivel în care poți sa te folosești de orice resursă pentru a îmbunătăți calitatea, să fructifici timpul acordat unor proiecte și să obții rezultate excecelente din punct de vedere grafic. Vom demonstra capacitățile unor programe cât și limitele acestora și cum putem să îmbunătățim rezultatele unui proiect folosindu-ne de mai multe programe diferite ca structură. Vom demonstra aceste lucruri prin trei exemple: un design de interior-exterior, design de animații, reclame, spoturi publicitare și webdesign.

Exemplul cheie al acestui proiect este designul de interior-exterior. Design-ul de interior este arta sau procesul de proiectare interioară, ce include de multe ori și pe cea exterioară, a unei clădiri, încăperi. Un designer de interior este cineva care coordonează și gestionează astfel de proiecte. Designul de interior este o profesie cu multiple fațete, care inclunde dezvoltarea conceputală, comunicarea cu părțile interesante ale unui proiect, precum si gestionarea și executarea designului.

În trecut, interioarele, instinctiv, erau puse împreună ca o parte a procesului de construire. Profesia de designer de interior a fost o consecință a dezvoltării societății și a arhitecturii complexe, care a rezultat din dezvoltarea proceselor industriale. Urmărirea de utilizare eficientă a spațiului, a unui design funcțional a contribuit la dezvoltarea profesiei contemporane de design interior. Profesia de designer de interior este separată și distinctă de rolul de decorator de interior, un termen utilizat în mod obișnuit în Statele Unite ale Americii. Termenul este mai puțin comun în Marea Britanie, unde profesia de designer de interior este încă nereglementată și, prin urmare, strict vorbind, nu este încă o profesie.

În mijlocul secolului al 19-lea, serviciile de design interior s-au extins foarte mult, firmele mari de mobilier au început să se ramifice în design și management interior general, oferind mobilier complet de interior într-o varietate de stiluri. Acest model de afaceri a înflorint în jurul anului 1914 cand acest rol a fost uzurpat de designeri independenți, de multe ori amatori. Astfel s-a deschis calea pentru apariția de design interior profesional pe la jumătatea secolului 20.

Mulți confundă și în ziua de astăzi cele două profesii. Designul de interior este arta și știința de a înțelege comportamentul oamenilor și de a crea spații funcționale într-o clădire. Decorarea este furnizarea sau împodobirea unui spațiu cu lucruri la modă sau frumoase. Pe scurt, designeri de interior sunt decoratori și pot deocora, dar decoratorii nu fac design, aceștia nu sunt designeri.

Designul de interior implică un accent de planificare, un design funcțional și o utilizare eficientă a spațiului. Spre deosebire de un decorator, un designer de interior poate întreprinde proiecte care includ aranjarea structurii de baza de spații dintr-o clădire, precum și proiecte care necesită o întelegere a problemelor tehnice, cum ar fi poziționarea ferestrelor și a ușilor, acustica și cel mai important iluminarea. Deși un designer de interior poate crea structura unui spațiu, aceștia nu pot altera pereți de susținere fără a avea proiectele semnate și ștampilate pentru aprobare de către un inginer structural. Designerii de interior lucrează de multe ori direct cu arhitecți, ingineri și antreprenori.

Designerii de interior trebuie să fie talentați și calificați, în scopul de a crea un ambient de interior, care să fie funcțional, sigur, și să adere la codurile si reglementările din construcții.Ei merg dincolo de selecția de palete de culori și mobilier, aplică cunoștiințele lor la dezvoltarea de documente de construcție, de transport, principii de design durabile precum și la asigurarea unei locuințe sigure, locuibile, inofensive care are de asemenea un estetic plăcut și modern.

Un designer de interior se poate specializa pe un anumit tip de design de interior pentru a dezvolta cunoștințe tehnice specifice pe o anumită zonă. Tipuri de design interior includ: proiectarea rezidențială design de expoziție, design de mobilier, branding etc. Profesia de design de interior este relativ nouă, în continuă evoluție, și de multe ori confuză pentru public. Este o profesie creativă, care este în continuă schimbare și evoluție. Nu este o cursp artistică ci se bazează pe cercetare din mai multe domenii, pentru a oferi o bună înțelegere despre modul în care oamenii sunt influențați de mediul lor.

Designul de interior este în continuă evoluție odată cu tehnologia. Astfel am ales această temă pentru a demonstra că atât în design cât și în alte domenii a cunoaște cat mai mult, a-ți lărgi orizonturile, înseamnă performanță, evoluție.

Cel de-al doilea exemplu este designul de spoturi publicitare/ reclame. Publicitatea se ocupă cu promovarea bunurilor, serviciilor, companiilor și ideilor, de cele mai multe ori prin mesaje plătite. Scopul direct ale acestor mesaje este stimularea dorințelor clienților potențiali, și formarea asociațiilor pozitive în legătură cu produsul sau compania promovată, scop care este atins prin folosința metodelor de manipulare psihologică mai mult sau mai puțin subtile.

Vânzătorii văd reclama ca o parte constituentă a strategiei generice de promovare a acestora. Firmele nu trebuie să se limiteze la oferirea bunurilor sau servicilor de calitate. Ele trebuie să-i informeze pe consumatori în legătură cu avantajele acestora. Pentru aceasta, este necesar ca firmele să utilizeze în mod corespunzător instrumentele de promovare în masă ale publicității.

Cel de-al treilea exemplu surprinde pasii de realizare rapida a unui joc 3D. Jocurile 3D au devenit virale in epoca moderna ocupand peste 50% din timpul tinerilor, adolescentilor si chiar a unora dintre adulti. Acestea au la baza o programare complexa dar si o grafica exceptionala pentru a captiva utilizatorul. Astfel grafica (elementele UI, efectele, texturile, etc) este cea care reuseste sa atraga potentialii jucatori.

În ultimul exemplu vom vorbi despre webdesign si aplicatii pentru mobil. Prin design web se înțelege în general realizarea de situri web, de la momentul conceperii structurii și interfeței grafice și până la finalizarea programării și introducerea propriu-zisă a datelor care alcătuiesc conținutul sitului – imagini, text, fișiere și alte elemente.

Orice fel de afacere are nevoie de o anumita prezenta online. Nu numai ca potentialii clienti se asteapta ca ea sa existe, dar este de asemenea si una din cele mai usoare posibilitati de a-ti largi piata de desfacere.

De ce mixarea programelor?

Fiecare program are limitările sale. Cu ajutorul unor programe 3D putem realiza un design arhitectural dar nu putem să-i creăm și un ambient impresionant. Vom demonstra cum folosindu-ne de mai multe programe diferite ca structură vom imbunătăți calitatea în design.

Cu programul AutoCAD vom realiza un plan de casă urmând a fi exportat pentru Cinema 4D unde se vor realiza încâperile după plan. Modelele vor fi concepute în Cinema 4D. Astfel va rezulta un design al unei case, clădiri, etc. Mediul principal (texturi, lumini, material) și obiectele principale vor fi create în Cinema 4D urmând ca scenele să fie randate și apoi editate în Photoshop pentru definitivarea scenelor finale. Facem acest lucru deoarece resursele unui calculator/ laptop sunt limitate. Cu cât adăugăm mai multă informație în Cinema 4D cu atât mai multe resurse avem nevoie astfel vom ajunge ca procesorul să nu poată atinge performanțele necesare randării unei scene.

Timpul înseamnă bani. Deadline-ul unui proiect este foarte important. Prin mixarea programelor vom reduce drastic timpii de realizare a unui astfel de design. Alegem să ne folosim de Photoshop pentru a crea o parte din ambient deoarece Cinema 4D randează grafica în timp real astfel cu cât mai multe obiecte și materiale cu atât timpul de randare va fi mai lung. Dacă pentru un singur cadru ce conține doar modelele principale, randarea durează în jur de 30 de minute atunci dacă vom continua ambientul în Cinema 4D randarea va crește semnificativ ajungând ca pentru un singur frame să necesite peste o oră de randare.

Resurse mai putine prin imbinare de programe. Pentru realizarea unor proiecte avem nevoie de o vasta experienta intr-un anumit program sau in programare. Astfel folosindu-ne de mai multe programe nu este nevoie decat sa stim minimul de cunostinte despre acestea. In realizarea unei aplicatii pentru mobil ar trebui sa cunoastem programare avansata in Android dar folosindu-ne de WordPress vom demonstra cum aceasta necesitate dispare si nu este nevoie decat sa stim cateva cunostinte generale despre domeniul web si cum se realizeaza un website.

Ce intenționez să obțin?

Reluând ideea de la subcapitolul anterior, scopul acestei lucrări este acela de a reuși să îmbinăm performanțele diferitor programe în realizarea unor proiecte. Vom realiza performanțe grafice în ceea ce constă designul de interior și exterior, publicitate, webdesign și de asemenea vom reduce timpii de realizare a proiectelor.

În primul exemplu propunem o colaborare între trei programe diferite ca structură, unul de modelare grafică, unul de proiectare asistată și unul de editare, cu scopul de a scurta timpii în proiectare. Cu ajutorul programului CAD se va face un plan al unei case după care se importă in Cinema 4D și se începe modelarea construcuției prin metode rapide cu ajutorul unor funcții din program, după care se modelează obiectele din fiecare cameră prin diferite metode.

La final se randează diferite cadre din scenă, urmând ca acestea să fie exportate pentru editarea lor în Photoshop. Editările se referă la ajustarea ambientului (adăugarea de resurse noi), îmbunătățirea calității imaginii: luminozitatea, saturație, nuanță, etc.

În cel de-al doilea capitol vom crea animații utilizând Cinema 4D și vom randa doar partea animată fără elemente statice, lumini si efecte care ar îngreuna randarea. Animația se va importa apoi în After Effects unde vom edita videoclipul adăugând efecte lumini și alte obiecte în scenă.

În privința celui de-al treilea capitol vom demonstra cum folosindu-ne de Cinema 4D pentru a realiza rapid anumite modele 3D la o calitate grafica net superioara a altor programe de pe piata vom reusi sa exportam aceste modele in Blender 3D pentru a ne folosi de avantajele sale de programare pentru a realiza un joc 3D.

In ultimul exemplu vom demonstra faptul ca cunoasterea unui limbaj de programare la un nivel superior nu este singura modalitate de a realiza o aplicatie pentru mobil ci cu ajutorul platformei open source WordPress vom realiza o aplicatie web ce are la baza limbajul de programare php dar si html,css si javascript, urmand ca apoi sa preluam informatia site-ului sau aplicatiei noastre web cu ajutorul Android Studio si sa o transformam in aplicatie pentru mobil.

Mixarea programelor Autocad, Cinema 4D si Photoshop pentru a obține rapid un design de interior-exterior

Vom demostra cum folosind Autocad pentru a realiza un plan de casa si exportandu-l pentru Cinema 4D reusim sa modelam o casa dupa plan urmand ca obiectele ce populeaza scena sa fie modelate in Cinema 4D prin diferite tehnici. Anumite texturi ale unor obiecte sunt realizate in Photoshop; de asemenea tot cu ajutorului Photoshop-ului reducem resursele necesare randarii scenelor si obtinem performante grafice prin editarea lor dupa randarea in Cinema 4D.

2.1 Facilitarea modelarii unui plan de casa realizat în Autocad, prin importarea în Cinema 4D

Avănd planul unei case în AutoCad se importă în Cinema4D în modul 2D. Se crează un polygon nou și cu ajutorul funcției “knife” se trasează linii după plan, delimitând pereții iar la final se aplică funcția “Extrude” pentru definitizarea 3D a încăperilor, (Fig 1). Se modelează în continuare casă până la rezultatul dorit.

Ferestrele și ușile se realizează cu ajutorul funcției “Boole” care implică funcțiile matematice: Intersecție, Reuniune și Diferență. Astfel având un cub se așează în locul unde se dorește gaura în perete și se aplică funcția. Se selectează opțiunea “A without B” adica A\B și astfel se crează locul dorit pentru modelarea ferestrelor sau a ușilor, (Fig 2).

2.2 Tehnici de modelare in Cinema 4D

După modelarea casei se trece la crearea obiectelor din interior. Toate obiectele se modelează cu ajutorul programului Cinema 4D prin diferite tehnici de modelare cunoscute: [3]

Spline Modeling:

Este modelarea pornind de la o curbă care are cel puțin două puncte de control. Acest tip de modelare este probabil cel mai vechi dar este foarte util în crearea de obiecte curbate sau cu diferite forme neconvenționale, (Fig 3).

Box modeling:

Este probabil cea mai populară tehnică de modelare ce se aseamană cu sculptura. Pentru a crea un model, avem nevoie doar de doua dintre proiecțiile sale (front și left). Se introduc două panouri pe care se aplică aceste proiecții. Panourile trebuie să aibe dimensiunile rezoluției imaginilor respective. Se inserează un obiect primitv (de obicei un cub) și se divide în mai multe suprafețe. Cubul se transformă în obiect editabil iar în modul points se sterg punctele din stânga

sau dreapta axei deoarece se va lucra în simetrie pentru o precizie mai bună. Punctele se plasează după forma dorită la fel ca în Fig.4, lucrând în ambele vederi până la definitivarea acesteia. La final se aplică “Subdivide Surfaces” pentru a da un aspect placut modelului.

Poly modeling:

Tehnica presupune crearea de puncte în spațiu după modelul dorit și unirea acestora pentru a crea suprafețe. Practic este o rețea 3D. Nu va fi nevoie să umplem tot modelul de puncte deoarece se proiectează în simetrie, astfel se va modela doar jumătate din obiect iar la final se aplică “Subdivide Surface” pentru a da o formă mai precisă modelului. Deși este o tehnică avansată și dificilă, această tehnică de modelare este probabil cea mai eficientă și precisă. Spre deosebire de Box Modeling unde aveam nevoie de două dintre proiecții, aici avem nevoie de toate cele trei pentru a definitiva modelul. În modelarea în cutie se introduce un obiect și se deformează așezând punctele sale după conturul formei dorite. În Poly modeling se crează direct modelul prin amplasarea de puncte pe amprentele modelului. Acestea vor fi unite cu ajutorul funcției “Bridge” creând astfel suprafețe, (Fig 5).

După modelarea casei se trece la crearea obiectelor din interior. Toate obiectele se modelează cu ajutorul celor trei tehnici prezentate anterior.

La folosirea celor trei tehnici în realizarea obiectelor se mai adaugă și funcții precum: Clothing, Dynamics, Melt, Explosion, etc.

Clothing și Dynamics sunt folosite în realizarea obiectelor greu de modelat cu ajutorul celor trei tehnici precum: perne, cearceafuri, haine, etc. Din meniul Dynamics putem alege trei funcții:

Rigid Body

Soft Body

Collider Body

Pentru realizarea unui obiect cu textură flexibilă, cum este cearceaful se introduce un cub cu dimensiuni adecvate și se aplică funcția Soft body; iar obiectului după forma căruia cearceaful se va așeza i se va aplica funcția Collider Body. Astfel se obține rezultatul dorit, (Fig 6).

Funcția Clothing este folosită pentru îmbrăcarea caracterelor sau realizarea de obiecte precum perne, saltele, canaple, etc. Având obiectul pe care dorim să-l îmbrăcăm e nevoie decât să avem două poligoane cu dimensiunea aproximativa a modelului și se aplică Cloth după care se selectează opțiunea “Dress-o-matic” și astfel funcția ajustează poligoanele după modelul dorit.

După obținerea modelelor dorite trecem la texturarea și randarea camerelor și obiectelor din ele. Texturarea se realizează utilizând materiale create de noi sau texturi pe care le introducem din calculator.

În procesul de creare a unui material avem mai multe proprietăți pe care le putem folosi în funcție de obiectul pe care dorim să-l texturăm. De exemplu dacă dorim să texturăm un pahar avem nevoie să activăm transparența și reflecsia urmând să le ajustăm proprietățile până la obținerea rezultatului dorit, (Fig 7).

Dupa realiarea si aplicarea materialelor se trece la iluminarea scenei. În funcție de luminile pe care le adăugăm în scenă rezultatele finale pot fi exceptionale. În funcție de luminile introduse materialele și proprietățile acestora se comportă diferit.

Există patru tipuri principale de lumină: Omni, Spot, Area, Target. Fiecare dintre acestea pun la dispoziție designerului o gamă largă de proprietăți precum: Shadow, Caustics, Intensity, Contrast, Distance, etc, (Fig 8). În funcție de aceste proprietăți obiectele, materialele și texturile acestora, umbrele, se vor comporta diferit.

Fig 8 Tipuri de lumina

2.3 UVW Mapping – Texturarea unor obiecte utilizand Photoshop

UVW Mapping este o tehnică matematică pentru cartografierea pe coordonate. Astfel numele de UVW vine de la coordonate XYZ fiind deja utilizate de către program. În grafica pe calculator acest lucru înseamnă trecerea din 3D în 2D .

Maparea UVW este potrivită pentru a picta suprafața unui obiect bazat pe o textură solidă. Sistemul cartezian UVW are trei dimensiuni, a treia dimensiune permițând texturii să se așeze în moduri complexe pe suprafețe neregulate (ex. Texturarea unui caracter, animal, sticle, etc.). Fiecare punct din sistemul UVW corespunde unui punct de pe suprafața obiectului reprezentată de coordonatele XYZ astfel poziționarea este aproape perfectă. Astfel graficianul crează textura astfel încât fiecare punct al ei să fie atribuit pe suprafața țintă. Astfel această tehnică depașește cu mult texturarea cu texturi externe sau altfel spus proiecția plană. Din acest motiv maparea UVW este frecvent utilizată atunci când avem nevoie de texturarea de forme geometrice neregulate, obiecte non-primitve cum ar fi caracterele sau mobilierele.

În Cinema 4D mapare UVW se face utilizând interfața BodyPaint care pune la dispoziție utilizatorului o gama de unelte specifice realizării unei texturări reușite. Astfel în modul Points, Edge sau Polygon se selectează obiectul pe care dorim să-l texturăm iar programul ne va desfașura obiectul în 2D (Fig 9), urmând a folosi uneltele puse la dispoziție pentru definitivarea rezultatului. Cu toate că interfața este destul de utilă nu vom putea realiza niciodată o textură complexă care să tindă cât mai mult spre realitate.

Fig 9 UVW Mapping

Astfel ideea inovatoare pe care ne-o propunem constă în a folosi facilitățile programului Photoshop pentru a realiza texturi avansate. După ce vom realiza desfașurata obiectului, vom exporta rezultatul sub format .jpg sau .png sau chiar .psd, disponibil în versiunea 2015 de Cinema4D, urmând a fi impotat în Photosop unde avem o gamă largă de unelte dedicate realizării unor texturi de înaltă calitate grafică.

La final rezultatul obținut în Photoshop se importă în Cinema 4D ca un material utilizând o textură externă, urmând a fi aplicată pe obiect. Textura se va aplica perfect pe model fiind realizată pe desfașurata obiectului. Astfel fiecare punct de pe textura 2D îi corespunde cu exactitate un punct de pe obiectul 3D.

2.4 Randarea scenelor și îmbunătățirea calității rezultatelor obținute în Cinema4D prin editarea lor în Photoshop

Randarea este procesul final de creare a imaginii 2D sau a animației cu efecte 3D fotorealiste din scenă creată de noi. Pentru un singur cadru, ea poate să dureze de la fractiuni de secundă până la zile întregi, în funcție de complexitatea scenei și de efectele adăugate. Vom adăuga efecte de randare precum : Global illumination și Ambient Oclusion.

Global Illumination sau iluminarea indirectă se referă la un grup de algoritmi folosiți în grafica 3D pe calculator care adaugă lumină realistică în scene. Algoritmul nu preia numai lumina generată de o sursă ci și reflecțiile razelor sale proveninte din obiectele scenei (iluminare indirectă).

Teoretic reflecțiile, refracțiile și umbrele sunt toate exemple de iluminare la nivel global, pentru că atunci când sunt simulate, un obiect afectează altul, spre deosebire de un obiect afectat doar de către o lumină directă.

Imaginile randate folosind acest algoritm sunt mult mai realistice decât imaginile generate utilizând iluminare direct de la o sursă. Bineînțeles există și dezavantaje, acești algoritmi crescând durata de creare a imaginilor afectând performanța calculatorului.

Radiosity, Ray Tracing, Photon Mapping, etc., sunt exemple de algoritmi utilizați în Global Illumination; deși încetinesc procesul de creare, acestea conduc la rezultate excepționale și realistice.

Acești algoritmi folosiți pentru a simula iluminarea indirectă sunt defapt aproximații ale ecuației de randare. În grafica pe calculator, ecuația de randare, (1) este o ecuație integrală în care echilibrul strălucirii lăsate unui punct este dat ca fiind suma dintre strălucirea reflectată emisă în urma unei aproximări optice geometrice.

Baza acestei ecuații o reprezintă legea conservării energiei. Aceasta poate fi scrisă sub forma:

(1)

unde

este lungimea de undă de lumină

t este timpul

x este poziționarea în spațiu

este direcția luminii de ieșire

este direcția negativă a luminii de intrare

este strălucirea totală a lungimii de undă  direcționata spre exterior de-a lungul direcției  la timpul t, din poziția particulară x

este strălucirea spectrală emisă

este emisfera unitate ce conține toate valorile posibile pentru

este integrala pe

este funcția de distribuție de reflexie bidirecționala, proporția luminii reflectate de la  la  la o poziție x, timpul t, și lungimea de undă

este strălucirea spectrală a lungimii de undă  venind spre interior din x spre direcția  la momentul t

este factorul de slăbire de iradiere interioară din cauza unghilui incident, când fluxul luminos este întins pe o suprafață a carei dimensiuni este mai mare decât suprafața proiectată perpendicular pe rază. Astfel avem la dispoziție diferite setări pentru manipularea iluminării indirecte.

În grafica pe calculator, Ambient Occlusion este o tehnică de umbrire și randare folosită pentru a calcula cat de expus este fiecare punct al scenei la lumina ambientala. Ex: Partea interioară a unui tub este de obicei mai ocluzată, prin urmare mai întunecată, cu cât e mai adânc tubul cu atât mai întuncat devine.

Acest algoritm poate fi văzut ca o valoare calculată pentru fiecare punct al suprafeței scenei. În cadrele cu cer deschis acest lucru se face prin estimarea cantității de cer vizibil pentru fiecare punct, în timp ce în mediile închise (randare de interior) numai obiectele aflate pe o anumită lungime de suprafață sunt luate în considerare iar pereții sunt presupuși a fi originea luminii ambientale. Rezultatul este difuz, efect de umbră non-direcțională în scenă, cu spații, zone acoperite, întunecate. Efectul este un algoritm post-procesare. Aspectul realizat de Ambient Occlusion este similar cu modul în care un obiect apare acoperit pe timp de zi de nori.

Ocluzia ambientală calculează umbrele pentru o suprafață care urmeaza să fie atinsă de diferite elemente: lumină, praf, murdarie, etc. Aceasta a luat amploare în producția de animații datorită simplității și eficienței sale. Metoda de umbrire are proprietate de a oferi o mai bună percepție a formei 3D a obiecteler expuse.

Ocluzia, descrisă în ecuația (2), a unui punct pe o suprafață cu normala poate fi calculată integrând funcția de vizibilitate deasupra semisferei cu reglementările unghiului de proiecție:

(2)

unde este funcția de vizibilitate a punctului , definită ca fiind 0 dacă este ocluzat în direcția   și 1 invers, iar   este pasul unghiului infinitesimal al variabilei de integrare . O varietate de tehnici sunt folosite pentru a aproxima această integrală în practică: probabil cel mai simplu mod este de a utiliza metoda Monte Carlo ce presupune generarea de raze din punctul p și testarea acestora pentru intersecțiile cu obiecte din scene și alte lumini.

Metoda are la bază o clasă de algoritmi matematici constând în generarea de pași repetitivi pentru a obține rezultate numerice aproximative. Este folosită cel mai des în optimizare. Metoda a fost folosită pentru aproximarea lui π având un rezultat cu o eroare de 0.07%.

Astfel cu aceste doua efecte putem obtine rezultate foarte realistice: Fig 10. La final ne vom folosi de programul Photoshop pentru manipularea scenelor finale, adaugarea de efecte, modificarea nuantei si a saturatiei culorilor, ajustarea luminozitatii. Toate aceste efecte se pot vedea in exemplele din figurile 11….17 ale acestei lucrări.

Fig 11 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un spațiu de odihnă exterior

Fig 12 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un spațiu de odihnă exterior

Fig 13 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un spațiu exterior – util curte

Fig 14 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un spațiu exterior – util curte

Fig 15 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un dormitor

Fig 16 Rezultate finale randate în Cinema 4D și îmbunătațite în Photoshop – exemplu pentru un spațiu interior – baie

Mixarea programelor Cinema 4d si After Effects pentru crearea rapidă și de calitate bună a spoturilor publicitare

În această parte a lucrării ne propunem să exploatăm tehnicile de creare de animație în Cinema4D îmbunătățind rezultatele cu ajutorul performanțelor puse la dispoziție de programul After Effects. Exemplificarea se va face pe spoturi publicitare. Spoturile publicitare necesită un astfel de design care să captiveze atenția segmentului de piață vizat.

Animația constituie o iluzie optică a mișcării, create prin derularea unor imagini reprezentând elemente statice ale acesteia.

Cinema4D pune la dispoziție timeline-ul cu ajutorul căruia se pot realiza animații ușor. Orice obiect, lumină, textură sau alte unelte puse la dispoziție pot fi modificate în timp inserând keyframe-uri pe timeline.

3.1 Tehnici de animatie în Cinema 4D

Cinema4D dispune de o gamă largă de unelte cu ajutorul cărora putem realiza o animație. De la simpla modificare în timp a poziției până la rotirea și modificarea structurii și texturii unui obiect. Exemple de efecte:

Explosion

PolyFx

Twist

Melt

Bend

[4] Fiecare dintre aceste efecte necesită setați anumiți parametri pentru a funcționa corespunzator. Putem intensifica viteza și puterea exploziei, precum și unghiul și poziția suprafețelor afectate astfel încat să realizăm animația dorită. Fiecare dintre efecte modifică și afectează obiectul într-un mod unic, ( Fig 18).

Dynamics – este dinamica fizică din Cinema 4D și reprezintă rezultatul unor forțe, acționate asupra unor obiecte, responsabile de mișcarea acestora. Există 3 tag-uri care se pot aplica pe obiecte:

Rigid Body

Soft Body

Collider Body

Animația se realizează destul de ușor (Fig 19). Nu trebuie decât aplicate tag-urile corect pe obiectele care la randul lor trebuiesc aranjate corespunzător pentru a obține rezultatul dorit. Nu trebuie înregistrate key-frame-uri pe timeline, acestea inserându-se automat la acționarea butonului “Play”.

MoGraph – reprezintă un set de instrumente puternice cu care putem simula absolut orice efect în dinamică, alterând-o: vânt, gravitație, masă, frecare, etc. De asemenea putem crea text extrudat, se pot clona obiecte iar la final vom adăuga efectori pentru a mixa și a pune totul în mișcare. Toate funcțiile sunt complet interactive și non-distructive.

Cele mai multe animații se crează utilizând Cloner-ul. Cu ajutorul lui putem crea copii identice ale unui obiect și le putem dispune în linii, cerc, grilă sau de-a lungul unei curbe, (Fig 20). Fereastra de proprietăți cu ajutorul cărora putem modifica clonele este foarte complexă. Putem ajusta dimensiunea clonelor, modul în care acestea să fie aranjate, numărul acestora,etc, (Fig 21).

Una din ferestrele de proprietăți este complet dedicată ajustării dinamicii clonelor, (Fig 22). Putem seta momentul în care clonele să fie afectate de dinamică: imediat, la întâlnirea unui obstacol, (Fig 23), după un anumit timp, etc. De asemenea putem seta modul în care acestea vor reacționa la întalnirea unui obstacol sau a podelei: “Bounce”, “Friction”, “Collision noise”. Putem ajusta masa și forța cu care acestea acționeaza asupra altor obiecte.

MoGraph oferă și o multitudine de efectori cu care putem manipula dinamica obiectelor cum ar fi : vânt, sunet, întarziere, timp, volum, etc (Fig 24).

Efectorii pot fi aplicați pe oricare din instrumentele MoGraph pentru a da viață scenei create. Poți regla clonele matematic cu efectorul “Formula”, precum în Fig 25, mișca obiectele după frecvența unei melodii cu ajutorul “Sound Effector” sau poți chiar crea propriul tău script de manipulare a obiectelor MoGraph utilizând efectorul “Python” ce are la baza limbajul de programare ce îi poartă numele. Exista unsprezece astfel de efectori pe care îi putem folosi pentru a crea rezultatul urmărit.

Thinking Particles – este un sistem avansat de particule ce funcționează pe baza unor reguli matematice, (Fig 26). Acestea pot interacționa una cu cealaltă și cu mediul lor. Ele pot lua forma oricărui obiect și iau viață din emițătoare declanșând evenimente de coliziune și pot fi alterate utilizând: vânt, rotație, turbulență, gravitație, atracție, respingere; tag-uri ce pot fi aplicate mediului pentru a manipula aceste particule. Particulele gânditoare pot oferi posbilități uluitoare în crearea de animații cu efecte unice.

3.2 Rezultate practice obtinute prin exportarea cadrelor din Cinema4D ti importarea lor în After effects

În această secțiune vom demonstra facilitățile exportării rezultatelor din Cinema 4D și finalizării lor în After Effects. Vom arăta modul în care trebuie setați anumiți parametri pentru realizarea exportării corecte, vom importa cadrele din Cinema 4D în After effects unde vom adăuga fundaluri, efecte și vom manipula timpul pe care animația se desfașoară.

În capitolul anterior am demonstrat cum se realizează animații utilizând diverse efecte, plugin-uri și alte unelte.. După ce am realizat animațiile dorite în Cinema 4D vom trece la exportarea acestora. Exportarea necesită diferite setări pentru a putea fi apoi importate în After effects, (Fig 27). Setările se referă la rezoluția videoclipului, formatul și rata frameuri-lor pe secundă a acestuia. Limita ochilui uman este de 30 frame-uri pe secundă, în concluzie 30fps este maximul pe care îl putem seta.

De asemenea pe langa setările obișinuite de reglare a fps-ului, rezoluției și calității imaginilor avem nevoie să adăugăm diferite efecte de randare pentru a ușura munca la importarea în After Effects. Din meniul Multi-Pass vom alege unealta “ Motion vector ”. În editarea video, Motion vectors sau vectorii de mișcare sunt folosiți pentru a comprima videoclipul prin stocarea schimbărilor unei imagini de la un frame la altul. Procesul este un pointer bi-dimensional care comunică decodorului poziția macroblocului de predicție, cât de mult se află la stânga, dreapta, sus sau jos față de poziția macroblocului din frame-ul de referință. Macroblocul este o unitate de procesare în compresia de imagini și video bazată pe transformări bloc liniare, cum ar fi transformata cosinus discretă. Primitiva utilizată în această transformată este un cosinus și deci această transformată generează coeficienți reali. DCT este o funcție liniară inversibilă RN → RN sau altfel spus o matrice pătrată N × N inversibilă. Există mai multe variante ale DCT. Transformata DCT, în special tipul II, este foarte utilizată în tratamentul sunetului și al imaginii, în special pentru algoritmele de compresie.

De asemenea vom adăuga și “Global Illumination”; tehnica de randare pe care am prezentat-o în capitolul anterior, pentru a reda cât mai realistic lumina provenită de la HDR Sky.

Una din cele mai importante setări este activarea “Alpha Channel” (Fig 28). În grafică, canalul alfa este o parte din datele fiecarui pixel rezervată pentru informații de transparență. Sistemele grafice pe 32 de biți conțin patru canale: 3 de 8 biti pentru RGB și unul de 8 biți pentru canalul alfa. Acest canal este defapt o mască ce specifică modul în care culorile pixelului ar trebui să fie fuzionate cu un alt pixel când aceștia sunt suprapuși, unul deasupra altuia.

Rezultatul consta într-o înșiruire de imagini care vor fi salvate într-un folder (Fig 29) urmând a fi importate în After Effects unde se va crea videoclipul, se vor adăuga efecte precum: Motion Blur, Optical Flares, Particle, etc. pentru a îmbunătăți atât calitatea cât și design-ul proiectului.

Fig 29 Imagini randare pentru realizarea animației

[5] After Effects are trei ferestre de lucru: una în care introducem fișierele externe, o fereastră în care adăugăm tot ce dorim să conțină compoziția și unde facem modificările pe timeline și o fereastră în care vizualizăm rezultatele. Vom importa animația creată în Cinema 4D selectând din folder primul frame din secvență iar programul le va importa pe toate ca pe un ansamblu (Fig 30).

Datorită canalului alfa pe care l-am setat pentru randare în Cinema 4D, After effects va prelua doar animația care ne interesează, fundalul fiind transparent; în program îl percepem ca fiind negru. Vom începe prin adăugarea unui fundal; vom crea un layer nou și din meniul effects & presets vom alege funcția ramp care ne va crea un fundal de tip gradient urmand a-i seta culorile dorite și forma. În exemplul nostru vom alege forma gradientului de tip circular (Fig 31).

În continuare vom introduce în compoziție randările vectorului de mișcare pe care l-am setat în Cinema 4D pentru a putea adăuga efectul de “Motion Blur”. Motion Blur este un filtru ce simulează viteza. Acesta poate fi de tip liniar sau circular și poate fi modificat în funcție de necesități. Acesta dă senzația de încețoșare a obiectelor aflate în mișcare conferind astfel detaliu asupra vitezei.

Vom adăuga de asemenea și Particle System II (Fig 33) și vom alege din bara de proprietăți tipul de particule “Buble” și vom seta dimensiunea, direcția și viteza de producere a baloanelor. De asemenea le vom da culoare, gravitație și vom seta modul în care acestea se manifestă când iau naștere din emițător.

Crearea unui Design de joc 3D prin mixarea programelor Cinema 4D si Blender 3D

De la apariția calculatoarelor performante care permit randarea 3D a obiectelor în spațiu, industria jocurilor a luat amploare. Crearea unui joc 3D necesită anumite etape din care design-ul(grafica) este unul din cele mai importante. Nimănui nu-i place un joc în care grafica lasă de dorit. De asemenea timpul este cel mai important. Este important să reușești să creezi un joc cât de repede posibil pentru a-l vinde pe piață.

Astfel, cu ajutorul a două programe de modelare 3D suplimentate de altele minore am reușit să creăm un design de joc 3D mult mai rapid decât s-ar fi realizat cu oricare din acestea individual.

Am folosit programul Cinema4D pentru a modela obiecte care vor fi exportate in Blender3D pentru a putea fi randate în real time. Datorită funcțiilor si plugin-urilor precum și rapiditatea de a modela am folosit Cinema 4D pentru a realiza design-ul unui concept de joc 3D (terenul, modelele pentru animare, texturi, etc).

4.1 Realizarea mediului 3D utilizand Cinema 4D

Realizarea terenului – s-a realizat utilizând un plugin din Cinema 4D numit City Kit (Fig.34). Se exportă orașul creat cu ajutorul plugin-ului sub oricare din formaturile: .obj, .3ds, .dae; în exemplul nostru s-a exportat în formatul .dae.

Următorul pas este modelarea obiectelor care urmeaza sa fie exportate de asemenea si randate si animate cu ajutorul programului Blender in real time.

S-a creat un model de autovehicul modelat in Cinema 4D. Modelul a fost modelat utilizând tehnica de polygonal modeling prezentata în primul studiu de caz. S-au introdus schițele modelului in vederile 2D dupa care in modul Polygons s-a reusit modelarea obiectului dorit (Fig.35).

După finalizarea modelului se exportă la fel precum si terenul (Fig.36).

4.2 Importarea modelelor in Blender

Acum, folosind Blender3D va trebui să parcurgem o serie de pași necesari pregătirii scenei pentru design-ul jocului:

● Importarea modelelor

● Optimizarea modelelor pentru motorul grafic

● Crearea de obiecte adiționale și de efecte speciale

● Pregătirea obiectelor din scenă pentru simularea grafică în timp real

Importarea modelelor – constă în preluarea modelelor 3D realizate în Cinema4D pentru folosirea lor în Blender3D (Fig.37), urmând a fi pregătite pentru folosirea lor în timp real.

Fig 37 Importare model din Cinema 4D in Blender 3D

Optimizarea modelelor pentru motorul grafic – constă în transformarea detaliilor din formă 3D în texturi datorită puterii de calcul limitate. Aceasta se face folosind Normal Maps, texturi ale căror culori stochează informația despre normalele obiectelor reprezentate, (Fig.38), ce sunt aplicate unor modele 3D optimizate, dând iluzia unui obiect detaliat, (Fig.39). Această tehnică poate fi de asemenea folosită pentru ,,însuflețirea” anumitor obiecte(precum valurile unei ape), funcționând ca o animație ce este aplicată pe o suprafață, (Fig.40).

Fig 38 Crearea de texturi tip Normal Map

Fig 39 Folosirea de Normal Maps pentru adăugarea detaliilor

Fig 40 Folosirea de Normal Maps pentru animație

Pregătirea obiectelor din scenă pentru simularea grafică în timp real – aducem într-o scenă comună obiectele precizate anterior, combinându-le pentru a da formă scenei finale, (Fig.41).

Fig 41 Scena finală cu toate obiectele adăugate

Ultima parte este reprezentată de partea de programare, ce se poate realiza cu ușurință – se folosește un sistem logic, ușor de înțeles ce se poate aplica rapid și exact. Am folosit tastele W, A, S, D pentru controlarea mașinii, având în același timp nevoie de aplicarea unor constrângeri roților, pentru a-și păstra poziția în raport cu mașina, (Fig.42).

Fig 42 Setările necesare folosirii mașinii în timp real

Depanarea și remedierile mici: Înainte de a putea pune capăt proiectului, trebuie să îl testăm pentru remedierea erorilor. Deci, vom rula câteva teste pentru a ne asigura că jocul nu se prăbușește în situații diferite și pentru alte “bugg-uri” ce tin de interactionarea cu alte obiecte din scena, cum ar fi căderea în apă, (Fig 43).

Dezvoltarea unei aplicatii pentru mobil utilizand WordPress si Android Studio

Vrem să arătăm cum putem reduce timpul în dezvoltarea unei aplicații mobile. Nu vom arăta doar că reducem timpul creării, ci și că vom reduce resursele de cunoștințe necesare pentru construirea unei astfel de aplicații. Deci, pentru a dezvolta o aplicație mobilă, ar trebui să învățăm java și Android Studio. În cazul nostru, trebuie doar să cunoaștem puține cunoștințe despre cum să realizăm un site web, deoarece vom folosi wordpress pentru a-l crea si apoi sa il transformam in aplicatie prin cateva linii de cod in Android Studio.

5.1 Realizarea unui website utilizand WordPress

[8] Mai întâi vom instala wordpress pe mașina localhost sau, în cazul nostru, pe un server care utilizează conexiunea FTP sau cPanel. Pentru aceasta trebuie să creăm o bază de date în phpmyadmin și un utilizator pentru baza de date (Fig.44).

Fig 44 Crearea bazei de date si a utilizatorului in phpMyAdmin

Pasul următor este încărcarea wordpress-ului în directorul rădăcină(public_html) printr-un client FTP sau File Manager în cPanel (Fig. 45). Se va incarca arhiva in public_html si se va dezahiva in aceeasi locatie.

Fig 45 Incarcarea WordPress-ului in folderul mama

După încărcarea wordpress-ului in folderul mama, vom accesa fișierul install.php într-un browser și va începe instalarea. Pentru a face acest lucru vom tasta in browserul nostru numele domeniului urmat de “/wp-admin”. Va trebui să compilăm pașii de configurare în care vom completa numele bazei de date create, utilizatorul și parola configurate de noi anterior, (Fig 46).

Fig 46 Instalarea WordPress-ului

Dacă am creat corect baza de date, instalarea ar trebui să fie un succes și putem începe proiectarea site-ului nostru. În cazul nostru, dorim să realizăm un magazin online unde oamenii pot cumpăra lucruri. Deci, primul lucru pe care îl vom face este să instalați o temă în wordpress, mergând la Appereance – Teme, (Fig 47).

Fig 47 Setarea unei teme in WordPress

După instalarea unei teme, trebuie să instalam pluginul woocommerce pentru a putea activa functionalitatea de a vinde lucruri pe site-ul nostru. Apoi, va trebui să configuram setările woocommerce (moneda, țară, metode de expediere, gateway-uri de plată,etc.), (Fig. 48).

Fig 49 Instalarea si setarea pluginului Woocommerce

După configurarea funcției woocommerce, vom începe să creăm paginile noastre: Acasă, Despre, Magazin, Termeni și Conditii si alte pagini care le dorim. Toate acestea se fac din panoul de administrare wordress și nu este necesară programarea. Dacă vrem să customizăm tema putem accesa fișierele prin FTP și începe codarea sau putem adăuga CSS personalizat în secțiunea de cod personalizat din panoul de administrare. Platforma este ușor de învățat și chiar un începător poate face un simplu site web. Dacă nu avem cunoștințe despre programarea web, putem căuta pluginuri în secțiunea Plugins, unde găsim pluginuri diferite pentru ceea ce avem nevoie (de exemplu: glisoare de imagine, formulare de contact, sincronizare social media etc.), ( Fig.50,51).

Fig 50 Pluginuri WordPress

Fig 51 Crearea de pagini in WordPress

După finalizarea designului, putem începe să adăugăm produse în magazin. Putem adăuga produse din secțiunea produse în wordpress unde vom seta numele, prețul, categoria, imaginile și descrierea produsului, (Fig 52).

Fig 52 Adaugarea de produse in woocommerce

5.2 Crearea aplicatiei utilizand Android Studio prin preluarea informatiei site-ului

După ce am creat site-ul web cum vrem noi, putem să deschidem Android Studio și să începem să dezvoltam aplicația. Pentru a face o aplicație mobilă care ar fi conectată si sincronizata la site si la baza de date a acestuia ar dura săptămâni, luni, in functie de proiect. Bazele de date ar trebui să fie sincronizate, ar trebui să proiectăm un aspect după site-ul nostru etc. În loc să facem asta, vom folosi WebView în Android studio și vom crea o aplicație care va încărca practic site-ul, dar în loc să îl încarce într-un browser, acesta se va încărca în aplicatie folosindu-se de WebView. Deci, mai întâi trebuie să creăm un proiect gol în care să setăm numele aplicației și cea mai mică versiune de Android care sa o poata rula, (Fig 53).

Fig 53 Setarea unui proiect nou in Android Studio

[9] Primul lucru pe care il vom face în continuare este adăugarea codului principal în MainActivity. Deci, vom face ca aplicația să acceseze URL-ul site-ului. Dar nu este suficient, deoarece daca vom face doar acest lucru aplicatia noastra se va închide și va deschide un browser pentru a accesa link-ul, practic, tocmai am dat OS-ului o comandă. Așadar, vom seta aplicația pentru a deschide site-ul din interiorul acesteia utilizând WebViewClient, (Fig 54).

Fig 54 Codul necesar accesarii website-ului nostru

Următorul cod pe care îl vom adăuga este în AndroidManifest.xml, în care vom adăuga permisiuni sistemului Android pentru a permite aplicației să acceseze internetul, (Fig 55).

Fig 55 Adaugarea permisiunilor pentru accesarea internetului

După ce am adăugat permisiunile, vom merge la activity_main.xml unde vom seta lățimea și înălțimea aplicației. Le vom seta să umple întregul ecran al telefonului, astfel încât acesta să arate bine pentru orice rezoluție, (Fig 56).

Fig 56 Setarea rezolutiei aplicatiei

Putem testa aplicația pentru a vedea dacă funcționează și verifică dacă este nevoie de unele modificări. Pentru a face acest lucru vom merge la meniul Instrumente, selectam Android și AVD Manager. Se va afișa o casetă cu un emulator predefinit pentru a selecta. Putem configura propriul emulator cu rezoluția dorită sau putem conecta telefonul la computer și acesta va apărea pe lista din care putem selecta. După ce am selectat emulatorul, un dispozitiv virtual va fi afișat pe ecranul nostru, unde vom putea vedea și testa aplicația. După ce am instalat emulatorul nostru, putem testa aplicația împreună cu acesta. Vom merge la “Run” din meniu și selectam “Run App”. Emulatorul va încărca aplicația și o putem testa, (Fig 57).

Fig 57 Testarea aplicatiei folosind emulatorul

Observăm că aplicația noastră funcționează, dar trebuie să stabilim încă un lucru înainte de a putea exporta aplicația. Când accesăm paginile din aplicație observăm că atunci când încercăm să apăsăm butonul de “Inapoi”, rezultatul este închiderea aplicației in loc sa merga la pagina anterioară cum ar fi trebuit. Deci, pentru a repara trebuie să adăugăm un anumit cod la MainActivity unde îi precizam sistemului Android că butonul de Inapoi nu va funcționa doar în aplicatie nu global, (Fig 57).

După ce am terminat aplicația, putem să ne îndreptăm și să pregătim setările pentru export. Pentru a exporta aplicația, mergm la "Build" din meniu și selectam "Build APK". Dar înainte de a face acest lucru trebuie să setam o pictogramă aplicației. Pentru a face acest lucru, facem click dreapta pe proiect și selectam "New" și apoi "Image Asset", (Fig 58).

Fig 58 Setarea inconitei de lansare a aplicatiei

CONCLUZII

Designul presupune analiză, imaginație, schițare, inovație. Înainte sa începem un proiect trebuie sa analizăm toate resursele necesare pentru dezvoltarea lui, toate condițiile de realizare și bugetul alocat unui proiect. Astfel, am demonstrat în patru studii de caz diferite faptul că folosindu-ne de mai multe programe grafice am reușit sa depășim limitele acestora și să obținem performanțe în design obținând astfel rezultate satisfăcătoare în realizarea proiectelor exemplificate.

Fiecare program folosit deservește o ramură specifică a designului de produs (CAD, Modelare 3D, Editare foto/video, Programare,etc), (Fig 59). Deși unele dintre ele pot să conducă la întrunirea unui proiect de unul singur, trebuie să avem în vedere faptul că atât cunoștințele noastre tehnice în folosirea acestora cât și resursele hardware pe care acestea le impun nu vor conduce la rezultate satisfăcâtoare, cu atât mai puțin spectaculoase.

În primul exemplu ales am demonstrat cum putem realiza un design de interior-exterior folosind Cinema 4D, AutoCAD și Photoshop. Dacă am fi folosit doar AutoCAD timpul de realizare ar fi fost foarte îndelungat iar performanțele grafice (culori, texturi, efecte) ar fi fost slabe. Proiectul ar fi putut fi realizat doar utilizând Cinema 4D dar ne-ar fi trebuit pentru finalizarea scenelor resurse hardware exagerat de mari. Astfel folosind AutoCAD pentru a realiza rapid și corect un plan de casă am reușit să-l importăm în Cinema 4D urmând a realiza ușor partea 3D și randarea scenelor iar folosindu-ne de Photoshop am îmbunătățit calitatea grafica prin crearea de texturi avansate pentru obiectele din scenă.

În cel de-al doilea exemplu am reușit să reducem drastic resursele necesare realizării unor spoturi publicitare, realizănd animațiile obiectelor 3D în Cinema 4D si importându-le în After Effects în vederea creării fundalului și a adăugării de efecte, îmbunătățind astfel calitatea grafică. Astfel exportând doar obiectele animate din Cinema 4D am reușit să scurtăm timpii de realizare si randare a scenelor cu 60% mai puțin decât dacă am fi folosit doar unul din programe.

Performanța grafică cât și scurtarea timpilor a fost și target-ul celui de-al treilea exemplu în care folosindu-ne de Cinema 4D pentru a modela rapid si calitativ obiectele și scena unui joc 3D și de Blender 3D pentru a programa obiectele ce populează scena.

În ultimul studiu de caz am găsit o metodă ingenioasă de a realiza rapid și precis un design de site web și o aplicație pentru mobil. Folosindu-ne de platforma “open source” WordPress am reușit să creăm rapid un site web; iar prin rapid ne referim la scurtarea timpilor de realizare de ordinul zilelor. La finalul dezvoltării site-ului nostru nu a fost nevoie decât de cateva linii de cod pentru a realiza aplicația pentru mobil. Prin acest demers, crearea de site-uri cat și crearea de aplicații pentru mobil poate fi accesibilă și persoanelor fără experiență in limbaje de programare dedicate.

Astfel concluzia finală a lucrării este faptul că design-ul este un termen ce presupune interdisciplinaritate. În realizarea unor proiecte nu trebuie să ne limităm la domeniul proiectului sau la resursele pe care le cunoaștem ci trebuie să ne lărgim orizonturile către orice căi de îmbunătățire a calității rezultatelor finale dar și a eficienței în realizare.

Fig 59 Ariile de specialitate ale programelor folosite si punctele lor forte

În diagrama de mai jos putem observa diferentele între studiile noastre de caz realizate cu un singur program și cele realizate prin mixarea programelor. Putem observa că prin mixarea programelor am obținut performante grafice superioare, timpi de realiare mici și am folosit resurse hardware puține astfel rezultatele proiectelor noastre au fost mult mai satisfăcătoare.

BIBLIOGRAFIE

[1] http://design-deea.blogspot.ro/2012/03/putem-defini-designul.html

[2] Kent McQuilkin, “Cinema 4D: The Artist's Project Sourcebook”, Focal Press, 29 iunie 2011

[3] http://www.digitaltutors.com/software/CINEMA-4D-tutorials

[4] Kent McQuilkin, “Cinema 4D Apprentice: Real-World Skills for the Aspiring Motion Graphics Artist”, Focal Press, 7 mai 2015

[5] http://helpx.adobe.com/after-effects/tutorials.html

[6] http://www.photoshoptutorials.tv/

[8] http://www.wpbeginner.com/category/wp-tutorials/

[9]https://www.tutorialspoint.com/android/android_sdk_manager.htm