![[Kazuhisa Nishikawa’s irregular column]AI ವೀಡಿಯೊಗಳನ್ನು ಚಿತ್ರೀಕರಿಸದೆ ಅಥವಾ ರಚಿಸದೆ ಸಂಗೀತ ವೀಡಿಯೊಗಳನ್ನು ರಚಿಸಿ! ಕೋಡ್ನೊಂದಿಗೆ ವೀಡಿಯೊಗಳನ್ನು ರಚಿಸಲು AI ಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡಿ [Kazuhisa Nishikawa’s irregular column]AI ವೀಡಿಯೊಗಳನ್ನು ಚಿತ್ರೀಕರಿಸದೆ ಅಥವಾ ರಚಿಸದೆ ಸಂಗೀತ ವೀಡಿಯೊಗಳನ್ನು ರಚಿಸಿ! ಕೋಡ್ನೊಂದಿಗೆ ವೀಡಿಯೊಗಳನ್ನು ರಚಿಸಲು AI ಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡಿ](https://asset.watch.impress.co.jp/img/pcw/docs/2150/835/C00_l.jpg)
ಚಿತ್ರ
ಇದು ಅಕ್ಟೋಬರ್, ಮತ್ತು ನಗರವು ಸಂಪೂರ್ಣ ಹ್ಯಾಲೋವೀನ್ ಮೋಡ್ನಲ್ಲಿದೆ. ಆದ್ದರಿಂದ ಈ ಸಮಯದಲ್ಲಿ, ನಾನು AI ಅನ್ನು ಬಳಸಿಕೊಂಡು “ಹ್ಯಾಲೋವೀನ್ ತರಹದ ಮೋಜಿನ MV” ಅನ್ನು ರಚಿಸಲು ಬಯಸುತ್ತೇನೆ.
ಆದಾಗ್ಯೂ, ಈ ಬಾರಿ ಇದು ಲೈವ್-ಆಕ್ಷನ್-ಶೈಲಿಯಲ್ಲಿ ರಚಿಸಲಾದ AI ವೀಡಿಯೊ ಅಲ್ಲ. ಇದು ರಿಯಾಕ್ಟ್ನ “ರಿಮೋಷನ್’ ಮತ್ತು ಕೋಡ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಪಠ್ಯ, ಆಕಾರಗಳು, ಫೋಟೋಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳನ್ನು ಚಲಿಸುವ `ಮೋಷನ್ ಗ್ರಾಫಿಕ್ಸ್’ ಅನ್ನು ರಚಿಸುವ ಕಥೆಯಾಗಿದೆ. ರಿಮೋಷನ್ ಎನ್ನುವುದು ರಿಯಾಕ್ಟ್ ಫ್ರೇಮ್ನಲ್ಲಿ ಬರೆಯಲಾದ ಪರದೆಗಳನ್ನು ಫ್ರೇಮ್ ಮೂಲಕ ಸೆಳೆಯುವ ಮತ್ತು ಅವುಗಳನ್ನು MP4 ನಂತಹ ವೀಡಿಯೊಗಳಾಗಿ ರಫ್ತು ಮಾಡುವ ಸಾಧನವಾಗಿದೆ.
ಚಲನೆಯ ಗ್ರಾಫಿಕ್ಸ್ ಎಂದರೇನು?
ಮೋಷನ್ ಗ್ರಾಫಿಕ್ಸ್ ಎನ್ನುವುದು ಚಲಿಸುವ ಪಾತ್ರಗಳು, ಆಕಾರಗಳು, ಐಕಾನ್ಗಳು, ಫೋಟೋಗಳು ಇತ್ಯಾದಿಗಳನ್ನು ತೋರಿಸುವ ದೃಶ್ಯ ಅಭಿವ್ಯಕ್ತಿಯಾಗಿದೆ. ಸುದ್ದಿ ಕಾರ್ಯಕ್ರಮಗಳ ಶೀರ್ಷಿಕೆಗಳು, ಜಾಹೀರಾತುಗಳಲ್ಲಿ ಪಾಪ್ ಔಟ್ ಆಗುವ ಪಾತ್ರಗಳು ಅಥವಾ ಯೂಟ್ಯೂಬ್ನಲ್ಲಿ ವಿವರಣಾತ್ಮಕ ವೀಡಿಯೊಗಳಲ್ಲಿ ಎಣಿಸುವ ಸಂಖ್ಯೆಗಳ ಕುರಿತು ನೀವು ಯೋಚಿಸಿದಾಗ, “ಓಹ್, ಅದು ಇಲ್ಲಿದೆ” ಎಂದು ನೀವು ಭಾವಿಸಬಹುದು.
ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ಇದು ಲೈವ್-ಆಕ್ಷನ್ ಛಾಯಾಗ್ರಹಣ ಅಥವಾ ಜನರೇಟಿವ್ AI ವೀಡಿಯೊ ಮಾದರಿಯನ್ನು ಬಳಸುವುದಿಲ್ಲ, ಅದು ಈ ದಿನಗಳಲ್ಲಿ ಬಿಸಿ ವಿಷಯವಾಗಿದೆ. ಇದು ವಸ್ತುಗಳನ್ನು “ಜೋಡಿಸುವ ಮತ್ತು ಚಲಿಸುವ” ವೀಡಿಯೊದ ಒಂದು ವಿಧವಾಗಿದೆ.
ನಿಮ್ಮ PC ಯಲ್ಲಿ ಇದನ್ನು ಸುಲಭವಾಗಿ ಸಾಧಿಸಲು ರಿಮೋಷನ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ವಿಧಾನವು ಪ್ರಾಚೀನವೇ? ಆದ್ದರಿಂದ, ಚಲಿಸುವ ವೆಬ್ ಪುಟವನ್ನು ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದು ಫ್ರೇಮ್ ಆಗಿ ಪರಿವರ್ತಿಸಲು ಮತ್ತು MP4 ಅನ್ನು ರಚಿಸಲು ffmpeg ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅವುಗಳನ್ನು ಸಂಪರ್ಕಿಸಲು ಇದು ಸ್ವಲ್ಪ ಸಾಹಸವಾಗಿದೆ. ಹಂತಗಳು ಈ ಕೆಳಗಿನಂತಿವೆ.
- HTML/CSS ರೀತಿಯಲ್ಲಿಯೇ ಬರೆಯಿರಿ (ಪಠ್ಯ, ಬಣ್ಣ, ಸ್ಥಾನ, ಸ್ಕೇಲಿಂಗ್, ಇತ್ಯಾದಿ.)
- ನೀವು “ಈಗ ಯಾವ ಫ್ರೇಮ್ ಆಗಿದೆ” ಎಂದು ಹೇಳುವ ಮೌಲ್ಯವನ್ನು (useCurrentFrame()) ಪಡೆಯಬಹುದು, ಆದ್ದರಿಂದ ನೀವು ಆ ಮೌಲ್ಯದೊಂದಿಗೆ ನೋಟವನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಅದು ಅನಿಮೇಶನ್ ಆಗುತ್ತದೆ.
- ಬ್ರೌಸರ್ನಲ್ಲಿ ಪೂರ್ವವೀಕ್ಷಣೆ ಪರದೆಯಲ್ಲಿ (ರಿಮೋಷನ್ ಸ್ಟುಡಿಯೋ) ಪ್ಲೇ ಮಾಡುವಾಗ ಪರಿಶೀಲಿಸಿ.
- ಅಂತಿಮವಾಗಿ, ಒಂದು ಆಜ್ಞೆಯೊಂದಿಗೆ MP4 ಗೆ ರಫ್ತು ಮಾಡಿ
ಪ್ರೋಗ್ರಾಂ ನಿರ್ಧರಿಸಿದಂತೆ ಅದನ್ನು ಚಿತ್ರಿಸಿರುವುದರಿಂದ, ಫಲಿತಾಂಶವು ಪ್ರತಿ ಬಾರಿಯೂ ಒಂದೇ ಆಗಿರುತ್ತದೆ ಮತ್ತು ರಚಿತವಾದ AI ವೀಡಿಯೊಗಳಂತಹ ಯಾವುದೇ “ಗಾಚಾ” ಇಲ್ಲ. ಇದಲ್ಲದೆ, ನೀವು ಅಕ್ಷರಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ನಿಖರವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ವೀಡಿಯೊಗಳಿಗೆ ಇದು ಹೆಚ್ಚು ಅನುಕೂಲಕರವಾಗಿದೆ.
ತಯಾರಿ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ.
1. ಖಾಲಿ ಫೋಲ್ಡರ್ ರಚಿಸಿ ಮತ್ತು ಅದನ್ನು ಸರಿಸಿ (ಫೋಲ್ಡರ್ ಐಚ್ಛಿಕ)
mkdir -p ~/Desktop/mg && cd ~/Desktop/mg
2. ಖಾಲಿ ಟೆಂಪ್ಲೇಟ್ ಅನ್ನು ರಚಿಸಿ (ಖಾಲಿ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಒಮ್ಮೆ ಮಾತ್ರ ರನ್ ಮಾಡಿ)
npx create-video@latest --yes --blank .
3. ರಿಮೋಷನ್ ಸ್ಟುಡಿಯೋವನ್ನು ಪ್ರಾರಂಭಿಸಿ (ಪೂರ್ವವೀಕ್ಷಣೆ ಪರದೆ) → http://localhost:3000
npm run dev
ಇದು ಖಾಲಿ ರಿಮೋಷನ್ ಸ್ಟುಡಿಯೋವನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. Ctrl+C ನೊಂದಿಗೆ ನಿರ್ಗಮಿಸೋಣ.

ಖಾಲಿ ರಿಮೋಷನ್ ಸ್ಟುಡಿಯೋ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ
ಕೆಳಗೆ ಮೂರು ಸರಳ ಉದಾಹರಣೆಗಳಿವೆ. ಇದು ಕೋಡ್ ಆಗಿರುವುದರಿಂದ, ಅನೇಕ ಜನರು ಅದನ್ನು ನೋಡುವ ಮೂಲಕ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬಹುದು.
ಉದಾಹರಣೆ 1: ಅಕ್ಷರಗಳು ಮೃದುವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ
ಮೊದಲ ಹೆಜ್ಜೆ. ಪದಗಳು “AI ಎಂದರೇನು?” ಕೆಳಗಿನಿಂದ ಎದ್ದು ಕಾಣುತ್ತವೆ.

ಪಾಯಿಂಟ್ ಇಂಟರ್ಪೋಲೇಟ್ ಆಗಿದೆ. ಇದು ಸರಳವಾಗಿ ಹೇಳುತ್ತದೆ, “ಫ್ರೇಮ್ಗಳು 0 ಮತ್ತು 20 ರ ನಡುವೆ, ಪಾರದರ್ಶಕತೆಯನ್ನು 0 ರಿಂದ 1 ಕ್ಕೆ ಮತ್ತು ಸ್ಥಾನವನ್ನು 60px ನಿಂದ 0 ಗೆ ಬದಲಾಯಿಸಿ.” 20 ನೇ ಚೌಕಟ್ಟಿನ ನಂತರ, ಇದು ಕ್ಲಾಂಪ್ನೊಂದಿಗೆ ನಿಲ್ಲುತ್ತದೆ, ಆದ್ದರಿಂದ ಅಕ್ಷರಗಳು ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತವೆ ಮತ್ತು ಚಲಿಸುವುದಿಲ್ಲ.
ಕಾರ್ಯಗತಗೊಳಿಸಲು, src/Root.tsx ಅನ್ನು ಈ ಕೆಳಗಿನಂತೆ ಪುನಃ ಬರೆಯಿರಿ.
import {Composition} from 'remotion';
import {Title} from './Title';
export const RemotionRoot: React.FC = () => (
<>
>
);
ನಂತರ npm ರನ್ dev ಅನ್ನು ರನ್ ಮಾಡಿ.
AI ಎಂದರೇನು? ತೆರಳಿದರು
ಉದಾಹರಣೆ 2: ಸಂಖ್ಯೆಗಳ ಎಣಿಕೆ
ಪರಿಚಯಾತ್ಮಕ ವೀಡಿಯೊಗಳಲ್ಲಿ ನೀವು ಆಗಾಗ್ಗೆ ನೋಡುವ “15,000 ಬಳಕೆದಾರರು” ನಂತಹ ಎಣಿಕೆ ಮುಂದಿನದು.

ವಸಂತವು ಒಂದು ಉಪಯುಕ್ತ ಕಾರ್ಯವಾಗಿದ್ದು ಅದು “ವೇಗವಾಗಿ ಸಮೀಪಿಸುವ ಮತ್ತು ಸರಾಗವಾಗಿ ನಿಲ್ಲುವ” ಮೌಲ್ಯವನ್ನು 0 ರಿಂದ 1 ರವರೆಗೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅದನ್ನು 15,000 ರಿಂದ ಗುಣಿಸಿದಾಗ ಸಂಖ್ಯೆಯು ಹೆಚ್ಚಾಗುವ ಅನಿಮೇಶನ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
ನಂತರ, src/Root.tsx ನಲ್ಲಿ ಶೀರ್ಷಿಕೆ ಎಂದು ಬರೆದಿರುವ ನಾಲ್ಕು ಸ್ಥಳಗಳನ್ನು ಕೌಂಟರ್ಗೆ ಬದಲಾಯಿಸಿ ಮತ್ತು npm ರನ್ dev ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
ಎಣಿಸಿ
ಉದಾಹರಣೆ 3: ಫೋಟೋಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳನ್ನು ಆಮದು ಮಾಡಿ
ಇಲ್ಲಿಯವರೆಗೆ, ಅಕ್ಷರಗಳು ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತಿತ್ತು, ಆದರೆ ರಿಮೋಷನ್ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಫೋಟೋಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ಇದು ವಾಸ್ತವವಾಗಿ ಸಾಕಷ್ಟು ದೊಡ್ಡದಾಗಿದೆ. ಉತ್ಪನ್ನದ ಫೋಟೋಗಳು, ಸೈಟ್ ಸ್ಕ್ರೀನ್ಶಾಟ್ಗಳು, ವೀಡಿಯೊಗಳು ಇತ್ಯಾದಿಗಳನ್ನು ಸಾರ್ವಜನಿಕ/ಫೋಲ್ಡರ್ನಲ್ಲಿ ಇರಿಸಿ. ಇಲ್ಲಿ ಎರಡು ಫೈಲ್ಗಳಿವೆ: public/photo.jpg ಮತ್ತು public/clip.mp4.
· ಛಾಯಾಚಿತ್ರ: ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಪಠ್ಯದ ರೀತಿಯಲ್ಲಿಯೇ ಅನಿಮೇಟೆಡ್ ಮಾಡಬಹುದು, ಉದಾಹರಣೆಗೆ ಹಿಗ್ಗುವಿಕೆ, ಚಲನೆ, ಪಾರದರ್ಶಕತೆ, ಇತ್ಯಾದಿ.
· ಚಲನಚಿತ್ರ:
src/Media.tsx
import {AbsoluteFill, Img, OffthreadVideo, interpolate, spring, staticFile, useCurrentFrame, useVideoConfig} from 'remotion';
export const Media: React.FC = () => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
// 写真:大きく拡大しながら、斜めにパンして、少し回転する
const zoom = interpolate(frame, [0, 90], [1.1, 1.7]);
const panX = interpolate(frame, [0, 90], [-120, 120]);
const panY = interpolate(frame, [0, 90], [80, -80]);
const rotate = interpolate(frame, [0, 90], [-4, 4]);
// 動画の小窓:ぽんっと登場し、画面の中を円を描くように動き回る
const pop = spring({frame, fps, config: {damping: 8}}); // 勢いよく出て、弾んで止まる
const t = frame / 90 * Math.PI * 2; // 0~90コマで一周(2π)
const x = Math.cos
Source link