LAITH SPRINT 10

During this week, the team was successful onto making the transition to using P5.JS instead of three.js. Nick,Tristan and I worked on the different tools that the users will be able to use. Personally, My task was the particle tool. Thankfully, unlike three.js, P5.js was a very simple and easy to use library for java script. My main focus was getting a basic particle system, that could produce a pleasing aesthetic and be easily modified by the user. As of now, the particle is a simple emitter that emits particles at random x and y values with various weights of stroke. Furthermore, the user will also be able change the color of the particle using an RGB slider, and change the over all size of the particle's. Furthermore, the team thought it would be good to add a 10 second timer in order to increase the experience, immersion and creativity of the user. Below is a video of the particle system.

Nick - SPRINT 10

Nick Hickey 

Sprint 10

          This week went great for the whole team. We decided to change the directions of the application and use P5js instead of three.js. This allowed us to create the necessary tools more easily, and visually appealing for the user. Just in this past week we have already a great base for 3 tools. The users will have a text tool to create whatever text they please, a particle tool for adding particles, and a shape tool where they can edit the vertex and other aspect of polygons. Personally, I worked on the shape and text tool. The text tool was created to allow users to type in text, scale or downscale, move, and clear if they would like to restart. Additionally, the shape tool has some basic sliders to allow the users to change the vertex amount and the size of the shape. The goal with this is to minimize the users ability to select from a wide range of shapes, and let them create the shape themselves. We want the experience to touch on the users creative side rather than a simple selection. Additionally we added another feature where only one tool is available at a time, only once, and for 10 seconds. The user starts with the shapes tool, then after 10 seconds they are presented with the text tool, and finally after that 10 seconds the particle tool is unlocked. We truly felt the rush of the game forces the user to think more creatively through being pressed for time. Next, I am going to change the aspect ratios of the game to fit mobile. In addition, the new P5.js code needs to be enhanced with better visuals. The game as of now has no external fonts, or images to enhance the appearance of it for the user. By changing to P5.js the team has been able to complete all the initial goals, leaving only the transfer of data to the physical object left. 

I have provided a video demonstration of the current application. The particle tool was not included in this demonstration.

This has been an overall amazing experience with the team and class, and plenty has been learned in the process. 

- Nick Hickey

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)