Augmented Reality web shooting in JavaScript (VWD - Lecture 9)

We implement a real-time augmented reality visual effect similar to Spiderman's web shooting using the webcam. We first identify gestures: shoot, grab, delete by using a specially designed (spider) glove :-) and applying clustering as well as some geometric tricks. Then, particles are generated with an initial velocity and segments (constraints) are applied between them to create a graph which visually resembles a web. The web particles stick to the walls.

the Visual Web Development (VWD) course we study HTML Canvas and use vanilla JavaScript to make: physics engines, object recognition apps, augmented reality, interactive animation and simple games. Some of the last projects will include apps inspired by the Marvel cinematic universe (Dr. Strange and Spiderman):

Full course playlist:

The VWD course was taught also a second time with a totally different objective: to build an augmented reality piano that you can play in front of the webcam. In that other course we again use HTML canvas and vanilla JavaScript to implement everything without any libraries. Check this another course here:

Code:

I recommend to use Random Swap if you have a similar clustering need. Find out why it is so efficient here:

#vwd #visualwebdevelopment #imageprocessing

[Radu]

Please like this video if you found it useful :-) There is also a newer version of the course here:

[MrReneul]

SpiderRadu SpiderRadu
Does whatever a spider can

Can he swing from a web
No he can't cause he's a Radu


Watch out! Here comes SpiderRadu!