Practical Fractals is an Ember app that demonstrates what is possible within the canvas element. The display area is built out of “pixels” line by line. The fractal shape comes from an equation that uses two values, the x and y coordinates. Based on how those coordinates perform, the pixel is colored in.
On top of drawing each pixel, fractal images have an additional layer of complexity. Each pixel is “tested” multiple times. If the pixel is colored black if it makes it all the way through, and it’s given a different color if it only makes it halfway, and a different color if it meets a different break point.
This animation shows what happens when we change the number of times we “test” each pixel. The live version cannot animate this quickly, but we can do something similar if we use a lower resolution.
Zoom and Move
The zoom level divides the starting values for the x/y coordinates. So when the zoom level gets bigger, the values we are working with get smaller and smaller. This way, each pixel covers less “ground” resulting in a zoomed in picture. The Move buttons work in a similar way, directly adding and subtracting from the x/y values.
The color selectors update the hex values provided at each break point. In the future, I’d like to give the option to include more break points, and also let users adjust where those break points are.
I wanted to learn more about WebRTC, so I built this tool in React/Redux to take userMediaStream data and turn it into silly gifs with a cool 80s vaporwave theme. The user's stream is acquired using simple media constraints and a call to getUserMedia, then shown on the html video element. Screenshots are taken from the video and drawn to a canvas, which are then used to assemble a gif ready to download.
When the page initially loads, it will automatically request a media stream from the user's camera. The video element then sets the media stream as its srcObject. If for some reason the auto-start fails, there is button to manually request the stream.
When the stream state is active, the video element displays the current stream. The video scales with the page independantly from the size of the stream.
Once the user kicks things off, they see a countdown from 3, followed by a series of camera flashes. At each flash, the RecordImage action takes a screenshot from the video and draws it to a hidden canvas. Those canvas images are used to assemble an animated gif. The countdown and flashes both use the react-modal package in two different ways, depending on what props are passed to them.
After the photobooth function takes 6 pictures, they are encoded together to make a dataURL for an animated gif, which is displayed in another modal window. From there, the user can download the gif, or click 'try again' to return to the photobooth.
A guide to the many places mankind has reached throughout history, Camp Space is a website designed using Node.js as part of a web development course through Udemy. The process of building it covered RESTful routing, database driven content, authentication, and user created content.
The title page features a crossfading series of space themed images. Behind the scenes, this page also uses a header partial unique from the rest of the site.
The index view contains a list of landing sites pulled from mongodb using mongoose. From here, users can click on one to view more details, or add a new one. If they are not logged in, they will be asked to either sign in or create a new account.
The show page contains additional details about the site, if the current user is also the auther of the page, they are given the option to edit the details or delete the site altogether. Users can add comments below, and can similarly be edited or deleted by the comment's author.
The edit route prepopulates a form with the existing information about the site. When the user submits, the information in the db is updated accordingly. It also performs a check server side to make sure the user is in fact the page's author, and doesn't rely on the UI simply hiding the edit link.
Guess the Color Code!
In the default game mode, the game randomly chooses a 'correct' color and displays its RGB code at the top. It then makes six boxes and generates generates colors for each of them. To make the game fair, the random colors are compared to the 'correct' color to make sure they aren't too similar. If the user clicks on the wrong answer, that box is removed and resets their 'winning streak'.
In easy mode, half as many boxes are created, and the colors generated need to be even less similar to the 'correct' color.
A vertical view for mobile screens.
Made to demonstrate the UX methodology, weRead is a prototype for a learning management system that allows online classes to be taught in a way that is similar to in-person classes. I began with a series of interviews with teachers and students who have used online classes in the past. From those interviews, I created user profiles, pain points, and workflows that informed the design of the clickable prototype.
This is the home screen to be used by teachers. Here we see a list of classes that the teacher is assigned to, one of which is starting in five minutes! The number of classes shown here is a typical number that teachers would be responsible for.
In most cases, it will be multiple instances of the same class, set at different times of day, or different days of the week.
This is the classroom screen, where the majority of activities will take place. Teachers and students will enter the class similarly to a chatroom, and the teacher will control when class begins and ends using the switch in the upper right, and present lessons to the class via webcam or other media prepared ahead of time.
When the class period ends, the room stays open for students to collaborate and ask questions.
Reminder and chat controls
The system is planned around classes starting and stopping at predetermined times, but control ultimately rests with the teacher. On this screen, we see that the teacher has chosen to not end class automatically, and the class is currently running five minutes over. While it is not a good practice to go over time on a regular basis, this gives the teacher more flexibility.
The chat area below controls a number of options for conducting class. The teacher may call upon one or more students to speak to the group, review their messages for comments or questions, create workgroups, and talk selectively to those groups as needed.
Ben is one of the personas I created based on the interviews I had with teachers who have taught online classes in the past. His students have access to online collaboration tools through their school's online learning platform, but they prefer to use a patchwork of tools they are used to using in their personal life, such as email and facebook.
A basic flowchart documenting the normal flow of class. It walks through selecting a lesson deck, typing an introduction, and deciding when to start class. The teacher can then gauge how the students are responding to the material, and adjust the presentation accordingly. This kind of real time adjustment is only possible because of the way classes are structured in weRead. The ability for teachers to evaluate the class's understanding is the piece that is missing from many online learning platforms.
I developed this site map to show the primary pages that teachers and students will use, as well as the supporting pages needed to make them possible. I also identified Lesson Planning, Grades, and Assignments as areas for further development, as they are topics that are equally complex to the one I'm solving here, and deserve attention outside the scope of this project.
Safelight Security had a collection of cybersecurity training courses and wanted a better way to let our customers assign them to their staff and track their progress. For staff, it highlights the course assignments that are due next, and features leaderboards to encourage participation. Staff managers can view the members on their team and monitor their progress. Additionally, program managers can assign course curriculums, set due dates, and edit course content.
The course homepage was the starting point for the Spark interface. Our development goals for Spark were to start with the smallest piece possible, and expand upon it over time. Safelight Security already had a large library of courses that including assessments and chapter navigation, so the course homepage was a natural place to start. One of the most common pieces of feedback we received about the existing courses was that users were unsure of what to do after completing a course. So for this interface, I wanted to make sure it was clear to the user when they accomplished a task, and where they stood in the grand scheme of things.
The video player shows an example of how Safelight's existing courses would fit in the interface. Chapters can be selected from the dropdown ribbon on the upper right, and transcripts are available to users who prefer to read the course text.
One of the major pain points of Safelight's clients was the lack of participation among employees. To help combat this, we experimented with a number of ideas to spur competition. This included a leaderboard that awarded points to the staff that complete courses first, and had the highest assessment scores. Another concept is awarding 'achievements' based on customizable criteria.
From this menu, program managers would select which chapters of the course would be seen by the different staff groups. For example, customer service staff might see a broad overview of the concepts being taught, while IT staff would be required to view a more in-depth lesson. Other chapters could be hidden altogether if they are not relevant to your organization. Similarly, assessments can be given customized question pools.
Phases of the Moon
This infographic demonstrates how the positions of the earth, sun, and moon interact to form the eight familiar shapes we see in the sky.
Keeping your devices safe isn't easy, so take a trip to Mobile Bay and learn the dos and don'ts of mobile security. This three part infographic explores some of the frightening statistics about traveling with mobile devices.
For this infographic, I worked with cybersecurity experts to prioritize a list of the most important stats we wanted to communicate, and developed a theme based on the times when mobile devices are most at risk: vacations! The full graphic has been divided into three sections, this first one is reminiscent of holiday getaway posters and features a number of behaviors that put their devices at risk!
Left at the gate
The second piece features airport iconography, and demonstrates one way thieves break into phones. Many lock screens allow users to make several passcode attempts before going into lockdown. Thieves know this, and will try to get in using the ten most common passcodes seen above, so if you see yours up there, CHANGE IT!!!
Lost in paradise
Finally, this driving map highlights the most common places devices are lost or stolen, as well as a few takeaways.