Ben Grawi

Project: Fourier Visualizations

Mon, 01 Feb 2016 00:00:00 +0000

About

An HTML5 canvas visualization of how Fourier series, or adding smaller and faster sin waves together, can approximate any periodic wave that you can then hear directly. These visualizations provide the foundation for oscillators used in most music synthesizers. The visualization shows each sin wave as a circle being added to the previous sin wave’s value. It color codes them so that the equation, component, and circle can be easily recognized. By using the WebAudio API, these waves can be heard individually or all together by directly using the math shown. Since we can’t hear sound waves of 1-2Hz, the audio frequency is instead based at 220Hz, but the actual sound wave is still exactly what is shown (save for normalization of the > 1 values).

Technologies

HTML/CSS/JS
AngularJS
Google Material Design Components
WebAudio oscillators
HTML5 canvas 2d

Features

View how computers approximate analog waves as a digital signal
Provides an intuition for connecting math, visual representations, and auditory cues to convey the underlying principles.

Project: JSFlap

Sun, 14 Dec 2014 00:00:00 +0000

About

Easily create and simulate finite state and Turing machines in a browser-based re-implementation of JFLAP, the Java Formal Languages and Automata Package. JFLAP is an incredibly important tool used in teaching the foundations of Computer Science Theory and is used in college classes around the world, however it was created before advances in modern user experience and application deliver were around. JSFLAP changes this by improving many of the poor user experiences, like requiring 5-6 clicks and menus to create a node and edge tool, I simplified this to a single click and drag gesture which is much more intuitive. By re-creating the basic flows, this is able to help teach students more quickly how the fundamentals of CS Theory work. Finite Automata and Turing Machines are the basis of language processing, computing, and higher-level concepts like Regular Expressions are all more easily expressed in JSFLAP.

Technologies

Typescript
HTML/CSS
AngularJS
Foundation UI library
D3.js

Features

Easy-to-use UX, just click and drag to make new nodes and edges
Keyboard shortcuts, snapping, multiple tools
Instant updates to test strings to test the graph
Export to PNG, file, and LaTeX.

Project: Bryx 911

Mon, 01 Sep 2014 00:00:00 +0000

About

I created the front end website for the Bryx 911 suite of apps. I wrote a Google Maps data visualizer, user management system, and live-updating alert feed for first responders and dispatchers so that they can view and respond to 911 alerts as they happen.

Technologies

HTML/CSS/JS
AngularJS
Google Maps API
Bootstrap

Features

Google Maps data visualization
User Management
Real-time alerts shown on a map
Beautiful marketing/landing page

Project: Commit Guru

Fri, 16 May 2014 00:00:00 +0000

I created my first site with a node.js backend framework called sails.js and a frontend in Angular.js

About

I worked with RIT (now Concordia) professor Emad Shihab along with Christoffer Rosen, a 5th-year student at the time, to create a commit analyzing service designed to find patterns of bug-introducing commits in repositories and then make predictions for new commits.

The frontend is my favorite AngularJS/Bootstrap stack, but the backend is actually a NodeJS server running Sails.js, which is an awesome framework I came across and fell in love with.

We also have a python daemon running, which I started work on, but Christoffer really brought it to fruition. It’s purpose was to do the actual ingestion and statistical analysis of the repositories with R.

Technologies

HTML/CSS/JS
AngularJS
Bootstrap
Sails.js on NodeJS
Python
PostgreSQL
R

####Features

Account creation and tracking
Feedback on commit ranking
Analysis of various commit metrics and suggestions of bug-inducing commits
Historical commit search and repository overview

Blog: New Site!

Fri, 25 Apr 2014 16:54:46 +0000

Hello everyone! I have finally redesigned my website and updated it with all my latest projects. I have switched off of the Ghost blogging platform and have moved to Jekyll and Github Pages. I look forward to making more blog posts in the future.

Project: CSH ScheduleMaker

Sat, 19 Apr 2014 00:00:00 +0000

About

CSH ScheduleMaker has had a long history. The project was initially created by jQuery founder John Resig, and then updated in 2011 by Benjamin Russell. I decided that it’s style was in need of an update along with the need to work on mobile phones. I choose to first give it a fresh coat of paint with a heavily-modified version of Bootstrap, which soon evolved into a complete front-end rewrite of all of the logic into AngularJS. This tool is now used by thousands of RIT students and it help makes their lives easier

Technologies:

HTML/CSS/JS
AngularJS
Bootstrap
PHP
MySQL

####Features:

Completely new and fresh redesign
Generate the most optimal schedules for RIT classes
Schedules render as SVGs or images, both of which can be printed and customized
Better sharing tools and image previewing on Facebook
Full mobile support

Project: Reddit Notifier

Sun, 13 Apr 2014 00:00:00 +0000

About

Kaycee Pozniakas and I built “Reddit Notifier” in 24hrs at the RocHacks 24 hour hackathon at the University of Rochester. It is a Google Chrome webstore app which has since amassed a large following.

Technologies

HTML/CSS/JS
jQuery
Chrome APIs
Reddit APIs

Features

Reddit notification count and dropdown in chrome’s toolbar
Adjust the refresh rate of the notifications
Jump directly to the conversation when you click on the notification

Project: Green Team HV

Sat, 23 Feb 2013 00:00:00 +0000

About

GreenTeamHV.com is the result of multiple hundreds of hours and many iterations of The Green Team’s site. What started out as a small Wordpress site evolved into a massive single-page app that I wrote from the ground up.

I designed the user interface and entire backend by myself, through which, I learned a ton about programming through. I wrote my own MVC framework for php (something I would not do again, but was a great learning process!) complete with my own frontend JS routing library that utilized HTML5’s pushState.

Technologies:

HTML/CSS/JS
Custom Frontend JS library
jQuery (with various plugins)
Custom PHP MVC Framework
MySQL

Features:

Natural language searching
RETS Data Feed syncing (listing data)
Google Calendar/Contacts sync
Full user management between other services
Lead capturing and management
Responsive Design