<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Hi </span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">All</span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">,</span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Many many thanks to </span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Julien Chaffraix for Giving
high level technical details</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">But still I need some
clarification on my understanding.</span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"></span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">I have seen the box2d js lib which is on path</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><a href="http://jquery-box2dweb.googlecode.com/svn/trunk/">http://jquery-box2dweb.googlecode.com/svn/trunk/</a></span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><span style> </span><a href="http://jquery-box2dweb.googlecode.com/svn/trunk/assets/"><font color="#0000ff">http://jquery-box2dweb.googlecode.com/svn/trunk/assets/</font></a></span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><a href="http://jquery-box2dweb.googlecode.com/svn/trunk/alpha/"><font color="#0000ff">http://jquery-box2dweb.googlecode.com/svn/trunk/alpha/</font></a></span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">I am trying to understand the high level technical details about box2djs
approach.</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Demo application is @ path: running on google chrome</span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><a href="http://jquery-box2dweb.googlecode.com/svn/trunk/testing.html"><font color="#0000ff">http://jquery-box2dweb.googlecode.com/svn/trunk/testing.html</font></a></span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><span style> </span>As per my understanding, to apply
the effect on DOM Element. </span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">We need to map it with Box2d shape; we need to handle it explicitly.</span></p>
<font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><span style> </span>Which is done using lib </span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"><a href="http://jquery-box2dweb.googlecode.com/svn/trunk/alpha/jQbox2D.Alpha.js"><font color="#0000ff">jQbox2D.Alpha.js</font></a>
and lib <a href="http://jquery-box2dweb.googlecode.com/svn/trunk/assets/Box2dWeb-2.1.a.3.min.js"><font color="#0000ff">Box2dWeb-2.1.a.3.min.js</font></a>
is for converted js lib of Box2d written in cpp.</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">As per my understating, high
level technical detail is </span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"></span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">1. <a href="http://code.google.com/p/jquery-box2dweb/"><span style="color:rgb(68,68,68);text-decoration:none">A jQuery Plugin
for Implementing Box2Dweb on DOM Elements</span></a></span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">2. We
animate those via dynamically (javascript styly) set CSS3 transforms /
translate / rotate combos</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">3. The
values for this CSS/javascript mambo-jumbo are calculated via box2d-web</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Please
let me know if I am wrong in by understating of Box2d Js Approach to apply
effect on element.</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Note: My
Problem statement:</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">I am
trying to do apply effect on DOM element using CSS extension with Box2dLIb
written in C++ and I do not handle any JS code during making any Box2d based application
to apply effect on element using Box2dJS.I can use only CSS (CSS extension) and
rest part I need to handle inside webkit code.</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Please
let me know </span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt" class="MsoNormal"><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">1. How can we collect the DOM element size in Webkit Code (</span><span style="line-height:115%;font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">1.<a href="http://code.google.com/p/jquery-box2dweb/"><span style="color:rgb(68,68,68);text-decoration:none">A jQuery Plugin for Implementing
Box2Dweb on DOM Elements</span></a>).</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">2. How can we
animate the Box2dobject, I guess we need to do troubleshooting in directory Source/WebCore/page/Animation
because in JS code it is starting engine using api <b style>window.requestAnimationFrame</b> (</span><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">we animate them via dynamically (javascript styly)
set CSS3 transforms / translate / rotate combos)</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">3.I am
able to map the 3<sup>rd</sup> section in webkit(values for this CSS/javascript
mambo-jumbo are calculted via box2d-web)</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt"> </span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">Thanks
&amp; Regards,</span></p><font size="3" face="Times New Roman">

</font><p style="margin:0cm 0cm 10pt;line-height:normal" class="MsoNormal"><span style="font-family:&quot;Times New Roman&quot;,&quot;serif&quot;;font-size:12pt">MK</span></p><font size="3" face="Times New Roman">

</font><br><br><div class="gmail_quote">On Wed, Feb 13, 2013 at 10:15 PM, Julien Chaffraix <span dir="ltr">&lt;<a href="mailto:julien.chaffraix@gmail.com" target="_blank">julien.chaffraix@gmail.com</a>&gt;</span> wrote:<br>
<blockquote style="margin:0px 0px 0px 0.8ex;padding-left:1ex;border-left-color:rgb(204,204,204);border-left-width:1px;border-left-style:solid" class="gmail_quote"><div class="im">&gt; I want to put any kind of Box2d effect on html element. These things I want<br>

&gt; to do with css extension. Till now I have done how to get value from css<br>
&gt; wrapper and able to store in own created Box2d module. But this value, I<br>
&gt; want to apply on any kind of html element or page. Say for example, if I<br>
&gt; apply the Box2d effect on Html tag or any html page then Box2d effect will<br>
&gt; be applied on that element or page. Now I am facing problem, how to animate<br>
&gt; the object with box2d effect, I mean, Layouting and Painting part. Please<br>
&gt; let me know how I can proceed.<br>
<br>
</div>Looking at the demo, they are using animations to avoid relaying out<br>
the whole page and keep it snappy. It&#39;s probably the right way to go<br>
but understand that in doing so, your new elements won&#39;t impact<br>
regular elements&#39; layout in your page as they animate (transformations<br>
are paint time only operations). That&#39;s also probably the easiest way<br>
to get where you want to go. I would look at how to we do animations<br>
(see Source/WebCore/page/animations/*) and try to do something similar<br>
by you would need to hook the box2D logic.<br>
<br>
The other option would be a custom renderer (RenderObject) which would<br>
solve the interaction with the rest of the page but would mean a lot<br>
more complexity. Understand that if you take this route, it will take<br>
at least several months for someone unfamiliar with WebKit rendering.<br>
<div class="im"><br>
&gt; Please let me know if you guys have any<br>
&gt; change list related to adding any css properties with its full<br>
&gt; implementation.<br>
<br>
</div>That doesn&#39;t happen in practice as it would be too big to review. I<br>
usually ask people to break the CSS side vs the rendering side of a<br>
change so that they can be reviewed independently.<br>
<br>
You can look at the regions, exclusions and grid layout changes for<br>
some idea of how to implement the CSS + rendering side, just pick a<br>
property and start looking in the history.<br>
<br>
Here is a recent example to add some new CSS properties:<br>
<a href="http://trac.webkit.org/changeset/141787" target="_blank">http://trac.webkit.org/changeset/141787</a><br>
<br>
Hope it helps,<br>
Julien<br>
</blockquote></div><br><br clear="all"><br>-- <br>Mukesh Kumar gupta