VVVV Session 4 - Study Task (26/02/2018)

Study Task


This study task allowed us to create a slideshow with three slides.

Main VVVV file for this project which contained other patches that were compressed. These patches worked together to create the final task.




Screen One

This patch created the first scene/slide used in the final creation. The I/O boxes connected to the output of the 'HSL' node control the colours used in the gradient by altering the hue, saturation, lightness and alpha of a specific I/O box (output). The 'DynamicTexture' node creates the gradient effect while the 'LinearSpread' ensures that these colours are either going in a vertical or horizontal position. The 'UniformScale' node is used to change the size of the 'Quad' (square). The text's position is also changed using the 'Translate' node while the 'UniformScale' node changes the size of the text.



Screen Two

This patch created the second scene/slide used in the final creation. Using the 'Quad' node to create a square in the renderer and the 'UniformScale' node to change the size of the square, I was able to use the 'FileTexture' node. This node allowed me to select a image from the VVVV image library and input it into that space.

The 'InputMorph' node is connected to the alpha connector on the 'HSL' node which is connected to the colour connector on the 'Text' node. When using the 'Damper' node along with the 'InputMorph' node, this gives the text the animated fade effect that we see in the renderer. The main purpose of using a 'Damper' node is to delay the output new value by a force applied to the input value of the damper, in this case 4.0000 is the input value, which creates the text fade in effect.



 Screen Three

This patch created the third scene/slide used in the final creation. The 'FileStream' node plays an important part in this patch as the first input connector is used as a play button while the second connector is used as a loop button. The fourth input connector is the Loop End Time and the fourth bottom connector is the Duration; which are both connected to the input and output of the 'Frame Delay' node. 

The 'VideoTexture' node, which renders video onto a texture, allowed me to use an already pre-existing video in my vvvv video library. This node is connected to the third connector (video) on the 'FileStream' node and is also connected to the 'Quad' node connector via the Average Frame Rate connector.

The 'Switch' nodes are connected to the 'Text' node and a blinker is set so that the text flutters/blinks while 'UniformScale' changes the size of the text. 



Ctrl

This patch controls screens 1-3. Each toggle button displays a different screen when clicked. By right clicking on the first toggle button connected to the 'MultiFlipFlop' node, screen one would be displayed on the renderer and so on. The 'Damper' node aids the transition between each screen.



Results from renderer



Comments

Post a Comment

Popular posts from this blog

Logo Design

Image
I specifically wanted my logo to be an SG as these are my initials. Therefore I attempted to a few different designs until I found the one that I liked. For this post, I have put my logos on blackgrounds so that they are visible. This was my original logo however I wanted to change this slightly as I feel as though it didn't fit the feel of my website and was too simple. When creating this logo, I took into consideration my background and the type of style I wanted to go for. I was inspired by my favourite game FEZ as I really like what they did with the title of the game. If you look at their logo closely you can see the logo from both angles and really liked this effect. I decided to put the S and the G at different angles as it resembles a butterfly. When you see my logo from a different angle it looks as though a butterfly is flapping it's wings which I believe fits well with my background. I played around with the design of my previous...
Read more

Bootstrap Template

Image
I decided to use a bootstrap template for my website as I thought this may have made elements faster to implement as the template would already be responsive. I researched the benefits of using bootstrap and according to Christopher Gimmer in his 2014 blog 'Top 5 Reasons to use Bootstrap', he stated in his conclusion that, "...there are several benefits to using Bootstrap. The framework allows for rapid, responsive development that is consistent and well supported by the development and design community." His five reasons were, "Speed of Development, Responsiveness, Consistency, Customizable, Support" which I understand and agree with and therefore believe it is beneficial to use bootstrap in this project. This specific bootstrap template was similar to my mockup design and therefore by editing the code this template could look similar to what I had designed and invisioned. Bibliography BOOTSTRAP THEMES. (2018). Boomerang – Bootstrap 4 Business ...
Read more