Category: Uncategorized

---

This week I worked on collision detection in createjs for the nutrition game created with the JavaScript library suite createjs using easeljs and preloadjs. I currently have a game that begins when the user presses the space button, so that the player only starts falling when the user engages with the game. The mock nutrients begin moving and being added over time with a Ticker when the game begins as well.

This week I worked on adding a scoreboard to the screen. I plan on changing the visuals on the scoreboard, but it works for development now. I am having moderate success with the collision detection. So far I am getting collisions acknowledged most of the time and I am able to update the score in the scoreboard. I believe that right now the points are being added too many times per collision, which I will have to remedy… each time I have to interact with a nutrient (here represented by circles) I have to do so in reference to the stage’s children, since these objects are being created dynamically. The best place to check on collision detection with the player then is in the Ticker event handler, so that it is checked endlessly… however this means that collision is getting checked so often that points are adding up for the entire amount of time the  nutrient and player are overlapped. In order to fix this I will likely have to find a different place to test for collision, or I will need to keep track of a boolean value collided and keep that true so long as the last x coordinate of a nutrient is in line with the last x coordinate of the player character. This would likely allow more accurate tallying of points.

I am also seeming to have an issue with the radius of the player character allowing nutrients to collide with it on the rear 1/4th or so of the character with no points getting tallied. I suspect that I will need to adjust the radius being used in the function so that that area is not left out of collision detection.

---

This week I finally got createjs to start cooperating with me. I worked on my script for the I trio all game at finding-understanding.com/nutrition.php . I have managed to add graphics and have integrated preloadjs a library in the createjs suite.

I have a manifest now with all of my current graphics which are being preloaded with a Loader and then placed as children on the stage. I also have mock ups of bad and good nutrients in the form of red and green circles respectively that move towards the player. They are placed on the stage on the far right at random y positions.

The character/player begins the game as soon as the space bar is pressed. When the game starts the player will fall perpetually and must be kept off of the stage bottom through hitting the space bar. If the player hits the bottom I have a method that stops the game, declares game over, announces a point total, and resets the game. I also added an event listener for touchstart so the game can be played on mobile.

Currently I have some bugs to work out concerning zombie circles on game restart. I also need to integrate sprite sheets for animating the game. I need to add collision detection, and a difficulty acceleration. So far I’m feeling much better than last week about my project though.

---

This week I fixed up some design issues on my capstone site, that took an unexpected amount of time. I made my navigation responsive, made some other stylistic changes, and I converted my logo to an inline svg format on the site. When I did this I ran into some cross browser compatibility issues. Chrome and Safari treat svgs much differently than Firefox, where I like to develop most. The inline code svgs do not appear in Chrome or Safari unless you specify the width and height of the svg. I did some reading and many sources stated that Chrome and Safari, when not supplied with a height and width choose a standard size, but this did not prove to be true.

When fixing the issue  I started with an inline width and height as suggested by some. This worked, but for responsive scaling again Firefox was happy to continue using my css, but Chrome and Safari seemed incapable of overriding the inline css… … I ended up setting the width and height in my stylesheet instead and trying that, however still Chrome and Safari refused to scale down the graphic when I altered width or height… Through further debugging I found out that I had to use transforms with scale to make those browsers happy.

When I added a small css animation to the logo, I ran into a similar problem as well. Firefox was happy with keyframes referencing changes in distance from the top, but for Chrome and Safari I discovered I need to instead do transforms with translate. I have managed to get all of these bugs sorted, as far as I can tell. I’m glad I ran into these issues though, because when I begin adding more svgs to the pages canvas free I will hopefully not have to struggle with Chrome and Safari again.

I have also continued studying the create.js documentation and will begin implementing more changes this weekend.

---

This week I began implementing the nutritional game on Finding-Understanding.com . I linked to Create.js through a cdn (content delivery network) . I then began setting up some very simple code on a canvas for Create.js .

So far I am not loving the Create.js and Easel.js documentation and site as much as I had thought. The documentation is not as well written and organized as it had seemed before I started coding. I have however, as stated above, gotten some basic functionality going. I have started by focusing on the main character and the very most basic functionality. Currently I have the main character represented by a blue circle, which will be replaced by this guy:

Also, since I plan to have the game play be linear with with movement dictated by the space bar, I have written a little code to acknowledge when the user presses the space bar (key 32).

I’m going to really need to get cracking on coding up the beginning of this game so I can decide soon if I need to switch to my other library of choice p5js, which is currently being used for the 3d space on the positive affirmations page. I already know that that site has excellent documentation, tutorials, and examples, so that would be a good alternate if Create.js falls through.

I have also begun working on my next draft of my grading rubric, and hope to finish that draft up next week. There’s a lot more work to be done, but I’m hoping to be much more productive this coming week.

---

This summer I have been working on getting my project started. I purchased my domain name through Dreamhost.com . The domain I purchased was Finding-Understanding.com . I then began creating the basic structure of my site. I have created all of the pages that I will need to flesh out throughout the semester. I have also created my navigation, link to a suicide hotline, and footer. I have started styling the basics of my site and started blocking out where certain features will be included.

I have also begun creating the identity for the site. Predominately I plan to keep the pages of the site muted in color (the header, navigation, footer… etc), except for the elements on the page. I have also created the logo for the website in adobe illustrator as a scalable vector graphic and included it on the site. The logo is comprised of two hands holding a peaceful entity. I have used color theory to choose purple and blue colors for the graphic in the logo, though there are no strict rules for color theory as color meaning is open to interpretation and often different in different cultures. Light blue is generally considered a low energy, peaceful, calming, and tranquil color. Blue can also be interpreted as a sad color, so this double meaning is recaptured and directed towards a tranquil interpretation. This color is used to represent the individual seeking help from the website, and the hoped for effect of their visit. The mid tone purple seen below was chosen for the hands to provide a feeling of comfort and sensitivity. Purple is often considered a feminine color and femininity is often considered nurturing. In the graphic the hands are meant to be comforting, sensitive, and nurturing.

Besides site identity, I have also been working on getting started on some of the basics of two of the features on the site. I have started connecting to the USDA Database API. I am utilizing jQuery to call a GET method to request data from the API. I am then processing that data and manipulating the DOM to show the results. I still need to add more options for different nutrients and streamline my method so that I can reuse the code for each different nutrient.

On the Positive Affirmations page I have begun implementing P5JS‘s WEBGL rendering technology in a canvas on the site. I wanted to start playing with the technology early to make sure that it had enough capability for the project. I can already tell that I will need to think creatively in order to get the effect I would like. I have started to paint “textures” onto the 3d shapes, but have found from my research that P5JS is unable to paint a different texture on different sides, so each shape will have to have one affirmation/quotation or I will create a randomly assign textures from an array over time or with interaction.

Movement Needed in September

I need to finish up my integration with the USDA Database API, continue exploring P5JS and writing the code for my Positive Affirmations page, begin creating the Nutritional game, and get cracking on creating all of the visual assets I need for the site.

---

Welcome to my Capstone Blog!

I will be posting updates about my progress and materials about my project here. So far I have purchased my domain for this capstone, Finding Understanding, and continued my research for information on the site. I will begin setting up the basics of the website and git versioning soon.

I look forward to hearing about everyone’s summers on September 1st.