Blog post #9 - Evaluation

After finishing my project, I do feel like I put all of my effort into the final product. As stated in previous posts, my final outcome was not my initial plan at all. However, after the sessions and after learning about the software, I am confident that what I have produced is a good representation of my understanding and ability of the assignment and the software used.

Blog Post #8 - Making my Clock - Part 3

To get the temperature as live data I needed to choose a website. To keep it simple I went onto BBC weather and their 3 day forecast. I chose the location of London because it can give an average of such a big space and the University is close to the city.

Here is the segment I created for the live temperature:

The output at the bottom is the temperature that I would input into the top of my temperature segment. However, to keep my patches neat I decided to make this a sub-patch and link them in that way.

Here is the temperature with the sub-patch linked:

Even this seemed untidy to me so I eventually decided to put all of the temperature (above) into a sub-patch. So here is the final main patch:

I'm very happy with how this looks in terms of tidiness. And everything still works.

Here is the renderer now that I have finished:

So my project includes two sets of live data: the time from the PC directly and the temperature.

Blog Post #7 - Making my Clock - Part 2

After making my clock is Photoshop I needed to get it to work with the hands in VVVV. I had done this before in a follow up task so it was fairly simple.

Here is how the clock was placed into the patch, and with the time input into the hands:

Here is the date:

And here is the temperature:

All together these go into a group which then goes into the renderer:

All I need to do is use the temperature live data from a website, like BBC Weather. However, I still need to found out fully how to do this.

Blog Post #6 - Making my Clock - Part 1

So I started by looking at the patches that we had done in lesson; both the digital and analog clock faces. One of my favourite things to do is use Photoshop so I thought I'd design an analogue clock face in that and then apply the same skills as the follow up task to make it work with the real time data taken from the computer.

This is my design. I was very happy with it. I used the size 1080x1920 which is the size of the Framed 2.0 screen. I love grey and bright green together as I feel the contrast makes the numbers and spots stand out, especially using the outer glow effect.

I then needed to add the parts for date and temperature.

I wanted to have an icon for the temperature as a visual representation so I made a second box for the temperature section.

I then need hands of the clock.

I was very happy with how the clock looked. I just needed to input this into VVVV (next blog post).

Blog Post #5 - My Project Plan and Research

For my initial project plan that I proposed in an earlier blog post, I think I was very ambitious to create everything I would need to for it to work based on how much time we have for the project. Therefore, I have decided to make a clock instead. However, I am going to combine what we did in lesson with the clock with what the follow up task entailed.

I am going to make a clock face that also shows the temperature and date.

I did some research prior to starting the work. I looked on the Framed 2.0 website, and found out some information about the product. For example, the resolution is 1080x1920. I thought this was important as the brief states that the project should be made for use for Framed 2.0 users.

Blog Post #4 - Clock

In the session today we made a digital clock using a slow moving image as the background.

Here are three screenshots from the patches. The send and receive nodes were only used because we were having trouble with the sub-patches.

These two images show 4 sets from the patch. One of the sets goes into another set, which along with the remaining two, are inputted into a group and then the renderer.

Here is the clock that I made:

The temperature part basically changes the icon shown depending on the temperature. So for example, here it's a sun because it's over 10 degrees C (a rule I made).

Follow up Task:

For the task this week we had to make an analogue clock on VVVV. The way in which we achieved this is by following a tutorial from the VVVV website. I found this quite straight forward and easy to follow.

After completing the tutorial, my patch looked like this:

At the beginning I was a little confused but as the tutorial went on, I was beginning to understand it all much more clearly.

Here is the clock on the renderer:

I struggled on time to do the optional texture tutorials to ad to the clock so instead of doing nothing I added an outer and inner layer and changed the numbers to roman numerals.

Blog Post #3 - Segments

I started by using different texture filters to create different aesthetics for the image.

Here is the original patch with the entire workings:

This is the main patch.

This is the sub-patch which is connected to the main patch.

I then experimented:

This is using dots instead of the Echo which I originally used.

This uses charcoal node instead of the Echo.

Follow Up Task:

For the task this week, we had to follow one of the tutorials from the official VVVV website. I managed to complete this with little difficulty. Here is the patch:

However, we have to use sub-patches rather than having all of the workings in one patch. Here is a screenshot of all three patches that I created:

The first patch is the main patch. The second is a sub-patch containing the information about the shape, and the third is a sub-patch containing all information about the movement of the shapes.

Blog Post #2 - Spreads

In the lesson we went over spreads and how they can be used in different ways. Here are some examples:

We started with basics such as making menus and creating a sentence with the slices from the spreads.

We then progressed onto creating visuals from spreads.

Then we learnt to use Linear Spreads to create a row of squares easily and using colour.

We then did the same with Circular Spreads.

The follow up tasks were quite difficult for this task. They were more complicated, using translations more in combination with Random nodes.

This patch shows a Linear Spread with the ability to make a random square get separated from the rest of them. This was hard to achieve to begin with as it was complicated with a lot of testing needed.

The final task for the follow-up was very hard for me to do.

The first part was simple as it was simply using SetSlice to grab the data from one slice. 

The second part took me a while to complete. It was using the same ideas as switches from what we had learnt before and applying them with what we learnt this week. I eventually got the a completed patch where the press of a button would increase the size of the circle.

Blog Post #1 - Using Counter, Switch and Tranform

Using the counter node, switch node and transform node, it was quite simple managing to create a patch where a quad is moved along both the X and Y Axes.

On this image of the patch, you can see that there are two sides to the transformation of the quad. The left side is for the X-Axis and the right is for the Y-Axis. 

I now need to make a patch that every 0.6 seconds, words on screen change between "This", "is" and "vvvv" in that order. 

I struggled for a while with this using the LFO and Counter nodes but eventually managed to get my desired outcome.

The problem I had was the I used the LFO's main output as the input for the counter's 'up', but I needed to use the bang change for the output instead. This is for the text, now I need to create a button that changes the colour of the text.

This is the final patch where the text changes every 0.6 seconds and there is a button to switch the colour from red for yellow. This image here shows the renderer with red text.

For my project and am considering making a live update for football scores. The external data would be refreshed regularly to update any changes to the scores. This is my initial idea and it may change from now to my final product but I am hopeful that I would be able to pull this off.

For the project, I would like to use this sort of patch. For the team that scores, their two colours would flash on screen with the name of the goal scorer flashing up on screen too (similar to what I have done here for my follow up work. After a certain amount of time, the screen would go back to a list of the live scores.

(For example, if Alexis Sanchez were to score for Arsenal FC - 

The screen starts with all live scores listed - Alexis Sanchez scores - The screen flashes red and white with text changing between 'Alexis' and 'Sanchez' - after a number of seconds the screen returns to the live scores now updated with Sanchez's goal)