-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Basic functionality and documentation
- Loading branch information
Showing
17 changed files
with
5,810 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{ | ||
"presets": [ | ||
"@babel/preset-env" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
name: Build and Deploy Docs | ||
|
||
on: | ||
push: | ||
branches: | ||
- main | ||
|
||
permissions: | ||
contents: read | ||
pages: write | ||
id-token: write | ||
|
||
jobs: | ||
build: | ||
runs-on: ubuntu-latest | ||
|
||
steps: | ||
- name: Checkout repository | ||
uses: actions/checkout@v2 | ||
|
||
- name: Setup Node.js | ||
uses: actions/setup-node@v2 | ||
with: | ||
node-version: '14' | ||
|
||
- name: Install dependencies | ||
run: yarn install | ||
|
||
- name: Build documentation | ||
run: yarn docs | ||
|
||
- name: Setup Pages | ||
uses: actions/configure-pages@v3 | ||
|
||
- name: Upload artifact | ||
uses: actions/upload-pages-artifact@v1 | ||
with: | ||
path: 'docs' | ||
|
||
- name: Deploy to GitHub Pages | ||
id: deployment | ||
uses: actions/deploy-pages@v2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,5 @@ | ||
docs | ||
|
||
# Logs | ||
logs | ||
*.log | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,39 @@ | ||
# p5.axidraw | ||
# p5.axidraw | ||
|
||
A [P5.js](https://p5js.org/) library for controlling the [AxiDraw](https://axidraw.com/) | ||
via the [WebSerial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API). | ||
|
||
## Usage | ||
|
||
```js | ||
const axi = new axidraw.AxiDraw(); | ||
let connected = false; | ||
|
||
function setup() { | ||
createCanvas(400, 400); | ||
} | ||
|
||
function mouseClicked() { | ||
if (!connected) { | ||
// Note: connect() must be called from a user gesture (e.g. a mouse click) due to | ||
// browser security restrictions | ||
axi.connect() | ||
.then(() => { | ||
connected = true; | ||
}); | ||
} | ||
|
||
// Draw a diagonal line | ||
axi.penDown(); | ||
axi.moveTo(10, 10); | ||
axi.penUp(); | ||
|
||
// Draw a diagonal line, but async | ||
|
||
// axi.penDown() | ||
// .then(() => axi.moveTo(10, 10)) | ||
// .then(() => axi.penUp()); | ||
} | ||
``` | ||
|
||
See the [examples](examples) directory for more. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
|
||
<script src="/dist/p5.axidraw.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script> | ||
|
||
<style> | ||
html, body { | ||
margin: 0; | ||
padding: 0; | ||
} | ||
canvas { | ||
display: block; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<main> | ||
</main> | ||
<script src="sketch.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
/** | ||
* This example shows how to connect to the AxiDraw and draw a line. | ||
* Click the canvas to connect to the AxiDraw. Then click again to draw the line. | ||
*/ | ||
|
||
const axi = new axidraw.AxiDraw(); | ||
let connected = false; | ||
|
||
function setup() { | ||
createCanvas(400, 400); | ||
} | ||
|
||
function mouseClicked() { | ||
if (!connected) { | ||
// Note: connect() must be called from a user gesture (e.g. a mouse click) due to | ||
// browser security restrictions | ||
axi.connect() | ||
.then(() => { | ||
connected = true; | ||
}); | ||
} | ||
|
||
// Draw a diagonal line | ||
axi.penDown(); | ||
axi.moveTo(10, 10); | ||
axi.penUp(); | ||
|
||
// Draw a diagonal line, but async | ||
|
||
// axi.penDown() | ||
// .then(() => axi.moveTo(10, 10)) | ||
// .then(() => axi.penUp()); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
|
||
<script src="/dist/p5.axidraw.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script> | ||
|
||
<style> | ||
html, body { | ||
margin: 0; | ||
padding: 0; | ||
} | ||
canvas { | ||
display: block; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<main> | ||
</main> | ||
<script src="sketch.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
/** | ||
* This example shows how to control the AxiDraw using the mouse. | ||
* Click the canvas to connect to the AxiDraw. Then click and drag to draw. | ||
* The AxiDraw will follow the position of the mouse. | ||
*/ | ||
|
||
const MAX_X_MM = 50; | ||
const MAX_Y_MM = 50; | ||
const MOVE_THRESHOLD_MM = 1; | ||
|
||
const axi = new axidraw.AxiDraw(); | ||
let connected = false; | ||
let moving = false; | ||
let lastPos; | ||
|
||
let lines = []; | ||
|
||
function setup() { | ||
createCanvas(400, 400); | ||
|
||
textAlign(CENTER); | ||
ellipseMode(CENTER); | ||
|
||
fill(0); | ||
|
||
lastPos = createVector(0, 0); | ||
} | ||
|
||
function mouseClicked() { | ||
if (!connected) { | ||
axi.connect().then(() => { | ||
connected = true; | ||
}); | ||
|
||
return; | ||
} | ||
} | ||
|
||
function mousePressed() { | ||
drawing = true; | ||
|
||
if (connected) { | ||
axi.penDown(); | ||
} | ||
} | ||
|
||
function mouseReleased() { | ||
drawing = false; | ||
|
||
if (connected) { | ||
axi.penUp(); | ||
} | ||
} | ||
|
||
function mmToPx(mmPos) { | ||
return createVector( | ||
constrain(map(mmPos.x, 0, MAX_X_MM, 0, width), 0, width), | ||
constrain(map(mmPos.y, 0, MAX_Y_MM, 0, height), 0, height), | ||
); | ||
} | ||
|
||
function moveAndDraw(x, y) { | ||
moving = true; | ||
axi.moveTo(x, y) | ||
.then(() => { | ||
moving = false; | ||
}); | ||
|
||
if (!drawing) { | ||
return; | ||
} | ||
|
||
lines.push([ | ||
mmToPx(lastPos), | ||
mmToPx(createVector(x, y)), | ||
]); | ||
} | ||
|
||
function followMouse() { | ||
const x = constrain(map(mouseX, 0, width, 0, MAX_X_MM), 0, MAX_X_MM); | ||
const y = constrain(map(mouseY, 0, height, 0, MAX_Y_MM), 0, MAX_Y_MM); | ||
|
||
const pxPos = mmToPx(createVector(x, y)); | ||
|
||
if (!drawing) { | ||
// Draw a cursor | ||
noStroke(); | ||
ellipse(pxPos.x, pxPos.y, 5, 5); | ||
} | ||
|
||
// Only send motion commands when the mouse has moved more than the threshold | ||
// to reduce the number of commands sent to the AxiDraw | ||
if (!moving && dist(lastPos.x, lastPos.y, x, y) > MOVE_THRESHOLD_MM) { | ||
moveAndDraw(x, y); | ||
lastPos = createVector(x, y); | ||
} | ||
} | ||
|
||
function draw() { | ||
if (!connected) { | ||
background(255, 0, 0); | ||
text('Click to Connect', width / 2, height / 2); | ||
return; | ||
} | ||
|
||
background(0, 255, 0); | ||
|
||
if (mouseX >= 0 && mouseX <= width && mouseY >= 0 && mouseY <= height) { | ||
// Move the pen to the mouse position if it is inside the canvas | ||
followMouse(); | ||
} | ||
|
||
// Draw the lines | ||
stroke(0); | ||
strokeWeight(1); | ||
for (let i = 0; i < lines.length; i += 1) { | ||
line(lines[i][0].x, lines[i][0].y, lines[i][1].x, lines[i][1].y); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8" /> | ||
|
||
<script src="/dist/p5.axidraw.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script> | ||
|
||
<style> | ||
html, body { | ||
margin: 0; | ||
padding: 0; | ||
} | ||
canvas { | ||
display: block; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<main> | ||
</main> | ||
<script src="sketch.js"></script> | ||
</body> | ||
</html> |
Oops, something went wrong.