Giter VIP home page Giter VIP logo

generative-art-20-21's Introduction

Protype github page: https://karimgalal.github.io/generative-art-20-21/

Procesverslag

Over

  • Naam: Karim Galal
  • Klas: VID-2
  • Minor: Visual Interface Design
  • Favoriete dier: Wolf
  • Startniveau: Basics van coderen in html/css/js wel onder de knie, kan reference opzoeken, ongeveer begrijpen, 30x falen en dingen uitproberen tot het werkt.

Concept

Het concept is een app die de gebruikers de mogelijkheid geeft om een t-shirt te customizen door middel van tiedye splatters. Tie-dye is een kleren verf techniek waarbij je een stuk stof (in dit geval een t-shirt) van een patroon voorziet door er stevige knopen in te leggen door middel van elastiekjes bijvoorbeeld of touw en die vervolgens te dippen in een emmer met verf.

Features

Om de interactie van de gebruiker interessanter te maken heb ik ervoor gekozen om het exclusief voor smartphones te maken (alhoewel het alleen op ios werkt/getest is). Dit komt door verschillende redenen. Naast het feit dat de code ingewikkelder wordt voor bonuspunten, wilde ik er ook voor zorgen dat de gebruiker iets mee kreeg van de de echte ervaring van tiedyen. Normaal pak je een t-shirt dus vast en dip je die in een emmer met verf. Ik probeerde dat een beetje te mimicken door gebruik te maken van de bewegings input van een iphone in dit geval. Wanneer de telefoon beweegt dan komen er spletters tevoorschijn in verschillende gradient kleuren op een random locatie binnen de t-shirt frame. De spletters geven dat verf aesthethic weer en de gradients lijkt op verf die verder lekt en mengt met andere kleuren. Verder kan de gebruiker ook twee keer tappen op het scherm om de t-shirt weer naar leeg/wit te resetten als de random gegenereerde kunstwerk op de t-shirt niet mooi genoeg is bijvoorbeeld.

Kort samengevat:

  1. Telefoon bewegen voor random spletters in verschillende kleuren op random locaties binnen de t-shirt
  2. double tap op het scherm om het kunstwerk te resetten en opnieuw te zoeken naar een leuker patroon/kleuren combinatie

Onderzoek & inspiratie

Ik heb voor dit concept gekozen omdat het iets te maken moest hebben met mij als persoon omdat dat de thema is van deze minor. Ik hou zelf namelijk heel veel van fashion en kleding. Ik ben momenteel ook aan een eigen kleding bedrijf aan het werken. Daarom leek dit concept mij een leuk idee toen Danny dit had voorgesteld. Ik begreep gelijk dat het concept onder generatieve kunst viel omdat het in het echt ook zo werkt. De patroon en de kleuren zijn op elk t-shirt anders en dat maakt het dus super uniek en generatief.

Voortang

Week-1

De eerste week voor mij was best simpel. Veel inspiratie opgezocht, ideeen bedacht, de p5 showcase bekeken voor voorbeelden, video's op youtube gekeken, stukjes code/samples gelezen en bekenen op het internet. Daarnaast ook een aantal oude javascript opdrachten gelezen die ik had geschreven bijvoorbeeld voor project web om te herinneren hoe het ook alweer werkte. Vervolgens met Danny in de les gesproken over concepten en kwam de tie-dye idee tevoorschijn.

Week-2

De tweede week was vooral het ontdekken van de p5 library en hoe het precies werkte in verband met javascript etc. Heb een hele series aan tutorials gevolgd die Danny zelf had doorgestuurd maar heb het niet afgemaakt. Op gegeven moment zelf aan de slag gegaan en deze app gebouwd maar dan voor op de pc en dan met muis en keyboard als input.

Week-3

Na feedback dat muis en keyboard te voordehandliggend was ben ik overgestapt naar phone input om de interacctie iets interessanter te maken. In deze fase ging het voor mij vooral om grenzen pushen zonder mijn code steeds te breken door nieuwe functies er aan toe te voegen. Ik heb bijvoorbeeld geprobeerd om specifieke manieren van schudden te analyseren zodat je als gebruiker kon richten waar de spletters komen maar dat is mij niet gelukt. Ik heb in deze fase ook dingen zoals een color picker geprobeerd maar dat maakte de tshirts minder uniek omdat je dan alleen 3-4 kleurtjes kon kiezen etc. Ik vond dat super randomizede idee veel leuker.

Bronnenlijst

De beginner en advanced tutorials op deze youtube kanaal: https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw

generative-art-20-21's People

Contributors

karimgalal avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.