Skip to content

Instantly share code, notes, and snippets.

@kbseah

kbseah/README.md

Last active January 10, 2017 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kbseah/374b541438854d0594449dc1ddceab36 to your computer and use it in GitHub Desktop.
Save kbseah/374b541438854d0594449dc1ddceab36 to your computer and use it in GitHub Desktop.
Download ZIP
Pulfrich effect - Pendulum demo
Raw
README.md

Pulfrich effect - Pendulum demo

The Pulfrich effect is an optical illusion where objects moving in a single plane also appear to have depth, because the processing of the visual signal in one eye is delayed, e.g. by holding a filter in front of one eye to dim the light reaching that eye but not the other.

To view the animation you'll need to make such a filter. One simple method is to take a cheap pair of sunglasses and pop the lens out of one side.

What also works, but not so well, is to fan out the fingers of one hand in front of one eye and rapidly wave the hand up and down to occlude the image with a "strobe" effect.

What to expect

Without filters, the disk appears to be oscillating side-to-side in the same plane.

With filter on one eye, the disk appears to be alternately swinging in front and behind of the rectangle in the middle.

Further information

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="author" content="Brandon Seah">
<body>
<svg class="chart"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
// DEMO 1 - Pendulum
// Define chart dimensions
var height=400;
var width=800;
// Define starting position of the moving element
var posInitX=0;
var posInitY=0;
var speedParam=0.05;
time = 0;
// Define chart object for demo 1
var chart = d3.select(".chart")
.attr("height",height)
.attr("width",width)
.append("g");
// Background color light yellow
chart.append("rect")
.attr("height",height)
.attr("width",width)
.attr("fill","#feffe7");
// Stationary rod in the middle for visual reference
chart.append("rect")
.attr("class","stationary")
//.attr("id","stationary")
.attr("height",200)
.attr("width",50)
.attr("x",width/2-50/2)
.attr("y",height-200)
.attr("fill","blue")
.attr("opacity","0.5");
// The moving pendulum disk
chart.append("circle")
.attr("class","moving")
.attr("r",150)
.attr("cx",posInitX)
.attr("cy",posInitY+150)
.attr("fill","blue")
.attr("opacity","0.5");
// Update animation for each time step
function updateMoving () {
var newPosX = width*(1+Math.cos(time/Math.PI))/2;
chart.select(".moving")
.attr("cx",newPosX);
}
// Animate using base Javascript function
// Ref: https://www.ericbullington.com/blog/2012/10/27/d3-oclock/
setInterval(function() {
time = time + speedParam ;
return updateMoving();
}, 10);
</script>
</body>
@kbseah
Copy link
Author

kbseah commented Jan 10, 2017

Add button to speed up and slow down the pendulum

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment