Skip to content

Instantly share code, notes, and snippets.

@bryik bryik/.block
Last active Dec 8, 2016

Embed
What would you like to do?
Sin(e^x) with Meshline
license: mit

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.

<!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
You can’t perform that action at this time.