create-definedmotion 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-definedmotion",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Create a new DefinedMotion animation project",
   "author": "Hugo Olsson",
   "license": "MIT",
@@ -34,4 +34,4 @@
     "three.js",
     "motion-graphics"
   ]
-}
+}

package/src/cli.js

@@ -3,7 +3,6 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 import minimist from 'minimist';
-import { execSync } from 'child_process';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const argv = minimist(process.argv.slice(2));
@@ -32,7 +31,7 @@ async function createProject() {
 
   // Copy template
   const templateDir = path.join(__dirname, '..', 'template');
-  
+
   console.log(chalk.gray('Creating project structure...'));
   fs.copySync(templateDir, targetDir);
 
@@ -52,44 +51,19 @@ async function createProject() {
 
   console.log(chalk.green('✓') + ' Project structure created');
 
-  // Install dependencies (unless skipped)
-  if (!argv['skip-install']) {
-    console.log(chalk.gray('\nInstalling dependencies (this may take a minute)...\n'));
-    
-    try {
-      execSync('npm install', {
-        cwd: targetDir,
-        stdio: 'inherit'
-      });
-      console.log('\n' + chalk.green('✓') + ' Dependencies installed');
-    } catch (error) {
-      console.log('\n' + chalk.yellow('⚠') + ' Failed to install dependencies');
-      console.log(chalk.gray('  You can install them manually:'));
-      console.log('  ' + chalk.cyan(`cd ${projectName}`));
-      console.log('  ' + chalk.cyan('npm install'));
-    }
-  }
-
-  // Success message
+  // Always skip dependency installation; print next steps instead
   console.log('\n' + chalk.bold.green('✨ Success!') + ' Created ' + chalk.cyan(projectName));
   console.log('\n' + chalk.bold('Next steps:'));
   console.log(chalk.gray('\n  Navigate to your project:'));
   console.log('  ' + chalk.cyan(`cd ${projectName}`));
-  
-  if (argv['skip-install']) {
-    console.log(chalk.gray('\n  Install dependencies:'));
-    console.log('  ' + chalk.cyan('npm install'));
-  }
-  
+  console.log(chalk.gray('\n  Install dependencies:'));
+  console.log('  ' + chalk.cyan('npm install'));
   console.log(chalk.gray('\n  Start development:'));
   console.log('  ' + chalk.cyan('npm run dev'));
-  
   console.log(chalk.gray('\n  Create your animations in:'));
   console.log('  ' + chalk.cyan('src/renderer/src/scenes/'));
-  
   console.log('\n' + chalk.gray('Need help? Check out the docs:'));
   console.log('  ' + chalk.cyan('https://github.com/HugoOlsson/DefinedMotion'));
-  
   console.log('\n' + chalk.bold('Happy animating! 🚀\n'));
 }
 
@@ -97,4 +71,4 @@ async function createProject() {
 createProject().catch(error => {
   console.error(chalk.red('Error:'), error.message);
   process.exit(1);
-});
+});

package/template/src/entry.ts

@@ -10,11 +10,10 @@ import { tutorial_easy1 } from './example_scenes/tutorials/easy1'
 import { tutorial_easy2 } from './example_scenes/tutorials/easy2'
 import { tutorial_medium1 } from './example_scenes/tutorials/medium1'
 import { tutorial_easy3 } from './example_scenes/tutorials/easy3'
-import { fourierMachineScene } from './example_scenes/fourierMachineScene'
 
 export const screenFps = 120 //Your screen fps
 export const renderSkip = 2 //Will divide your screenFps with this for render output fps
 export const animationFPSThrottle = 1 // Use to change preview fps, will divide your fps with this value
 
 export const renderOutputFps = () => screenFps / renderSkip
-export const entryScene: () => AnimatedScene = () => fourierMachineScene()
+export const entryScene: () => AnimatedScene = () => tutorial_easy1()

package/template/src/renderer/src/app.css

@@ -21,4 +21,8 @@
     background: #fff;
     font-family: "Montserrat", sans-serif;
     color: #000;
-  }
+  }
+
+  html::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+}

package/template/src/scenes/.gitignore

@@ -0,0 +1,5 @@
+# ignore everything in this dir…
+*
+# …but keep the placeholder and the ignore file tracked
+!.gitkeep
+!.gitignore

package/template/src/example_scenes/fourierMachineScene.ts

@@ -1,108 +0,0 @@
-import { createBumpMap } from '$renderer/lib/rendering/bumpMaps/noise'
-import { addHDRI, addSceneLighting, HDRIs, loadHDRIData } from '$renderer/lib/rendering/lighting3d'
-import { createCircle } from '$renderer/lib/rendering/objects2d'
-import { AnimatedScene, HotReloadSetting, SpaceSetting } from '$renderer/lib/scene/sceneClass'
-
-import * as THREE from 'three'
-
-interface Relation {
-  name: string
-  radius: (n: number) => number
-  k: (n: number) => number
-  phase: (n: number) => number
-  latexString: string
-}
-
-const baseRadius = 5
-
-const relation: Relation = {
-  name: 'Sawtooth Wave',
-  // all harmonics, amplitude ∝1/n with alternating sign
-  radius: (n) => ((2 * baseRadius) / (Math.PI * n)) * (-1) ** (n + 1),
-  k: (n) => n,
-  phase: () => 0,
-  latexString: String.raw`\sum_{n=1}^{N} \frac{2(-1)^{n+1}}{\pi n} \sin(nt)`
-}
-
-const bumpMap = createBumpMap({
-  width: 512,
-  height: 512,
-  noiseAlgorithm: 'random',
-  intensity: 0.2
-})
-
-const material = new THREE.MeshStandardMaterial({
-  color: 0xffffff,
-  metalness: 1,
-  bumpMap: bumpMap,
-  roughness: 0.3,
-  side: THREE.DoubleSide
-}) as any
-
-function createRingGeometry(
-  innerRadius: number,
-  outerRadius: number,
-  thickness: number
-): THREE.BufferGeometry {
-  // Create a rectangular cross-section that will be rotated around the Y axis
-  const points = [
-    new THREE.Vector2(innerRadius, -thickness / 2),
-    new THREE.Vector2(outerRadius, -thickness / 2),
-    new THREE.Vector2(outerRadius, thickness / 2),
-    new THREE.Vector2(innerRadius, thickness / 2),
-    new THREE.Vector2(innerRadius, -thickness / 2) // Close the shape
-  ]
-
-  // Create geometry by rotating the shape around the Y axis
-  const geometry = new THREE.LatheGeometry(points, 100) // 100 segments for smoothness
-
-  return geometry
-}
-
-function createFourierCircle(radius: number): THREE.Group {
-  const group = new THREE.Group()
-  const circleThickness = 0.2
-  const nobRadius = 0.3
-
-  // Create ring with proper surfaces
-  const circleGeometry = createRingGeometry(nobRadius * 1.1, radius, circleThickness)
-  const circle = new THREE.Mesh(circleGeometry, material)
-  circle.rotation.x = Math.PI / 2
-  circle.castShadow = true
-  circle.receiveShadow = true
-  group.add(circle)
-
-  const nobHeight = 1
-  const nobGeometry = new THREE.CylinderGeometry(nobRadius, nobRadius, nobHeight, 32)
-  const nob = new THREE.Mesh(nobGeometry, material)
-  nob.rotation.x = Math.PI / 2
-  nob.position.x = radius - nobRadius * 2
-  nob.position.z = circleThickness / 2 + nobHeight / 2
-  nob.castShadow = true
-  nob.receiveShadow = true
-  group.add(nob)
-
-  return group
-}
-
-const hdriData = await loadHDRIData(HDRIs.indoor1, 2, 1)
-
-export function fourierMachineScene(): AnimatedScene {
-  return new AnimatedScene(
-    1080,
-    1920,
-    SpaceSetting.ThreeDim,
-    HotReloadSetting.TraceFromStart,
-    async (dmScene) => {
-      dmScene.renderer.shadowMap.enabled = true
-      dmScene.renderer.shadowMap.type = THREE.PCFSoftShadowMap
-      const circle = createFourierCircle(6)
-      await addHDRI(dmScene, hdriData, 0.3)
-      addSceneLighting(dmScene.scene)
-      dmScene.add(circle)
-
-      const axesHelper = new THREE.AxesHelper(15) // Size of 15 units
-      dmScene.add(axesHelper)
-    }
-  )
-}