Website Portfolio Update: Mobile Version

Mobile version of the web folio is also available (works best on smartphones with the width size of 414px; ex: iPhone 6/7/8+, etc).

According to StatCounter Global Stats, the market share for people using mobile phones is larger compared to those using desktops and tablets. The data is from a worldwide region, with 51.74% mobile users, 45.61% desktop users and 2.65% tablet users. This shows that having a mobile version for a website would be the most beneficial thing to do since people would most presumably open websites via their smartphones.

However, coding websites from scratch can be difficult. To create both desktop and mobile version needs a lot of resizing and checking on different devices just to see how it looks. I am deeply regretful to say that kweestin.com is not suitable for tablet devices such as the iPad, etc. This is due to the lack of time I have to balance all my school work during these several weeks. Please keep in mind that different devices may result in awkward sizings and spaces. I'm using my Macbook Air 13inches laptop, and on my resolution (1440px x 900px), the website is looking fine.

The overall look and vibe of the website on a mobile version is pretty much the same. I just had to do a lot of sizing down for the mobile version.

Comments

TouchDesigner Experiment: Audio Reactive Particle Cloud

My second experiment with TouchDesigner is creating this audio-reactive particle visual by following Bileam Tschepe 's tutorial on Youtube. Again, I just followed his tutorial step by step. This tutorial is a little different because it uses both audio and visuals. The visual follows the music in real-time. Other than audio, we are also introduced with the element 'Math' to add the channels of the audio together. This is the end product. Music is FriendsV2 by Muskatt.

TouchDesigner Experiment: Inserting OSC data with OSCIn

From one of my last experiment , I tried to change the data input. Instead of using audio, I replaced it with OSC data from my Muse headset. To connect your OSC device to TouchDesigner, make sure that the IP address and port number is the same so the data transfer can be accurate. In this case, I use a third-party app called Mind Monitor (available on iOS devices) to connect my Muse headset to the TouchDesigner software. Below are screenshots and videos from my experiment. You can see that the brainwave data is already recorded in real-time in the software. Then I used the alpha, beta, and theta brainwave to change the movement of the visuals (the chosen brainwave data I used are just placeholders for now to see the movement). Then the data is connected with 'noise', which is like the fluid/abstract visuals you see on the background. I also set the colors to be moving/changing over time.

Designing the final project's visual in TouchDesigner

When creating the visuals for my final project, I was inspired by a 'Spectrum to TOPs' tutorial created by Bileam Tschepe on Youtube (I did a post about it here ). The tutorial teaches the audiences explicitly to convert an audio spectrum directly to TOPs using the CHOP to TOP and compositing. Since Bileam Tschepe used audio as the source information for the visuals, I changed the former portion of the tutorial from audio data into OSC data (blog post here ). Since OSC and Audio data are in the CHOP section, and to create visuals are in the TOP section, a 'CHOP to TOP' node is required. Initially, the node is represented by one pixel high and in black and white; to adjust it, simply change the data format if necessary (for the color), and adding a composite node changes the pixel size. A Noise node is added because it is responsible for the output resolution of the project. The Noise node is also where the author attaches the OSC data in the transform section. This all...

˗ˏˋ ChristineDinata ˎˊ˗

Search This Blog