dan/presentations
1
0
Fork 0
mirror of https://github.com/danbulant/presentations synced 2026-05-21 21:38:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

progress on memory visualization

Browse source
This commit is contained in:
Daniel Bulant 2024-02-11 21:13:38 +01:00
parent 499ddadc05
commit 5b7efdc144
1 changed files with 120 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

123
buffer-overflow/src/scenes/overwriting-locals.tsx
View file

@ -1,6 +1,6 @@
import {Circle, Layout, Ray, Rect, Txt, makeScene2D} from '@motion-canvas/2d';
import { CodeBlock, remove, insert, edit } from '@motion-canvas/2d/lib/components/CodeBlock';
import {Reference, all, beginSlide, createRef, createSignal} from '@motion-canvas/core';
import {Circle, Layout, Node, Ray, Rect, Txt, makeScene2D} from '@motion-canvas/2d';
import { CodeBlock, remove, insert, edit, lines } from '@motion-canvas/2d/lib/components/CodeBlock';
import {DEFAULT, Reference, all, beginSlide, createRef, createSignal} from '@motion-canvas/core';
const BACKGROUND = '#282C34';
const RED = '#E06C75';
@ -204,4 +204,121 @@ export default makeScene2D(function* (view) {
yield* beginSlide('Assembly code with header');
yield* code().selection(lines(1), 1);
yield* code().selection([...lines(1), ...lines(25)], 1);
yield* beginSlide('return code highlighted');
yield* code().selection(lines(2), 1);
yield* code().selection([...lines(2), ...lines(8, 9), ...lines(17, 18)], 1);
yield* beginSlide('local_c highlighted');
yield* code().selection(lines(3), 1);
yield* code().selection([...lines(3), ...lines(10, 13), ...lines(15)], 1);
yield* beginSlide('local_30 highlighted');
// memory visualization
const rect = createRef<Rect>();
const rbpRect = createRef<Rect>();
const local_cRect = createRef<Rect>();
const local_30Rect = createRef<Rect>();
view.add(
<Rect
ref={rect}
height={view.height() - 40}
width={500}
lineWidth={4}
stroke={GRAY}
opacity={0}
>
<Layout
direction="column"
width={500}
height={view.height() - 40}
layout
>
<Rect
ref={rbpRect}
height={150}
width={500}
fill={GREEN}
stroke={GRAY}
lineWidth={4}
grow={2}
alignItems={'center'}
>
<Txt width={500} textAlign={'center'} fill={BLACK} text="RBP" fontFamily={'monospace'} />
</Rect>
<Rect
ref={local_cRect}
height={100}
width={500}
fill={RED}
stroke={GRAY}
lineWidth={4}
grow={1}
alignItems={'center'}
>
<Txt width={500} textAlign={'center'} fill={BLACK} text="local_c" fontFamily={'monospace'} />
</Rect>
<Rect
ref={local_30Rect}
height={600}
width={500}
fill={CYAN}
stroke={GRAY}
lineWidth={4}
grow={10}
alignItems={'center'}
>
<Txt width={500} textAlign={'center'} fill={BLACK} text="local_30" fontFamily={'monospace'} />
</Rect>
</Layout>
</Rect>
);
yield* all(
code().selection(DEFAULT, .5),
code().x(-code().width() / 2, 1),
rect().opacity(1, .5),
rect().x(rect().width() / 2 + 150, 1)
);
const writeArrow = createRef<Ray>();
const metaInfo = createRef<Node>();
view.add(<Node ref={metaInfo} opacity={0}>
<Ray
ref={writeArrow}
fromX={rect().x() - rect().width() / 2 - 50}
toX={rect().x() - rect().width() / 2 - 50}
endArrow
lineWidth={4}
stroke={GRAY}
fromY={local_30Rect().y() + local_30Rect().height() / 2}
toY={local_30Rect().y() + local_30Rect().height() / 2}
lineDash={[10, 10]}
/>
<Txt topLeft={() => rbpRect().topRight().addX(rect().x() + 16)} text="RBP" fill={GRAY} fontFamily={'monospace'} fontSize={36} />
<Txt left={() => rbpRect().right().addX(rect().x() + 16)} text="8" fill={GRAY} fontSize={36} />
<Txt left={() => rbpRect().bottomRight().addX(rect().x() + 16)} text="RBP - 0x8" fill={GRAY} fontFamily={'monospace'} fontSize={36} />
<Txt left={() => local_cRect().right().addX(rect().x() + 16)} text="4" fill={GRAY} fontFamily={'monospace'} fontSize={36} />
<Txt left={() => local_cRect().bottomRight().addX(rect().x() + 16)} text="RBP - 0xC" fill={GRAY} fontFamily={'monospace'} fontSize={36} />
<Txt left={() => local_30Rect().right().addX(rect().x() + 16)} text="44" fill={GRAY} fontFamily={'monospace'} fontSize={36} />
<Txt bottomLeft={() => local_30Rect().bottomRight().addX(rect().x() + 16)} text={"RSP\n= RBP - 0x38"} fill={GRAY} fontFamily={'monospace'} fontSize={36} />
</Node>)
let writeArrowTo = writeArrow().to();
writeArrowTo.y = local_30Rect().y() - local_30Rect().height() / 2;
yield* all(
metaInfo().opacity(1, 1),
writeArrow().to(writeArrowTo, 1)
);
yield* beginSlide('Memory visualization');
});