5 Replies Latest reply on Dec 31, 2012 8:51 AM by joel_pau

    Integrating some CSSDeck into Edge

    Dam4222 Level 1

      Hi Community,

       

      Can anyone help me figure out how to integrate this CSSDeck code into an Edge Composition? http://cssdeck.com/labs/j3zlzqro/35? I tried to follow Joel Pau example here: http://forums.adobe.com/message/4896224#4896224 but had no luck implmenting. My knowledge of code is pretty weak so I have troulbe following.

       

      Thanks for your help!

       

      Adam

        • 1. Re: Integrating some CSSDeck into Edge
          joel_pau Level 5

          Hi,

           

          So, it's a new library mixing mainly svg tags and window.requestAnimationFrame.

          ==> original version: http://dev.web-gate.fr/repulsive/

          ==> library home page: http://d3js.org/

          ==> tutorial about circles: http://mbostock.github.com/d3/tutorial/circle.html

           

          Implementation.

          Are required: yepnope and javascript window from http://cssdeck.com/labs/j3zlzqro/35

          So, you open compositionReady panel and you perform 2 copy and paste.

           

          1) Firstly, you copy and paste this code:

          yepnope({

                            nope:['http://d3js.org/d3.v3.min.js'],

                            complete: init

                      });

           

          function init() {}

           

          2) Then you copy and paste javascript window from http://cssdeck.com/labs/j3zlzqro/35 within function init() { ... }

           

          You save. It doesn't work. You have to rewrite these lines:

          var w = sym.$("Stage").width(),

               h = sym.$("Stage").height();

          ...

          var svg = d3.select("#Stage").append("svg:svg")

          ...

          svg.selectAll("circle").on("mousemove", function() {

                     var p1 = d3.mouse(this);

                     root.px = p1[0];

                     root.py = p1[1];

                     force.resume();

          });

           

          Now it works using a MacBook Pro and Safari. But poor performance.

          Others operating systems and browsers: i don't know.

          1 person found this helpful
          • 2. Re: Integrating some CSSDeck into Edge
            Dam4222 Level 1

            Hey Joel,

             

            This is fantastic, two questions for you: 1) How would I add this to my own layer, i.e. if I create a rectangle and only want it within the rectangle instead of on the stage? 2) I would have had no idea that I should change things in the Javascript the way you did in this scenario. How can I educate myself to learn what to change and recognize these things?

             

            Thanks so much for all your help.

             

            Adam

            • 3. Re: Integrating some CSSDeck into Edge
              joel_pau Level 5

              So: circles and one rectangle on Stage.

               

              var w = sym.$("Rectangle").width(),

                    h = sym.$("Rectangle").height();

              ...

              var svg = d3.select(sym.lookupSelector("Rectangle")).append("svg:svg")

               

              Now, this line: var nodes = d3.range(100).map(function() { return {radius: Math.random() * 19 + 4}; }),

              100 ==> number of circles, you can modify.

              19+4 ==> circle size: replacing 19 by 9 means small circles and 29 big circles.

               

              About learning or skills, tonight i don't find an idea. I think about and look for tomorrow.

              • 4. Re: Integrating some CSSDeck into Edge
                joel_pau Level 5

                Optimized versions.

                 

                1) Mouse effect works better using this code:

                svg.on("mousemove", function() {

                           var p1 = d3.mouse(this);

                           root.px = p1[0];

                           root.py = p1[1];

                           force.resume();

                         });

                 

                2) Attachments.

                Big and small Stages.

                • 5. Re: Integrating some CSSDeck into Edge
                  joel_pau Level 5

                  Adam.Perlis@gmail.com wrote:

                   

                  Hey Joel,

                   

                  This is fantastic, two questions for you: 1) How would I add this to my own layer, i.e. if I create a rectangle and only want it within the rectangle instead of on the stage? 2) I would have had no idea that I should change things in the Javascript the way you did in this scenario. How can I educate myself to learn what to change and recognize these things?

                   

                  Thanks so much for all your help.

                   

                  Adam

                  About 2) that is learning.

                  Are required knowledge on: HTML DOM, CSS DOM, jQuery.

                  Therefore, basics are: html, css, dom, javascript.

                  At last but not least: the specifics of main browsers.