Month: April 2020

Categories
Client Projects Featured

Strain Connect

Hi Guys, 

Today I’m going to be demoing an old screencap of an applicable prototype for a startup called Stain Connect. Strain Connect was a cannabis recommendation engine for branded, lab-tested cannabis products. Let’s check it out.

(filling out login)

I built this with View and View X. Nowadays I’m a React guy and I probably wouldn’t go back to View, especially with View X. I really don’t like that state management. There are some good things about it, but there are also a lot of gotchas that you avoid in React and Redux. 

(cursor hovers over features as he explains)

So, as you can see there’s a couple of user-submitted choices here. The App revolves around 3 data points. Those three data points are then mapped to a Cartesian coordinate system that’s in 3D, along three axes, and then based on that it’s able to recommend products, kind of your standard data modeling recommendation engine. As you can see here are some products. 

(showing Admin Dashboard)

Part of the clickable prototype was the admin dashboard, where you could enter the products with the lab data, sorted by brand and then you as well could have a user dashboard. You will see near the end there, there were no users in this video, but you were still able to edit them. 

Something like this is really helpful for startups or people just developing concepts. Sometimes it’s a lot easier to spend $1000 to $1500 bucks and build out an idea and then iterate upon it for your business, rather than spending $5000 or $10,000 and then realizing, later on, that “Oh, this really wasn’t that great an idea”.  Sometimes those “iterable” prototypes are really helpful and I do recommend if you are a startup, creating one of those vs. just relying solely on a pitch deck is very helpful. This was a progressive web app to potential investors who could put it on their phones as well.

Categories
Featured Our Software

3D Earthquake Visualizer

Hey guys,

Today I’m going to be talking about 3D data visualizations using Three.js, React, data feeds from the USGS and progressive web applications. I think progressive web applications are a huge thing potentially for businesses that want to have a high return on an initial investment because you can deploy it to the web and also playstores. I’m going to show you that right now actually.

(clicks on another window)

So, firstly let’s check out the data feed. Here it is. This is the USGS (United States Geological Service).

(moves cursor to the bottom right column, clicks through to data)

They have data feeds on the side here…we click through, this is the maximum, all the earthquakes in the past 30 days. You can see how long that took. It’s a massive amount of data actually that comes through the scroll bar, so…so small there.

(power scrolls)

You can even see that in scrolling on my screen, if I scroll fast enough down, I don’t know, it kind of janks up sometimes.

(switches back to prior screen)

The interesting thing about this was, in doing this I actually noticed a bug in the USGS’s API, when the 30 Days, All Earthquakes count grew to be too great, I believe it was when it was over 15,000 or 20,000, something like that. When the data set was too long it actually would just error out. The whole API for that went down. I had to contact the USGS myself and have them fix that. So they just raised the limit for my request. So if you end up using these API’s and you specifically need the All Earthquakes, for the 30 Days, and it gets really high one month…you’re welcome. Haha! Thanks, also to the USGS for providing these fantastic data sets and fixing that.

(clicks on another window)

Let’s jump over to the Google playstore. As you can see, this is a progressive web app. Which means that I’ve gone and built it on a website. Right, it’s web-code, it’s HTML, CSS, Javascript, Frameworks, of course, React, Three.js. But the cool thing about this is you can build it in one language and deploy it across multiple platforms. Very great for business return on investment, fantastic for MVPing. Very great for early-stage startups and testing things out, because you only really need one set of developers. Good luck finding someone who knows how to write Native, Objective C, and Java, and Javascript. It gets a little intense having to manage all these people. So it’s a great way to start out.

(switches back to app)

So, let’s jump over to the app. I want to talk about some of the technical implementations I’ve put in here, that were essentially non-standard, I wasn’t expecting. So, this is built with Three.js. The data sets are so large that if you put this on the client-side, like on a phone for example it’s going to crash the browser in the phone. It’s just going to take it down. It doesn’t matter if you are on an old phone, a new phone, an iphone…it doesn’t matter. It’s just too much data, it’s difficult to do. So in doing the UI, I really wanted to keep it simple, I didn’t want to put in React components, I wanted simple HTML, and that’s what we got here, because the actual visualization and the data is so intense that I wanted to keep everything else really simple.

I put in a custom API for estimating download times. I take that GeoJSON set in the back end, I run some cron jobs and I convert it into Three.js, JSON on the server-side, which is not very often done. So, I’m one of the few people who have done that because I had to go through a bunch of…I had to surmount many problems in doing that because It’s not a typical use case. But we’ve gone and done that here, and it’s a fantastic experience.

So let’s check out the 30 days and jump in here. I built this project originally because I had met, now a good friend of mine in Thailand, from Nepal. His name was Mukti. There was a huge Nepali earthquake at the time. He brought people in from his village and housed them. Quite a lot of people in fact. I was so inspired that I really wanted to build this.

This is the application here.

(moves cursor over the left side bar, scrolls)

So, we have on the left side bar, all the earthquakes for the past month. There’s the location search. There’s list virtualization here. If you had that many in the list it would jank up, it would be a terrible experience. But what it does is it only render this 15 or 20 out of the entire set, dynamically and removes them when they are out of view. Which is great.

(selects physical globe from right sidebar)

So let’s check out some of the different textures I have here. I have a physical globe. That removes the cloud layer. I got these images from NASA and compressed them a bit.

(selects Political Globe from right sidebar)

If I go into the political globe it switches over, and you have a very bright white outline of the borders, and you can really see the coloring. The way the coloring demonstrates visually the intensity of the earthquake is if it is green and small, it is a short earthquake. If it’s a long, lengthy point, like this one over here, Woooh! That’s a big one.

(selects Tectonic Globe)

Alright, let’s check out the tectonic globe, which is a really cool globe texture I made in Photoshop, and then mapped to this 3D sphere. It’s great for education to show people that a lot of these earthquakes happen right along the tectonic plates. Super cool, great visualization I think.

(selects Physical Globe, clicks on Auto-rotation)

So let’s bump it back to the physical globe. You can see there is auto-rotation. Very calm auto-rotation, you can pop it on and off.

(hovers cursor over data sets on right sidebar)

And then there are the different data sets here. So once you download the 30-day data set, you get access to all the smaller data sets. If you just downloaded in the past hour, these are essentially grayed out and inaccessible.

This entire UI works on a phone, so the way it works is these selections are on the bottom, you are able to click and this will drop down from the top. It will replace the entire view, you click on this and then it will hide it and it will rotate to the location. You can zoom in and pan on the phone as well. I’m just doing the desktop because the video would be too long if I did it otherwise. Feel free to check it out. Specifically tested this in Chrome in an Android browser. There were some issues on Mac and Safari with the texture loader, I may have gone and fixed that, but I primarily develop on Windows or Linux.

(selects Past Hour on right sidebar, then Past 24, finally Past Week)

So let’s check this out. In the past hour only eight. So small, these earthquakes. In the past 24 hours, 280. Pat week, almost 2,500. Very cool stuff here, guys.

(Chooses 30 Days, then enters California in the search field)

Let’s check out the 30 Days, and let’s test out the search functionality. So if we type in California here, and do the search, it pops over, and this overlay comes out of nowhere on the left, and replaces it. Now let’s click on this.

(chooses specific location from the list)

So BOOM, you have zooming and panning to the location. You have this small sphere.

(switches to the Political Globe)

Let’s go over to the political globe, you can see it a little better. You see that there? You can. In the larger earthquakes, it’s a larger sphere. But it was a fun project that I enjoyed doing. There was some learning involved with mapping coordinates to a 3D globe, so I actually learned about Cartesian systems, and coordinate systems and maps in general. It was a great experience.

So if your business is needing some Three.js and React work, or just a progressive web app where you can deploy this into a play store or a Google app store for a relatively lower amount of initial investment than hiring a separate code team for four different platforms. I hope this video helps demonstrate the value in that. If you want to talk more about this, about how this type of approach can benefit your business, please contact me. I really look forward to talking about how we can generate more revenue and better experiences for your customers.

Thank you and have a good one. Bye.

Categories
Client Projects

Holy Kitchen

Holy Kitchen

Hey Guys,

Today I’m going to be demoing this screencap of a custom PHP website with an admin panel for a restaurant called Holy Kitchen. Most people think it is an Indian restaurant, but the owner is actually Nepali. It’s in my local neighborhood. They’ve changed their name to Bon Apeteka, because I believe they are trying to be a little bit more secular in this day and age, but the food is still traditional and fantastic.

(background video starts)

So let’s check out the website right here.

(starts scrolling down)

So, I started with their logo. I got this great copyright-free video for the background. As you scroll down you just have the menu there, that you can add to the cart. You have a nice little full-width banner there. Just some Indian/Hindu flare.

(highlights menu items)

If you add to the cart, it will pop up on the right there. You can keep adding, and of course, the math is done. You go through the different sections on the left.

This is all mobile responsive as well.

(starts adding and subtracting menu items from the cart)

In this screencap, I don’t have it recorded for that, but if you can just imagine the menu going above and just everything stacking more or less. So as you can see, when you empty out the cart it just vanishes there.

(switches back to the main page)

On the top left, you click through to the logo, and it goes to the admin panel for the restaurant owner. You log in and it’s pretty straight forward here.

(starts scrolling down)

So we have all the corresponding categories for the items that they sell, and you simply edit/remove, and then if you want to add you just click on the plus.

(clicks on the plus, a window pops up)

So I think the icons are really straight forward there. The overall UI here is pretty simple. You know it’s a back end here, so on this one, we don’t have to be super aesthetic about it. This didn’t use a component framework. It’s pretty much just raw HTML, CSS, and PHP. Sometimes we just like to keep it really simple and light when there are not too many pages on a website.

(moves cursor to the right)

So if you want to log out, you just got to the right there.

(clicks on log out)

Hit Log Out, and then you’re back to the admin panel. Let’s just finish up on the video here and close this video out. Thanks for watching. If you guys need a custom PHP website or an admin panel for a restaurant like this. Feel free, we can build that for you. Just drop us a line anytime.

Thank you.

Categories
Client Projects

News Poll

Hi Guys, 

Today I’m going to be talking about News Poll. Which was a polling question software we ended up building for a client by the name of Lemuel Lewis. He had a third party solution going on, but he wanted his own because sometimes the original would go down. 

He had this whole conglomerate of websites, literally hundreds and hundreds of websites, of which he was generating a bit of revenue on each from advertising. So this was one of the kinds of gimmicks that would generate people to come vote. It was a thing that he would integrate into a lot of these websites. So there was a client-side script and an admin panel. There were six requirements in this project. 

  1. Create new poll-in questions with an admin panel. 
  2. Each one needs its own unique color.
  3. You’d have to see the results nationwide while hovering on a state. 
  4. Allowing a client-side script that would be deploy-able on hundreds of other websites.
  5. Preventing users from submitting multiple votes.
  6. Allow for pulling of old news poll data, like CSV. 

So let’s check out the video. 

(starts filling in fields)

Okay, so this is the basic admin panel that we put in here. When you click through here you’ll be able to see. 

(clicks through to a map of the United States)

Yeah, so what we’ve gone and done is we have the visual representation of what a person would see on the website after they vote. So it’s an exact duplicate except the client-side script doesn’t use UX. So that one is just straight Javascript, and then this has an actual framework, but I like this because there is 2-way data binding, as you can see. 

(enters question into field)

So if you put that question in and save it, it will update, and then because of how the client-side scripts are fashioned it will update across every single script. 

(highlights the styles)

The styles are injected with a function vs. including them. So you won’t have to actually upload another file to all these websites. As you can see, you just save tee poll question 

(switches to CSV data box)

and then there is also going to the CSV data, where you can pull up old votes and just copy them out.

(hit accept)

Just like that. 

(switches to client-side view in another browser window)

Okay so if you jump over here is the client-side view. Then there is when you click through. That’s the old question and you refresh, 

(refreshes screen)

and then you can see that’s it’s updated with the new question that we just saved. And if you refresh on this one you will see the new result here. 

(new results appear with refresh)

So, let’s see if we refresh because you just voted… and there you go. When we deploy this onto the servers you click through and it changes. I’ve just set this up for demonstration purposes so you can see. But yeah, it was a fun project. It’s always great to have more experience in D3 and a little more experience in View, so if you need infographic or any sort of data visualization for you business we can solve that problem very well for you. Thank you. Bye.

 

Categories
Our Software

Wordza

Wordza was a web application I built with Vue.js + Vuex after having traveled around Ukraine for over a month. I’ve always had an interest in the Russian language since I was a child. I found the Cyrillic alphabet fascinating with it’s classic communistic block typeface and similar looking characters to the Latin alphabet. In my travels I realized that if I knew English, Spanish, and Russian that I would be able to speak to someone almost anywhere in the world.

With that ideal in mind, I began searching for language learning software! I soon found out that if you know the 1,000 most commonly used words in a language you can roughly understand the gist of 60% of what is said. This was a powerful concept in my mind. I would seek to learn the top 1,000 most commonly used words followed by grammar and natural conversation practice.

I was unable to find flashcard software that suited my three basic criteria:

  1. Allow for my own custom submitted word lists in addition to containing the top 1,000 most commonly spoken words.
  2. Automatic speech of the word or phrase by a native language sounding speaker via text to speech (TTS).
  3. Speech recognition of my spoken word and matching of my pronunciation with that of the text to speech.

With that discovery, Wordza: Language Flashcards was born!

I was pleasantly surprised to learn that some browsers, at the time of writing Chrome and Android browser, supported text to speech and speech recognition in the Web Speech API.

Text to speech functionality plays off this…

[code]
playTTS() {
let utterance = new SpeechSynthesisUtterance(this.$store.getters.currentWord);
utterance.lang = this.$store.getters.currentLang;
utterance.voice = speechSynthesis.getVoices()[18]; // Russian Voice
speechSynthesis.speak(utterance);
},
[/code]

While speech recognition is like this…

[code]
recordAudio() {
// Reset Match Status
this.recording = true;
this.speechMatch = null;
this.speechWord = “…”;

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

this.recognition = new SpeechRecognition();
this.recognition.lang = this.$store.getters.currentLang;
this.recognition.interimResults = false;
this.recognition.maxAlternatives = 1;
this.recognition.start();

this.recognition.onresult = (event) => {
const word = event.results[0][0].transcript;
this.speechWord = word;
this.recording = false;

if (word === that.$store.getters.currentWord) {
this.speechMatch = true;
this.playCorrectBeep();
} else {
this.speechMatch = false;
this.playIncorrectBeep();
}
}
},
[/code]

Post in progress come back later!

Categories
Client Projects Featured

Squirrel Hill

squirrel-hill

Hey guys,

In today’s video, I’m going to go over the Squirrel Hill project here.

This was a website build-out with Bootstrap, HTML, CSS, and PHP.

(moves cursor to the header, footer, and the Contact Us area of the page)

The PHP came in handy here for creating templates for the header and the footer, as well as this Contact Us, and you’ll see in a moment all the action that looks similar to this but is slightly different.

(starts to use arrows to move slide show, clicks on About Us, shows the header template)

So let’s just check out a little bit of the functionality here. This was based on Photoshop placeholder images, and if we go through to a couple of different pages, and see that there is also this type of header template on these pages…and so, that is one of the things that you have to take into account in designs, right?

So if you go and hire a designer, here’s the component I was talking about. If you go and hire a designer, okay…and there’s not a lot of reusable components or templates rather in your websites or your web application, it may behoove you to just sit down and think about, you know, is there functionality that can be kind of joined and then reproduced? Because it will make the budget a lot more affordable in many ways because they can just reuse these templates instead of having to create a custom page every single time. Right?

(scrolling up and down, highlights subcategories)

So yeah, this was essentially just a bit of a PHP buildout. If they wanted this customizable we would throw this into WordPress. A lot of these things are WordPress pages essentially, right, you have your WordPress custom menu and you have your pages right here and these would end up in their own categories, and there would be Contact Form 7, perhaps here for the email subscription. But then let’s check out a few more pages here.

(highlights the watermark)

Yeah, you can see a bit of the watermark, right, because this was a sub-contract here, so they wanted me to actually build this in an incredibly quick amount of time. Actually, the deliverable for this was one day. That was a rush job. So, I really don’t like doing that because I have a certain amount of quality that I really enjoy delivering, and to deliver that in such a short amount of time actually stresses me out.

(clicks on Gallery, clicks on random pictures in Gallery)

So, if we check on some of these things here, in that rush delivery there is no scrolling through these, sliding though, there’s just an X. So that’s some of the nuances you would miss when you have to build something as fast as possible.

(back to home, switches to mobile responsive size window)

Overall, for the deadline and for the quality here, I think I did a really good job. All things considered because it is also mobile responsive. Right? So if we put this down here, you can see, stacks up, right?

(highlights large print navigation for elderly)

We have this, and I made sure this was really big, because people in their elder years really have a hard time navigating websites, and not everyone has a younger person or a guardian to do this for them, so there are some older folks that have to figure this out for themselves.

(hovers the cursor over features as he explains why he likes the website)

So this is the website right, and there’s your mobile responsiveness. Overall, it was pretty fun, aside from the really rushed deadline. It was cool to just do a PHP website that wasn’t a WordPress website, and I really enjoyed the design aesthetic that the designer had built out here because I tend to like cool colors, and that’s exactly what this palate is, and has this great gradient they put on just to match these square boxes. I like how they have broken these down. I believe I have actually absolutely positioned these. This isn’t one giant photo, and the other thing in this project that took a little bit of time was I had to open up these Photoshop files and actually export all the assets, and then you have to do that in three different versions, right, because of file sizes.

You have your large, high-quality desktop version, and then you have your small mobile phone version. So that would have sped up delivery if I didn’t have to actually do a bit of designer type of exporting on that. But overall, I think this is a good example of a fairly solid web buildout here, effective, budget-friendly, and a good delivery.

So if you need any custom websites built out, this is not a WordPress one, but if you need a WordPress website, or even a fairly complex non-CMS website, custom work, we can do basic work.

In general, we don’t really like working with templates too much, unless it’s a WordPress template, because that just saves a lot of time. I don’t really like working with them. Some folks have HTML templates or websites, and I’m not talking component frameworks here, I’m just talking like an actual HTML template for a website. You get a lot of bloat on that. It’s like unless you stick really close to it, you have to clean it up and I just recommend a clean initial build.

So yeah, feel free to get at me, to contact me via my website or my Facebook page, and let’s talk about how we can take your business to the next level. Alright, thanks everybody. Bye.

Categories
Client Projects Featured

Radiesse Ads

radiesse-logo

Hey Everyone,

Today I’m going to be talking about how I as a programmer made the world’s hands a little bit more beautiful, in working with a company called Radiesse. They do dermal fillers, specifically for lower face and hands. I think it’s pretty obvious that most people when they get older, aside from their face, their neck, and their hands end up getting pretty aged.

A lot of people don’t think about putting sunscreen on the top of their hands, but you might want to do that, or else you might be getting some of this action.

(switches to images of banner ads)

The build-out for Radiesse was a set of banner ads. So these are HTML5 banner ads. Images edited in Photoshop put together. This slideshow, going through. You can click on it. There’s a link. Then you have the fine print, the drug safety of these dermal fillers, very important for compliance. You actually cannot be doing these things without that.

So with this, the specs were, it cannot be over 150 kilobytes, because advertising platforms won’t allow you to submit your banner ads if they are that large.

(scrolling up and down)

So, it was a really great experience in doing that. I had actually not done the scrolling aspect in an advertisement before this, but now that I have it was really great to do that.

(scrolls within the banner ad)

This was the first set of ads. They actually asked for a second set, which was different images and some updated text, because in this there are specific numbers for the drug product itself. You’d have to go through it all, but we might have actually added that in the second version there. I think we did.

It was a great experience working with them. I think this type of banner ad can be very useful for generating revenue for someone’s business, and it’s very important that you have a knowledgeable expert that can deliver quality results. Otherwise, you are just wasting your time, in my opinion. So if you or you know someone who needs these done, we can come on and deliver that and a fantastic experience for you. Looking forward to hearing from you.

Thanks, Bye!

Categories
Client Projects

Moojis

moojis_logo

Hi Guys,

Today I’m going to talk about Landing Pages. This is an example of one I built here. I think it’s very fitting because a lot of times people invest a lot of resources into building a very fleshed out website when a lot of times a simple landing page can offer the business just as much value.

For myself, I know that with my past business really just having a simple website was just as effective as having a very complex one. Granted it depends on your specific situation, but this for example is a really good one, because here the main product that is built it really an application.

What it is is um this mobile application that is in the play store/app store. Of course, all you do is take a photo of yourself and then you are able to pick some pre-illustrated images to go over on top of it. This essentially uses its own algorithm to convert you into an illustration.

I tested this out. It wasn’t 100% perfect. You had to take a photo of yourself a couple of times to have it work perfectly, but if you are a bit patient, it’s pretty cool. Once you have it, it’s saved and you can send it out to everyone.

(scrolls up and down page)

This was Mooji’s. It was the #1 in the play store in Tel Aviv. This is Schlomi Ben here, and he’s a good guy. Pretty simple, the requirements for this just went through some illustrations, screenshots rater, of the actual application, you have your integrations here that it can be used in, and there’s just a little blurb about it. Links, download links, yadda yadda.

(clicks on Legal Notice)

Then a legal notice, you need that because you need a link actually to put it in these play stores for your privacy policy. That has to be available or else you’ll get denied.

You can see, Bam! Panimood, Israel.

(back to main screen)

So, yeah it was pretty cool to learn it was #1 in the play store in Tel Aviv. That was a bit noteworthy. So for everyone looking to build apps, this was arguably a successful one. I think the main build-out was just this animation and then making it responsive.

Really there are only a few certain, screen sizes you need to make this perfectly responsive.

(switches to another screen size)

So if we go through this here, there you are.

(makes window smaller, then larger)

Very rarely are you going to be going through the entirety of different sizes here. There are certain presets essentially. So that checked all the boxes for the specific requirements. Shlomi checked it out and he was happy with it.

Of course, I could make it responsive all the way. It’s just like, for the budget, that’s what was able to be delivered there. It’s good to keep your expenditures small when your main expense is actually the product and this is really just a marketing budget, but important none-the-less.

Specifically, with landing pages, there are some good things for marketing, specifically A/B testing, so you have one design and a second design and then it will just randomly, but equal distribution show different types of the design -the A or the B version to visitors on the web application or the landing page rather. And you’ll be able to get statistics about conversions and such and that’s why landing pages specifically are pretty worthwhile, if you take the time to get some market analytics on it.

So pretty simple here. I just wanted to do a little demo and talk about landing pages specifically. I hope that’s helpful just potentially giving you some ideas about what you can do with your own business. Thanks for stopping by.

Categories
Our Freeware

Precious Metals RSVP

Precious Metals RSVP

Hey guys,

Today I wanted to show a bit of freeware I’m going to release. Upload this into a code repo and put the link into the description of the video. This was one of the final projects at the Academy of Art when I was there in 2018.

It gave me the opportunity to play around with Three.js, and some PHP. The requirement was to have a PHP database. So you’ll see as I go through here,

(starts animation)

I’ll just play this really quickly, that there’s a populated table with some fake data here that is off an API.

(flipping through the features)

The UI could be improved for sure. If I put in a bit of component framework, it would be a lot nicer, but this was just a bit of a more back end specific PHP project here. You know, form submission and updating and whatnot, but I really made this out because I wanted to do the Three.js on the side here.

(points to the graphic on the left side of the screen)

What I’ve done on the side is, this is sphere geometry and these are all vertices, and I just took the geometry, and I created spheres for every index in that array, and I just map over this array of vertices, and I place a new sphere at the location of that old vertex.

So in that you can do some really cool effects where you create a larger shape from some smaller shapes, and that’s actually a design principle. If you look here, we have three spheres here, going. We have the largest sphere, we have the smaller spheres, and then we have the actual background sphere. When it comes to design, repeating shapes is a bit of a design principle there, but I thought it was cool because you have 3D depth, and then you have 2D right here. That’s pretty sweet.

(moves cursor back to the information at the right, highlights the different features)

Anyway, the functionality is when you sign up and you do that form, you are able to go to this About page, and then this bottom part shows up, which is an iframe and then, thank you for registering and then they tell you when it’s at.

So yeah, going to release this. It was just a little bit of a project at University, I did way back in the day. So I want to allow people to play around with the Three.js parts, and then you’ll have to look into the PHP, because it was tied to a database, so likely those users are not going to exist, but there’s going to be an API call where you are going to be able to hit that and then populate that database. I think I even made a UI where you are going to be able to click a button and then you will be able to see it getting populated.

So just go through the PHP files and check out the repo a little bit, and it’s just a good starting off point so you don’t have to do a bunch of work to create a bit of a landing page thing, with 3D elements, database functionality and PHP.

So cool guys, check that out. Alright. Bye now.

Categories
Our Freeware

Space Sound Continuum

music-visualizer-logo

Hey Guys,

Today I want to demo the second product that I ever made in Three.js.

This was a more in-depth project that was just about learning and just having some fun. This was way back in the day. I learned a lot about shaders. I call it the Space-Sound Continuum.

What  I have is a few songs, and I have Javascript using the web-audio API to analyze frequency. Let’s see if I can jump over really quickly for this code… if it will open the right folder here, yeah…

(highlights directory on left)

So this is the directory for the game and we have a lot of shaders here on the side, a stereo effect for virtual reality. It creates a left frame and a right frame and then using the two it creates depth in kind of an illusionary perception.

(chooses script from the directory)

So let’s see here for the script and look really quickly at this. I have five different frequency counts and they are averaged out and interpolated in real-time. That was pretty cool at the time.

(chooses skyboxes)

And then about skyboxes, I don’t know if you know about them very much, but essentially you have an original image. See, this is basically wrapped up into a cube and it’s seamless. So it looks like it goes on into infinity. That’s how they make video game spaces in the background.

I’ve done some work in my earthquake visualizer, the skybox in that is not actually perfect. I don’t really mind that so much. Maybe one day I’ll go back and edit it, but these are just personal projects to show you some cool stuff that you can do with Javascript.

(switches to Home screen)

So let’s jump over to the game. I hope that it works well with the screen recording software, (inaudible) but I know without it it’s very smooth. There was originally going to be an upload song functionality, but I got busy, so this doesn’t actually work here.

(selects first track)

But let’s just jump over to this, and you see you have your virtual reality option and you have your standard desktop/laptop with a keyboard. Let’s try it out.

(demo)

So you can see that…let me drop the sound quick here…you can see that the actual properties of the game are mapped in real-time to audio of different frequencies. So we have lots of shaders doing fluorescence and anastrophic filtering and glow passes and all sorts of things here, and I use an octree for collision detection.

These little white spheres are actually health. So when you hit one of these spikey balls that use some custom shaders that I wrote, you end up getting knocked and your health goes down. Your health is actually illustrated through the light, so the more you get hit, the darker it gets and at a certain point if it’s too dark, you basically are Game Over and you get redirected, bounced back out to the Home page there, which is the song selector.

So let’s just play this for a little bit. You can always fast-forward in the video and check back in.

(plays game)

Ooof, ooof! So with the (inaudible) recording software, it actually kind-of ah, is a bit slower because there is a lot going on on this computer for that. But ah, as you can see there’s a bit of a flash, if I can snag…oh, so close!

There we go. Got one. That’s a little health. Bring it back. BOOM! Sounded, (inaudible) it back here. Hold-on! BOOM! Oh, I got this! I think I can beat this right now, actually.

(game running, music playing)

Boom! Alright, and now I’m just going to lose here, so you can see what happens. Ah, boom! I have really low health right now, look at this. Let me go out of this tunnel to show you how I do this. So you have your skybox, you have your tunnel, and then there’s some alpha mapping going on to do the transparencies. And then I just insert these balls at one end, and then when they get to a certain coordinate at the end, I just remove them from the scene.

So let’s go back in and kinda lose the game so you can see how it bounces back. GAME OVER guys. Game over.

(back to Home screen)

So I hope that was really cool. I’m going to make this public for freeware. So people can just have some fun with Three.js and learn a little bit about shaders and how you can do collision detection and things like that. I know that when you first start out it takes a long time to learn these things, but then once you have a couple of personal projects under your belt or just professional projects as well, the mastery really steps it up.

So I will likely have to edit these songs, unfortunately, guys. I’ll probably have to use some sort of copyright-free music. It may not be that great. It’ll take me some time to change that out and find that because I can’t actually release this with the songs included for copyright issues. I’ll be doing that and then putting a link to this. Later on, I’ll go back to the Facebook video and add in a link.

So enjoy guys! Bye.