Concept:
Initially I had some difficulty in choosing the data because I wasn’t sure what kind of data I should look for. Eventually, for my dataset, I chose a csv file that contained data regarding stars. The information contained in the csv are: temperature, luminosity, radius, absolute magnitude, star type, star color, and the spectral class. Of these categories, I used the radius, star type, and star color. Even after I chose my dataset, I wasn’t sure how to exactly visualize it since there wasn’t a category that specifically translated into x and y axis positions. So in the end I just ended up arranging the stars in order they had from the csv but separated by their type.
Coding:
My project consists of 6 different windows that can be navigated by the buttons on the top where each button switches the canvas to show the corresponding star type. The stars are aligned in the center and are arranged in order of the csv data and dare drawn by the color according to the data stored in the csv. Determining the radius of the stars was a bit tricky because the discrepancy between the smallest and the largest radius was too huge so I had to scale the radius for bigger and smaller stars.
switch(int(this.starType)){
case 0:
this.radius *= 100;
break;
case 1:
this.radius *= 50;
break;
case 2:
this.radius *= 1000;
break;
case 3:
this.radius *= 20;
break;
case 4:
this.radius *= 1;
break;
case 5:
this.radius /= 10;
break;
}
So this is how I scaled the star sizes. For the bigger stars, since the radius is greater than the distance between the stars, the stars overlap and create a shape which is what I somewhat expected/aimed to achieve to create some sort of art. For the switching menus, I just created a separate drawing function that ignored all the stars that are not the current target to be drawn on the canvas.
Challenge:
My initial challenge for this assignment was deciding what kind of data to be used and how to visualize the chosen data. I couldn’t find an appropriate data and be creative with the data I have chosen so I basically had to compromise with what I found. Once I was working with the data set for my current final project, a challenge I ran into was that the data for each stars weren’t arranged by their types. So for example, after 10 type 0 stars, there would be 10 type 1 stars and later on after cycling through all the types there would be 10 type 0 stars again and so on. This was a problem for me since I wanted to arrange the stars based on the star types and align them in order. So I came up with a mechanism where I literally stored the x coordinates for all the stars in a 2d array where the columns were the star types and the rows are the arrays for actual x coordinates. And then in the instantiation of the star instances, for each star that is being instantiated, the counter for that star’s type will be increased and therefore the star’s x coordinate will be directed to the according x coordinate being stored in the 2d array. I know I could’ve took a different approach by sorting the array in a certain format, but I feel particularly proud with my problem solving skills even though it may not be the most efficient method.
let xCoArr = []
let xCoCounterArr = [0, 0, 0, 0, 0, 0];
...
for(let i = 0; i < 6; i++){
let xCo = 10; //the first x coordinate
for(let j = 0; j < 40; j++){
xCoRow.push(xCo); //Stores the x coordinate positions in the array
xCo += 17; //the distance between the stars
}
xCoArr.push(xCoRow); //pushes each x coordinate array per star type
}
...
this.xCo = xCoArr[this.starType][xCoCounterArr[this.starType]];
xCoCounterArr[this.starType]++;
Reflection:
This wasn’t my particular favorite nor best assignment because I was really not sure what exactly to do till the last minute, but it still was a good experience in dealing with csv and using it to visualize through p5js. I think my best takeaway from this assignment is the problem solving experience with the arranging of the stars.