Re: Re: Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Jubber — Wed, 11 Jul 2007 06:49:23 GMT

Hey Mark,

I've been playing around with the cube here and there, but given that I'm not python guru, I decided to convert it to C#.

It's not the most elegant of code, but hey, I'm just playing. I've got a control now on each side of the cube and when clicked on, it plays a video.

Here is link to the example.

and here's the link to the source zip.

Thanks for sharing your python code. This has been quite fun actually.

I also talk a little about it in my blog - VTonMS.

Re: Re: 3d Rotating Picture Cube in Iron Python (lots of code)

mrtrombone — Wed, 04 Jul 2007 08:40:31 GMT

Good to know thanks Vadim. It would be quite interesting to extend the example and put things like buttons on the different canvases

Also would be good to figure the math for a click so you could determine which photo was clicked on.

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Jubber — Wed, 04 Jul 2007 04:01:58 GMT

Hey Mark,

great example of what's possible with Silverlight.

I did find that the anything you draw on the side of the cube, is drawn backwards. I'm still trying to decypher the code. Have to think back to highschool and Matrix calculations

I found that if you update that 'canvasPointTransform' method, and replace :

      matrix.OffsetX = b['x']
      matrix.OffsetY = b['y']
      matrix.M11 = (a['x'] - b['x']) / photo.Width
      matrix.M12 = (a['y'] - b['y']) / photo.Width

WITH

      matrix.OffsetX = a['x']
      matrix.OffsetY = a['y']
      matrix.M11 = (b['x'] - a['x']) / photo.Width
      matrix.M12 = (b['y'] - a['y']) / photo.Width

you will get the canvas of each photo drawn the corrent way.

Thanks for sharing this.

Vadim

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

heuertk — Tue, 03 Jul 2007 17:44:00 GMT

posted here: http://timheuer.com/blog/archive/2007/07/03/14127.aspx

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

heuertk — Mon, 02 Jul 2007 20:38:04 GMT

yeah, send me the files, i'll put it up...

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

mrtrombone — Mon, 02 Jul 2007 20:14:41 GMT

No I'm afraid not. If someone else wants to host it I can email the files.

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

heuertk — Mon, 02 Jul 2007 17:20:45 GMT

do you have a site where this is working so we can see it in action?

3d Rotating Picture Cube in Iron Python (lots of code)

mrtrombone — Mon, 02 Jul 2007 08:23:21 GMT

Hi all. I can't be bothered blogging so thought I would share this with anyone who is interested. It is the source for a rotating picture cube, similar to the Telerik control - although I haven't turned it into a control (this shouldn't be hard) or handled clicks yet (this might be). The images are stored in an images folder in the root directory. I used photos from the photoviewer example and cropped them square. The pictures array contains the image names.

This is my first real experimentation with IronPython and I must tell you that it is really very nice and succinct to develop with compared to C#. Also much faster since don't need to compile. I have just been developing from notepad.

The brains behind the code actually comes from the following flash tutorial so full props to them. I encourage other users to get busy converting interesting flash examples across to Silverlight so the community can learn:

http://www.senocular.com/flash/tutorials/transformmatrix/

Anyway I hope someone finds this useful

Cheers

Mark

XAML CODE

Python Code

import clr

import System
from System.Windows.Controls import *
from System.Windows.Media import *
from System.Windows import *
from System.Windows.Shapes import *
from System.Windows.Media.Animation import *
from System.Math import *

pictures = ['sqjaguar', 'sqgorilla', 'sqgyr', 'sqheron', 'sqeagle', 'sqtamarin']
rotations = {'x': 0, 'y': 0, 'z': 0}
boxPoints = [{'x': -50, 'y': -50, 'z': -50}, {'x': 50, 'y': 50, 'z': -50}, {'x': -50, 'y': 50, 'z': -50}, {'x': -50, 'y': -50, 'z': 50}, {'x': 50, 'y': -50, 'z': 50}, {'x': 50, 'y': 50, 'z': 50}]

curX = 0
curY = 0

def pointsTransform(tripoints, rotations):
      v10 = Sin(rotations['x'])
      v12 = Cos(rotations['x'])
      v8 = Sin(rotations['y'])
      v11 = Cos(rotations['y'])
      v7 = Sin(rotations['z'])
      v9 = Cos(rotations['z'])
      v1 = len(tripoints)-1
      v17 = [{'x': 0, 'y': 0}, {'x': 0, 'y': 0}, {'x': 0, 'y': 0}, {'x': 0, 'y': 0}, {'x': 0, 'y': 0}, {'x': 0, 'y': 0}]
      while (v1>=0):
        v16 = tripoints[v1]['x']
        v15 = tripoints[v1]['y']
        v3 = tripoints[v1]['z']
        v5 = v12 * v15 - v10 * v3
        v4 = v10 * v15 + v12 * v3
        v18 = v11 * v4 - v8 * v16
        v6 = v8 * v4 + v11 * v16
        v14 = v9 * v6 - v7 * v5
        v13 = v7 * v6 + v9 * v5
        v17[v1] = {'x': v14, 'y': v13}
        v1 -= 1
      return v17

def canvasPointTransform(i, a, b, c):
      photo = Root.FindName("Photo%i" % i)
      photo.Opacity = pointsIsVisible(a, b, c)
      if (photo.Opacity==0):
        return
      mt = Root.FindName("Matrix%i" % i)
      matrix = mt.Matrix
      matrix.OffsetX = b['x']
      matrix.OffsetY = b['y']
      matrix.M11 = (a['x'] - b['x']) / photo.Width
      matrix.M12 = (a['y'] - b['y']) / photo.Width
      matrix.M21 = (c['x'] - b['x']) / photo.Height
      matrix.M22 = (c['y'] - b['y']) / photo.Height
      mt.Matrix = matrix

def pointsIsVisible(a, b, c):
     v5 = b['x'] - a['x']
     if (v5==0):
        return (a['y'] > b['y']) == (c['x'] > a['x'])
     v4 = c['x'] - a['x']
     if (v4==0):
        return (a['y'] > c['y']) == (b['x'] < a['x'])
     return (((b['y'] - a['y']) / v5) < ((c['y'] - a['y']) / v4)) != ((a['x'] < b['x']) == (a['x'] > c['x']))

def CreatePhoto(sequence, x, y, path):
    t = XamlReader.Load("""
      <Canvas xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' x:Name='Photo%i' Width='111' Height='111' Canvas.Left='%d' Canvas.Top='%d' Background='#FFFFFFFF'>
        <Image Width='111' Height='111' Canvas.Left='0' Canvas.Top='0' Source='%s' />
        <Canvas.RenderTransform>
          <MatrixTransform x:Name='Matrix%i' Matrix="1,0,0,1,0,0"/>
        </Canvas.RenderTransform>
      </Canvas>""" % (sequence,x, y, path,sequence))
    Inner.Children.Add(t)

def timer_Completed(sender, e):
    rotations['x'] -= curY / 2000
    rotations['y'] += curX / 2000
    try:
      v2 = pointsTransform(boxPoints, rotations)
      canvasPointTransform(0, v2[2], v2[0], v2[3])
      canvasPointTransform(1, v2[5], v2[1], v2[2])
      canvasPointTransform(2, v2[0], v2[2], v2[1])
      canvasPointTransform(3, v2[4], v2[3], v2[0])
      canvasPointTransform(4, v2[3], v2[4], v2[5])
      canvasPointTransform(5, v2[1], v2[5], v2[4])
    except System.Exception, e:
      debug.TextWrapping = System.Windows.TextWrapping.Wrap
      debug.Text = e.ToString()
    timer.Begin()

def mouseMove(sender, e):
    global curX
    global curY
    pt = e.GetPosition(Inner)
    curX = pt.X
    curY = pt.Y

def Loaded(sender, e):
global pictures
global boxPoints
global rotations
elt = System.Windows.XamlReader.Load("""
    <Canvas xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Canvas.Top="50" Width="500" Height="500">
    <TextBlock x:Name='debug' Foreground="White" Width="500" Height="500" Text='' />
    </Canvas>""" )
Root.Children.Add(elt)
sequence = 0
while sequence < len(pictures):
    CreatePhoto(sequence,0, 0,"images/%s.jpg" % pictures[sequence])
    sequence += 1

Inner.MouseMove += mouseMove
timer.Completed += timer_Completed
timer.Begin()

Programming with .NET - General

Re: Re: Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

Re: 3d Rotating Picture Cube in Iron Python (lots of code)

3d Rotating Picture Cube in Iron Python (lots of code)