A study on radial and circular hatching
I started on this turtle with the idea of plotting cubes with a perspective to the center of the turtle. Then I thought to add hatching to the faces of the cubes and here we are...
Radial: Hatchtrick 🐣 (variation)
Fully recentered circular: Hatchtrick 🐣 (variation)
Funky: Hatchtrick 🐣 (variation)
Spooky: Hatchtrick 🐣 (variation)
I also use a Path class... please ignore it, it's still ugly.
🤔 Using shaders as hatching in polygons... shaderturtletoy
Log in to post a comment.
// My first study of different hatching techniques - Jurgen Westerhof 2024 // // https://turtletoy.net/turtle/716fcbfa5b // // License: whatever Turtletoy sets as the default for turtles (at publication: CC BY-NC-SA 4.0) // except everyting below line 298 which carries The MIT License since // the original Polygons class is MIT Licensed const n = 100; //min=1 max=200 step=1 const hatching = 2; //min=0 max=3 step=1 (Atan2(location), Radial, Circular, None) const reCenterHatch = 0; //min=0 max=1 step=.1 const circleHatchGrow = 0; //min=0 max=100 step=1 Setting this to 0 makes it not grow, 100 makes it random const hatchZDependency = 1; //min=0 max=1 step=1 (No, Yes) const hatchZMagnitude = 1.4; //min=1 max=2 step=.01 const minSize = 20; //min=1 max=40 step=1 const maxSize = 30; //min=1 max=40 step=1 const length = .07; //min=0 max=1 step=.01 const projectionOrder = 1; //min=0 max=2 step=1 (Random, Nearest first, Nearest last) const perspective = 4; //min=1 max=10 step=.1 const pen = 1;//min=.1 max=4 step=.1 const sizeMin = Math.min(minSize, maxSize); const sizeMax = Math.max(minSize, maxSize); const zGrow = hatchZDependency == 1; // You can find the Turtle API reference here: https://turtletoy.net/syntax Canvas.setpenopacity(.7); // Global code will be evaluated once. const turtle = new Turtle(); const polygons = new Polygons(); const upd = new UniformPointDistributor([-80, -80], [80, 80]).getPointIterator(() => Math.random()/2 + .5); const cubes = Array.from({length: n}).map(v => upd.next().value).sort((a,b) => projectionOrder == 1? ((a[2] < b[2]? -1: 1) * (projectionOrder == 2? -1: 1)): 1); // The walk function will be called until it returns false. function walk(i) { [cubes.pop()].forEach(cube => drawCube(turtle, cube, lerp1(sizeMin, sizeMax, Math.random() * cube[2]/perspective), 1-length)); return cubes.length > 0; } const randomHatchGrowCache = []; function randomHatchGrow(c) { if(reCenterHatch > 0) return .2+Math.random(); if(randomHatchGrowCache[c] === undefined) { randomHatchGrowCache[c] = .2+Math.random(); } return randomHatchGrowCache[c]; } function drawCube(turtle, location, size, length) { const front = [[-.5, -.5], [.5, -.5], [.5, .5], [-.5, .5]] .map(pt => scale2(pt, size * location[2])) .map(pt => add2(pt, location)); const path = new Path(...front); const hatchArg = ((hatching) => {switch(hatching){ case 0: return [[Math.atan2(...location),1 * (zGrow?location[2]*hatchZMagnitude:1)]]; case 1: return [['r', ((lerp1(24, 180, 1-reCenterHatch) / pen) * (zGrow?location[2]*hatchZMagnitude:1) | 0), lerp2([0,0], location, reCenterHatch)]] case 2: return [['c', circleHatchGrow == 0? pen * (zGrow?location[2]*hatchZMagnitude:1): circleHatchGrow == 100? (c) => randomHatchGrow(c) *pen* (zGrow?location[2]*hatchZMagnitude:1): (c) => pen * (1 + c/circleHatchGrow) * (zGrow?location[2]*hatchZMagnitude:1), lerp2([0,0], location, reCenterHatch)]] return []; } })(hatching) path.drawPolygon(polygons, turtle, hatchArg, true, []); const sortedFront = front.sort((a,b) => lenSq2(a) < lenSq2(b)? -1: 1); const sortedBack = sortedFront.map(pt => scale2(pt, length)); for(let i = 0; i < 2; i++) { const pathB = new Path( sortedFront[0], sortedFront[1+i], sortedBack[1+i], sortedBack[0] ); const direction = lerp2( add2(sortedFront[0], scale2(sub2(sortedFront[1+i], sortedFront[0]), .5)), add2(sortedBack[0], scale2(sub2(sortedBack[1+i], sortedBack[0]), .5)), .5 ); const hatchDistance = .35 - .2 * Math.abs(Math.atan2(...direction) / Math.PI); pathB.drawPolygon(polygons, turtle, [[1, hatchDistance * pen]], true); } } 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 => { v[0] == 'r'? p.addRadialHatching(...v.filter((v,i) => 0<i)): v[0] == 'c'? p.addCircularHatching(...v.filter((v,i) => 0<i)): 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); } /// 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 } function lerp1(a,b,t){return a+t*(b-a);} //////////////////////////////////////////////////////////////// // 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; } //////////////////////////////////////////////////////////////// // Uniform Point Distribution code - Created by Jurgen Westerhof 2023 //////////////////////////////////////////////////////////////// function UniformPointDistributor(leftTop = [-100, -100], rightBottom = [100, 100]) { class UniformPointDistributor { constructor(leftTop = [-100, -100], rightBottom = [100, 100]) { this.leftTop = leftTop; this.rightBottom = rightBottom; this.width = rightBottom[0]-leftTop[0]; this.height = rightBottom[1]-leftTop[1]; this.maxDist = (this.width**2+this.height**2)**.5; this.pts = []; } *getPointIterator(radiusFunction = null, candidates = 20, maxTries = 1000) { if(radiusFunction == null) radiusFunction = (x, y, maximum) => 0; const randomPoint = () => [Math.random()*this.width+this.leftTop[0],Math.random()*this.height+this.leftTop[1]]; this.pts.push([randomPoint()].map(pt => [...pt, radiusFunction(...pt)])[0]); yield this.pts[this.pts.length - 1]; while(true) { let pt = [0,0,-1]; let tries = 0; while(pt[2] < 0 && tries < maxTries) { tries++; //using [length] candidate points pt = Array.from({length: candidates}) //which are random points .map(i => randomPoint()) //then add the distance to that candidate minus the radius of each point it is compared to .map(i => [i[0], i[1], this.pts.map(j => [j[0], j[1], Math.hypot(i[0]-j[0], i[1]-j[1]) - j[2]]) //so that it is the smallest distance from the //candidate to any of the already chosen points .reduce((prev, current) => (current[2] < prev[2])? current: prev, [0,0,this.maxDist])[2] ]) //then pick the candidate that has the largest minimum distance from the group of candidates .reduce((prev, current) => prev == null? current: ((current[2] > prev[2])? current: prev), null) //and set the 3rd position to its own radius instead of the distance to the nearest point .map((v, i, arr) => i < 2? v: radiusFunction(arr[0], arr[1], v)) ////and remove the distance before promoting the candidate //.filter((i, k) => k < 2) } if(tries == maxTries) return false; //add a point to the list this.pts.push(pt); yield pt; } } } return new UniformPointDistributor(leftTop, rightBottom); } //////////////////////////////////////////////////////////////// // Polygon Clipping utility code - Created by Reinder Nijhoff 2019 // (Polygon binning by Lionel Lemarie 2021) https://turtletoy.net/turtle/95f33bd383 // (Radial and Circular hathcing by Jurgen Westerhof 2024) https://turtletoy.net/turtle/716fcbfa5b // 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]} addRadialHatching(steps = 360, center = [0,0]) { const e=new n; const r = 1e10*Math.SQRT2; e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]); for(let i = 0; i < steps; i++) { e.dp.push([...center], [ center[0]+r*Math.sin(i*2*Math.PI/steps), center[1]+r*-Math.cos(i*2*Math.PI/steps) ]); } e.boolean(this,!1), this.dp=[...this.dp,...e.dp]; } addCircularHatching(distance = 1, center = [0,0], precision = 1) { const dist = typeof distance == 'function'? distance: (c) => distance; const e=new n; e.cp.push([-1e5,-1e5],[1e5,-1e5],[1e5,1e5],[-1e5,1e5]); for(let j = 0, r = dist(j)/2; r < 201; r+=dist(j++)) { for(let i = 0, max = Math.max(12, 2*Math.PI*r/precision | 0); i < max; i++) { e.dp.push( [center[0]+r*Math.sin(i*2*Math.PI/max),center[1]+r*-Math.cos(i*2*Math.PI/max)], [center[0]+r*Math.sin((i+1)*2*Math.PI/max),center[1]+r*-Math.cos((i+1)*2*Math.PI/max)] ) } } 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)}}}