Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CraZe

 CraZe

A Generative/Manual Hybrid Art App

Santiago Zubieta

February 09, 2019
Tweet

More Decks by Santiago Zubieta

Other Decks in Technology

Transcript

  1. A Generative/Manual Hybrid Art App

    View Slide

  2. Santiago Martin Zubieta-Ortiz
    From Medellín, Colombia
    Loves computers, physics, and arts.
    Computer Science BSc 2011 - 2016
    Google, Inc SWE/SETI Intern
    2015, 2016
    Booking.com Backend Dev
    2017 - Present
    Huge city, 2.5 million inhabitants
    Ever growing and diverse software development community

    View Slide

  3. Medellín compared to Amsterdam

    View Slide

  4. I had tried many spirograph, mandala, and kaleidoscope apps to distract myself,
    but always felt I was missing something, they had symmetries and rotations and
    colors but there didn't seem to be many degrees of freedom on configurations and
    what could be generated. I also really liked generative art on the internet, seeing
    how programatically many really nice and intricate looking shapes, lines, and
    colors could be formed, but also felt it was too automatic and I wanted to be able
    to manually guide these generations as I drawed while being able to finely tune
    most of its aspects in the process.

    View Slide

  5. Growing up loved drawing with many colors, repeating patterns, and symmetries

    View Slide

  6. First semester course project: Learn about OOP,
    Java, GUIs, and other graphical resources
    (AWT/Swing) to make a Crash Balls game clone.
    With this knowledge, things like buttons, sliders, spinners, checkboxes, lists, mouse/keyboard
    events, and drawing lines+circles, started playing around to make an applet to draw. At first
    very simple, only lines and rotating them, then slowly expanding its functions.

    View Slide

  7. All shapes are either basic lines or circles, with points captured from mouse coordinates defining the brush.
    Then it's a lot of rotations, reflections, etc.
    Very basic transformations at first Horizontal symmetry (horrible 2011 code)
    One rotation, symmetry enabled.
    Hundreds of rotations, causes
    moire patterns.
    Sixteen rotations and symmetry.
    First test drawing

    View Slide

  8. Lines are cool, but I wanted more, to make shapes with those lines, and turn that into brushes.
    Radiant / Lines From Start Triangles Vertical / Horizontal Lines Squares

    View Slide

  9. Dynamic color palettes! Started with "Rainbows", developed more further ahead.

    View Slide

  10. Transformations/Effects: brushes transform themselves with stackable effects while drawing.
    The regular "Vertical Lines" brush. The line in the
    center shows the real path of the stroke which is used as
    a base to generate the vertical lines.
    An effect to "Connect" with previously drawn instance of
    brush. Works with all brushes.
    A "Variable Size" effect to make brush size oscillate
    between 1.5 and 0.5 of the input size with a wave function.
    An "Spinning/Rotating Brush" effect to make brush spin
    on its centroid.

    View Slide

  11. Vertical Lines, Rotating Brush,
    Variable Size, Connect Borders.
    *
    * Place where stroke began.
    Triangles, Rotating Brush, and many
    regular Lines as free hand strokes.
    Radiant/Lines From Start,
    Connect Borders

    View Slide

  12. These drawings and many more were made by others and myself with the Desktop Application 1.0 https://imgur.com/gallery/LEetg

    View Slide

  13. I used it personally, posted some pictures
    occasionally, people liked it so I started
    sharing the application with them.
    Only issue is it was a .jar that wasn't easy
    to execute, and some people outside of
    Software Development had a hard time.
    I had to explain how to install JRE, how to
    run it from terminal if double click didn't
    work, etc.
    This added a lot of friction, and many
    people around me wanted to try it so
    started thinking about how could I get it
    out to more people.
    So in August 2012 I started developing
    an Android app.
    https://github.com/zubie7a/CraZe_Desktop
    MIT License. Code is really old, confusing to follow, hard to make changes to, a lot of stuff
    crammed in almost 2000 LOC files! Most versions are ports of this code (Didn't do a full
    rewrite of logic from scratch until 2018 to have proper abstractions, patterns, and modules).
    CraZe Desktop 1.0 (Java SE, JDK 7): December 2011 - February 2012

    View Slide

  14. I used it personally, posted some pictures
    occasionally, people liked it so I started
    sharing the application with them.
    Only issue is it was a .jar that wasn't easy
    to execute, and some people outside of
    Software Development had a hard time.
    I had to explain how to install JRE, how to
    run it from terminal if double click didn't
    work, etc.
    This added a lot of friction, and many
    people around me wanted to try it so
    started thinking about how could I get it
    out to more people.
    So in August 2012 I started developing
    an Android app.
    https://github.com/zubie7a/CraZe_Desktop
    CraZe Desktop 1.0 (Java SE, JDK 7): December 2011 - February 2012
    MIT License. Code is really old, confusing to follow, hard to make changes to, a lot of stuff
    crammed in almost 2000 LOC files! Most versions are ports of this code (Didn't do a full
    rewrite of logic from scratch until 2018 to have proper abstractions, patterns, and modules).

    View Slide

  15. CraZe Android 1.0: August 2012 - September 2012
    New Features:
    * Grid Alignment: aligns brushes to a grid, either
    square, triangular, etc, so that they don't overlap,
    can still be combined with other parameters for
    interesting effects.
    * Fill Brush: if brush is a closed shape, then fill it.
    * Fading Image: the image will fade slowly as you
    draw, to not fill the whole screen drawing long.
    * New Dynamic Palettes: 10 new palettes.
    Almost direct port of Desktop 1.0 logic, adapted
    to Android API for drawing things like paths,
    circles, lines, filling, and default UI elements.
    UI really rudimentary and barebones compared
    to most decent drawing apps, to open menu
    need to hide canvas, hard to tell what each
    configuration does easily.
    Targeted for Android 2.3, largely un-updated for
    6 years until later Android versions started
    breaking the menu functionality due to old code.
    First sideloaded via QR codes, on Play Store since June 2013.
    Fire Palette, Fill Brush,
    Triangles, Variable Size
    Grayscale Palette, Fill Brush,
    Squares, Variable Size

    View Slide

  16. CraZe Android 1.0: August 2012 - September 2012
    New Features:
    * Grid Alignment: aligns brushes to a grid, either
    square, triangular, etc, so that they don't overlap,
    can still be combined with other parameters for
    interesting effects.
    * Fill Brush: if brush is a closed shape, then fill it.
    * Fading Image: the image will fade slowly as you
    draw, to not fill the whole screen drawing long.
    * New Dynamic Palettes: 10 new palettes.
    Almost direct port of Desktop 1.0 logic, adapted
    to Android API for drawing things like paths,
    circles, lines, filling, and default UI elements.
    UI really rudimentary and barebones compared
    to most decent drawing apps, to open menu
    need to hide canvas, hard to tell what each
    configuration does easily.
    Targeted for Android 2.3, largely un-updated for
    6 years until later Android versions started
    breaking the menu functionality due to old code.
    First sideloaded via QR codes, on Play Store since June 2013.
    Cross Brush, Rotating Brush
    Squares, Grid Align

    View Slide

  17. These drawings and many more were made by others and myself with the Android Application 1.0 https://imgur.com/gallery/fdEgK

    View Slide

  18. New Features:
    * New Dynamic Palettes
    * Transparency ~ Alpha
    * WebSockets for co-op
    drawing, only in web ver,
    hard to port to Android.
    Works like chat rooms,
    People can draw on Lobby
    or join private rooms.
    * New Brush: Chain
    * Anti-Aliasing
    CraZe Web 1.0: December 2012 - January 2013 https://craze.herokuapp.com
    Circle Chain Brush
    Foxes Palette
    Transparency
    Co-Op Drawing Functionality: NodeJS backend with SocketIO, hosted on Heroku.
    CSS Styles: just imported Twitter's Bootstrap to make UI look nice, no fancy custom classes.
    DOM Handling: JQuery (with @febuiles help, thanks!) to handle UI events (touches, buttons, etc).
    Drawing: using HTML5 default Canvas API for lines, circles, filling, etc. Maths still hand-coded.
    Wish I knew of P5.JS at the time!

    View Slide

  19. Co-Op Drawing Functionality: NodeJS backend with SocketIO, hosted on Heroku.
    CSS Styles: just imported Twitter's Bootstrap to make UI look nice, no fancy custom classes.
    DOM Handling: JQuery (with @febuiles help, thanks!) to handle UI events (touches, buttons, etc).
    Drawing: using HTML5 default Canvas API for lines, circles, filling, etc. Maths still hand-coded.
    Wish I knew of P5.JS at the time!
    CraZe Web 1.0: December 2012 - January 2013 https://craze.herokuapp.com
    New Features:
    * New Dynamic Palettes
    * Transparency ~ Alpha
    * WebSockets for co-op
    drawing, only in web ver,
    hard to port to Android.
    Works like chat rooms,
    People can draw on Lobby
    or join private rooms.
    * New Brush: Chain
    * Anti-Aliasing
    Circle Chain Brush
    Transparency
    Foxes Palette

    View Slide

  20. These drawings and many more were made by others and myself with the Web Application 1.0 https://imgur.com/gallery/VxwIm

    View Slide

  21. CraZe Web 2.0: May 2015 - June 2015 https://craze-alpha.herokuapp.com

    View Slide

  22. https://craze-alpha.herokuapp.com
    CraZe Web 2.0: May 2015 - June 2015
    New Features:
    * Reworked all palettes.
    * Arbitrary Shape/Path Filling: If the regular stroke
    has Fill Shape enabled, the shape described by the
    whole path (closed) will be filled.
    * Perspective Size: Size will be proportional to the
    distance from detected point to the center.
    * New Brushes: Tangent, will draw tangent lines to
    the current point when compared against previous.
    Now instead of JQuery/Bootstrap, uses
    AngularJS with the Ionic Framework, which
    makes it very easy to create a responsive
    web app, so it works properly in mobile
    browsers which first web version didn't do.
    Drawing is still with regular HTML5 Canvas.
    No longer has WebSockets due to technical
    issues with the Ionic Framework at the time
    of development.
    Arecibo Message Inspired Art Original
    Arbitrary Shape/Path Filling Tangent Lines Brush,
    Perspective Size

    View Slide

  23. These drawings and many more were made by others and myself with the Web Application 2.0 https://imgur.com/gallery/LmGdRZU

    View Slide

  24. CraZe Android 2.0: January 2018 - March 2018 https://play.google.com/store/apps/details?id=com.zubieta.craze

    View Slide

  25. CraZe Android 2.0: January 2018 - March 2018
    New Features:
    * FULL REWRITE: Logic was fully made from
    scratch, with proper abstractions, patterns,
    flows, modules, etc. Increases port-ability
    and updating new features easier.
    * Shining Brush: The brush has a glow around it.
    * Color Blending Modes: All the 18 Porter-Duff
    Modes provided in default Android API.
    * Slightly improved UI: Better descriptions, some
    icons, and some buttons accessible in canvas.
    * New Brushes: Hexagon, Insignia, Z, X, Hourglass.
    * New Palettes: Blue Sky, Neon, Glacier, Tropical…
    * Multi-Touch: Each detected finger will draw
    a separate stroke.
    Still made completely on default Android API,
    targeting versions 5.1+, using Java JDK 8.
    https://play.google.com/store/apps/details?id=com.zubieta.craze

    View Slide

  26. Redevelopment in 2018 was a mess
    of Post-Its. Either figuring out
    formulas or annotating stuff to not
    forget about it. Also as physical
    reminders or "pending tasks" to not
    get distracted too much.

    View Slide

  27. These drawings and many more were made by others and myself with the Android Application 2.0 https://imgur.com/gallery/qYLAZQO

    View Slide

  28. CraZe iOS 1.0: January 2019 - Currently
    Web version runs pretty well on iOS
    Safari, if that's possible with a web
    browser the possibilities with Native iOS
    code and CoreML are even bigger!
    Lots of challenges with iOS but also lots of potential!

    View Slide

  29. CraZe Desktop 2.0 (Processing): AxiDraw Experiments

    View Slide

  30. November 2018
    Processing has been really useful for the SVG generation, and ease of applying transformations, handling events,
    handling the UI, and future portability with a web version perhaps made with P5.JS. For plotting there's slight
    problems with physical ink like no transparency, filling of overlapping shapes is a mess (need to figure out shape
    clipping), and dynamic palettes have to be constrained to a limited set of available colors (from thousands to tens).
    Just in time to make holidays gifts for friends, family and colleagues!

    View Slide

  31. Ask me about materials used!

    View Slide

  32. Promotion Strategies
    T-Shirt with QR Code in a Colombian Comic-Con
    Showing it at parties!
    Open web browser version at tech stores, or install Android version when
    vendor devices allowed it.
    Instagram, mainly to share
    images of creations, videos of
    work in progress, motivate
    people to share drawings using
    the #CraZeApp hashtag.
    Presenting it at meetups (first time!) :-)
    Twitter, mainly for interacting with the creative coding community.
    Old QR stickers
    Just telling people and making demos personally!

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. @karma_andala
    @sublimegrrl219
    @macksword @spacemandala

    View Slide

  37. @spacemandala: this guy is amazingly the literal definition of a power-user. Non-stop creating designs, remixing them, and creating stuff since 2015.

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. 1680 Top reviews are nice and very motivating...
    381
    239
    136
    229
    Being aware of all three kinds is very important.
    Downtrend of active installs that I left unnoticed for more than one year:
    * Started with Android 6.0~7.0 and new phones which somehow broke menus and increased crashes, after all, it was originally made for 2.3 in 2012.
    * This initiated a trend of losing users, both new installs immediately uninstalling, or existing users uninstalling, loses of tens of thousands of installs.
    * Only stopped dropping after releasing the new version made from scratch using latest API and with new menus, will take a couple years at current
    rate to recover to previous user install base unless pushing with advertising or updates.
    *
    Bad reviews have constructive criticism, or
    reflect pain points ~ bugs with software.
    Good ~ medium reviews show room for
    improvement or suggestions.

    View Slide

  46. Learnings
    The machine supports the human
    Explore inner curiosity
    Artistic creativity has no age or profession
    Privacy/Security awareness increasing
    Shady businesses becoming normal in mobile app space (ask me about it)
    5 years
    26 years
    98 years
    People wanna be involved in the process, not just watch
    People in different situations
    Stress
    Sadness
    Boredom
    Waiting
    Reading
    Apps asking bizarre permissions
    Current UI is a barrier
    Takes a lot of exploration, controls hardly intuitive
    19 years
    "I'm not an artist…" belief prevents people
    from exploring their curiosity and creativity
    Algorithms help, but don't replace creativity
    Circumstances of life make difficult to
    connect with that side
    Travelling
    It's the area with the most to improve
    The computer will help with "manual skill", user puts
    the mental ideas, which usually are mechanically hard
    to translate into something tangible
    Special
    Parties
    Introspection
    Tattooing Seek feedback
    Reporting issues
    Requests
    Know your users
    Pain points
    Know about diverse
    experiences outside
    your own
    School
    DJ
    Writer
    Promoter
    Designer
    Physician
    Journalist
    Unforeseen situations
    Child
    User data increasingly abused by rogue apps, if you are
    not a big name, getting user trust is hard
    Main driver of development
    Unique
    creations
    Feeling proud of outcome and willing to share
    Resting
    Specialized niche requests can lead into
    paid/pro versions while preserving current
    already fully featured accessible by everyone

    View Slide

  47. Ask me for stickers!
    Thanks for your attention!

    View Slide