Including a big inverting and rotating one than can apply lensing effects possibly in a vortex.
Inverting + Loupe: Boxed polka dots ⚪ (variation)
Rotation: Boxed polka dots ⚪ (variation)
Magnification: Boxed polka dots ⚪ (variation)
Black hole warp: Boxed polka dots ⚪ (variation)
Flashlight effect: Boxed polka dots ⚪ (variation)
Vortex: Boxed polka dots ⚪ (variation)
Log in to post a comment.
const grid = 10; //min=1 max=50 step=1
const margin = 5; //min=0 max=50 step=1
const diameter = .5; //min=.01 max=1 step=.01
const bigDiameter = .5 //min=0 max=1 step=.01
const topleft = 0; //min=0 max=1 step=1 (Black on white, White on black)
const randomness = 1; //min=0 max=1 step=.01
const onlyOutlines = 0; //min=0 max=1 step=1 (No, Yes)
const innerGreys = 1; //min=0 max=2 step=1 (Brighten, Neutral, Darken)
const outerGreys = 1; //min=0 max=2 step=1 (Brighten, Neutral, Darken)
const inverseBig = 1; //min=0 max=1 step=1 (No, Yes)
const rotation = 0; //min=0 max=1 step=.01
const vortex = 0; //min=-1 max=1 step=.1
//const warping = 0; //min=-1 max=1 step=.01
//const magnification = 1; //min=0 max=2 step=.01
const lensWarp = 0; //min=-1 max=1 step=.01
const lensMagnify = 1; //min=0 max=3 step=.01
const lensingLevel = 1; //min=0 max=5 step=.01
const pen = .15; //min=.01 max=1 step=.01 How thick is the pen you loaded your plotter with?
const seed = 0; //min=0 max=500 step=1 Setting seed to 0 resets it to Date.now() so it becomes a dynamic seed
// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(1);
// Seedable random number generator by David Bau: http://davidbau.com/archives/2010/01/30/random_seeds_coded_hints_and_quintillions.html
!function(a,b,c,d,e,f,g,h,i){function j(a){var b,c=a.length,e=this,f=0,g=e.i=e.j=0,h=e.S=[];for(c||(a=[c++]);d>f;)h[f]=f++;for(f=0;d>f;f++)h[f]=h[g=s&g+a[f%c]+(b=h[f])],h[g]=b;(e.g=function(a){for(var b,c=0,f=e.i,g=e.j,h=e.S;a--;)b=h[f=s&f+1],c=c*d+h[s&(h[f]=h[g=s&g+b])+(h[g]=b)];return e.i=f,e.j=g,c})(d)}function k(a,b){var c,d=[],e=typeof a;if(b&&"object"==e)for(c in a)try{d.push(k(a[c],b-1))}catch(f){}return d.length?d:"string"==e?a:a+"\0"}function l(a,b){for(var c,d=a+"",e=0;e<d.length;)b[s&e]=s&(c^=19*b[s&e])+d.charCodeAt(e++);return n(b)}function m(c){try{return o?n(o.randomBytes(d)):(a.crypto.getRandomValues(c=new Uint8Array(d)),n(c))}catch(e){return[+new Date,a,(c=a.navigator)&&c.plugins,a.screen,n(b)]}}function n(a){return String.fromCharCode.apply(0,a)}var o,p=c.pow(d,e),q=c.pow(2,f),r=2*q,s=d-1,t=c["seed"+i]=function(a,f,g){var h=[];f=1==f?{entropy:!0}:f||{};var o=l(k(f.entropy?[a,n(b)]:null==a?m():a,3),h),s=new j(h);return l(n(s.S),b),(f.pass||g||function(a,b,d){return d?(c[i]=a,b):a})(function(){for(var a=s.g(e),b=p,c=0;q>a;)a=(a+c)*d,b*=d,c=s.g(1);for(;a>=r;)a/=2,b/=2,c>>>=1;return(a+c)/b},o,"global"in f?f.global:this==c)};if(l(c[i](),b),g&&g.exports){g.exports=t;try{o=require("crypto")}catch(u){}}else h&&h.amd&&h(function(){return t})}(this,[],Math,256,6,52,"object"==typeof module&&module,"function"==typeof define&&define,"random");
Math.seedrandom(''+(seed === 0? Date.now(): seed));
// Add a seed in seedrandom, then Math.random will use this seed
// Global code will be evaluated once.
const turtle = new Turtle();
const polygons = new Polygons();
const bigSize = (200 - margin - margin);
const cellSize = bigSize / grid;
const greyscale = (greying, inverse) => {
switch(greying) {
case 2: return [[[1, pen]], [[1, 4*pen]]];
case 1: return [[[1, pen]], [[]]];
case 0: return [[[1, 2*pen]], [[]]];
}
}
const hatchOutside = greyscale(outerGreys);
const hatchInside = inverseBig == 1? greyscale(innerGreys): greyscale(innerGreys).reverse();
const bigCircleLocation = Array.from({length: 2}).map(v => randomness * ((2*Math.random()-1) * (1-bigDiameter) * bigSize / 2));
const bigCircleRadius = bigSize * bigDiameter / 2;
const bigCircle = new Path(...getRegularPolygonPoints(bigCircleRadius).map(pt => add2(bigCircleLocation, pt)));
const lensLoupe = [, ]
const transforms = [
Transpose(scale2(bigCircleLocation, -1)),
Rotate(2 * Math.PI * rotation),
//Warp(warping, bigCircleRadius),
//Magnify(magnification, bigCircleRadius),
Vortex(vortex, bigCircleRadius),
Lens(lensWarp, lensMagnify, bigCircleRadius, lensingLevel),
Transpose(bigCircleLocation)
];
// The walk function will be called until it returns false.
function walk(i) {
const col = i % grid;
const row = i / grid | 0;
const location = [cellSize*(.5-(grid/2))].map(v => [v+col*cellSize,v+row*cellSize]).pop();
const circleLocation = Array.from({length: 2}).map(v => randomness * ((2*Math.random()-1) * (1-diameter) * cellSize / 2));
const even = (col+row+topleft)%2 == 0;
if(diameter > 0) {
const circle = new Path(...getRegularPolygonPoints(diameter * cellSize / 2).map(pt => add2(circleLocation, add2(location, pt))));
applyMagic(polygons, turtle, circle, bigCircle, onlyOutlines == 1? []: even? hatchOutside[0]: hatchOutside[1], onlyOutlines == 1? []: even? hatchInside[1]: hatchInside[0], onlyOutlines == 1, cellSize / 4 | 0, transforms);
}
const square = new Path(...getRegularPolygonPoints(Math.SQRT2 * cellSize / 2, 4, Math.PI/4).map(pt => add2(location, pt)));
applyMagic(polygons, turtle, square, bigCircle, onlyOutlines == 1? []: even? hatchOutside[1]: hatchOutside[0], onlyOutlines == 1? []: even? hatchInside[0]: hatchInside[1], onlyOutlines == 1, cellSize * 5, transforms);
return i < grid**2-1;
}
function applyMagic(polygons, turtle, circle, bigCircle, hatchOutside, hatchInside, outline, pointCountIncrease, transforms) {
let intersections = circle.getIntersections(bigCircle, true);
if(intersections.length > 0) {
const paths = circle.splitByPath(bigCircle, true);
paths[0].drawPolygon(polygons, turtle, hatchOutside, outline); //outside
paths[1].increasePointCount(pointCountIncrease).drawPolygon(polygons, turtle, hatchInside, outline, transforms); //inside
return;
}
if(bigCircle.contains(circle.pts[0])) {
circle.increasePointCount(pointCountIncrease).drawPolygon(polygons, turtle, hatchInside, outline, transforms); //inside
return;
}
circle.drawPolygon(polygons, turtle, hatchOutside, outline); //outside
}
function Transpose(pt) { return (a) => add2(pt, a); }
function Rotate(angle) { const rot = rot2(angle); return (a) => trans2(rot, a); }
function Warp(amount, radius) { return (a) => {
const length = len2(a);
if(approx1(length, 0)) return a;
const newLength = Math.min(radius, Math.max(0, length + (radius - length) * amount));
return scale2(a, newLength/length);
}
}
function Magnify(amount, radius) { return (a) => {
const length = len2(a);
if(approx1(length, 0) || approx1(length - radius, 0, .1)) return a;
const newLength = Math.min(radius, Math.max(0, length * amount));
return scale2(a, newLength/length);
}
}
function Lens(amountWarp, amountMagnify, radius, level) {
const warp = Warp(amountWarp, radius);
const magnification = Magnify(amountMagnify, radius);
return (pt) => {
const length = len2(pt);
return lerp2(magnification(pt), warp(pt), (length/radius)**level);
}
}
function Vortex(turns, radius) { return (a) => {
const amount = len2(a)/radius;
return trans2(rot2(((1-amount)**2) * turns * 2 * Math.PI), a);
}
}
function Path(...pts) {
const tourize = (p) => p.pts.concat([p.pts[0]]);
const intersect_info2 = (as, ad, bs, bd) => {
const d = [bs[0] - as[0], bs[1] - as[1]];
const det = bd[0] * ad[1] - bd[1] * ad[0];
if(det === 0) return false;
const res = [(d[1] * bd[0] - d[0] * bd[1]) / det, (d[1] * ad[0] - d[0] * ad[1]) / det];
return [...res, add2(as, scale2(ad, res[0]))];
}
//different return than my usual segment_intersect2
const segment_intersect2 = (a,b,c,d, inclusive = true) => {
const i = intersect_info2(a, sub2(b, a), c, sub2(d, c));
if(i === false) return false;
const t = inclusive? 0<=i[0]&&i[0]<=1&&0<=i[1]&&i[1]<=1: 0<i[0]&&i[0]<1&&0<i[1]&&i[1]<1;
return t?i:false;
}
class Path {
constructor(...pts) {
this.pts = pts;
}
draw(turtle, asTour = false, transforms = []) {
(asTour? tourize(this): this.pts).map(pt => transforms.reduce((a, c) => c(a), pt)).forEach((pt, i) => turtle[i == 0? 'jump':'goto'](pt));
}
drawPolygon(polygons, turtle, hatch = [], outline = false, transforms = []) {
const p = polygons.create();
if(transforms.length == 0) {
p.addPoints(...this.pts);
} else {
p.addPoints(...this.pts.map(pt => transforms.reduce((a, c) => c(a), pt)));
}
hatch.forEach(v => p.addHatching(...v));
if(outline) p.addOutline();
polygons.draw(turtle, p);
}
increasePointCount(n = 2) {
this.pts = this.pts.flatMap((pt, i, a) =>
Array.from({length: n})
.flatMap((w, j) => [lerp2(pt, a[(i+1)%a.length], j/n)])
);
return this;
}
contains(pt) {
return tourize(this).map((v, i, a) => intersect_info2(v, sub2(a[(i+1)%a.length], v), pt, [pt[0], Number.MAX_SAFE_INTEGER])).filter(ii => ii !== false && 0 <= ii[0] && ii[0] < 1 && 0 < ii[1]).length % 2 == 1;
}
getIntersections(path, asTour = false) { //intersection
const path1 = asTour? tourize(this): this.pts;
const path2 = asTour? tourize(path): path.pts;
return path1.flatMap((pt1, i1) =>
i1 == path1.length - 1? [[false]]: path2.map((pt2, i2) =>
i2 == path2.length - 1? [false]:
[segment_intersect2(pt1, path1[i1 + 1], pt2, path2[i2 + 1]), i1, i2]
)
).filter(v => v[0] !== false);
}
splitByPath(path, asTour = false) { //only works for convex polygons, not concaves... And only for 2 intersections, not 4 with e.g. overlapping ellipses where they look like a + sign
const iss = this.getIntersections(path, asTour);
if(iss.length < 2) return false;
//console.log('inter', iss);
const pts_one = [];
const joined = [];
for(let i = 0; i <= iss[0][1]; i++) {
pts_one.push(this.pts[i]);
}
pts_one.push(iss[0][0][2]);
let pts_one_in_path = approx1(this.pts[0], iss[0][0][2])? null: (path.contains(this.pts[0])? true: false);
//should we go left or right? convex so this works
const direction = (() => {
if(iss[0][2] != iss[1][2]) {
return this.contains(path.pts[(iss[0][2] + 1) % path.pts.length])? 1: -1;
}
const directionToNextIntersection = sub2(iss[1][0][2], iss[0][0][2]);
const directionToNextNodeOfPath = sub2(path.pts[(iss[0][2] + 1) % path.pts.length], path.pts[iss[0][2]]);
return dot2(directionToNextIntersection, directionToNextNodeOfPath) < 0? -1: 1;
})();
const startAt = iss[0][2] + (direction == 1? 1: 0);
const endAtNotInclusive = (iss[1][2] - (direction == 1? 0: 1) + path.pts.length) % path.pts.length;
if(iss[0][2] != iss[1][2]) {
for(let i = startAt; i != endAtNotInclusive; i = (i + direction + path.pts.length) % path.pts.length) {
joined.push(path.pts[i]);
}
}
joined.forEach(pt => pts_one.push(pt));
pts_one.push(iss[1][0][2]);
for(let i = iss[1][1] + 1; i < this.pts.length; i++) {
pts_one.push(this.pts[i]);
}
if(pts_one_in_path === null) pts_one_in_path = path.contains(iss[1][1] + 1);
const pts_two = [iss[0][0][2]];
for(let i = iss[0][1] + 1; i <= iss[1][1]; i++) {
pts_two.push(this.pts[i]);
}
pts_two.push(iss[1][0][2]);
const result = [new Path(...pts_one), new Path(...pts_two.concat(joined.reverse()))];
return pts_one_in_path? result.reverse(): result;
}
}
return new Path(...pts);
}
function getRegularPolygonPoints(r, steps = null, rotatedStart = 0) { return Array.from({length: steps === null? Math.max(12, 2 * Math.PI * r): steps}).map((v, i, a) =>[rotatedStart + Math.PI * 2 * i / a.length].map(v => [r * Math.sin(v), r * -Math.cos(v)]).pop()); }
/// Below is the standard lib I just copy paste under almost all my turtles
function approx1(a,b,delta=0.0001) { return -delta < a-b && a-b < delta }
////////////////////////////////////////////////////////////////
// 2D Vector Math utility code - Created by several Turtletoy users
////////////////////////////////////////////////////////////////
function norm2(a) { return scale2(a, 1/len2(a)); }
function add2(a, b) { return [a[0]+b[0], a[1]+b[1]]; }
function sub2(a, b) { return [a[0]-b[0], a[1]-b[1]]; }
function mul2(a, b) { return [a[0]*b[0], a[1]*b[1]]; }
function scale2(a, s) { return [a[0]*s,a[1]*s]; }
function lerp2(a,b,t) { return [a[0]*(1-t) + b[0]*t, a[1]*(1-t) + b[1]*t]; }
function lenSq2(a) { return a[0]**2+a[1]**2; }
function len2(a) { return Math.sqrt(lenSq2(a)); }
function rot2(a) { return [Math.cos(a), -Math.sin(a), Math.sin(a), Math.cos(a)]; }
function trans2(m, a) { return [m[0]*a[0]+m[2]*a[1], m[1]*a[0]+m[3]*a[1]]; } //Matrix(2x1) x Matrix(2x2)
function dist2(a,b) { return Math.hypot(...sub2(a,b)); }
function dot2(a,b) { return a[0]*b[0]+a[1]*b[1]; }
function cross2(a,b) { return a[0]*b[1] - a[1]*b[0]; }
function multiply2(a2x2, a) { return [(a[0]*a2x2[0])+(a[1]*a2x2[1]),(a[0]*a2x2[2])+(a[1]*a2x2[3])]; } //Matrix(2x2) x Matrix(1x2)
function intersect_info2(as, ad, bs, bd) {
const d = [bs[0] - as[0], bs[1] - as[1]];
const det = bd[0] * ad[1] - bd[1] * ad[0];
if(det === 0) return false;
const res = [(d[1] * bd[0] - d[0] * bd[1]) / det, (d[1] * ad[0] - d[0] * ad[1]) / det];
return [...res, add2(as, scale2(ad, res[0]))];
}
function intersect_ray2(a, b, c, d) {
const i = intersect_info2(a, b, c, d);
return i === false? i: i[2];
}
function segment_intersect2(a,b,c,d, inclusive = true) {
const i = intersect_info2(a, sub2(b, a), c, sub2(d, c));
if(i === false) return false;
const t = inclusive? 0<=i[0]&&i[0]<=1&&0<=i[1]&&i[1]<=1: 0<i[0]&&i[0]<1&&0<i[1]&&i[1]<1;
return t?i[2]:false;
}
function approx2(a,b,delta=0.0001) { return len2(sub2(a,b)) < delta }
function eq2(a,b) { return a[0]==b[0]&&a[1]==b[1]; }
function clamp2(a, tl, br) { return [Math.max(Math.min(br[0], a[0]), tl[0]), Math.max(Math.min(br[1], a[1]), tl[1])]; }
function nearSq2(test, near, delta = .0001) {
return near[0] - delta < test[0] && test[0] < near[0] + delta &&
near[1] - delta < test[1] && test[1] < near[1] + delta;
}
////////////////////////////////////////////////////////////////
// Polygon Clipping utility code - Created by Reinder Nijhoff 2019
// (Polygon binning by Lionel Lemarie 2021)
// https://turtletoy.net/turtle/a5befa1f8d
////////////////////////////////////////////////////////////////
function Polygons(){const t=[],s=25,e=Array.from({length:s**2},t=>[]),n=class{constructor(){this.cp=[],this.dp=[],this.aabb=[]}addPoints(...t){let s=1e5,e=-1e5,n=1e5,h=-1e5;(this.cp=[...this.cp,...t]).forEach(t=>{s=Math.min(s,t[0]),e=Math.max(e,t[0]),n=Math.min(n,t[1]),h=Math.max(h,t[1])}),this.aabb=[s,n,e,h]}addSegments(...t){t.forEach(t=>this.dp.push(t))}addOutline(){for(let t=0,s=this.cp.length;t<s;t++)this.dp.push(this.cp[t],this.cp[(t+1)%s])}draw(t){for(let s=0,e=this.dp.length;s<e;s+=2)t.jump(this.dp[s]),t.goto(this.dp[s+1])}addHatching(t,s){const e=new n;e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]);const h=Math.sin(t)*s,o=Math.cos(t)*s,a=200*Math.sin(t),i=200*Math.cos(t);for(let t=.5;t<150/s;t++)e.dp.push([h*t+i,o*t-a],[h*t-i,o*t+a]),e.dp.push([-h*t+i,-o*t-a],[-h*t-i,-o*t+a]);e.boolean(this,!1),this.dp=[...this.dp,...e.dp]}inside(t){let s=0;for(let e=0,n=this.cp.length;e<n;e++)this.segment_intersect(t,[.1,-1e3],this.cp[e],this.cp[(e+1)%n])&&s++;return 1&s}boolean(t,s=!0){const e=[];for(let n=0,h=this.dp.length;n<h;n+=2){const h=this.dp[n],o=this.dp[n+1],a=[];for(let s=0,e=t.cp.length;s<e;s++){const n=this.segment_intersect(h,o,t.cp[s],t.cp[(s+1)%e]);!1!==n&&a.push(n)}if(0===a.length)s===!t.inside(h)&&e.push(h,o);else{a.push(h,o);const n=o[0]-h[0],i=o[1]-h[1];a.sort((t,s)=>(t[0]-h[0])*n+(t[1]-h[1])*i-(s[0]-h[0])*n-(s[1]-h[1])*i);for(let n=0;n<a.length-1;n++)(a[n][0]-a[n+1][0])**2+(a[n][1]-a[n+1][1])**2>=.001&&s===!t.inside([(a[n][0]+a[n+1][0])/2,(a[n][1]+a[n+1][1])/2])&&e.push(a[n],a[n+1])}}return(this.dp=e).length>0}segment_intersect(t,s,e,n){const h=(n[1]-e[1])*(s[0]-t[0])-(n[0]-e[0])*(s[1]-t[1]);if(0===h)return!1;const o=((n[0]-e[0])*(t[1]-e[1])-(n[1]-e[1])*(t[0]-e[0]))/h,a=((s[0]-t[0])*(t[1]-e[1])-(s[1]-t[1])*(t[0]-e[0]))/h;return o>=0&&o<=1&&a>=0&&a<=1&&[t[0]+o*(s[0]-t[0]),t[1]+o*(s[1]-t[1])]}};return{list:()=>t,create:()=>new n,draw:(n,h,o=!0)=>{reducedPolygonList=function(n){const h={},o=200/s;for(var a=0;a<s;a++){const c=a*o-100,r=[0,c,200,c+o];if(!(n[3]<r[1]||n[1]>r[3]))for(var i=0;i<s;i++){const c=i*o-100;r[0]=c,r[2]=c+o,n[0]>r[2]||n[2]<r[0]||e[i+a*s].forEach(s=>{const e=t[s];n[3]<e.aabb[1]||n[1]>e.aabb[3]||n[0]>e.aabb[2]||n[2]<e.aabb[0]||(h[s]=1)})}}return Array.from(Object.keys(h),s=>t[s])}(h.aabb);for(let t=0;t<reducedPolygonList.length&&h.boolean(reducedPolygonList[t]);t++);h.draw(n),o&&function(n){t.push(n);const h=t.length-1,o=200/s;e.forEach((t,e)=>{const a=e%s*o-100,i=(e/s|0)*o-100,c=[a,i,a+o,i+o];c[3]<n.aabb[1]||c[1]>n.aabb[3]||c[0]>n.aabb[2]||c[2]<n.aabb[0]||t.push(h)})}(h)}}}