An example of creating and updating expressions with the Desmos API to make a color-shifting timer. Accompanies this post.
Last active
October 18, 2015 15:41
-
-
Save ctlusto/ee07fe718230cd4f71f4 to your computer and use it in GitHub Desktop.
Creating and Updating Expressions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Working with Expressions</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="calculator"></div> | |
| <script src="//www.desmos.com/api/v0.5/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Create a calculator instance and kick things off | |
| var calc = Desmos.Calculator(document.getElementById('calculator')); | |
| setup(); | |
| d3.timer(update); // https://github.com/mbostock/d3/wiki/Transitions#d3_timer | |
| // A global variable ಠ_ಠ for the hsl hue parameter | |
| var hue = 1; | |
| // Set the expressions initially | |
| function setup() { | |
| // Array of initial expression states | |
| var expressions = [ | |
| { | |
| id: 'color_circles', | |
| latex: 'x^2 + y^2 \\leq [1...6]^2', | |
| color: d3.hsl(hue, 1, 0.5) // https://github.com/mbostock/d3/wiki/Colors#hsl | |
| }, | |
| { | |
| id: 'timer_circles', | |
| latex: '([1...6]cos t, [1...6]sin t)', | |
| color: Desmos.Colors.BLACK, | |
| domain: {min: 0, max: 0} | |
| }, | |
| { | |
| id: 'blinking_circle', | |
| latex: 'r \\leq 1', | |
| color: Desmos.Colors.BLACK | |
| } | |
| ]; | |
| calc.setExpressions(expressions); | |
| } | |
| // Update the states with (some) new values | |
| function update(time) { | |
| var sec = Math.floor(time / 1000) % 60; | |
| // New expression states | |
| var updatedExpressions = [ | |
| { | |
| id: 'color_circles', | |
| color: d3.hsl(((hue += 1) % 360), 1, 0.5) | |
| }, | |
| { | |
| id: 'timer_circles', | |
| domain: {min: 0, max: Math.PI * sec / 30} | |
| }, | |
| { | |
| id: 'blinking_circle', | |
| hidden: sec % 2 | |
| } | |
| ]; | |
| calc.setExpressions(updatedExpressions); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body, | |
| #calculator { | |
| width: 100; | |
| height: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment