Add scaffolding for video aimation

Using motion-canvas requires a whole bunch of crap
This commit is contained in:
Frederik Menke 2024-01-06 23:56:21 +01:00
parent b79aaca74d
commit 36fddc99c8
10 changed files with 1401 additions and 0 deletions

View file

@ -0,0 +1,15 @@
# Generated files
node_modules
output
dist
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,21 @@
{
"name": "gcode_animation",
"private": true,
"version": "0.0.0",
"scripts": {
"start": "vite",
"serve": "vite",
"build": "tsc && vite build"
},
"dependencies": {
"@motion-canvas/core": "^3.12.1",
"@motion-canvas/2d": "^3.12.4",
"@motion-canvas/ffmpeg": "^1.1.0"
},
"devDependencies": {
"@motion-canvas/ui": "^3.12.4",
"@motion-canvas/vite-plugin": "^3.12.3",
"typescript": "^5.2.2",
"vite": "^4.0.0"
}
}

View file

@ -0,0 +1 @@
/// <reference types="@motion-canvas/core/project" />

View file

@ -0,0 +1,32 @@
{
"version": 0,
"shared": {
"background": null,
"range": [
0,
null
],
"size": {
"x": 1920,
"y": 1080
},
"audioOffset": 0
},
"preview": {
"fps": 30,
"resolutionScale": 1
},
"rendering": {
"fps": 60,
"resolutionScale": 1,
"colorSpace": "srgb",
"exporter": {
"name": "@motion-canvas/core/image-sequence",
"options": {
"fileType": "image/png",
"quality": 100,
"groupByScene": false
}
}
}
}

View file

@ -0,0 +1,7 @@
import {makeProject} from '@motion-canvas/core';
import example from './scenes/example?scene';
export default makeProject({
scenes: [example],
});

View file

@ -0,0 +1,5 @@
{
"version": 0,
"timeEvents": [],
"seed": 1794886323
}

View file

@ -0,0 +1,22 @@
import { makeScene2D, Circle } from '@motion-canvas/2d';
import { all, createRef } from '@motion-canvas/core';
export default makeScene2D(function*(view) {
const myCircle = createRef<Circle>();
view.add(
<Circle
ref={myCircle}
// try changing these properties:
x={-300}
width={140}
height={140}
fill="#e13238"
/>,
);
yield* all(
myCircle().position.x(300, 1).to(-300, 1),
myCircle().fill('#e6a700', 1).to('#e13238', 1),
);
});

View file

@ -0,0 +1,4 @@
{
"extends": "@motion-canvas/2d/tsconfig.project.json",
"include": ["src"]
}

View file

@ -0,0 +1,10 @@
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
import ffmpeg from '@motion-canvas/ffmpeg';
export default defineConfig({
plugins: [
motionCanvas(),
ffmpeg(),
],
});