Translations Along X & Y Axis

By modifying the :X and :Y props of the <vector> we created in the previous example, we can move our rectangle around the screen. In the world of computer graphics, changing the position of an element is referred to as a "Translation"

<script>
    import Bytepath from "bytepath";
    export default {
        data() {
            return { x: 1, y: 1 };
        },
        components: {
            balloon: Bytepath.samples.assets.tinyBalloon.tinyBalloon,
        }
    }
</script>
<template>
    <div>
        <input type="range" v-model.number="x" min="0" max="100" />X = {{ x }}<br/>
        <input type="range" v-model.number="y" min="0" max="100" />Y = {{ y }}<br/>
        <balloon :x="x" :y="y"/>
    </div>
</template>

Scale Transformations

We can increase or decrease the size of our <vector> by modifying the :SX and :SY props of the <vector> component. In the world of computer graphics, changing the position of an element is referred to as a "Scale Transformation"

<script>
    import Bytepath from "bytepath";
    export default {
        data() {
            return {
                sx: 2,
                sy: 1,
            };
        },
        mounted(){
            this.$forceUpdate();
        },
        components: {
            balloon: Bytepath.samples.assets.tinyBalloon.tinyBalloon,
        }
    }
</script>
<template>
    <div>
        <input type="range" v-model.number="sx" min="0" max="4">Scale X = {{ sx }}<br/>
        <input type="range" v-model.number="sy" min="0" max="4">Scale Y = {{ sy }}<br/>
        <balloon :sx="sx" :sy="sy"/>
    </div>
</template>

• Note that because we are using vector graphics, we can increase the size of our graphics as much as we want without losing detail or increasing our memory footprint.

Rotation Transformations

We can rotate our <vector> components by modifying the :A prop. In the world of computer graphics, changing the position of an element is referred to as a "Rotation Transformation"

<script>
    import Bytepath from "bytepath";
    export default {
        data() {
            return { angle: 90 };
        },
        mounted(){
            this.angle = 0;
        },
        components: {
            balloon: Bytepath.samples.assets.tinyBalloon.tinyBalloon,
        }
    }
</script>
<template>
    <div>
        <input type="range" v-model.number="angle" min="0" max="360">Angle = {{ angle }}
        <svg width="100%" height="100%">
            <!-- Rotates in a circle starting at 0 Deg -->
            <balloon :a="angle % 360"/>
            <!-- Rotates in a circle starting at 45 Deg -->
            <balloon color="blue" :a="(45 + angle) % 360" :x="125"/>
            <!-- Rotates in a circle starting at 90 Deg -->
            <balloon color="green" :a="(90 + angle) % 360" :x="225"/>
            <!-- Rotates in a circle starting at 200 Deg -->
            <balloon color="orange" :a="(200 + angle) % 360" :x="325"/>
        </svg>
    </div>
</template>

Translating our prop in a circular motion

can translate in circular motion using math.sin and math.cos. Each of these functions just returns a number between 1 and -1 but the result of sin will be the opposite of cos. Combining the two of these together will make a circular motion

Width & Height Props

TIP

CURRENTLY BROKEN

Modifying the :width and :height props of a vector will override its internal size and force the image to be the provided dimensions.

<script>
    import Bytepath from "bytepath";
    export default {
        components: {
            vector: Bytepath.graphics.vector,
        }
    }
</script>
<template>
    <svg width="500" height="100">
        <vector :width="10" :height="10">
            <rect width="100" height="50" fill="red"/>
        </vector>
    </svg>
</template>

TIP

When manually setting width and height props, the preserveAspectRatio value of the SVGElement is set to "None" meaning you can and will end up with some strangely scaled images if you just enter random values here