The avatar for @hellonearthis
Brett Cooper
In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage
Published
Edited
Oct 11, 2022
Insert cell
Insert cell
md`# todo

make pixel size into a slider
make width the width of the cell

Add routines for Worley, Voronoi and Dirichlet.
D3 does the last two
`
Insert cell
pix_size = 8
Insert cell
Insert cell
Insert cell
nScale = d3.scaleLinear()
.domain(d3.extent(the_data, d => d.n)) // -1 1 but expanded to suit my data generated
//.domain([-1,1]) // -1 1 but expanded to suit my data generated
.range([0,255])
Insert cell
Insert cell
xScale = d3.scaleLinear()
.domain([0,width])
.range([0,1])
Insert cell
yScale = d3.scaleLinear()
.domain([0,height])
.range([0,1])
Insert cell
Insert cell
Insert cell
viewof SVG2_filter = {
const svg = d3.create('svg').attr("width", width).attr("height", height)
const main = svg.append("g").attr('id','main2F')
let s = main.selectAll('rect')
.data(the_data2)
.join("rect")
.attr('stroke','none') // to show rects
.attr("x", d => d.x)
.attr("y", d => d.y)
.attr("width", pix_size)
.attr("height", pix_size)
.attr('fill',d => {
let c = (d.n <= 0.1)? -1 : d.n // due to the scale routine colour is define by -1 1
return `rgb(${nScale(c)},${nScale(c)},${nScale(c)})`})
return svg.node()
}


Insert cell
the_data2 = {
noisy.seed(420)
let yoff=0
let points =[]
for(let y=1;y<=height;y+=pix_size){ // y
let xoff = 0
for(let x=1;x<=width;x+=pix_size){ // x
points.push({x:x,y:y,n:noisy.simplex2(xoff,yoff)})
xoff+=inc
}
yoff+=inc
}
return points
}
Insert cell
Insert cell
Insert cell
control_points = 42
Insert cell
Insert cell
function dist(x1,y1,x2,y2) {
return Math.sqrt( (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2) );
}
Insert cell
Insert cell
Insert cell
points = {let cp = []
for(let i=0;i<control_points;i++){
cp.push([d3.randomInt(0,width)(), d3.randomInt(0,height)()])
}
return cp
}
Insert cell
delaunay = d3.Delaunay.from(points)
Insert cell
delaunay.halfedges
Insert cell
delaunay.hull
Insert cell
delaunay.triangles
Insert cell
Insert cell
delaunay.inedges
Insert cell
delaunay.neighbors(0)
Insert cell
delaunay.render() // no context = SVG path
Insert cell
delaunay.renderHull() //
Insert cell
delaunay.renderTriangle(1) //
Insert cell
delaunay.renderPoints() //
Insert cell
delaunay.hullPolygon() //
Insert cell
delaunay.trianglePolygons() //
Insert cell
delaunay.trianglePolygon(7) //
Insert cell
delaunay.update() // Updates the triangulation after the points have been modified in-place.
Insert cell
voronoi = delaunay.voronoi([0, 0, width, height]); // [xmin, ymin, xmax, ymax].
Insert cell
[voronoi.xmin, voronoi.ymin, voronoi.xmax, voronoi.ymax]
Insert cell
voronoi.delaunay
Insert cell
voronoi.circumcenters //
Insert cell
voronoi.vectors //
Insert cell
voronoi.contains(7, 142, 327) // Returns true if the cell with the specified index i contains the specified point ⟨x, y⟩. (This method is not affected by the associated Voronoi diagram’s viewport
Insert cell
voronoi.neighbors(7) //
Insert cell
voronoi.render() //
Insert cell
voronoi.renderBounds() //
Insert cell
voronoi.renderCell(7) //
Insert cell
voronoi.cellPolygons() //
Insert cell
voronoi.cellPolygon(7) //
Insert cell
voronoi.update() //
Insert cell
Insert cell
Insert cell
noisejs = require('https://bundle.run/noisejs@2.1.0')
Insert cell
noisy = new noisejs.Noise(42)
Insert cell
height = 512
Insert cell
width = 512
Insert cell
Insert cell
// osn = require('https://bundle.run/open-simplex-noise@2.5.0')
Insert cell
_ = require('lodash')
Insert cell
d3 = require("d3", "d3-delaunay")
Insert cell
import {perlin2 as noise} from "@mbostock/perlin-noise"
Insert cell
import {Range, Select} from "@observablehq/inputs"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more