Updating cavas docs
This commit is contained in:
60
src/API.ts
60
src/API.ts
@ -101,6 +101,8 @@ export type ShapeObject = {
|
||||
url: string,
|
||||
curve: number,
|
||||
curves: number,
|
||||
stroke: string,
|
||||
eaten: number,
|
||||
}
|
||||
|
||||
export class UserAPI {
|
||||
@ -2515,6 +2517,7 @@ export class UserAPI {
|
||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = fillStyle;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
return true;
|
||||
}
|
||||
circle = this.ball;
|
||||
@ -2546,6 +2549,23 @@ export class UserAPI {
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotate * Math.PI) / 180);
|
||||
|
||||
if(slices<2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices<1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, hole, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = secondary;
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
@ -2581,10 +2601,11 @@ export class UserAPI {
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
public pie = (
|
||||
slices: number = 3,
|
||||
slices: number|ShapeObject = 3,
|
||||
eaten: number = 0,
|
||||
radius: number | ShapeObject = this.hc() / 3,
|
||||
radius: number = this.hc() / 3,
|
||||
fillStyle: string = "white",
|
||||
secondary: string = "black",
|
||||
stroke: string = "black",
|
||||
@ -2592,13 +2613,16 @@ export class UserAPI {
|
||||
x: number = this.wc(),
|
||||
y: number = this.hc(),
|
||||
): boolean => {
|
||||
if (typeof radius === "object") {
|
||||
fillStyle = radius.fillStyle || "white";
|
||||
x = radius.x || this.wc();
|
||||
y = radius.y || this.hc();
|
||||
rotate = radius.rotate || 0;
|
||||
slices = radius.slices || 3;
|
||||
radius = radius.radius || this.hc() / 3;
|
||||
if (typeof slices === "object") {
|
||||
fillStyle = slices.fillStyle || "white";
|
||||
x = slices.x || this.wc();
|
||||
y = slices.y || this.hc();
|
||||
rotate = slices.rotate || 0;
|
||||
radius = slices.radius || this.hc() / 3;
|
||||
secondary = slices.secondary || "black";
|
||||
stroke = slices.stroke || "black";
|
||||
eaten = slices.eaten || 0;
|
||||
slices = slices.slices || 3;
|
||||
}
|
||||
|
||||
const canvas: HTMLCanvasElement = this.app.interface.drawings as HTMLCanvasElement;
|
||||
@ -2607,16 +2631,26 @@ export class UserAPI {
|
||||
ctx.translate(x, y);
|
||||
ctx.rotate((rotate * Math.PI) / 180);
|
||||
|
||||
if(slices<2) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = slices<1 ? secondary : fillStyle;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
return true;
|
||||
}
|
||||
|
||||
// Draw slices as arcs
|
||||
const totalSlices = slices;
|
||||
const sliceAngle = ((2 * Math.PI) / totalSlices);
|
||||
const sliceAngle = (2 * Math.PI) / totalSlices;
|
||||
for (let i = 0; i < totalSlices; i++) {
|
||||
const startAngle = i * sliceAngle;
|
||||
const endAngle = (i + 1) * sliceAngle;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.arc(0, 0, radius, startAngle, endAngle);
|
||||
ctx.lineTo(0, 0); // Connect to center
|
||||
ctx.closePath();
|
||||
|
||||
// Fill and stroke the slices with the specified fill style
|
||||
@ -2628,15 +2662,15 @@ export class UserAPI {
|
||||
ctx.fillStyle = secondary;
|
||||
}
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = stroke;
|
||||
ctx.stroke();
|
||||
|
||||
}
|
||||
|
||||
ctx.restore();
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
|
||||
public star = (
|
||||
|
||||
@ -7,7 +7,7 @@ export const visualization = (application: Editor): string => {
|
||||
return `
|
||||
# Vizualisation
|
||||
|
||||
While Topos is mainly being developed as a live coding environment for algorithmic music composition, it also includes some features for live code visualizatoins. This section will introduce you to these features.
|
||||
While Topos is mainly being developed as a live coding environment for algorithmic music composition, it also includes some features for live code visualizations. This section will introduce you to these features.
|
||||
|
||||
## Hydra Visual Live Coding
|
||||
|
||||
@ -50,7 +50,7 @@ ${makeExample(
|
||||
false,
|
||||
)}
|
||||
|
||||
### Documentation
|
||||
### Hydra documentation
|
||||
|
||||
I won't teach Hydra. You can find some great resources directly on the [Hydra website](https://hydra.ojack.xyz/):
|
||||
- [Hydra interactive documentation](https://hydra.ojack.xyz/docs/)
|
||||
@ -84,10 +84,13 @@ beat(0.25)::gif({
|
||||
false,
|
||||
)}
|
||||
|
||||
|
||||
## Canvas live coding
|
||||
|
||||
Documentation in progress! Copy the example and run it separately (Showing sualization examples in the documentation not implemented yet).
|
||||
Documentation in progress! Copy the example and run it separately (Showing visualization examples in the documentation not implemented yet).
|
||||
|
||||
Canvas live coding is a feature that allows you to draw musical events to the canvas. Canvas can be used to create complex visualizations. The feature is based on the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API" target="_blank">Canvas API</a> and the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" target="_blank">CanvasRenderingContext2D</a> interface. The feature is still in development and more functions will be added in the future.
|
||||
|
||||
In addition to the standard Canvas API, Topos also includes some pre-defined shapes for convenience. See the Shapes section below for more info.
|
||||
|
||||
* <ic>draw(f: Function)</ic> - Draws to a canvas with the given function.
|
||||
|
||||
@ -117,6 +120,28 @@ beat(0.5) && clear() && draw(context => {
|
||||
false,
|
||||
)}
|
||||
|
||||
${makeExample(
|
||||
"Using draw with events and shapes",
|
||||
`
|
||||
beat(0.25) && sound("bass1:5").pitch(rI(1,6)).draw(x => {
|
||||
donut(x.pitch)
|
||||
}).out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
|
||||
|
||||
${makeExample(
|
||||
"Using draw with ziffers and shapes",
|
||||
`
|
||||
z1("1/8 (0 2 1 4)+(2 1)").sound("sine").ad(0.05,.25).clear()
|
||||
.draw(x => {
|
||||
pie({slices:7,eaten:(7-x.pitch-1),fillStyle:"green", rotate: 250})
|
||||
}).log("pitch").out()
|
||||
`,
|
||||
false,
|
||||
)}
|
||||
|
||||
* <ic<image(url, x, y, width, height, rotation)</ic> - Draws an image to a canvas.
|
||||
|
||||
${makeExample(
|
||||
@ -136,6 +161,8 @@ ${makeExample(
|
||||
|
||||
### Text to canvas
|
||||
|
||||
Text can be drawn to canvas using the <ic>drawText()</ic> function. The function can take any unicode characters including emojis. The function can also be used to draw random characters from a given unicode range. Different filters can also be applied using the **filter** parameter. See filter in <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter" target="_blank">canvas documentation</a> for more info.
|
||||
|
||||
* <ic>drawText(text, fontSize, rotation, font, x, y)</ic> - Draws text to a canvas.
|
||||
|
||||
${makeExample(
|
||||
@ -174,7 +201,10 @@ beat(0.5) && clear() && drawText({x: 10, y: epulse()%700, text: food(50)})
|
||||
|
||||
### Shapes
|
||||
|
||||
In addition to supporting drawing to canvas directly, Topos also include some pre-defined shapes for convenience. The predefined shapes are:
|
||||
In addition to supporting drawing to canvas directly, Topos also include some pre-defined shapes for convenience. Every shape can be defined by either by inputting one object as parameter or by inputting the parameters separately.
|
||||
|
||||
The predefined shapes are:
|
||||
|
||||
* <ic>smiley(happiness, radius, eyes, fill, rotate, x, y)</ic>
|
||||
* <ic>ball(radius,fill,x,y)</ic>
|
||||
* <ic>box(width, height, fill, rotate)</ic>
|
||||
|
||||
Reference in New Issue
Block a user