d3/drag3 .org source
#+title: d3 draggable object example #3 -- parametric
#
# org-publish options
# H:2 controls section numbering.
# number top-level and second-level headings only
# ^:{} require a_{b} before assuming that b should be subscripted.
# without this option a_b will automatically subscript b.
#+options: ^:{}
#
# options used exclusively by emacs
#+startup: showall
#
# options used exclusively by the html exporter
#+language: en
#+infojs_opt: view:showall toc:nil ltoc:nil mouse:#ffc0c0 path:/ext/orginfo/org-info.js
#+html_head: <script type="text/javascript" src="/web/ext/d3/d3.v3.min.js"></script>
#+html_head: <script type="text/javascript" src="point.js"></script>
#+html_head: <script type="text/javascript" src="fx.js"></script>
#+html_head: <script type="text/javascript" src="fx_view.js"></script>
#+html_head: <script type="text/javascript" src="parametric-drag-example.js"></script>
#+html_head: <link rel="stylesheet" type="text/css" href="/web/css/notebook.css" />
#+html_link_home: ../../index.html
#+html_link_up: ../../index.html
* Introduction
This page uses the same technique as example /#2/ (file:../drag2/index.org),
except we demonstrate parametric dragging along a curve
- source :: org-mode source for this page is here: file:index-src.org
* Prerequisites
As for example /#1/ (file:../drag1/index.org)
* Demo
(box appears below if-and-only-if publishing to html)
#+begin_export html
<div id="frame" style="border: 1px solid blue; max-width: 60em"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
#+end_export
* Procedure
** Create javascript file ~point.js~
This file contains convenience subroutines for working with (x,y) coordinates
- pt.scale_pt
- pt.add_pt
- pt.distance_squared
- pt.find_closest
#+include: "point.js" src js -n
** Create javascript file ~fx.js~
This contains some utility procedures for working with functions
of one variable
#+include: "fx.js" src js -n
** Create javascript file ~fx_view.js~
This file contains subroutines for managing svg elements (as d3 selections)
that display a function f(x)
#+include: "fx_view.js" src js -n
** Create javascript file ~parametric-drag-example.js~:
This program:
- draws the cubic polynomial $f(x) = x^2(x - 0.6)$
- draws a draggable filled circle that's constrained to coordinates $(x,f(x))$
#+include: parametric-drag-example.js src js -n
** Load ~.js~ files in html header
Tell org-mode's html generator to load ~d3~ and ~parametric-drag-example.js~
when it generates this page's html ~<head>~ element.
We did the same thing in example /#2/.
At the top of the ~.org~ file:
#+begin_example
,#+html_head: <script type="text/javascript" src="/ext/d3/d3.js"></script>
,#+html_head: <script type="text/javascript" src="point.js"></script>
,#+html_head: <script type="text/javascript" src="fx.js"></script>
,#+html_head: <script type="text/javascript" src="fx_view.js"></script>
,#+html_head: <script type="text/javascript" src="parametric-drag-example.js"></script>
#+end_example
then this embedded javascript runs (see browser dev console)..
#+begin_example
,#+begin_export html
<div id="frame" style="border: 1px solid blue; max-width: 60em"></div>
<script type="text/javascript">
window.onload = function() { ex.start(this); }
</script>
,#+end_export
#+end_example
Author: Roland Conybeare
Created: 2024-09-08 Sun 18:01
Validate