From 20d2e3a17643ae84af7becae9b58890d2b17b959 Mon Sep 17 00:00:00 2001 From: Miika Alonen Date: Mon, 18 Dec 2023 19:30:15 +0200 Subject: [PATCH] Updating cavas docs --- src/API.ts | 60 +++++++++++++++++++------ src/documentation/more/visualization.ts | 40 ++++++++++++++--- 2 files changed, 82 insertions(+), 18 deletions(-) diff --git a/src/API.ts b/src/API.ts index 8165903..274811f 100644 --- a/src/API.ts +++ b/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 = ( diff --git a/src/documentation/more/visualization.ts b/src/documentation/more/visualization.ts index 7fc1324..3b3cd3e 100644 --- a/src/documentation/more/visualization.ts +++ b/src/documentation/more/visualization.ts @@ -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 Canvas API and the CanvasRenderingContext2D 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. * draw(f: Function) - 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, +)} + * - Draws an image to a canvas. ${makeExample( @@ -136,6 +161,8 @@ ${makeExample( ### Text to canvas +Text can be drawn to canvas using the drawText() 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 canvas documentation for more info. + * drawText(text, fontSize, rotation, font, x, y) - 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: + * smiley(happiness, radius, eyes, fill, rotate, x, y) * ball(radius,fill,x,y) * box(width, height, fill, rotate)