Kanwarpreet Sethi
Link : http://kanwarsethifirstwebsite.azurewebsites.net/portfolio/
1 – GIMP – Creating a flyer
In this tutorial, we learned how to create a professional flyer with GIMP, a free, open-source graphics editor. This was a beginner level tutorial.
Tutorial: (Davies Media Design, 2018)
TUTORIAL OUTPUT:
We learned how to erase the background, how to use vignette and blend tools, adding background effects like paint splatter and laser lights to make a composition. We also made effects to the actual image we were using to make it blend with the rest of the flyer composition. The original flyer created in the tutorial can be viewed at the tutorial link given above.
MY OUTPUT:
I learned about many tools that are available in GIMP such as brush tools, gradient tool, move tool, etc. I learned the basics of layers and how most image editing is done with help of layers. This makes it really easy to do changes with your composition because if we are putting different effects into different layers, we can just selectively edit the layer we want and make changes.
I followed the tutorial to create a professional flyer of my own. I made various changes such as changing the subject image (Pixabay.com, 2018) and flyer theme. I am confident now in my ability to create an image or a flyer using GIMP.
Anyone possessing such skills would have the ability to create flyers and posters from the scratch which can be further be used to advertise or display almost anything. One could also use GIMP skills to enhance photos in post-processing, meaning editing already clicked pictures. Photo editing is a huge skill set to have. Be it creating images from scratch or enhancing clicked photos, photo editing is needed in a lot of scenarios to enhance the visual appearance of images.
2 – Learn basics of JavaScript
This tutorial involved learning the basics of JavaScript – which is the programming language of websites. It is considered one of the three core technologies of the World Wide Web (along with HTML and CSS). JavaScript programming knowledge is must-know for building websites.
Tutorial: (Glitch.com, 2018)
TUTORIAL OUTPUT:
I completed the 18-part tutorial successfully. The tutorial explained how to write basic JavaScript. It also explained the concepts of variables, functions, arguments(parameters) and data types (numbers, strings, arrays, objects). We also executed different statements including printing to console, rounding numbers and converting numbers to strings. Also, we learned about types of statements including the IF statement and FOR loops.
MY OUTPUT:
I used these skills to create a small basic website with JavaScript. This website generated text and a button. I use a variable to keep track of how many times a button has been pressed and display on the screen. So each time the button is pressed, the counter increments. The code for this website uses the concept of variables, data type (string in this case) and functions.
Along with JavaScript, I used CSS as well to style the elements on my page.
This is how my website looked like in mobile portrait mode:
This is how my website’s JavaScript code looks like:
Anyone possessing JavaScript skills can create complete websites with them. Naturally, one would also need CSS skills but once someone learns JavaScript, HTML feels really basic. All content and functionality on a website can be generated with JavaScript only. With better understanding of JavaScript, one can also create complete web games on their own without learning anything else.
3 – Using the geolocation service on a device
This tutorial explained how we can get a device’s location by attempting to access its geolocation API with JavaScript. It is possible since most devices and smartphones these days contain GPS technology and geolocation support in them.
Tutorial: (Suda, 2018)
TUTORIAL OUTPUT:
This tutorial just contained theoretical information explaining how we can access the geolocation API. I understood the steps and then did a little bit of my own research. The tutorial also explains the Haversine formula and its implementation to find the distance between two points on earth when their longitude and latitudes are given (distance as the crow flies). There was no exercise in this tutorial but I implemented geolocation with the help of this tutorial (and a couple of other sources) in my website.
MY OUTPUT:
I made a new website similar to the one I made for tutorial 2. I added a button which when clicked, tries to access the geolocation API of your device. In my testing of this in the browser, a notification pops up in the browser asking for permission to access location. If access is granted, the website opens up a google map in which my location is marked. Along with this, I also calculate the distance between your location and Sydney’s Opera House and display it on the screen. This is all dynamically generated with JavaScript. For calculating distance, I’ve used Haversine Formula.
For using Google Maps in my website, I went to the Google Cloud Platform and registered for access to the Google Maps API.
Using geolocation service is a must-know for people building websites or developing apps. You can give personalized content to a user based on their location. Anytime you want to show a user’s distance to some location, such as map applications do, we need access to a device’s gelocation. Companies like Uber rely on using these services so they can provide you their services.
4 – Using InstaVR to generate Virtual Reality applications
This tutorial explained how we can use 360° images to create Virtual Reality experiences and also export these VR experiences as an application(Android, iOS) and websites. InstaVR software is used to achieve this.
Tutorial: (InstaVR, 2018)
TUTORIAL OUTPUT:
The tutorial for InstaVR taught us how to use their service. It gave us knowledge of how to select 360° images, how to insert links from one Virtual Reality image to another and how to export these applications. The tutorial when finished resulted in two Virtual Reality rooms linked with each other.
MY OUTPUT:
I used InstaVR to create my own Virtual Reality application. I also tested out my application on an Android device after exporting it in .apk format.
My application contains two locations/images [(Samsung, 2018), (James, 2018)] and a third experience which is actually a video (3D-VR-360 VIDEOS, 2018). The tutorial didn’t give any example of a video but I looked around and found a 360° video and used InstaVR to create it into a Virtual Reality video experience. So, there are two static locations and one video in my application. You can move around your device and look around in the moving video which is really fascinating (requires gyroscope).
In the ballet room, I added a background music tune to match the theme of the room. I also added screenshots of the destination in the links which are linking each location.
Note: The following are screenshots from the app running which obviously don’t capture the VR aspect of it but I have shown the links.
With technologies such as Virtual Reality and Augmented Reality picking up steam in the last few years, skills in creating Virtual Reality experiences is important for creative professionals. There is a lot of experiences which can be provided with virtual reality, be it images or video. Examples include inspecting a property without leaving your house, watching concerts or events in 360° at home, etc. To implement these experiences, especially in mobile devices, skills with Virtual Reality and 360° content is needed.
REFERENCES:
Tutorial 1:
- Davies Media Design. (2018). GIMP Tutorial: How to Create a Professional Flyer | Davies Media Design. [online] Available at: https://www.daviesmediadesign.com/project/gimp-tutorial-create-professional-flyer/ [Accessed 23 Sep. 2018].
- Pixabay.com. (2018). Free Image on Pixabay – Man, Muscular, Robot, Cyborg. [online] Available at: https://pixabay.com/en/man-muscular-robot-cyborg-android-320276/ [Accessed 23 Sep. 2018].
Tutorial 2:
- Glitch.com. (2018). Glitch JavaScript. [online] Available at: https://glitch.com/~javascripting [Accessed 23 Sep. 2018].
Tutorial 3:
- Suda, B. (2018). Direction, Distance and Destinations. [online] 24ways.org. Available at: https://24ways.org/2012/direction-distance-and-destinations/ [Accessed 23 Sep. 2018].
Tutorial 4:
- InstaVR. (2018). InstaVR – Grow Your Business Using Virtual Reality. [online] Available at: http://www.instavr.co/ [Accessed 23 Sep. 2018].
- Samsung. (2018). [online] Available at: https://images.samsung.com/is/image/samsung/hk-feature-gear-360-61012200?$Download-Source$ [Accessed 23 Sep. 2018].
- James, P. (2018). 10 Samsung Gear VR Panoramas from Immersive Media’s 360 Video Player ‘im360VR’. [online] Road to VR. Available at: https://www.roadtovr.com/10-samsung-gear-vr-panoramas-im360vr/ [Accessed 23 Sep. 2018].
- 3D-VR-360 VIDEOS. (2018). Best 360 VR VIDEO 4K. [Online Video]. 22 December 2017. Available from: https://www.youtube.com/watch?v=QKm-SOOMC4c&t=42sBest+360+VR+VIDEO+4K. [Accessed: 23 September 2018].