Making 3D Holographic Illusion using Pepper’s Ghost Pyramid.
Holograms always intrigued the human mind. With the development of technology, it’s use is not only limited to gaming and films, it is even considered as an instructional and diagnostic tool in the field of medicine.
I came across this tutorials on YouTube by Power Point Spice ,where by using PowerPoint she has created her face appear as a hologram.That was really cool !!!.
Since you can make anything of your choice appear in a similar way, I have put all my effort to create a very simple sketch of mine to appear as a holographic image using p5.js WEBGL. So, this is my first successful attempt which I want to share in this tutorial.
What is a Hologram?
A hologram is an image which appears to be three dimensional and can be seen by the naked eye from all sides.The real hologram can be seen without the aid of any special lenses,screens or props. But there are holographic images produced by means of lenses to create stage illusions like Pepper’s Ghost are not true holograms, they are called holographic illusion.
We will be using Pepper’s Ghost Pyramid to create our holographic illusion. Once the placement of images on the screen is done .The projection pyramid uses the principle explained below.
When a image from the screen is reflected at an angle of 45 degrees on a transparent screen , a reflected virtual 3D image with depth is created .
With the understanding of this principle, let’s start by creating a new project using p5.js Web Editor. A new project in the p5js Web Editor has following two functions. The setup() function runs only once and draw() function runs in a loop.In the function setup() , add the parameter of WEBGL in the createCanvas(). Also in function draw(),change the background() to 0 .
In the function draw(),create a 3D box and put it inside the push() and the pop() ,then translate it to x-axis of 0 and y-axis of 150.The box appear below in the y-axis ,since the origin is in the centre and it increases positively downwards.
Now to make the box appear up in the y-axis ,create a box at the same distance from the centre in the negatively upwards.
CHALLENGE:
Try, translating the rest of the boxes in the x-axis as shown.
Make the global variable of angle and initiate it with 0. Then in the function draw() increment the angle.
Now , put the variable angle in the function rotateX(),rotateY() and rotateZ().
Make the global variables of ‘r’ radial coordinate, ‘a’ polar axis and ‘s’ spacing. And assign them with initiating values. In the function draw() ,increment the values of ‘a’ and ‘s’ .Make another push() and pop() .Calculate the x and y using trigonometric formula of sin and cos .Use the x and y values in the ellipse() function .The dot will appear to be moving on the canvas ,but not on the boxes.
To make the 2D design appear on 3D boxes. Make the global variable ‘art’. Use the variable ‘art’ to call the function createGraphics(). Now use it in fill() and ellipse() of the 2D design .
Use the variable ‘art’ in the texture() function of the 3D boxes.The 2D design is now starts to appear on the 3D.
Finally , time to test our Holographic illusion. Place the holographic pyramid in the middle .(Holographic pyramid is available from Amazon).
Moment of truth ….Yes!!! it worked .Enjoy making your own designs and test them out.
You can check the solution code here. Some other cool ideas for you .
Resources:
1-Getting Started with p5.js- A book about programming for in p5.js.
2-p5.js Reference:References for all the p5.js functions.
3-Holography : Reference from Wikipedia .
4-Science Behind Pepper’s Ghost Illusion.
5- Byte Size Coding :Website with free resources tutorials for kids and beginners.
6-Byte Size Coding YouTube Channel:YouTube Channel with lots of fun ideas.
