Here is an initial iteration for my aniRGB project. Although this proof of concept may not appear impressive initially, an undisclosed aspect of the project will be revealed at the end of class, adding artistic value and greatly enhancing its overall impression.

aniRGB v0.8

A webapp to turn a series of data describing player movement in a game map into one single image with different colors.

Description

This webapp turn a series of data points stored in a csv file describing player movement in a game map into one single image with different colors in the Carnovsky RGB style.

Input

• Number of total images drawn numImg, numImg is smaller than 255.
• Starting and ending frame number F0 and Ff
  • Chose numImg number of frame numbers evenly between F0 and Ff to form an array of frame numbers FrameNums
• The starting point of the map mapX0 and mapY0, and ending point mapXf and mapYf
• A .csv file for data
  • Header would be Frame Number, Time, Location X, Location Y, Rotation, Input X, Input Y
  • Data would be something like 3239, 15:9:34:20, 2.803635, -23.193243, -70.0, 1.0, 0.0
• A .svg file for background image, this will be the game’s map.

Rules

• Location X and Location Y needs to be scaled to fit the size of the background, using mapX and Y values
• On load, automatically generate an image with the following default values:
  • numImg = 5
  • F0 = 0
  • Ff = 5
  • mapX0 = -5
  • mapY0 = -5
  • mapXf = 5
  • mapYf = 5
  • csv file at example/data.csv
  • svg file at example/background.svg

Output

Draw the image in a html canvas element, draw the .svg file as the static background, and draw the player location as an arrow symbol. Gradually change the hue of the arrow from HSL H=0 to H=255, fitting to the starting and ending frame number. New arrows should mix with any existing arrows’ color instead of overwriting the color.