Water waves / Mark McClure

I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization. I'm happy to be part of the first Observable Ambassador's cohort.

Workspace

Public

Math

Edited

May 8, 2023

34 stars

Math

A Julia set on the Riemann sphere The Z-Curve Barnsley's fern A stochastic digraph IFS algorithm Self-affine tiles The Twindragon The Eisenstein fractions A self-affine tile with holes Self-affine tiles via polygon merge Golden rectangle fractals Bifurcation diagram with critical curves The tame twindragon Illustrations for the proof of Green's theorem Non-orientability of a Mobius strip Examples of parametric surfaces Penrose tiling The extended unit circle Penrose three coloring Newtons's method on the Riemann sphere Conic sections Divisor graphs The dance of Earth and Venus Iterating multiples of the sine function Borderline fractals Self-similar intersections Box-counting dimension examples Mandelbrot by dimension Inverse iteration for quadratic Julia sets Integer Apollonian Packings Illustrations of two-dimensonal heat flow The logistic bifurcation locus The eleven unfoldings of the cube A unimodal function with fractal level curves Green's theorem and polygonal area The geometry and numerics of first order ODEs The xxx^xxx-spindle Animated beats Rauzy Fractals Hilbert's coordinate functions Pluck Not Pi Drum strike The Koch snowflake Fractalized square A Taylor series about π/4\pi/4π/4 PlotX3D Hyperboloid A PlotX3D animation Modular arithmetic in 5th grade art Simple S-I-R Model The Poisson Kernel Poly-gaskets Classification of 2D linear systems via trace and determinant Julia sets and the Mandelbrot set

Water waves

Fourier Series Disks for a solid of revolution Orbit detection for the Mandelbrot set Tracing a path on a sphere Plot for mathematicians Functions of two variables Partial derivatives Dijkstra's algorithm on an RGG Gradient ascent Unfolding polyhedra Tangent plane to a level surface A strange discontinuity Examples of level surfaces McMullen carpets Hills and valleys The definition of ⇒Double and iterated integrals MST in an RGG Trees are bipartite Fractal typesetting d3.hierarchy and d3.tree K23 is Planar Polar Coordinates Parametric region generator Parametric Plot 2D Contour plots Greedy graph coloring Graph6 A few hundred interesting graphs The Kings Problem First order, autonomous systems of ODEs Runge-Kutta for systems of ODEs

div = html`<div id="demo_container" class="demo_container">

<input class="slider" type="range" id="A" name="A"

min="0" max="1" step="0.01">

</span>

</div>

<input class="slider" type="range" id="alpha" name="alpha"

min="0" max="1" step="0.01">

<span class="slider_tex">${tex`\alpha=`}</span>

</span>

</div>

<input class="slider" type="range" id="beta" name="beta"

min="0" max="5" step="0.01">

</span>

</div>

<label>

<input style="width:30px" type="checkbox" id="toggle_circles">Highlight two circles</input>

</label>

</div>

</div>

</div>`

{

let container = d3.select(div);

let svg = container.select("svg");

let xmin = -10;

let xmax = 10;

let dx = 1;

let ymin = -6;

let ymax = 4;

let dy = 1;

let aspect = (ymax - ymin) / (xmax - xmin);

let grid = d3

.range(ymin, dy, dy)

.map((y) => d3.range(xmin - dx, xmax + 2 * dx, dx).map((x) => [x, y]));

grid = grid.reduce(function (accumulated, currentValue) {

return accumulated.concat(currentValue);

}, []);

let A0 = 0.5;

let A = A0;

let alpha0 = 0.5;

let alpha = alpha0;

let beta0 = 3;

let beta = beta0;

let t0 = 0;

let pts = grid.map((xy) => p(A, alpha, beta, xy[0], xy[1], t0));

let outline = pts.slice(pts.length - (xmax - xmin + 3));

outline.push([xmax, ymin]);

outline.push([xmin, ymin]);

let xScale, yScale, rScale, pts_to_path;

function setup() {

svg.selectAll("*").remove();

// let width = 0.8*width;

let height = aspect * width;

svg.attr("height", height);

xScale = d3.scaleLinear().domain([xmin, xmax]).range([0, width]);

rScale = d3

.scaleLinear()

.domain([0, xmax - xmin])

.range([0, width]);

yScale = d3.scaleLinear().domain([ymin, ymax]).range([height, 0]);

pts_to_path = d3

.line()

.x(function (d) {

return xScale(d[0]);

})

.y(function (d) {

return yScale(d[1]);

});

svg

.append("path")

.attr("d", pts_to_path(outline))

.attr("fill", "lightblue")

.attr("stroke", "blue")

.attr("stroke-width", "2px");

let circles = svg

.selectAll("circle")

.data(pts)

.join("circle")

.attr("class", "water")

.attr("cx", function (d) {

return xScale(d[0]);

})

.attr("cy", function (d) {

return yScale(d[1]);

})

.attr("r", 3)

.attr("fill", "black")

.attr("stroke", "black")

.attr("stroke-width", 1);

let to_highlight = circles

.filter(function (d, i) {

let i1 = Math.round(pts.length - (xmax - xmin + 3) / 2);

let i2 = 3 * Math.round(pts.length / 4 - (xmax - xmin + 3) / 2);

return i == i1 || i == i2;

})

.attr("class", "highlight");

}

function start(t) {

pts = grid.map((xy) => p(A, alpha, beta, xy[0], xy[1], t / 1000));

outline = pts.slice(grid.length - (xmax - xmin + 3));

outline.push([xmax, ymin]);

outline.push([xmin, ymin]);

svg

.selectAll("path")

.transition()

.duration(0)

.attr("d", pts_to_path(outline));

svg

.selectAll("circle")

.data(pts)

.transition()

.duration(0)

.attr("cx", function (d) {

return xScale(d[0]);

})

.attr("cy", function (d) {

return yScale(d[1]);

});

}

function p(A, alpha, beta, x0, y0, t) {

let r = A * Math.exp(alpha * y0);

let arg = alpha * x0 - beta * t;

let x = x0 + r * Math.cos(arg);

let y = y0 + r * Math.sin(arg);

return [x, y];

}

setup();

let timer = d3.timer(start);

container

.select("#A")

.property("value", A0)

.on("input", function () {

A = parseFloat(d3.select("#A").property("value"));

container.select("#A_value").text(d3.format("0.2f")(A));

});

container.select("#A_value").text(d3.format("0.2f")(A));

container

.select("#alpha")

.property("value", alpha0)

.on("input", function () {

alpha = parseFloat(d3.select("#alpha").property("value"));

container.select("#alpha_value").text(d3.format("0.2f")(alpha));

});

container.select("#alpha_value").text(d3.format("0.2f")(alpha));

container

.select("#beta")

.property("value", beta0)

.on("mouseup", function () {

beta = parseFloat(d3.select("#beta").property("value"));

container.select("#beta_value").text(d3.format("0.2f")(beta));

});

container.select("#beta_value").text(d3.format("0.2f")(beta));

container

.select("#toggle_circles")

.property("checked", false)

.on("click", function () {

if (d3.select("#toggle_circles").property("checked")) {

d3.selectAll("circle.highlight").attr("r", 6).attr("fill", "yellow");

} else {

d3.selectAll("circle.highlight").attr("r", 3).attr("fill", "black");

}

});

}

html`<style>

div.demo_container {

background-color: #f1f1f1;

}

div.slider_container {

padding: 5px;

}

input.slider {

display: inline !important;

width: 50% !important

}

span.slider_label {

vertical-align: 8px

}

div.svg_container {

width: 96%;

margin: 2%;

}

svg.demo {

background-color: white;

border: solid 1px lightslategray;

}

</style>`

Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more