Nick Sprint 9

Nick Sprint 9

This week I tried to implement the particle code from last sprint into the engine which Geoff created using three.js. Overall I knew this would be a challenge from the start as we have had many issues figuring out the proper syntax for three.js as all libraries update constantly making it difficult to find any online help. I worked at this issue, however was unsuccessful in completing it. Looking at the particle system below the main goal is to have it functioning in the application for the final presentation.

 Example images of the particle system I attempted to implement into Geoffrey's three.js engine.

The particle tool itself has been completed, the only issue I still face is to implement into Geoffrey’s engine. I felt I was getting closer and closer with a new technique however, I still was not able to get it fully working. It is very frustrating and discouraging to not be able to simply import the particle system into our previous code. With all that being said, I am going to try a new technique I was researching online with other team members and I know we will be fully capable of getting this particle system working. The goal is to enhance the user experience, so I see this particle system as top priority for cosmetics at the moment. We had to rule out the draw tool as it was too out of scope using three.js so moving forward we will have to get the particle system working to give users a better and more visually appealing experience using our application. I look forward to this week and overcoming this current issue.

See you all next week,

-         Nick 

LAITH SPRINT 9

During this sprint, Tristan and I wanted to fix the responsitivity issue that we were having for a while. What happened was that between the range of 600-900 pixels a white border would appear and push the aside menu to the left, creating a form of padding on the right
seen below

. After different attempts, we realized that the main content had a set width, and not set to the full width of the container. The fix was setting the content main to have a width of 100% as you can see by the snapshot below.

Websocket Communication Between Host and Client Application

This week I successfully set up websocket communication between the designer web app (accessible on desktop and mobile applications) and and main application responsible for generating the projection mapped display.

Now that I can transfer text strings between the two applications, the next step is to encode the JavaScript design objects that Nick, Laith and Tristan have been working on and transfer these JSON strings using the same method. The event listener code on the host application will wait for submissions and when a design arrives, parse the JSON data and set a local variable to the new design data. Three designs can be displayed on the projection at one time (one on each pane of our object). When a fourth design is submitted, the oldest design will be replaced.

Now that this major issue has been solved, the rest of the project will be straightforward to implement since it's only a matter of integrating existing, completed features.

Transferring Designs with Socket.io

It's imperative that we figure out how to transfer designs between the client and host applications as soon as possible. This is crucial to the core functionality of our installation.

It would be easy enough to simply use POST requests at a specific port on the server to send information from one application to another. The problem with this is that POST requires the page to be reloaded and our host application needs to update in real time.

From what I understand, using sockets seems to be a good way to transfer data in real time. After doing plenty of research I still haven't been able to find information on how to use sockets to send data to a specific port. I'll need to get some help on this.

Laith Sprint 8

Laith Safa
2017-03-23

During this week, Nick,Tristan and I worked together to complete a particle system using the three.js library. Personally I have spent a fair amount of time alone trying to get this to work, but I had no luck. Thankfully,  with the help of Nick and Tristan, we were able to figure out how to fix our problem and actually get the particle system to work and update every frame. Nick figured out that we needed to link another library in order to fully use the power of three.js After we figured that out, we started from scratch and worked our way up. Below is an example of the particle system that we came up with.

Also, the responsiveness was broken so my task was to figure out what was going on and to fix the issue. The main Issue I was having was that I was padding the body twice and that caused some issues using the different media screens. As of now everything works, however, there is a problem. Between the resolution of 700-800px's there seems to be a white space that I have had no luck in fixing.

responsive layout at a portrait(mobile) and landscape resolution(desktop)

Nick SPRINT 8

Nick Hickey 

2017-03-23

Sprint 8

It was a very productive week. With many things on the list to do the team split up to focus on various tasks. I decided to work on the particle system as it has become a very overdue aspect to the application. As simple as it seems to make a particle system, we found it quiet troubling and came to terms with many programming issues. I went back to the start and began from scratch. With a new idea and system, I was able to complete a particle system which can now be implemented into the previously existing application code. Below is a snippet of the particle system in full effect. The colors are changing and the particles are constantly moving. 

Different Colors

Below is a zoomed out view of the system in 3D space. The particle system will be transferred into Geoffrey's engine. 

The plans for next week are to implement two more tools into the application. The goal is to create a very immersive and fun experience for the users, while remaining personal and still functional. If the team can meet all these crucial points with a mix of tools, then we will be successful and reach our complete goal. See you next week

- Nick 

Web Server Setup

I focused this week on setting up our web server for use with the Kubus installation. I completed the following tasks:

• Set up git for managing the source code of the project
• launch a test Node.js application on the server and use PM2 to control restarting it if the server restarts
• Set the Kubus domain name DNS settings to point to the server
• Begin setting up Express to redirect incoming traffic to the right places on the server.

Express isn't fully yet, but I'll get this setup finished soon so the team can begin testing the application in preparation for the beta presentation.