Public
Edited
Apr 19, 2023
1 fork
mutable test = 0
mutable clearDrawingIndicator = Date.now()
mutable toolUseIndicator = Date.now()
function generateCodeFromCanvas(ps) {
let cps = ps.project.activeLayer.children.map((c) => c.callParams);
let replace = (cp) => {
let obj = cp.obj;
if (cp.op === "circle") {
return `.circle(${obj.position.x}, ${obj.position.y}, ${obj.bounds.width})`;
} else {
return null;
}
};
return cps.map(replace);
}
generateCodeFromCanvas(drawingPad.ps)
md`
\`\`\`javascript
polyline([
line(x1, y1),
line(x2, y2)
])
\`\`\`
`
drawingPad.ps
class CM {
constructor() {
this.thunks = [];
}
clear() {
this.thunks = [];
}
render(ps) {
__clearCanvas(ps);
this.thunks.forEach((thunk) => thunk(ps));
return this;
}
circle(x, y, r) {
let thisCall = `.circle(${x}, ${y}, ${r})`;
let callParams = {
op: "circle",
x,
y,
r
};
let thunk = (ps) => {
let center = new ps.Point(x, y);
let radius = r;
let path = new ps.Path.Circle(center, radius);
// path.applyMatrix = false;
path.strokeColor = "white";
callParams.obj = path;
path.callParams = callParams;
};
this.thunks.push(thunk);
return this;
}
point(x, y) {}
/* Do I need these? */
select() {}
deselect() {}
}
circle = (x, y, r) => {
return (ps) => {
let center = new ps.Point(x, y);
let radius = r;
let path = new ps.Path.Circle(center, radius);
path.strokeColor = "white";
}
}
renderCM = (drawingPad) => {}
mutable miniCadProgram = (ps) => {
// circle(50, 50, 20)(ps);
// circle(100, 100, 20)(ps);
// return ps.project.activeLayer.children;
updateMiniCadProgramIndicator;
return new CM()
.circle(50, 50, 20)
.circle(100, 100, 20)
.circle(200, 200, 40)
.render(ps);
}
miniCadProgram(drawingPad.ps)
Inputs.button("Sabotage", {
reduce: () => {
mutable miniCadProgram = (x) => 42;
}
})
mutable updateMiniCadProgramIndicator = Date.now()
function __clearCanvas(ps) {
ps.project.activeLayer.removeChildren();
}
function __getSelected(ps) {
return ps.project.activeLayer.children.filter(c => c.selected);
}
function __clearSelects(ps) {
ps.project.activeLayer.children.forEach((c) => (c.selected = false));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
