Skip to content

Commit

Permalink
simple
Browse files Browse the repository at this point in the history
  • Loading branch information
IcedDog committed Aug 27, 2024
1 parent 5e9b35a commit 8a4f75c
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 51 deletions.
1 change: 1 addition & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
# https://github.com/qmelo/oversubstitution/blob/main/.github/workflows/deploy.yml
# 静的コンテンツを GitHub Pages にデプロイするためのシンプルなワークフロー
name: Deploy static content to Pages

Expand Down
48 changes: 41 additions & 7 deletions src/experiments/index.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,51 @@
let timenow = new Date().getTime()
let r: number, tx: number, ty: number, width: number, height: number
let angle: number = 0

export const preload = () => {

}

export const setup = () => {
timenow = new Date().getTime()
p.textAlign(p.CENTER, p.CENTER)

width = p.width
height = p.height
r = p.min(width, height) * 0.3
tx = width / 2 + p.min(width, height) * 0.9 - p.min(width, height) / 2
ty = height / 2 + p.min(width, height) * 0.9 - p.min(width, height) / 2
}

export const draw = () => {
p.background(25)
p.rect(p.mouseX, p.mouseY, 100, 100)
p.textSize(32)
p.fill(255)
p.text(`Time since setup: ${(new Date().getTime() - timenow) / 1000} seconds`, 10, 30)
p.clear();

const x = width / 2 + p.cos(angle) * r;
const y = height / 2 + p.sin(angle) * r;

p.stroke(100);
p.noFill();
p.line(x, y, tx, y);
p.line(x, y, x, ty);
p.line(tx, height / 2 - r, tx, height / 2 + r);
p.line(width / 2 - r, ty, width / 2 + r, ty);

p.stroke(240);
p.noFill();
p.circle(width / 2, height / 2, r * 2);

p.stroke(240);
p.fill("#292a33");
p.circle(x, y, 10);
p.circle(tx, y, 10);
p.circle(x, ty, 10);

p.noStroke();
p.fill(240);
p.text("cosθ", width / 2 - r - 20, ty);
p.text("sinθ", tx, height / 2 - r - 15);
p.text(-1, width / 2 - r, ty + 15);
p.text(1, width / 2 + r, ty + 15);
p.text(-1, tx + 15, height / 2 - r);
p.text(1, tx + 15, height / 2 + r);

angle += 0.02;
}
43 changes: 1 addition & 42 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,45 +19,4 @@ export const sketches = [
"pixelDensity": 2
}
}
];

export const canvasSetup = async (
preloadFunction: Function,
setupFunction: Function,
drawFunction: Function,
options: any = {
"width": 1920,
"height": 1080,
"fps": 60,
"size": 1.0,
"pixelDensity": window.devicePixelRatio
}
) => {
try { document.querySelector("canvas")?.remove() } catch (e: any) {
try { p.remove() } catch (e: any) { }
}
p.preload = () => { preloadFunction() }
p.draw = () => { drawFunction() }
p.setup = () => {
p.createCanvas(options.width, options.height)
p.pixelDensity(options.pixelDensity)
p.frameRate(options.fps)
setupFunction()
}
p.windowResized = () => {
const canvas = document.querySelector("canvas") as HTMLCanvasElement
canvas.style.position = "absolute"
canvas.style.top = "50%"
canvas.style.left = "50%"
const scale = Math.min(window.innerWidth / options.width, window.innerHeight / options.height) * options.size
canvas.style.transform = "translate(-50%, -50%) scale(" + scale + ")"
}

p.pop()
p.push()
p.clear()
p.resetShader()
p.preload()
p.setup()
p.windowResized()
}
];
42 changes: 41 additions & 1 deletion src/main.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { sketches } from "./index.ts"
import "./global.d.ts"
import { canvasSetup, sketches } from "./index.ts"

let pauseBtn: HTMLButtonElement
let dialog: HTMLDivElement
Expand Down Expand Up @@ -79,4 +79,44 @@ function showPauseButton() {

function hidePauseButton() {
pauseBtn.style.opacity = "0"
}

function canvasSetup(
preloadFunction: Function,
setupFunction: Function,
drawFunction: Function,
options: any = {
"width": 1920,
"height": 1080,
"fps": 60,
"size": 1,
"pixelDensity": window.devicePixelRatio
}
) {
try { document.querySelector("canvas")?.remove() } catch (e: any) {
try { p.remove() } catch (e: any) { }
}
p.preload = () => { preloadFunction() }
p.draw = () => { drawFunction() }
p.setup = () => {
p.createCanvas(options.width, options.height)
p.pixelDensity(options.pixelDensity)
p.frameRate(options.fps)
p.pop()
p.push()
p.clear()
p.resetShader()
setupFunction()
}
p.windowResized = () => {
const canvas = document.querySelector("canvas") as HTMLCanvasElement
canvas.style.position = "absolute"
canvas.style.top = "50%"
canvas.style.left = "50%"
const scale = Math.min(window.innerWidth / options.width, window.innerHeight / options.height) * options.size
canvas.style.transform = "translate(-50%, -50%) scale(" + scale + ")"
}
p.preload()
p.setup()
p.windowResized()
}
1 change: 0 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,4 @@
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

0 comments on commit 8a4f75c

Please sign in to comment.