Skip to main content
SimilarExport ZIP
100%

simple C# Matrix manipulation for Silverlight transforms

✓ Published0🌍 Public
RRandomEtc
Last edited Aug 5, 2009
Created on Aug 5, 2009

This example demonstrates a set of C# extension methods for manipulating Silverlight’s `System.Windows.Media.Matrix` structure, enabling chained scale, translation, and rotation operations. The code illustrates how to transform a matrix by passing it through methods like `Scale`, `Translate`, and `Rotate`, which return the modified matrix for fluent composition. It highlights the value-passing semantics of structs in C#, requiring reassignment of the result, while simplifying common transform sequences such as scaling or rotating around a specific point. The implementation relies solely on Silverlight’s matrix API and `System.Math` for trigonometric calculations.

AI-generated description

Similar vizzes

Loading thumbnail…

Matrix3 Manipulation

A live interactive demo of 2D affine transformations implemented with a custom 3×3 matrix class. The page shows a gray box containing a dark square with a photo background and the label “F__Q”, which users can translate, scale, and rotate in real time using the dat.GUI control panel. The underlying JavaScript builds transformation matrices for translation, rotation, and scale, multiplies them in sequence, and converts the result to a CSS `matrix()` string applied to the element’s `transform` property.

11Cr18Ni9
64% match
Loading thumbnail…

2D Matrix Decomposition

This example demonstrates how a 2D transformation matrix can be decomposed into its fundamental components: translation, rotation, scale, and skew. The visualization shows a small interface where users can manipulate a matrix, and the code, using the `transform.js` file and the D3.js library, computes and displays these decomposed values. It leverages SVG DOM APIs such as `createElementNS` to parse transformation strings, then applies linear algebra operations like dot products and normalization to extract the parameters. The implementation provides a custom `d3_transform` object with `translate`, `rotate`, `scale`, and `skew` properties, offering a clear breakdown of matrix decomposition.

Mmbostock
60% match
Loading thumbnail…

Transform Transitions

This visualization demonstrates smooth SVG transform transitions, where hovering over any square in a grid triggers an animated sequence that scales, rotates, and repositions it before fading it out. It uses D3 v3’s matrix decomposition to interpolate between arbitrary transform types, such as moving from a simple translate to a combined scale and rotate. The grid consists of 960 by 500 pixel area divided into 20-pixel cells, colored via HSL based on row and column position. Each cell listens for mouseover events, then chains transitions with delays to animate the transform and opacity changes.

CCBasis
55% match
Loading thumbnail…

matrix component

This example demonstrates an interactive 3x3 matrix component for exploring linear algebra concepts, where each cell displays a numeric value. Built with D3.js, it uses custom `d3.layout.matrix` and `d3.svg.matrix` components to render the grid. Users can scrub (drag) any number to adjust its value, and the colored background cells—mapped via a separate array—highlight corresponding entries across the matrix. The SVG rendering includes draggable text elements, with cell colors derived from a categorical scale and linked to shared mapping keys.

AAdriU82
53% match
Loading thumbnail…

affine transformations

Four small D3.js v5 canvases each demonstrate a single affine transformation applied to a star texture: rotation, translation, scaling, and fading. The code draws the same image repeatedly, using canvas 2D context methods such as `rotate`, `translate`, `scale`, and `globalAlpha`. Each transformation runs on its own interval, with state tracked per canvas to animate bouncing or reversing direction. The example isolates each operation so viewers can compare their visual effects directly.

EEE2dev
51% match
Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock
51% match
Loading thumbnail…

Scale & translate

A short, looping D3.js v4 animation demonstrates the interplay of SVG transform operations. It starts with four circles, one red at (100,100) and three at the origin, and then sequentially applies `translate` and `scale` transforms via `transition()` calls. The example highlights how `scale()` scales the coordinate system, not just the element, showing that a subsequent `translate` must compensate for the scaling factor to maintain a desired position. The circles use SVG attributes and fill-opacity styling.

PPatrick Wojda
51% match
Loading thumbnail…

transform, scale example

This example demonstrates how SVG transform chaining applies scale and rotation to a text element relative to a fixed coordinate system. The code renders a single text label ("that's the way") positioned at the center of a canvas, with a green crosshair polyline marking the reference point. Using D3 v4, the script selects the body, appends an SVG container, and applies a transform attribute combining translate, scale, and rotate operations. The visual result shows the text enlarged and tilted around its anchor, while the polyline highlights the origin. The example relies on D3's selection and attribute methods, with SVG elements styled via CSS classes.

335degrees
50% match