Skip to content

Instantly share code, notes, and snippets.

@bryik

bryik/.block

Last active December 8, 2016 14:27
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 bryik/9641a83216553bf859a8af46a6f7f3f1 to your computer and use it in GitHub Desktop.
Save bryik/9641a83216553bf859a8af46a6f7f3f1 to your computer and use it in GitHub Desktop.
Download ZIP
Sin(e^x) with Meshline
Raw
.block
license: mit
Raw
readme.md

I'm not sure what the best way to plot functions in Three.js/A-Frame is, so here's an attempt to plot sin(e^x) using the Meshline component.

Meshline's 'path' attribute takes a series of points and draws lines between them. So the idea here is to generate a ton of points in the form (x, f(x), 0). The last coordinate is 0 because the plot is constrained to a plane. The difference in x between consecutive points is arbitrarily set to 0.001.

This method is pretty inefficient for many functions (e.g. linear functions really only need two points) and probably fails for functions whose domains are not defined over the interval being plotted.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sin(e^x) with Meshline</title>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://rawgit.com/andreasplesch/aframe-meshline-component/master/dist/aframe-meshline-component.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-entity id='line' position='-5 2 -4' meshline="lineWidth: 1; path: 0 0 0, 5 0 0; color: #E20049;"></a-entity>
<a-plane position="0 0 -3" rotation="-90 0 0" width="4" height="4" color="black"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
<!-- Generate and set path -->
<script type="text/javascript">
var points = [];
var step = 0.001 // increment between points
var stop = 10;
for (var i = 0; i < stop; i += step) {
// sin(e^i)
points.push(i + ' ' + Math.sin(Math.pow(Math.E, i)) + ' ' + 0)
}
var line = document.querySelector('#line')
var path_string = points.join();
line.setAttribute('meshline', 'path', path_string)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment