Stretching an image

Visuals, audio, animation. Blended, not stirred. If LiveCode is part of your rich media production toolbox, this is the forum for you.

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Stretching an image

Post by MaxV » Thu Jul 31, 2014 12:59 pm

How can I pass from this:
Image
to this:
Image
? :?:
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Stretching an image

Post by [-hh] » Thu Jul 31, 2014 8:35 pm

Hi Max,

this is written excellently short (and still correct math, no important step is missing)
and will be also usable for your next step :-)

http://www.songho.ca/opengl/gl_projectionmatrix.html
Looks difficult, but will be not for you, looking at the project you are doing.

Hermann

p.s. An excellent (free) book about 3D graphic programming (OpenGL but explanations are generally usable. There are also examples one could try to "translate" to LC).
http://www.arcsynthesis.org/gltut/index.html (by J.L. McKesson)
shiftLock happens

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9852
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Stretching an image

Post by FourthWorld » Thu Jul 31, 2014 9:52 pm

You may be able to do what you're looking for with the new nine-way stretch feature in LC 7:
http://downloads.livecode.com/livecode/ ... 0_dp_7.pdf

If you'd like to help test v7 please work on a copy of your stack files, since the scope of new features in that build require a new file format:
http://downloads.livecode.com/livecode/
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Stretching an image

Post by [-hh] » Thu Jul 31, 2014 10:12 pm

..........
Last edited by [-hh] on Wed Aug 13, 2014 4:00 pm, edited 1 time in total.
shiftLock happens

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Stretching an image

Post by MaxV » Fri Aug 01, 2014 11:50 am

FourthWorld wrote:You may be able to do what you're looking for with the new nine-way stretch feature in LC 7:
http://downloads.livecode.com/livecode/ ... 0_dp_7.pdf

If you'd like to help test v7 please work on a copy of your stack files, since the scope of new features in that build require a new file format:
http://downloads.livecode.com/livecode/
Reading the notes I understood that the "nine way" stretch basically is for buttons: any image can be defined by 2 concentric rectangles: formattedRect and centerRect , like this:

Code: Select all

+*******+
|       |
|       |
+*******+
There are 9 zones:
  • the 4 + corners will be not stretched
  • the 2 lines of * will be stretched horizontally
  • the 2 lines of | will be stretched vertically
  • all the rest inside will be stretched as usual to fill the area inside
I need another thing: deform an image. An image has 4 corners, I need to specify the points of the corner to obtain a four edged polygon, with 4 corners, but not a rectangle. I need to convert a rectangular image to a trapezius image.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Stretching an image

Post by [-hh] » Fri Aug 01, 2014 12:10 pm

..........
Last edited by [-hh] on Wed Aug 13, 2014 4:01 pm, edited 1 time in total.
shiftLock happens

Klaus
Posts: 13865
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Stretching an image

Post by Klaus » Fri Aug 01, 2014 12:30 pm

[-hh] wrote:Could you please make a simple demo stack (or demo script) how to achieve this with a nine-way-stretch? I couldn't wangle it.
Hey, sarcasm, love that! :D

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Stretching an image

Post by [-hh] » Fri Aug 01, 2014 12:36 pm

..........
Last edited by [-hh] on Wed Aug 13, 2014 4:01 pm, edited 1 time in total.
shiftLock happens

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Stretching an image

Post by MaxV » Fri Aug 01, 2014 1:07 pm

[-hh] wrote:To say it again in simple words:
...
You can do this with a Perspective Transformation Matrix applied to every point of the image. You could start here:
https://en.wikipedia.org/wiki/Transform ... projection
Dear "-hh",
I know very well transformation matrix, I wrote the following article about 3D: http://www.maxvessi.net/pmwiki/pmwiki.p ... Libreria3D

so my problem is just how work on images using Livecode. I know how to stretch vertically and horizontally an image, but how you deform it?
In other programming language I can set the four image corners individually, and then image is automatically stretched.
If I used Livecode on every image pixel, the time would become excessive. I ask you if there is some image properties to set individually the corners of an image and then Livecode will stretch correctly the image... :?:
To work on pixel there is the open source AGG library ( https://code.google.com/p/agg/ ), wrote in C++. Before Livecode I worked with a very high level language where AGG was implemented and it was fast, but I don't want to write in C++. :lol:
Last edited by MaxV on Fri Aug 01, 2014 1:12 pm, edited 1 time in total.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Stretching an image

Post by MaxV » Fri Aug 01, 2014 1:12 pm

The original AGG library site was http://www.antigrain.com/ , but today doesn't work... :? Please use google cache to see it.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Stretching an image

Post by MaxV » Fri Aug 01, 2014 1:47 pm

My goal is in the following video from minute 5:20 to minute 5:41: https://www.youtube.com/watch?v=-RVhBImcEAE
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

Klaus
Posts: 13865
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Stretching an image

Post by Klaus » Fri Aug 01, 2014 3:05 pm

[-hh] wrote:No, no sarcasm
Really? I would have sworn :D

Peter Wood
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 92
Joined: Mon Jul 06, 2009 4:53 am
Location: Bamboo River

Re: Stretching an image

Post by Peter Wood » Fri Aug 01, 2014 3:52 pm

Max

I believe that LiveCode now uses the Skia 2D graphics library. Once "themes" are released it should be possible to access the full Skia api.

Regards

Peter

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Stretching an image

Post by [-hh] » Fri Aug 01, 2014 4:45 pm

..........
Last edited by [-hh] on Wed Aug 13, 2014 4:01 pm, edited 1 time in total.
shiftLock happens

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9852
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: Stretching an image

Post by FourthWorld » Fri Aug 01, 2014 6:21 pm

[quote="[-hh]Could you please make a simple demo stack (or demo script) how to achieve this with a nine-way-stretch?[/quote]
I wish I could. Now that I've experimented with it it's clear that I had misunderstood its scope: while it's useful for certain types of image stretching control, it doesn't yet support true skewing.

I believe the Skia engine does, though, so if someone can confirm that and come up with syntax for skewing in LC it would make a nice feature request to submit to the DB.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

Post Reply

Return to “Multimedia”