Logo programming language interpreter
npm install @edadma/logoA Logo programming language interpreter for JavaScript/TypeScript with React component support.
``bash`
npm install @edadma/logo
`javascript
import { Logo } from '@edadma/logo';
const canvas = document.getElementById('myCanvas');
const logo = new Logo(canvas);
// Run a Logo program
logo.run(
repeat 4 [
forward 100
right 90
]);
// Execute single commands
logo.execute('forward 50');
logo.execute('right 90');
// Clear and reset
logo.clear();
`
`jsx
import { LogoCanvas } from '@edadma/logo/react';
import { useRef } from 'react';
function App() {
const logoRef = useRef(null);
const [code, setCode] = useState('repeat 4 [fd 100 rt 90]');
return (
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
width | number | 600 | Canvas width in pixels |
| height | number | 400 | Canvas height in pixels |
| program | string | - | Logo program to run (auto-runs on change) |
| pathRendering | boolean | true | Use smooth path rendering |
| onError | function | - | Error callback |
| onComplete | function | - | Completion callback |
| className | string | - | CSS class for canvas |
| style | object | - | Inline styles for canvas |$3
`typescript
interface LogoCanvasRef {
execute(command: string): void;
run(program: string): void;
clear(): void;
getDrawing(): LogoDrawing;
getTurtle(): TurtleState;
getLogo(): Logo | null;
}
`API Reference
$3
`typescript
class Logo {
constructor(canvas: HTMLCanvasElement); run(program: string): void;
execute(command: string): void;
clear(): void;
render(): void;
setPathRendering(enabled: boolean): void;
setAutoRender(enabled: boolean): void;
getDrawing(): LogoDrawing;
getTurtle(): TurtleState;
}
`$3
If you want to implement custom rendering:
`typescript
interface LogoDrawing {
lines: Array<{
x1: number; y1: number;
x2: number; y2: number;
color: string; // e.g., "rgb(0,0,0)"
width: number;
}>;
labels: Array<{
x: number; y: number;
heading: number; // radians
text: string;
}>;
}interface TurtleState {
x: number;
y: number;
heading: number; // radians, π/2 = north
visible: boolean;
}
`Supported Logo Commands
$3
- forward / fd - Move forward
- back / bk - Move backward
- right / rt - Turn right (degrees)
- left / lt - Turn left (degrees)
- setxy - Move to position
- home - Return to center
- towards [x y] - Return heading toward point
- distance [x y] - Return distance to point
- arc - Draw an arc$3
- penup / pu - Lift pen
- pendown / pd - Lower pen
- setpensize - Set line width
- setcolor - Set pen color (name, number, or [r g b])$3
- hideturtle / ht - Hide turtle
- showturtle / st - Show turtle$3
- repeat - Repeat commands
- for [var start end step] [commands] - For loop
- while [condition] [commands] - While loop
- until [condition] [commands] - Until loop
- forever [commands] - Loop until stop/output
- if - Conditional
- ifelse - If-else$3
- to - Define procedure
- output / op - Return value
- stop - Stop procedure$3
- sum, difference, product, quotient, remainder
- sin, cos, tan, sqrt, pow, exp, ln, log10
- asin, acos, atan, atan2 - inverse trig (complex-aware)
- abs, int, round, floor, ceiling, sign
- min, max - variadic min/max
- random - random number
- pi, e - constants
- Infix operators: +, -, *, /, ^, =, <, >, <=, >=$3
- lowercase, uppercase - case conversion
- ascii, char - character codes$3
- make "name - Set variable
- :name - Get variable value
- thing "name - Get variable value
- local "name - Declare procedure-local variable
- localmake "name - Declare and set local variable$3
- first, last, butfirst (bf), butlast (bl)
- fput, lput, item, count
- list, sentence (se), word
- range / iseq - generate sequences: range 5 → [0 1 2 3 4]
- reverse, pick - list utilities
- emptyp, listp, wordp, numberp, memberp - predicates$3
- time - Returns [hours minutes seconds] (UTC)
- date - Returns [year month day] (UTC)
- timemilli - Milliseconds since epoch$3
- namep "name / name? "name - Is variable defined?
- definedp "name / defined? "name - Is procedure defined?
- primitivep "name / primitive? "name - Is it a primitive?
- procedurep "name / procedure? "name - Is it a user procedure?
- procedures - List all user procedures
- primitives - List all primitives
- names - List all variables$3
- map - Apply function to each element
- filter - Keep elements where fn returns true
- reduce - Reduce list to single value
- foreach - Execute fn for each element
- apply ISC