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)

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.

Nick Sprint 6

Nick Sprint 6 Blog

This week the team made great progress. All in all we worked hard to achieve the goals we set out for ourselves.

I focused on the projection mapping this week as this will be essential for the Beta presentation, but more importantly just the project as a whole. Using a javaScript library I was able to skew three webGL canvases. This mimics the effect that our final production will appear like as we have a three display box.

The first image shows the mock display and production created in Maya. This model was to be used in the javaScript application to skew the webGL canvases to that shape. 

After skewing the canvases the final product was amazing and exactly what I have been envisioning this project to look and feel like. Now having the ability to projection map our object puts the team in exactly the right path to achieve our goals.  

As you can see below setting each video to the Maptastic JavaScript library then allowed me to skew the objects or webGL canvases in the correct way.

This sprint was awesome for not only me but the team, and we are now in a great position to truly display a functional and eye pleasing demonstration next week.

- Nick

Laith Safa Sprint 6

Sprint 6, was not hard regarding difficulty but the difficulty more so came from the time crunch. excuse or not. During this sprint I worked on getting the particle system geoff started, completed. I jumped in to this fairly later, and due to my current lack of knowledge in javaScript, I hit a couple of walls. I fixed a few only to come across an error that I tried multiple times to fix but everytime I fixed something about it, it broke something else. For this sprint I am submitting what I have including the error, and Will be building up for the next sprint, and have this completed.

Server Setup and Progress on Particle System

Server Setup

This week I made considerable progress in setting up our Ubuntu web server. I created a single, dedicated instance using DigitalOcean and went through the basic server setup process. To accommodate our application, I installed Node.js and wrote a simple "hello world" application to prove it works.

Particle System Development

Another task this week was to prepare the basic data structure of two of the creation tools Kubus will offer. I focused on the particle system while Laith spent time on the animated typography tool.

Knowing there wasn't too much time available this week, the task I worked on was only to create the basic Three.js data required to create a particle system. Development on the effect will continue later. As it stands right now though, my particle system is well integrated into the Kubus application and can be added and removed from the Three.js scene just like the previous test objects I had been using.

Next, I'll be incorporating Laith's animated typography tool into the Kubus application and therefore the main project snapshot.

Laith sprint 5

The task for this sprint was to make a text object that will be used for the text tool further down development.  Tristan and I worked on this hand in hand, and we found out that drawing text is apparently harder than it sounds. Since we are using three.js as our base for our engine, it meant that the text has to be made using three,js objects. The text just wouldn't draw and we ran into multiple errors using textGeometry () where it wont even recognize it. It might have had to do with the way the engine was set up, who knows. We tried different methods and most of them were busts, we ended up creating a basic cube that has a simple html text input.

Nick Sprint 5

Nick Hickey BLOG 5

This week was a production oriented week. We were still discussing the final details for the productions to begin. 

As a team we decided the angles and the size of each of the three display faces. The ply wood and supplies were all purchased. The final production will be complete by this coming Sunday. My goal is to attach the final projection material to the object and be able to start projection mapping for next weeks sprint. I was able to create an object using researched methods, and A|B'ing similar objects found online. 

Using FlexiWhite projection material the object will be visible in dim light and allow the object to be presented during day time and still able to see by the users. As this object is planned to be placed in coffee shops and other stores having the ability to project during the day is key.  

Also using higher quality material will allow for a seamless display. Quality and mobility has always been a key issue for this project. I am really looking forward to have the ability to start projection mapping this object. The plan is to use OpenFrameworks functions and have a basic application projecting on to the constructed object by next Friday. The team has made great progress this week!

- Nick