Use this thread to document your work and share your progress with the rest of the ZapWorks community. As per the brief, you’ll get bonus points for recording your creative journey, so keep us up to date with how you’re getting on!
2 Likes
Sipsmith Entry #1
Information:
My entry consists of four separate zaps all linked together.
- The Main loading page
- Hallway Walk Thru (World tracking experience designed for grocery store aisles)
- Sipsmith Detector (Face pant experience)
- Sipsmith Bar (Backup Image tracking experience for devices that can’t use world tracking)
The Main Loading Page:
On the Main Loading Page I have the Age Gate. The Age Gate uses three number selecting wheels to let you set their information. If your age is over 18 it will let you continue. It will also save a passed flag on their device so next time the experience is Zapped you do not have to enter your age again.
On the main page there is a video and 10 year banner that flip along with 3 buttons. I designed the whole experience to flow with Sipsmith’s web site.
- Our History Button
- Our Recipes Button
- Our Photos Button
Our History Button:
Our History Button will load the Hallway Walk Thru experience which is using the world tracking. I designed it with the idea of it being played in a grocery store aisles. It starts with a wall that has a picture frame on it and Mr. Swan next to the wall. Then opens up to a long hallway with other picture frames and hot spots you stand on to activate videos. Mr. Swan walks you thru the hallway stopping at each one. The experience ends with a 360 video tour of the Sipsmith plant. After words you my replay any video or leave back to the main page.
Incompatible devices:
I have added a check to the world tracing for incompatible devices. When found a massage will pop up telling your device is not compatible and tell you to use the bottle tag as a tracking image. It will then open our Sipsmith Bar experience using the bottle tag as the tracking image.
Our Recipes Button:
The Our Recipes Button will open the Sipsmith web site to all their recipes they have on line.
Our Photos Button:
The Our Photos Button will load the Sipsmith Detector experience. Which is a face paint experience that first scans your face and then will randomly select one of eight face paints. The user can save and share their photos. There is a hidden feature when the user opens there mouth particles will shout out based on what face paint was selected. (Ps. Sorry Jared Brown)
Sipsmith Bar:
The Sipsmith Bar is for uses whose devise is incompatible with the world tracking experience. I use the bottle tag as a tracking image. The user just has to place it on a flat surface. (Do to we don’t have the final one I’m using a temporary image)
The Sipsmith Bar will pop up with Mr. Swan welcoming you. He then will share with you what’s on the menu. (A list of videos and the 360 tour) When you select one he acts as if he’s making you a drink then plays the video. At the end when you wish to exit. A wall of all the employs pops up as Mr. Swan thanks you. Behind his back the photos change for a second to their fun ones from the Sipsmith web site. Then back as he looks away.
Known Bugs:
On the Age Gate sometime when you scroll the numbers keep going. Temporary fix is to scroll the other way to get them back in order.
One the Sipsmith Detector sometime the particles will not start. Temporary fix exit back to main screen and go back into Sipsmith Detector.
On the Hallway Walk Thru I do not have any check and balances for things like video play order. The user can go anywhere they like and not follow Mr. Swan.
On all 360 Video tours. It was edited to a smaller video size for testing. When played there is a black bar on the ends which needed to be fixed later.
On Sipsmith Bar the user can click on videos before Mr. Swan is finished talking.
Work left to do:
I would like a 3d model of Mr. Swan for the walk thru and bar experience. That way he can be more animated and make drinks at the bar.
In the Sipsmith Bar I would need to make new models to match the real bar.
Steve
Ps. Please let me know of any bugs you may find. Thank you!!
Tracking image:
ZapCode:
1 Like
Sipsmith Entry #2
Information:
My entry consists of four separate zaps all linked together.
- The Main loading page
- Sipsmith Bar (World tracking experience)
- Sipsmith Detector (Face pant experience)
- Sipsmith Bar (Backup Image tracking experience for devices that can’t use world tracking)
The Main Loading Page:
On the Main Loading Page I have the Age Gate. The Age Gate uses three number selecting wheels to let you set their information. If your age is over 18 it will let you continue. It will also save a passed flag on their device so next time the experience is Zapped you do not have to enter your age again.
On the main page there is a video and 10 year banner that flip along with 3 buttons. I designed the whole experience to flow with Sipsmith’s web site.
- Our Bar Button
- Our Recipes Button
- Our Photos Button
Our Bar Button:
The Sipsmith Bar is a world tracking experience. The Sipsmith Bar will pop up with Mr. Swan welcoming you. He then will share with you what’s on the menu. (A list of videos and the 360 tour) When you select one he acts as if he’s making you a drink then plays the video. At the end when you wish to exit. A wall of all the employs pops up as Mr. Swan thanks you. Behind his back the photos change for a second to their fun ones from the Sipsmith web site. Then back as he looks away.
Incompatible devices:
I have added a check to the world tracing for incompatible devices. When found a massage will pop up telling your device is not compatible and tell you to use the bottle tag as a tracking image. It will then open our Sipsmith Bar experience using the bottle tag as the tracking image.
Our Recipes Button:
The Our Recipes Button will open the Sipsmith web site to all their recipes they have on line.
Our Photos Button:
The Our Photos Button will load the Sipsmith Detector experience. Which is a face paint experience that first scans your face and then will randomly select one of eight face paints. The user can save and share their photos. There is a hidden feature when the user opens there mouth particles will shout out based on what face paint was selected. (Ps. Sorry Jared Brown)
Sipsmith Bar:
The Sipsmith Bar is for uses whose devise is incompatible with the world tracking experience. I use the bottle tag as a tracking image. The user just has to place it on a flat surface. (Do to we don’t have the final one I’m using a temporary image)
The Sipsmith Bar will pop up with Mr. Swan welcoming you. He then will share with you what’s on the menu. (A list of videos and the 360 tour) When you select one he acts as if he’s making you a drink then plays the video. At the end when you wish to exit. A wall of all the employs pops up as Mr. Swan thanks you. Behind his back the photos change for a second to their fun ones from the Sipsmith web site. Then back as he looks away.
Known Bugs:
On the Age Gate sometime when you scroll the numbers keep going. Temporary fix is to scroll the other way to get them back in order.
One the Sipsmith Detector sometime the particles will not start. Temporary fix exit back to main screen and go back into Sipsmith Detector.
On all 360 Video tours. It was edited to a smaller video size for testing. When played there is a black bar on the ends which needed to be fixed later.
On Sipsmith Bar the user can click on videos before Mr. Swan is finished talking.
Work left to do:
I would like a 3d model of Mr. Swan for the bar experience. That way he can be more animated and make drinks at the bar.
In the Sipsmith Bar I would need to make new models to match the real bar.
Steve
Ps. Please let me know of any bugs you may find. Thank you!!
Tracking image:
ZapCode:
2 Likes
So did anyone else submit an entry?
Steve
2 Likes
Hey everyone,
Here’s a bit of an update of what I’ve been getting up to (and sorry if it’s a bit of ramble).
I have to admit there is alot left for me to do in the time frame so I’ll keep this update short!
- Overview -
I wanted to create a world tracked "home screen" where the user can explore and navigate to other Sipsmith content. After drawing inspiration from loads of photo references of various Sipsmith bars and stands, I thought I'd try and amalgamate it into a sort of compact, stylised bar. On the bar top would be 3D objects that the user could tap on to navigate their way to other content.This other content would consist of a world-tracked 360 video tour and a cup game. As mentioned, given the timings, I should love to add even more content (social share, history book, etc) , however, I think it’s best I tighten my belt and focus on the load of work I already have made myself 
- Images -
Below are screen grabs from ZapWorks focusing on each of the 3 pieces of content. *Going clockwise from top-left: Main bar, 360 Tour, and Cup game.*
- Home Bar -
Lots of sweat and tears into trying to make the asset using PBR lighting. Next steps will be testing these with world-tracking on different devices.I have to admit, there is alot of creative license in the size and proportions! Given users may scan in a confined space, I wanted to make the bar as compact as possible.
When the user looks at the cups or the message board, text UI will appear floating on top. The user can tap either of these to transition to the respective content.
Oh wait! But what about the bartender? Ideally, I really want them to be an alpha video of an actor that greets the user and points out the various options. For now, it’ll just be a cut out.
- 360 Tour -
I wanted to take the 360 video content and turn it into something more interactive. I once saw a great AR portal by Nat Geo that included a 360 video once the user entered the portal. I decided to take the same principle and make a Sipsmith doorway. Once the user enters through the doors, the 360 video begins!Special care is going to have to be taken to make sure the users are properly guided to walk through the door.
- Cup Game -
I thought it would be interesting to create some custom 'gamey' content for this experience. While working on the other sections, I kept on coming across photos of copper measurement glasses that Sipsmith use to create their drinks. I thought it would be quirky to include a "find the Juniper berry" game where the user has to find a berry under a shuffling set of measurement glasses.- What next?? -
Lots to do! My main focus now is to ensure that world tracking and a suitable fall back work well with all the created assets and the lighting. I need to make sure it works on lower-spec devices. A good test will be to run it all on WebAR :-DIf time permits, I’ll add more content, but definitely worth getting over this next big hurdle.
5 Likes
Very nice!!! I like your bar and the door sign. I thought about making one as well but it didn’t fit with what I had.
Good luck!!
Steve
3 Likes
Thank you! It was such a gamble deciding whether to make assets or source them.
2 Likes
* * * * * * UPDATE * * * * * *
Again, much left to do, so I'll keep the update short.So the stars have aligned and the content seems to work fine on my two devices.
I’ve tried to optimise the experience so it can work with/without world tracking so anyone can (hopefully) enjoy it without breaking the immersion.
- Update: 360 Tour -
The 360 tour portion was a slight challenge. If the user has world tracking turned on, they have to walk through the portal to start the video. If world tracking is off, the user can tap the portal and it will move forward such that they are forced to pass through it.
I’m still using a rather low quality 360 video for testing purposes. I can see myself battling the conversion settings to get a good balance between quality and streaming speed. I need to look up a good HLS conversion script for ffmpeg. I can see this being a pain point towards the end.
- Update: Home Bar -
I’m in the process of adding some intro animations to greet the user. At the moment, I’ve changed the bartender to some dark silhouette. Again, I’d LOVE to have some green screen video, but oh well. I’ve put in some audio to give the experience some pace.
- Added: Age Gate -
The experience always launches with an age gate the first time the user scans the experience.
I’ll make the age gate nice and simple so you get right into the experience… I even made a pretty envelope for it!
- Added: Cocktail Idea -
I felt the experience didn't really utilise the bartender much. I decided to make them a fun tappable area so that they'd give you a random cocktail idea. Nothing complicated! Literally a simple cocktail card that is meant to inspire the user on what to drink rather than be used as a long set of instructions. Still in the process of making this but I will definitely limit the cocktail bank to 1 or 2 for this mockup.
- What next?>
Debugging, fixing, and more debugging. I was happy to see the experience working in WebAR except the streaming video portion of the tour 
Like I said, I want to add the random recipe idea and maybe a social share feature (?).
At the moment, world tracking is opt-in, which actually works very well. So far, I’ve only used the worl tracking subsymbol as out-of-the-box. I want to take a deeper dive into it and see how I can restart world tracking and communicate better with the rest of my experience.
2 Likes
I had the same problem with the 360 video. It’s to big to play on my devices so I just dropped it down to testing.
For my bar I just used sketchfab models for now. I figured that if I actually won I would make real models of the real bar. But I love yours!
Steve
1 Like
* * * Update #2 * * *
Tiny update here. I managed some very sketchy DIY green screen recording using some green construction paper and my surprisingly decent camera phone.I’m now going to follow along this really helpful tutorial to help me integrate it into my experience:
https://docs.zap.works/studio/audio-and-video/preparing-alpha-video/
4 Likes
Can’t wait to see it!! 
Steve
2 Likes
As the midnight deadline approaches. I wanted to wish good luck to everybody who is entered into the sipsmith competition.
Steve
3 Likes
* * * FINAL UPDATE FOR SUBMISSION * * * *
Phew! Just barely making the deadline! If anyone wishes to see my experience, you can scan the code below!
It requires no target image and runs on both world tracking capable devices and those that do not support it.
I’m testing on MotoG 6, Pixel 1.0, and Pixel 3.0 so fingers cross iOS is fine.
Let me know what you guys think!
If you are on mobile, did you know you can just tap this link?
LAUNCH THE EXPERIENCE
GOOD LUCK TO EVERYONE!!!
I found the website submission page not working so have emailed my submission to support@zappar.com. To anyone having issues submitting on the web, I suggest you too submit it via email.
PPS: Here is a supplementary proposal document I submitted alongside the entry. It summarises everything that’s going on in the experience (in case something isn’t working).
SipsmithARBar - PLuke Design Doc.pdf (1.2 MB)
Moving forward
4 Likes
Very nice PLuke! Good luck!
Here is what I made, very few time to build it.
And I found also a bug that I couldn’t fix, when you have a fece tracking subsymbol and you display it, then it seems impossible to menage the camera. So in my experience is better to do the selfie at the end 
Good luck to everyone!!!
6 Likes
Love the pace and art-style of this! Great work!
Good luck!
5 Likes
Hello Everyone,
Hope everybody got to finish the project and have a good luck! 
Brief:
Our project consists in 4 areas of interactivity, all setted in the same project. We tried to make it as light as possible, to attend to people with bad internet connection and/or who only have access to mobile data. Hope that everyone likes our project and have some fun!
First part - Main menu:
After scanning the code, the user will be faced with a main menu, which requires the tracking image to work (we are using the bottle tag provided for this project, which we will be attaching below, edited with a new Zapcode). This is the first part of the project, and it has a soft animation that brings life into the tracking image, buttons to access the other 3 parts of the project, and also buttons linked to Sipsmith’s social media!
You can see the menu tracked or direct on the screen. The menu is also functional in landscape, portrait, inverted landscape orientations, and it is made to works in every smartphone screen (by default everything is sized to ipad2 screen size).
Second part - 360° tour:
For the second part we’ve put together a 360° tour, using the assets provided. There’s the Lab, the Bar and the Distillery, which you can pass through by clicking on the arrows to navigate. Also, this symbol allows the user to rotate the scene with their fingers by swiping, or feel free to rotate the device around (as usual).
Third part - Selfie:
The third part of the project is the selfie. We have some ideias for 3Ds and 2D accessories that could be a mix of virtual stickers to place on the screen, and filters using facetracking, but we’ll have to implement it later. With this 2 extra weeks, we thought about implementing something more interactive, so we added a mini game using the facetracking!
Inside the project the user will have access to instructions, but basically, you have drinks falling and you have to catch then with your mouth. Every drink that you catch by opening your mouth is displayed on the screen, and every drink that you miss adds a count of damage, which is represented on the screen by 5 hearts. The game is over when you lose all the hearts.
At the end, you can share a picture of yourself along your score in any social media as you wish, thus inviting your friends to play along!
Fourth Part - The Cocktail Game:
The last and most important part is the Bar! Our team consists in a 3D artist, a 2D artist, and a programmer, and everything you see on this project was constructed by us! We hope everyone likes it!
The Cocktail Game is a bar where you can create drinks (all the drinks present in the game can also be found on https://sipsmith.com/cocktail-recipes/) by using some ingredients that you can find on the counter. We had to adapt some of ingredients of some drinks because of 3D and time limitations but most of the ingredients follow the instructions found on Sipsmith’s website.
The objective of the game is to make as many drinks as you can before your queue on the left gets full. On this queue, you’ll always have to make the cocktail that is displayed at the top, and you can check the recipe of the drink by clicking on the book on the left corner of the screen. At first, your queue will have only one drink and while you work on it, a new one will show. The time of the drinks respawn is random but I can tell that is around 20 - 40 seconds. Every drink you make reduces the drinks displayed on the queue by one, and there is a display up top that displays how many drinks you were able to make so far. This queue only allows for 5 drinks to be shown at the same time, so if the user can’t finish the top drink before the sixth drink arrive, the game will be over.
Is there any bugs?!
We tested it a lot today to make sure that nothing is wrong till now and the only thing that we’ve found is on the 360° scene, but it is something that we couldn’t fix by now; the 360° images are very heavy, and to optimize we had to reduce them, but when we tried this, the quality of the image became very very bad. So to solve that, I added them on an image texture and made a scale of 0.5, but doing this created a big hole on the floor and on the top. Nothing that disturbs too much the experience but still a bug.
If anyone finds anything, please tell me and I’ll be repairing immediately! Also, we tested only on S9, Iphone 8 and Pocophone (we don’t have other devices available), so if anyone who has a different smartphone finds anything, please tell us, because we don’t have a way to know if there’s any problem with devices like Asus, for example.
Next Stage:
For the next steps on the project, we would like to work more on the optimization for the project, like reducing even more the weight of everything and inserting more content from Sipsmith’s history, like the curiosites available on their website, extra images and videos that they can provide, etc. Also, we would like to work more on the selfie thing, like I said before, with more content that you can move around the screen, maybe 3D models for facial recognition and etc.
Tracking:
You guys can test it in here, just zap it!
Production credits:
3D assets: Bruno Paluan
2D assets: Grazieli Bergamasco
Programming: Higor Neves
5 Likes
Sorry to ask this here but, how do I know that my experience was submit?
I just did the zip file with the tracking and the zpp and then when I clicked in
upload, anything happend, so I just submit but the page just reloaded D:
att, Higor.
2 Likes
The same happened to myself.
I would submit it via email just in case.
3 Likes