UI Prototype Examples : 

  

 

I will make my own UI prototypes using Sketch and then uploading those UI frames to InVision where I will animate them to mimic the user experience of my participant. 

Example: 

https://www.behance.net/gallery/14888059/Tinder-Flat-UI

Augmented Reality

Potential projects :

video simulation of AR or actual programmed AR application?

Video simulation might mirror something similar to this :

Augmented Reality – learning the user interface

https://www.enginecreative.co.uk/blog/ar-ui-best-practice-designing-for-augmented-reality-experiences/

https://medium.com/@DAQRI/the-balancing-act-creating-a-helpful-ui-for-augmented-reality-43be08bbe92e

Perhaps if it was a simulation, the focus would be a tinder inspired AR application. Where the user would be able to examine the profiles of potential dates in a real life setting and swipe left or right ?… not sure just a thought, it would be an interesting commentary on how disposable we treat people on the internet and then see how an application would translate to real life.

just did some research…some companies are already developing AR dating apps… what?!!!

proof here:

https://mashable.com/2017/10/02/flirtar-ar-dating-app/#Dt6.mbw0tkqx

 

Summary :

My project involves a simulation of Conway’s Game of Life.

The universe of the Game of Life is an infinite two-dimensional grid of square cells, each of which is in one of two possible states, alive or dead, or “populated” or “unpopulated”. Every cell interacts with its eight neighbors which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

1. Any live cell with fewer than two live neighbors dies, as if caused by under-population.
2. Any live cell with two or three live neighbors lives on to the next generation.
3. Any live cell with more than three live neighbors dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.

The initial pattern constitutes the seed of the system. Applying the above rules simultaneously to every cell in the seed creates the first generation—births and deaths occur simultaneously, and the discrete moment at which this happens is sometimes called a tick (in other words, each generation is a pure function of the preceding one). The rules continue to be applied repeatedly to create further generations. (Wikipedia).

Conway’s Game of Life is significant for cross-disciplinary academics, as it is a relevant topic across various fields, such as computer science, mathematics, evolutionary computation and biology, to name a few.

The implementation of my project is in major part done programmatically via Vanilla JavaScript, and ran locally in a browser.

Although my code represents the visual translation of Conway’s four rules in his game, my overall project seeks to convey something more complex; the relationship between computer and nature.

The patterns displayed in my simulation which evolve based on the algorithm (Conway’s rules) can also be looked at from a perspective of population evolution; rise and fall of civilizations within a state of nature. We see according to the application of this algorithm the constant “life” and “death” among communities and populations and ultimately how vulnerable these populations are, vulnerable to the potential of stability, rise and fall based off only four simple rules.

The chaos from a simple four-step algorithm is displayed on the browser; the viewer can see constant change within “nature”. I personally found this unsettling; the uncertainty of nature within certain parameters, and perhaps what is even more unnerving is the uncertainty of nature in real life, not simply a computer screen simulation.

 

Which made me think, in the actual state of nature, (not my computer screen) do Conway’s rules apply?

I think the answer is fuzzy. Yes and no. Conway’s rules can apply in the actual state of nature, but I also believe nature can also be infinitely more complex. Conway’s Game of Life can’t account for external forces, which may disrupt the simulation of population’s rise and fall. By external forces, I’m referring to the potential of things like war and natural disaster, which play a role in the application of Conway’s rules, making things even more uncertain and volatile.

I attempt to account for these external forces in my code but implementing a JavaScript event “onmouseover” in which the mouse “disturbs” Conway’s algorithm. The mouse represents the uncertaintly of war and disaster, which may alter the nature of populations within the simulation of Conway’s rules.

 

Inspiration:

The inspiration for my project comes firstly from my appreciation for John Conway and his work in the field of computer science and mathematics; which is a passion of my own.

But it wasn’t until I watched Keith Downing’s TED Talk video on evolutionary computation, which inspired me to view my project as more than a mere “simulation”. Keith Downing made the point that computers and nature are much more similar than humanity initially imagined. He argued that computers and machines are actually heavily influenced by nature, which he refers to a “bio inspired design”. Accepting Prof. Downing’s argument, I was able to view my work as something intertwined with both computation and nature; whereas before I saw my project as purely computational with a front-end aesthetic. It was important to me to realize my project’s simulation was alive and real, just as it occurs in nature. Understanding my project as, “bio inspired design” broadened how I thought about Conway’s rules and how his algorithm applies to my both computer screen and the biological – physical world.

The final inspiration for my project, borrowing from the ideas of Conway and Downing, is the unseen forces that constantly impact Conways rules. As someone who reads the news everyday, the news app notifications I get sent to my phone inspired me greatly. I was inspired by the chaos of our own world, the constant news of attacks, murders, fires, technological advancement, medical discoveries etc. and I understood how these occurrences played out in the world, so I sought to represent these occurrences in my simulation; which I felt played an important role in making my project truly bio inspired design.

 

My Research :

Recapping my work:

Develop GOL in JS – refer to other public code and how they implemented the algorithm (some code references listed below)

https://github.com/ArturT/Game-of-Life-in-Java

https://github.com/fkling/Game-of-Life

https://github.com/pmav/game-of-life

Implementing the interactive element of my code relied on learning the onmouseover Event

https://www.w3schools.com/jsref/event_onmouseover.asp

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseover

Process:

The general process for my project involved getting the “hard part” out of the way first, which was programming and implementing GOL.

(snapshot of my original GOL code) ^

Once my code was running and debugged, I saw a perfectly fine screen running GOL . However I felt the visual expression of my “bio inspired design” was still semi – lacking so for the remainder of my “process” I added a gif to express through images “Maria’s Game of Life”, which is my understanding and interpretation of Conway’s rules and how unforeseen events play a role in my simulation. Giphy was the perfect platform to convey my message and heighten the visuals of my project.

https://giphy.com/create/gifmaker

(a few screenshots from the featured gif on my project)

 

To be honest, I haven’t thought much about my final project proposal for this class. Simply because I have other things on my plate, one being the fact I desperately need to create a new resume/portfolio site for myself (you know in order to get a job for when I graduate this Spring). I’ve interned as a programmer with the same startup for the past two summers, but this past summer my internship involved more than just software development. I was thrown (not by choice) into the world of UI/UX. It turns out I really enjoyed the process of website development outside the arena of extending the functionality of PHP modules for client WP sites! I’m hoping to brand myself in the job market as someone who understands good user interface & user experience… as well as someone who knows how to make mockups and sitemaps come to life in the world of code; a designer and a developer. That being said, just attaching my github link on job applications will not be enough if I want to break into the world of UI/UX on the professional level. So I’ve been haunted by the task of making a resume/portfolio website which can feature both my skills in UI/UX and programming.

Then about an hour ago I got an email reminding the class that we are moving into the phase of final project proposals… so why not kill two birds with one stone? My final project will also function as my personal resume/portfolio website. A really popular trend right now in UI is having interactive or moving features on your home page/landing page.

Ex.

https://couleecreative.com/ (mouse tracking interaction)

https://whiteroom.agency/ (fixed video background)

These sites give me inspiration for my own website and this class has provided my the tools to import some kind of visually interactive/moving component. 

Now the question is what…

If I’m going to make some digitally interactive feature for my website, I want it to be visually pleasing of course, but also personal to me. Which is why I’ve decided to create some sort of visual simulation of Conway’s Game of Life https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life

This game is very important to me from both a mathematical and philosophical point of view and I can’t spend too much time writing about why that is because this blog post would turn into a 20 page essay (ask me my opinions about it in person if you want).

Regardless. It seems as though there is enough data online to help guide me in the programming of this simulation. Theres a bunch of github links on people’s own attempts to replicate “Life” (ex. https://github.com/nomatteus/conway-game-of-life-js)

Since my project will be web based and I have plenty of experience programming in javascript… I plan to create this visual simulation via JS.

Today our sub prof. showed us how to do some 3D animation!!!! We used Blender to build a coffee cup, however due to time constraints, my coffee cup is still in the gray scale stage… Comparing this process to our work in java (processing), something felt off about this method of creating visuals. Although I loved how modular the blender program was, I missed having the code that explained the logic of whatever visual manifestation was on my screen. I’m definitely more partial to programming in a text editor or applications like processing because I’m visually able to read, write and design an algorithm. With Blender, the visuals are impressive, but I’m left wondering “What is the computer thinking?”

So essentially my for loop deals with speed and color. The faster you move your mouse, the lighter and larger the ellipse will be, and the slower you move your mouse, the smaller and darker the ellipse will be!

For this homework I chose the option to create a “Selfie Game” , I really had fun with my static selfie from the first homework, so I wanted to build upon my “alien theme”. The idea of this game is to catch the bean alien. Every click represents an attempt to catch the bean, in which case the bean alien duplicates and runs to a different part of the screen to get away from the user (alien hunter).

This is me! Essentially what you see here is my blonde bun (the most comfortable way to wear my hair) with a little alien in it. There was a UFO crash by my house in the 1990s and I frequent the crash site and I’m a huge fan of alien theories. I consider myself an amateur alien hunter. The alien in my bun (close to my head) represents the fact aliens are always on my brain. Im a big fan of astronomy, aliens & the amazingness of outer-space, hence the blinking stars as my background!