This is a port of @makio135 svg code: observablehq.com/@makio135/rotated-arcs
Log in to post a comment.
// a rewrite of @makio135 observable svg artwork
// https://observablehq.com/@makio135/rotated-arcs
const center = 10; // min=1,max=25,step=1
const spacing = 1; // min=1,max=3,step=0.25
var iterations = 200
var with_frame = false
// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(1);
// Global code will be evaluated once.
const turtle = new Turtle();
turtle.degrees();
turtle.penup();
turtle.goto(0,0);
turtle.pendown();
// The walk function will be called until it returns false.
function walk(i) {
if (with_frame && i==0) {
// frame
turtle.jump(-100,-100)
turtle.goto(-100,100)
turtle.goto(100,100)
turtle.goto(100,-100)
turtle.goto(-100,-100)
}
let radius = center+spacing*i
drawCircle(radius)
return i < iterations;
}
function drawCircle(radius) {
let start_angle = Math.ceil(randomIn(0,360))
let draw_angle = Math.ceil(randomIn(0,360))
let start = {
x: Math.cos(start_angle*Math.PI/180)*radius,
y: Math.sin(start_angle*Math.PI/180)*radius
}
turtle.jump(start.x, start.y)
for (i=start_angle; i<=start_angle+draw_angle; i+=1) {
let x = Math.cos(i*Math.PI/180)*radius
let y = Math.sin(i*Math.PI/180)*radius
turtle.goto(x,y)
}
}
// utilities
function randomIn(min, max) {
return Math.random() * (max - min) + min;
}
function map(number, inMin, inMax, outMin, outMax) {
return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
}