jaq-h

[jaq-h]

Emoji Translator

During my second module at Flatiron School, we created a music player with karaoke lyrics that had key words translated into Emojis. This was done with ruby on rails and server side rendering. Let’s get into the code...

I’ll first create a class for an emoij object

class Emoji

each emoji will have a hex value and possible translations  attr_accessor :keys, :hex

we will use a class array to store all the emoji objects for later  @@all = []

and create a constructor for the emoji  def initialize(hex, priority, keys)    @hex = hex    @priority = priority    @keys = keys    @@all << self  end now we need a class method that will take in a file path to read the list of emojis and keys we want to translate

The text file will be set up as emoji,key,key, for each line and the number of keys can vary per emoji 

 def self.create_translations(filepath)

we’ll use an array to store each line of the file as we read    lines = []    File.open(filepath,'r') do |f|      lines = f.readlines    end

we can then split the line into data values that we need for the emoji    lines.each do |l|      arr = l.split(",")      hex = arr[0]      keys = []      for i in 2..arr.length        keys << arr[i]      end

   once we have the values we can create an emoji object for translating      Emoji.new(hex, keys)    end  end now that we have all the emoji objects, we can take in text and convert any of the keys into emojis

 def self.translate(text)

we’ll use another array to split each word by blank spaces    arr = text.split(" ") then for each word we can check all of the emojis and their keys for a match    arr.each_with_index do |w,i|      Emoji.all.each do |e|          e.keys.each do |k|

  if a match is found, we’ll replace the word with the emoji             if w.downcase == k              arr[i] = e.hex            end          end      end    end

we can now return the translated array back as a string     return arr.join(" ")  end  def self.all    return @@all  end end The original project files can be found on github here: https://github.com/Jp1200/kareoji/blob/master/app/models/emoji.rb

[jaq-h]

Dynamic Spotify SDK Controls

For my final project at Flatiron School, I used the spotify apis (auth, web, and SDK) with React.js to create an in browser player. Since the websockets are not publicly available, I designed controls that would change depending on whether playback was occurring in browser or on another device. Lets get into the code shall we...

First we’ll need a React Component Class, and I’ll import Semantic for Icons import React, { Component } from 'react'; import {  Icon } from 'semantic-ui-react' class ControlBar extends Component {

we’ll need to make a consructor to take in props for the playerState

 constructor(props){    super(props);     } now we’ll need a function to determine what buttons will show depending on the state of the player..  setButtons(){ I’ll create an array where I can push the buttons I need into for rendering later     const b = [];

we can check if the playback is local based on whether the playerstate is defined    if(this.props.player)    {

Each dynamic button willl use a ternary operator for the state of the player

I’ll start left to right so here are two different shuffle mode icons 

     this.props.player.shuffle ?        b.push( <Icon onClick={this.props.actions.shuffle} name='random'/>)      : b.push( <Icon onClick={this.props.actions.shuffle} name='arrows alternate horizontal'/>) a static previous button      b.push( <Icon onClick={this.props.actions.prev} name='step backward'/> ) a play or pause button      this.props.player.paused ?        b.push( <Icon onClick={this.props.actions.play} name='play circle outline'/>)      : b.push( <Icon onClick={this.props.actions.pause} name='pause circle outline'/>) a static skip button       b.push( <Icon onClick={this.props.actions.skip} name='step forward'/> )      console.log(this.props.player.repeat_mode);

For the repeat mode, I will use a swtich case since there are 3 possibilities       switch(this.props.player.repeat_mode) {        case 0:            b.push( <Icon id="context" onClick={this.props.actions.loop.bind(this)}  name='long arrow alternate right'/>);            break;        case 1:            b.push( <Icon id="track" onClick={this.props.actions.loop.bind(this)} name='sync alternate'/>);            break;        case 2:            b.push( <Icon id="off" onClick={this.props.actions.loop.bind(this)}  name='redo alternate'/>);          break;          default:          console.log('error');          break;        }    }

Now, we’ll set the static controls for when the playerstate is null meaning we are trying to control music on another device

   else{      b.push( <Icon onClick={this.props.actions.prev} name='step backward'/> )      b.push( <Icon onClick={this.props.actions.play} name='play'/>)      b.push( <Icon onClick={this.props.actions.pause} name='pause'/>)      b.push( <Icon onClick={this.props.actions.skip} name='step forward'/> )    }    return b;  } Now we can render the Buttons   render(){

we’ll call the function to set our buttons based on the playerState    const controlButtons = this.setButtons();    return(

We have to put our array in a div so they can be returned correctly to our player      <div  className="Control-Bar">        {controlButtons}              </div>    );  } }

and don’t forget to export the default Control Bar! export default ControlBar;

The ever changing state of this project can be found on my github here: https://github.com/jaq-h/sesh/blob/present/client/src/components/ControlBar.js

[jaq-h]

While studying computer science at University of Colorado Boulder, my data structures final project was to investigate different priority queue implementations to store the same data and compare their runtime when enqueuing and dequeuing elements. The data in this project was a list of hospital patients with a name, priority, and operation time. The priority of the patient represents the time until the patient goes into labor. The patients were ordered to have lowest priority first, and then ordered by least operation time if the patients had the same priority. The three implementations were a binary heap, linked list, and the c++ standard template library priority queue. 

The binary heap priority queue uses an array to store the data while ordering the data in minimum heap property; every parent node is smaller than its child node. The binary heap insert function uses a swap helper function to keep swapping the inserted value with its greater child until the inserted value satisfies the min heap property. The dequeue function removes the root element because it is always the minimum and replaces it with the last element in the heap to keep the tree complete. The heap is then “heapified” or reordered to ensure the root is still the minimum value and the heap follows the min heap property. 

The linked list priority queue uses a patient node structure that contains the address to the next priority element. The insert function traverses the list linearly until the inserted element is correctly ordered by its priority. The delete minimum function is very simple because the minimum is always stored at the head of the list so the function reassigns the head of the list to the second element and deletes the first element.

The standard template priority queue was implemented by creating a comparator struct and vector of the elements being prioritized. We do not necessarily know how the queue works because its source code is not available, but we can compare its runtime to the other implementations of the priority queue.

To test each implantation, the data was read into a array for quick access. A random section of the data with a specific size (100, 200… 800) was then copied into a new array. The different sized and random arrays were then enqueued and dequeued with the three priority queues. To calculate the runtime for enqueuing and dequeuing, the time in milliseconds was recorded before and after the loop with the function call and then stored in a matrix. The mean and standard deviations were then calculated for each queue and respective functions.

The code along with the data, charts and graphs for the mean enqueue and dequeue (writeup.pdf) can be found here on my github: https://github.com/jaq-h/priorityQueue

[jaq-h]

Tube Runner

For my 4th project at Flatiron School, I learned the basics of three.js to create a game where you control a player object in a tube and avoid collision barriers. The tube is able to curve in any direction and the player object will travel along its path. The player is also able to rotate around the path to avoid colliding with the barriers that are randomly placed every x amount of path distance. The path movement and distance between barriers are calculated by a percentage of the path. The movement is updated with a delta every time the game renders and the delta increases with each render to speed up as the game continues.  The rotation of the player is controlled by the user input of left and right keys for clockwise and counter clockwise. The object collision is based on the rotation of the player and the barriers as well as the position along the path. The evolving state of this game can be found here on my github: https://github.com/jaq-h/tube-runner

[jaq-h]

Coding Animations

While taking a digital art class, we were introduced to a program called Processing which simplifies using Java animation libraries. I had already had a lot of experience with Java and object-oriented programming, so I went all in on creating an immersive animation. I took inspiration from fractal zooms which I had seen on youtube and began creating a basic geometric pattern. The animation is created by creating and resizing shapes in an array. Each shape is generated with a random color and low opacity so that it blends with the surrounding shapes. The sizes are logarithmically increased to make it feel as though you are looking into the pattern as it moves. The program is also set to run in fullscreen for full immersion. I would eventually like to add music to the program, but for now I have just recorded the animation and added music in Adobe Premiere. A sample video can be found here and the project repository can be found here.