// Check for and return line intersection points
// You can find the Turtle API reference here: https://turtletoy.net/syntax Canvas.setpenopacity(1);
const x1=22; // min=-100, max=100, step=1 const y1=-60; // min=-100, max=100, step=1 const x2=0; // min=-100, max=100, step=1 const y2=70; // min=-100, max=100, step=1 const x3=-74; // min=-100, max=100, step=1 const y3=100; // min=-100, max=100, step=1 const x4=-40; // min=-100, max=100, step=1 const y4=75; // min=-100, max=100, step=1
const turtle = new Turtle(); turtle.penup(); turtle.goto(0,0); turtle.pendown();
function centeredCircle(x,y,radius) {
turtle.seth(0);
turtle.jump(x,y-radius);
turtle.circle(radius);
}
function segmentIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
const denom = (x1 - x2) * (y3 - y4) -
(y1 - y2) * (x3 - x4);
if (denom === 0) {
// Parallel or coincident → no unique intersection
return null;
}
// Compute intersection of the infinite lines // draw lines turtle.jump(x1,y1); turtle.pendown(); turtle.goto(x2,y2); turtle.jump(x3,y3); turtle.goto(x4,y4); const px = ( (x1*y2 - y1*x2) * (x3 - x4) - (x1 - x2) * (x3*y4 - y3*x4) ) / denom;
const py = ( (x1*y2 - y1*x2) * (y3 - y4) - (y1 - y2) * (x3*y4 - y3*x4) ) / denom;
// Now check that (px, py) lies within BOTH segments:
function within(a, b, c) {
// is point c between a and b (inclusive)?
return c >= Math.min(a, b) && c <= Math.max(a, b);
}
const onSeg1 = within(x1, x2, px) && within(y1, y2, py); const onSeg2 = within(x3, x4, px) && within(y3, y4, py);
if (onSeg1 && onSeg2) {
centeredCircle(px, py, 5); // draw a small circle at intersection
return { x: px, y: py };
}
// Intersection exists only on the infinite lines, not on segments return null; }
segmentIntersection(x1, y1, x2, y2, x3, y3, x4, y4) // run the test
const corners = [
{x1:-48, y1:-43, x2:55, y2:46, x3:-22, y3:-2, x4:27, y4:24, hNum:1, vNum:1},
{x1:-48, y1:-79, x2:43, y2:-43, x3:-26, y3:-65, x4:26, y4:-54, hNum:1, vNum:1},
{x1:43, y1:-79, x2:88, y2:-43, x3:54, y3:-65, x4:69, y4:-54, hNum:1, vNum:1},
{x1:55, y1:-43, x2:97, y2:46, x3:65, y3:-2, x4:81, y4:24, hNum:1, vNum:1},
{x1:-48, y1:46, x2:97, y2:94, x3:-18, y3:65, x4:81, y4:85, hNum:3, vNum:1},
{x1:-81, y1:-79, x2:-48, y2:94, x3:-70, y3:-52, x4:-60, y4:85, hNum:1, vNum:3},
// {x1:xx1, y1:yy1, x2:xx2, y2:yy2, x3:xx3, y3:yy3, x4:xx4, y4:yy4, hNum, vNum},
];
for (let corner of corners) { // Loop through each rectangle
if(outline == 0){
rectangle(corner.x1, corner.y1, corner.x2, corner.y2);
rectangle(corner.x3, corner.y3, corner.x4, corner.y4);
}
function centeredCircle(x,y,radius) {
turtle.seth(0);
turtle.jump(x,y-radius);
turtle.circle(radius);
}
// Log to console x,y point of turtle
function logPoint(n){
console.log("point: ",n," x",turtle.xcor().toFixed(2));
console.log("point: ",n," y",turtle.ycor().toFixed(2));
}
// inspired by: https://youtu.be/JYOzlPAyBJU?si=6yg-dULVTLKA52uq&t=185 // Rupert Russell
// You can find the Turtle API reference here: https://turtletoy.net/syntax
Canvas.setpenopacity(1); const radius=10 //min=1 max=50 step=1
// an array to hold the center x,y values of each circle const centers = [];
function centeredCircle(x,y,radius) {
turtle.seth(0);
turtle.jump(x,y-radius);
turtle.circle(radius);
}
function drawCircleAt(n,r) {
const point = centers[n];
const x = point[`x${n}`];
const y = point[`y${n}`];
centeredCircle(x, y, r);
}
function drawLineFrom(a,b) {
const pointA = centers[a];
const xA = pointA[`x${a}`];
const yA = pointA[`y${a}`];
const pointB = centers[b];
const xB = pointB[`x${b}`];
const yB = pointB[`y${b}`];
turtle.jump(xA,yA);
turtle.goto(xB,yB);
}
// Global code will be evaluated once. const turtle = new Turtle();
// Seed of life
centeredCircle(0,0,radius); // Draw Center Circle
centers.push({ x0: 0, y0: 0 }); // Store central circle
// First 6 circles around the central circle
for(n=1; n<=6; n++){
turtle.jump(0,0); // return to the center of the screen
turtle.seth(270+(60*n));
turtle.penup();
turtle.forward(radius*2);
turtle.pendown();
const cx = Number(turtle.xcor().toFixed(0));
const cy = Number(turtle.ycor().toFixed(0));
centeredCircle(cx, cy, radius);
// centers.push({ xn: cx, yn: cy });
const entry = {};
entry[`x${n}`] = cx;
entry[`y${n}`] = cy;
centers.push(entry);
}
// Print centers array console.log(centers);
drawCircleAt(1,2); drawLineFrom(1,4);
https://turtletoy.net/turtle/6855b36cdb#count=76,angle=153.6,size=100,x=-51,y=1
https://turtletoy.net/turtle/6855b36cdb
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
https://www.quantumenterprises.co.uk/single-line-/-single-stroke-fonts.html
https://www.quantumenterprises.co.uk/handwriting-fonts/help-single-line.htm
https://turtletoy.net/ Turtletoy is created by Reinder Nijhoff (@ReinderNijhoff).
Turtletoy allows you to create generative art using a minimalistic javascript Turtle graphics API. You can only create black-and-white line drawings on a square canvas. By offering a very restrictive environment we not only hope to stimulate creativity, we also make sure that the turtles can (at least theoretically) be plotted using a simple plotter.
You can read the Turtle API reference first or directly start writing your own turtle here.
Each turtle can be exported as SVG, suitable for high-res printing or a plotter.
https://direct.mit.edu/books/oa-monograph/4663/Turtle-GeometryThe-Computer-as-a-Medium-for
I have created some examples see: https://turtletoy.net/user/rupertxrussell
You can find the Turtle API reference here: https://turtletoy.net/syntax
const hatching = 1;//min=0 max=1 step=1 (No, Yes)
see: https://turtletoy.net/turtle/c387770c8d
"Did you know you can also write the centeredCircle function like this ``` function centeredCircle(x,y, radius, ext =360) { turtle.jump(x,y-radius); turtle.circle(radius, ext); } ```"
console.log("Hello world!");
F12 to open the browser console
Arrays
const corners = [
{x1: -90, y1: -90, x2: -31, y2: -41, x3: -56, y3: -72, x4: -46, y4: -64, hNum: 2, vNum: 2},
{x1: -31, y1: -90, x2: -5, y2: -75, x3: -21, y3: -83, x4: -16, y4: -80, hNum: 1, vNum: 1},
{x1: -5, y1: -95, x2: 32, y2: -75, x3: 5, y3: -85, x4: 19, y4: -80, hNum: 1, vNum: 1},
{x1: 32, y1: -90, x2: 95, y2: -41, x3: 56, y3: -74, x4: 73, y4: -59, hNum: 2.5, vNum: 2.5}
]
for (let corner of corners) { // Loop through each rectangle
if(outline == 0){
rectangle(corner.x1, corner.y1, corner.x2, corner.y2);
rectangle(corner.x3, corner.y3, corner.x4, corner.y4);
}
Given two Cartesian coordinates, here’s how you compute the distance between them:
function pointDistance(x1, y1, x2, y2) { return Math.hypot(x1 - x2, y1 - y2); }
Here’s how you might use this function:
pointDistance(0, 0, 3, 4); // => 5 pointDistance(100, 7, 200, 7); // => 100
https://www.omnicalculator.com/math/right-triangle-side-angle
for (var i = 0; i < 9; i++) {
console.log(i);
// more statements }
Calculating Midpoints: https://turtletoy.net/turtle/06bd8fcc53
https://www.geogebra.org/m/rqvdkvgk
https://youtu.be/1QLWiyrDEOM?feature=shared&t=304
https://turtletoy.net/turtle/186c7c9e4f
Elapsed time: 3:36:02 (Hours, minutes, seconds)
Length of path drawn: 44.60 m
Total distance moved: 60.42 m