kaijouhsu

[kaijouhsu]

Final Outcome Project 7: Designing Happy Accidents

People can use this little kit to scan and get the lucky item of the day!

With 3d models created in Blender, cloud effect created in Canva, sound effect from game Zelda, and more sparkling effect in Artivive!

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

The black background is because I make it into transparent background, so that I can put it in Artivive. I also add the sound effect into blender afterward, because I try to put it in Artivive directly but it doesn't match with the animation.

Artist (2021) ‘🎵 How to Import Audio in Blender’, YouTube video, 10 January. Available at: https://www.youtube.com/watch?v=SL2KrUj3byA (Accessed: 3 January 2025).

Blender Made Easy (2024) ‘How to Render Your Scene with Audio - Blender 2.9 Tutorial’, YouTube video, 10 February. Available at: https://www.youtube.com/watch?v=Lii0fDHM7Ak (Accessed: 3 January 2025).

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

When scan to the square (the outlet), the surprise jumps out! with audio effect.

Here is the one I tried to make, however I feel like making items into 3d models. I started to search how to make easy 3d model in Blender, also I used it before to create the little 3d printing chair. Second I found tutorial about using Blender to make animation. I make the gift box in Blender myself, however, the scarf I wish to be the present is too hard for me to build, so I download it from Sketchfab.

And since the box need to be open, I have to make sure the lid and the bottom is seperate objects.

With this tutorial, it teaches me how to insert keyframe to make animation in Blender.

阿丹與他的 3D 藝術人生 (2022) ‘從零開始用 Blender 製作療癒系 3D 咕咕鐘動畫！#下集 #新手友好’, YouTube video, 1 December. Available at: https://www.youtube.com/watch?v=VN4gUxDWp08 (Accessed: 3 January 2025).

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

I tried to edit the clip in Canva website, some of the elements edited in Photoshop and put them together at the end. However, the effect I use in Canva won't match on different pieces of elements (the gift box on the back and another trimed gift box in the front can't be aline).

Also if I have to remove the green background in Canva, the kit in Canva and Artivive themself aren't so good. I tried AE at the end, it look better without making holes in the giftbox vedio.

This is the outcome I want to see when Artivive scans the correct trigger image. In order to make the video more 3 dimension, I export 3 layers: 1. gift box 2. clouds and sparkle 3. socks. First of all, I put every elements together in a clip so that the timing will match each other, then duplicate the clips and remove the element that don't need. Also I added the sound track from Zelda Twilight Princess - Treasure Chest.

阿丹與他的 3D 藝術人生 (2022) ‘AE小技巧 - 輸出透明影片’, YouTube video, 9 November. Available at: https://www.youtube.com/watch?v=CUlM3ZXR5ws (Accessed: 3 January 2025).

Zelda Artistry (2022) ‘Zelda Twilight Princess - Treasure Chest’, YouTube video, 15 October. Available at: https://www.youtube.com/watch?v=jIfEgY_Qx3I (Accessed: 3 January 2025).

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

I made the gloves into another layer and put it in front of the gift box. Also match the timing when the gloves pop up and the box open. (Using Artivive)

[kaijouhsu]

Final Progress Project 3: Making it Real

Here is the setting of our little gallery, I was going to just put the projector on a higher place(like put some books under it to make it gets the angle i want.) However, Mafalda bought the stick to hold the projector so that it becomes more professional! We screwed it on the top of the hollow wooden box and started our testing.

We tried to move to another room which is darker to see if it looks better.

There is a problem coming, in the perform mode it shouldn't show the orange crossline(as in video). The orange line is for editing the outline points of the chair, however I couldn't get rid of it. It might be the software bug, I found someone having the same problem but without solution.

So after hours of searching how to remove the orange line, I think of recording the video out to MP4 format and project it. And it's the final solution for me!

[kaijouhsu]

Final Outcome Project 3: Making it Real

This project explores the boundary between the real and virtual worlds. The plain black chair stands for the real world, and is transformed with virtual projections, adding vibrant patterns. It’s like showing how the virtual world can enrich and bring more color to our physical reality.

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

This one is quite good, the box turns smaller when the heart pops out!

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

Because it can only put one vedio in a post, I have to post the vedio seperately. This one is another attempt. I generated a few vedio of gift opening in Vidu Studio, and I found out if I seperate the gift box and the gift itself, I can put them in different layers in Artivive and make it more 3 dimension.

Here is the trigger image, can download Artivive and scan it to see the outcome!

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

I began using Artivive again since I've used it last time. I took a trigger image in LRC and made the gift vedio from Vidu Studio. To remove the background I tried to use Photoshop and Canva, they didn't go very well. At the end I do it in Artivive, but still can see there are some broken part in the gift box.

[kaijouhsu]

Selected Assignment 2-Designing Happy Accidents

I was going to create the AR using unity, because in Artivive, the trigger image will be a specific image instead of a random square that I wish to be. Therefore I follow the tutorial to install Unity in my laptop and add the trigger images (different squares) with the coding it offer. However it said it required Mac to progress the testing on iphone, and I have only windows laptop. I tried the could building which might do without using Mac, but there still got issue with it and couldn't go further more. The important thing is the plugin .NET for Unity should download x86 instead of x64, which I finally deal with the errors coming out.

I will try to use other AR software such as 8th Wall ARWeb which my classmate has showcased in the previous lecture.

Here is my first attempt, tapping on the screen to grow out the flower! The flower was make in blender by watching tutorial online. However, my wish is to catch a trigger image (a square) in real world and it will open like a gift with a lucky item of your day coming out. Or even just tapping on the screen but I want to have random outcome (gifts). It seems like not going to work on 8thwall.app unless I bought their Pro plan.

AR Development Academy (2023) ‘Project-Based Augmented Reality Course with Unity Engine and AR Foundation’, YouTube video, 17 March. Available at: https://www.youtube.com/watch?v=FJAO6jDYljs (Accessed: 3 January 2025).

Code Monkey (2022) ‘Augmented Reality (AR) tutorial for beginners using Unity 2022’, YouTube video, 25 April. Available at: https://www.youtube.com/watch?v=gpaq5bAjya8 (Accessed: 3 January 2025).

Unity Guru (2023) ‘Get Started with AR Foundation in Unity - Beginner Friendly Tutorial 2023’, YouTube video, 10 May. Available at: https://www.youtube.com/watch?v=FWyTf3USDCQ (Accessed: 3 January 2025).

[kaijouhsu]

Selected Assignment 1- Making it Real

To push my project3: making it real further more, I plan to restrict the projection mapping inside my 3D printing chair, so that the vedio of the flower flying will only show in the chair area. There are some challenges, for example in Blender, I made the chair with mirrow tool, so when it comes to Touch Designer, the mapping seems symmetrical. Also the flowers in the vedio curve into strange shape because the chair isn't flat.

As my tutor Ian suggested, I will try another way which is layout the outline of the chair and try to map it in 2D instead of 3D.

Miyamoto, H. (2023) ‘28th(3/4)Map your 3D model[Blender TouchDesigner]’, YouTube video, 12 August. Available at: https://www.youtube.com/watch?v=rr64rbJwUAw (Accessed: 3 January 2025).

[kaijouhsu]

Project 7: Designing Happy Accidents (AR)

Trying out Artivive to make AR effect. The most challenge part must be making 2D image(restaurant logo) into 3D and also making it rotate in blender.

[kaijouhsu]

Project 7: Designing Happy Accidents (AR)

followed the tutorial to get a 2d logo image into 3d

let the 3d logo rotate like showcase to people

follow the tutorial to color the 3d logo

What I am trying to make is a 3d logo happens when people scan the menu. First of all, make the 2d logo into 3d model in Blender. It can be challenging if the 2d image has hollow part which may comes to a broken 3d model. And adding the spining animation to the model can be stressed as well, I can't really tell the degree of the slope. However I try not to destory anything or vanish any pieces, with lots of attempts, it works.

Blender Tutorial (2024) ‘Turn Any 2D Image to 3D Model - Quick & Easy’, YouTube video, 7 January. Available at: https://www.youtube.com/watch?v=BcjPCjxsCZo (Accessed: 3 January 2025).

Blender如何让一个物体沿着某一个轴旋转来做商品展示？ (2024) YouTube video, 12 July. Available at: https://www.youtube.com/watch?v=Dt_FYhailoM&t=2s (Accessed: 3 January 2025).

Blender教學-新手模型篇+紋理繪畫texture paint-三花貓 (2024) YouTube video, 23 September. Available at: https://www.youtube.com/watch?v=yOAplIA5ua0&t=1s (Accessed: 3 January 2025).

Blender How to Resize Camera (2024) YouTube video, 15 March. Available at: https://www.youtube.com/watch?v=57k3EpxgElI (Accessed: 3 January 2025).

[kaijouhsu]

Project 7: Designing Happy Accidents (AR)

I have tried to make these 3 images to animate when scan it using Artivive app. So it will be like the newspaper in Harry Potter that the imagries can move and make sounds.

Following the tutorial of Artivive, I managed to create a animated news, however I believe it will be better with newspaper which is clearer than scaning on computer screen. Player will have to download the Artivive app on mobile to see the effect.

BBC News (n.d.) BBC News. Available at: https://www.bbc.co.uk/news (Accessed: 3 January 2025).

BBC Sport (2024) ‘Promised change, but Juventus are back in crisis’, BBC Sport, 18 December. Available at: https://www.bbc.co.uk/sport/football/articles/cqjzdv7lykyo (Accessed: 3 January 2025).

BBC Sport (2024) ‘Sabalenka voted WTA player of the year’, BBC Sport, 18 December. Available at: https://www.bbc.co.uk/sport/tennis/articles/clyj6jm28dgo (Accessed: 3 January 2025).

[kaijouhsu]

Project 3: Making it Real (Projection mapping)

Trying to play with mapping function in TouchDesigner.

I still have to adjust the size of the imagry that project on the chair and make it into the shape of the chair. More important, I wish to make the flowers vanish at a point and fly out again in a second for the feeling of real world and virtual world combine together.

I tried to export the vedio, however it was also quite challenge, I watched 3 different youtube tutorial to make it correct.

Crazy Radio (2023) 터치디자이너ㅣ3D Projection MappingㅣTouchDesignerㅣ3D 프로젝션 맵핑. YouTube video. Available at: https://www.youtube.com/watch?v=n5cf5D6YrHQ (Accessed: 14 November 2024).

noones img (2020) Superfast 3D mapping (TouchDesigner tutorial). YouTube video. Available at: https://www.youtube.com/watch?v=chLpe-Il-6A (Accessed: 20 November 2024).

[kaijouhsu]

Project 7: Designing Happy Accidents

I created an Instagram random filter using Meta Spark to detect which Hogwarts house you belong to in Harry Potter. Connecting 'runtime', 'offset', 'less than', 'loop animation', 'random' and 'floor' these squares to the 4 houses and 1 muggle outcome. And for the beginning question sentence, it connects to 'switch', 'delay' and 'not'.

It looks super cheesy but it took me quite a lot of time to complete, I redo it few times and thought i was going to fail.

Kapwing (2020) How To Make A "Which Are You" Instagram Filter - Spark AR Tutorial. YouTube video. Available at: https://www.youtube.com/watch?v=FH_sg17pxMY&t=301s (Accessed: 15 November 2024). nipic.com (年) 哈利波特旗子. Available at: https://www.nipic.com/show/39615101.html (Accessed: 15 November 2024).

【Spark AR】隨機效果濾鏡！超詳細教學快來製作自己的隨機效果濾鏡吧！｜Spark AR Random filter effects (2021) YouTube video. Available at: https://www.youtube.com/watch?v=rdldEYvqoME (Accessed: 15 November 2024).