move draw logic to separate package

This commit is contained in:
Felix Roos 2024-02-29 22:14:53 +01:00
parent 94dd547a74
commit 6ce8a3feba
22 changed files with 78 additions and 59 deletions

View File

@ -1,11 +1,14 @@
import { Pattern, getDrawContext, silence, register, pure, createParams } from './index.mjs';
import { Pattern, silence, register, pure, createParams } from '@strudel/core';
import { getDrawContext } from './draw.mjs';
let clearColor = '#22222210';
Pattern.prototype.animate = function ({ callback, sync = false, smear = 0.5 } = {}) {
window.frame && cancelAnimationFrame(window.frame);
const ctx = getDrawContext();
const { clientWidth: ww, clientHeight: wh } = ctx.canvas;
let { clientWidth: ww, clientHeight: wh } = ctx.canvas;
ww *= window.devicePixelRatio;
wh *= window.devicePixelRatio;
let smearPart = smear === 0 ? '99' : Number((1 - smear) * 100).toFixed(0);
smearPart = smearPart.length === 1 ? `0${smearPart}` : smearPart;
clearColor = `#200010${smearPart}`;

View File

@ -1,15 +1,15 @@
/*
draw.mjs - <short description TODO>
Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/draw.mjs>
Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/canvas/draw.mjs>
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Pattern, getTime, State, TimeSpan } from './index.mjs';
import { Pattern, getTime, State, TimeSpan } from '@strudel/core';
export const getDrawContext = (id = 'test-canvas') => {
let canvas = document.querySelector('#' + id);
if (!canvas) {
const scale = 2; // 2 = crisp on retina screens
const scale = window.devicePixelRatio || 1;
canvas = document.createElement('canvas');
canvas.id = id;
canvas.width = window.innerWidth * scale;

View File

@ -0,0 +1,5 @@
export * from './animate.mjs';
export * from './color.mjs';
export * from './draw.mjs';
export * from './pianoroll.mjs';
export * from './spiral.mjs';

View File

@ -1,10 +1,10 @@
/*
pianoroll.mjs - <short description TODO>
Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/core/pianoroll.mjs>
Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/strudel/blob/main/packages/canvas/pianoroll.mjs>
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { Pattern, noteToMidi, getDrawContext, freqToMidi, isNote } from './index.mjs';
import { Pattern, noteToMidi, freqToMidi } from '@strudel/core';
const scale = (normalized, min, max) => normalized * (max - min) + min;
const getValue = (e) => {

View File

@ -1,4 +1,4 @@
import { Pattern } from './index.mjs';
import { Pattern } from '@strudel/core';
// polar coords -> xy
function fromPolar(angle, radius, cx, cy) {

View File

@ -12,7 +12,8 @@ import {
lineNumbers,
drawSelection,
} from '@codemirror/view';
import { Pattern, Drawer, repl, cleanupDraw } from '@strudel/core';
import { Pattern, repl } from '@strudel/core';
import { Drawer, cleanupDraw } from '@strudel/canvas';
import { isAutoCompletionEnabled } from './autocomplete.mjs';
import { isTooltipEnabled } from './tooltip.mjs';
import { flash, isFlashEnabled } from './flash.mjs';

View File

@ -45,6 +45,7 @@
"@replit/codemirror-vim": "^6.1.0",
"@replit/codemirror-vscode-keymap": "^6.0.2",
"@strudel/core": "workspace:*",
"@strudel/canvas": "workspace:*",
"@uiw/codemirror-themes": "^4.21.21",
"@uiw/codemirror-themes-all": "^4.21.21",
"nanostores": "^0.9.5"

View File

@ -22,10 +22,6 @@ export * from './repl.mjs';
export * from './cyclist.mjs';
export * from './logger.mjs';
export * from './time.mjs';
export * from './draw.mjs';
export * from './animate.mjs';
export * from './pianoroll.mjs';
export * from './spiral.mjs';
export * from './ui.mjs';
export { default as drawLine } from './drawLine.mjs';
// below won't work with runtime.mjs (json import fails)

View File

@ -1,4 +1,4 @@
import { getDrawContext } from '@strudel/core';
import { getDrawContext } from '@strudel/canvas';
let latestOptions;

View File

@ -34,6 +34,7 @@
"homepage": "https://github.com/tidalcycles/strudel#readme",
"dependencies": {
"@strudel/core": "workspace:*",
"@strudel/canvas": "workspace:*",
"hydra-synth": "^1.3.29"
},
"devDependencies": {

View File

@ -35,6 +35,7 @@
"dependencies": {
"@strudel/codemirror": "workspace:*",
"@strudel/core": "workspace:*",
"@strudel/canvas": "workspace:*",
"@strudel/hydra": "workspace:*",
"@strudel/midi": "workspace:*",
"@strudel/mini": "workspace:*",

View File

@ -6,6 +6,7 @@ export async function prebake() {
const modulesLoading = evalScope(
// import('@strudel/core'),
core,
import('@strudel/canvas'),
import('@strudel/mini'),
import('@strudel/tonal'),
import('@strudel/webaudio'),

View File

@ -1,4 +1,5 @@
import { getDrawContext, silence } from '@strudel/core';
import { silence } from '@strudel/core';
import { getDrawContext } from '@strudel/canvas';
import { transpiler } from '@strudel/transpiler';
import { getAudioContext, webaudioOutput } from '@strudel/webaudio';
import { StrudelMirror, codemirrorSettings } from '@strudel/codemirror';

View File

@ -34,6 +34,7 @@
"homepage": "https://github.com/tidalcycles/strudel#readme",
"dependencies": {
"@strudel/core": "workspace:*",
"@strudel/canvas": "workspace:*",
"superdough": "workspace:*"
},
"devDependencies": {

View File

@ -1,4 +1,5 @@
import { Pattern, getDrawContext, clamp } from '@strudel/core';
import { Pattern, clamp } from '@strudel/core';
import { getDrawContext } from '@strudel/canvas';
import { analyser, getAnalyzerData } from 'superdough';
export function drawTimeScope(

81
pnpm-lock.yaml generated
View File

@ -148,7 +148,7 @@ importers:
devDependencies:
vite:
specifier: ^5.0.10
version: 5.0.11
version: 5.0.11(@types/node@20.10.6)
packages/codemirror:
dependencies:
@ -188,6 +188,9 @@ importers:
'@replit/codemirror-vscode-keymap':
specifier: ^6.0.2
version: 6.0.2(@codemirror/autocomplete@6.11.1)(@codemirror/commands@6.3.3)(@codemirror/language@6.10.0)(@codemirror/lint@6.4.2)(@codemirror/search@6.5.5)(@codemirror/state@6.4.0)(@codemirror/view@6.23.0)
'@strudel/canvas':
specifier: workspace:*
version: link:../canvas
'@strudel/core':
specifier: workspace:*
version: link:../core
@ -247,6 +250,9 @@ importers:
packages/hydra:
dependencies:
'@strudel/canvas':
specifier: workspace:*
version: link:../canvas
'@strudel/core':
specifier: workspace:*
version: link:../core
@ -311,6 +317,9 @@ importers:
packages/repl:
dependencies:
'@strudel/canvas':
specifier: workspace:*
version: link:../canvas
'@strudel/codemirror':
specifier: workspace:*
version: link:../codemirror
@ -465,6 +474,9 @@ importers:
packages/webaudio:
dependencies:
'@strudel/canvas':
specifier: workspace:*
version: link:../canvas
'@strudel/core':
specifier: workspace:*
version: link:../core
@ -533,6 +545,9 @@ importers:
'@nanostores/react':
specifier: ^0.7.1
version: 0.7.1(nanostores@0.9.5)(react@18.2.0)
'@strudel/canvas':
specifier: workspace:*
version: link:../packages/canvas
'@strudel/codemirror':
specifier: workspace:*
version: link:../packages/codemirror
@ -2392,6 +2407,7 @@ packages:
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-arm@0.19.11:
@ -2408,6 +2424,7 @@ packages:
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-x64@0.19.11:
@ -2424,6 +2441,7 @@ packages:
cpu: [x64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-arm64@0.19.11:
@ -2440,6 +2458,7 @@ packages:
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-x64@0.19.11:
@ -2456,6 +2475,7 @@ packages:
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-arm64@0.19.11:
@ -2472,6 +2492,7 @@ packages:
cpu: [arm64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-x64@0.19.11:
@ -2488,6 +2509,7 @@ packages:
cpu: [x64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm64@0.19.11:
@ -2504,6 +2526,7 @@ packages:
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm@0.19.11:
@ -2520,6 +2543,7 @@ packages:
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ia32@0.19.11:
@ -2536,6 +2560,7 @@ packages:
cpu: [ia32]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-loong64@0.19.11:
@ -2552,6 +2577,7 @@ packages:
cpu: [loong64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-mips64el@0.19.11:
@ -2568,6 +2594,7 @@ packages:
cpu: [mips64el]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ppc64@0.19.11:
@ -2584,6 +2611,7 @@ packages:
cpu: [ppc64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-riscv64@0.19.11:
@ -2600,6 +2628,7 @@ packages:
cpu: [riscv64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-s390x@0.19.11:
@ -2616,6 +2645,7 @@ packages:
cpu: [s390x]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-x64@0.19.11:
@ -2632,6 +2662,7 @@ packages:
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/netbsd-x64@0.19.11:
@ -2648,6 +2679,7 @@ packages:
cpu: [x64]
os: [netbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/openbsd-x64@0.19.11:
@ -2664,6 +2696,7 @@ packages:
cpu: [x64]
os: [openbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/sunos-x64@0.19.11:
@ -2680,6 +2713,7 @@ packages:
cpu: [x64]
os: [sunos]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-arm64@0.19.11:
@ -2696,6 +2730,7 @@ packages:
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-ia32@0.19.11:
@ -2712,6 +2747,7 @@ packages:
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-x64@0.19.11:
@ -2728,6 +2764,7 @@ packages:
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@eslint-community/eslint-utils@4.4.0(eslint@8.56.0):
@ -6838,6 +6875,7 @@ packages:
'@esbuild/win32-arm64': 0.19.5
'@esbuild/win32-ia32': 0.19.5
'@esbuild/win32-x64': 0.19.5
dev: true
/escalade@3.1.1:
resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@ -13545,7 +13583,7 @@ packages:
debug: 4.3.4
pathe: 1.1.1
picocolors: 1.0.0
vite: 5.0.11
vite: 5.0.11(@types/node@20.10.6)
transitivePeerDependencies:
- '@types/node'
- less
@ -13610,41 +13648,6 @@ packages:
fsevents: 2.3.3
dev: true
/vite@5.0.11:
resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:
'@types/node': ^18.0.0 || >=20.0.0
less: '*'
lightningcss: ^1.21.0
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.19.11
postcss: 8.4.32
rollup: 4.9.2
optionalDependencies:
fsevents: 2.3.3
dev: true
/vite@5.0.11(@types/node@20.10.6):
resolution: {integrity: sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==}
engines: {node: ^18.0.0 || >=20.0.0}
@ -13674,7 +13677,7 @@ packages:
optional: true
dependencies:
'@types/node': 20.10.6
esbuild: 0.19.5
esbuild: 0.19.11
postcss: 8.4.32
rollup: 4.9.2
optionalDependencies:
@ -13734,7 +13737,7 @@ packages:
strip-literal: 1.3.0
tinybench: 2.5.1
tinypool: 0.8.1
vite: 5.0.11
vite: 5.0.11(@types/node@20.10.6)
vite-node: 1.1.0
why-is-node-running: 2.2.2
transitivePeerDependencies:

View File

@ -26,6 +26,7 @@
"@nanostores/react": "^0.7.1",
"@strudel/codemirror": "workspace:*",
"@strudel/core": "workspace:*",
"@strudel/canvas": "workspace:*",
"@strudel/csound": "workspace:*",
"@strudel/desktopbridge": "workspace:*",
"@strudel/hydra": "workspace:*",

View File

@ -1,5 +1,4 @@
import { colorMap } from '@strudel/core/color.mjs';
import React from 'react';
import { colorMap } from '@strudel/canvas';
const Colors = () => {
return (

View File

@ -4,7 +4,8 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { code2hash, getDrawContext, logger, silence } from '@strudel/core';
import { code2hash, logger, silence } from '@strudel/core';
import { getDrawContext } from '@strudel/canvas';
import cx from '@src/cx.mjs';
import { transpiler } from '@strudel/transpiler';
import {

View File

@ -24,7 +24,9 @@ angle(saw)
`;
// https://strudel.cc/?C31_NrcMfZEO
export const spiralflower = `const {innerWidth:ww,innerHeight:wh} = window;
export const spiralflower = `let {innerWidth:ww,innerHeight:wh} = window;
ww*=window.devicePixelRatio;
wh*=window.devicePixelRatio;
const ctx = getDrawContext()
const piDiv180 = Math.PI / 180;
function fromPolar(angle, radius, cx, cy) {

View File

@ -72,6 +72,7 @@ export async function getRandomTune() {
export function loadModules() {
let modules = [
import('@strudel/core'),
import('@strudel/canvas'),
import('@strudel/tonal'),
import('@strudel/mini'),
import('@strudel/xen'),