MotionCanvas : I hate myself

I always wanted to teach. And I have always wasted time to find the right tool.

I have always revolved around motioncanvas, animotion, remotion and even revealjs.

As the title suggest I gave up and chose motioncanvas.

Yesterday I missed a day of dev. But I really enjoyed what I learnt, I'll probably show the my update here.

Here we go [initial commit]

The code for the above

import { Circle, CODE, Code, CubicBezier, Layout, LezerHighlighter, makeScene2D, Path, Rect } from '@motion-canvas/2d';
import { all, createEffect, createRef, Reference, sequence, spawn, waitFor, createSignal } from '@motion-canvas/core';
import { parser } from "@lezer/python";
import { PathBuilder } from "owd-path-builder";

Code.defaultHighlighter = new LezerHighlighter(
parser.configure({
dialect: 'py',
})
)

const emails = [
'vheller@yahoo.com',
'edgar.jacobson@yahoo.com',
'plebsack@gmail.com',
'medhurst.elsie@homenick.com',
'tyler41@yahoo.com',
'greenholt.dorthy@gmail.com',
'nola11@braun.com',
'monte62@yahoo.com',
'nader.ivory@grady.net',
'lillie.kunde@stamm.com'
]

const regexpEg = `email = re.findall(r'[w.-]+@[w.-]+(.[w]+)+',line)`

const regexpEgWords = regexpEg.split(`=`)

const regexpLeft = regexpEgWords[0]
const regexpRight = regexpEgWords[1]

const bg = "#272822"

export default makeScene2D(function* (view) {
// Create your animations here
view.fill(bg)

const code = createRef<Code>();
const codeContainer = createSignal<Layout>()
const codeSignal = createSignal(code)

const bottom = {
ref : createRef<Path>(),
path : new PathBuilder(),
}
const top = {
ref : createRef<Path>(),
path : new PathBuilder(),
}
const left = {
ref : createRef<Path>(),
path : new PathBuilder(),
}
const right = {
ref : createRef<Path>(),
path : new PathBuilder(),
}

createEffect(() => {

})

view.add(
<>
<Code
ref={code}
fontSize={50}
code={``}
/>,
<Path
ref={bottom.ref}
lineWidth={26}
stroke={"#fff"}
data={bottom.path.absolute().moveTo(-3000, 550).toString()}
scale={0.25}
/>,
<Path
ref={top.ref}
lineWidth={26}
stroke={"#fff"}
data={top.path.absolute().moveTo(3000, -550).toString()}
scale={0.25}
/>,
<Path
ref={right.ref}
lineWidth={26}
stroke={"#fff"}
data={right.path.absolute().moveTo(3000, 550).toString()}
scale={0.25}
/>
<Path
ref={left.ref}
lineWidth={26}
stroke={"#fff"}
data={left.path.absolute().moveTo(-3000, -550).toString()}
scale={0.25}
/>
</>
)

yield* all(
bottom.ref().data(
bottom.path.horizontalLine(3000).toString(),
3,
),
top.ref().data(
top.path.horizontalLine(-3000).toString(),
3,
),
right.ref().data(
right.path.verticalLine(-550).toString(),
1,
),
left.ref().data(
left.path.verticalLine(550).toString(),
1,
),
code().code.append(regexpRight, 3),
waitFor(1)
)

});