Skip to content

Instantly share code, notes, and snippets.

@1wheel
Last active June 6, 2021 05:59
Show Gist options
  • Save 1wheel/a9a5d7cf4ea37217c8c0 to your computer and use it in GitHub Desktop.
Save 1wheel/a9a5d7cf4ea37217c8c0 to your computer and use it in GitHub Desktop.
Circle Aliasing

Move mouse left/right to adjust resolution and up/down to adjust fadding. Click to reset.

var width = 500,
height = 500,
r = 450
var svg = d3.select('html')
.append('svg')
.attr({width: width, height: height})
.append('g')
.translate([10, height - 10])
svg.append('rect')
.attr({width: width, height: height, opacity: 0, y: -height})
svg.append('circle')
.attr('r', r)
.style({stroke: 'black', fill: 'none', 'stroke-width': 2})
var gridG = svg.append('g')
var trailG = svg.append('g')
var draws = 1,
drawsToSave = 20,
curY = -1
setS(20)
setInterval(step, 50)
function step(){
if (curY < 0) return
var dif = Math.pow(curX*s, 2) + Math.pow(curY*s, 2) - r*r
var incX = dif < 0
var curG = trailG.append('g').datum(draws)
curG.append('rect')
.style({stroke: '#F0F', fill: 'black', 'fill-opacity': .2, 'stroke-width': 2})
.translate([curX*s - s/2, -curY*s - s/2])
.attr({width: s, height: s})
.datum(draws)
if (incX){
curG.append('path.trail')
.attr('d', ['M', curX*s, -curY*s, 'h', s].join(' '))
.style('stroke', 'black')
curX++
} else{
curG.append('path.trail')
.attr('d', ['M', curX*s, -curY*s, 'v', s].join(' '))
.style('stroke', 'black')
curY--
}
}
function setS(newS){
while (curY >= 0){ step() }
s = newS
curX = 0
curY = Math.floor(r/s)
draws++
trailG.selectAll('g')
.style('opacity', function(d){ return d/draws*.1 })
.filter(function(d){ return draws - d > drawsToSave })
.remove()
var grid = d3.range(0, width + s, s).map(function(x){
return d3.range(0, -height -s, -s).map(function(y){
return P(x, y)
})
})
gridG.selectAll('*').remove()
gridG.dataAppend(_.flatten(grid), 'circle')
.attr('r', 1)
.translate(ƒ())
}
d3.select('svg')
.on('click', function(){
curX = 0
curY = Math.floor(r/s)
trailG.selectAll('*').remove()
})
.on('mousemove', function(){
var pos = d3.mouse(this)
drawsToSave = pos[1]/height*30
setS(pos[0]/width*100 + 8)
})
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
overflow: visible;
margin: 0px auto;
display: block;
}
.trail{
stroke: red;
opacity: .3;
}
rect{
stroke-opacity: .5;
}
html{
/*width: 960px;*/
height: 500px;
}
</style>
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script src='/1wheel/raw/5d32ecb8a54b42f53646/geometry.js'></script>
<script src='circle-lattice.js'></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment