Question

My code:

$(document).ready(function () {           

            // Creates canvas 800 × 800 at 30, 50
            var paper = Raphael(30, 50, 800, 800);
            $(document).click(function () {
                create(paper);
            });

            function create(paper) {

                // Creates circle at x = 250, y = 100, with radius 50
                var circle = paper.circle(250, 100, 50);
                // Sets the fill attribute of the circle to red (#f00)
                circle.attr("fill", "#f00");

                // Sets the stroke attribute of the circle to white
                circle.attr("stroke", "#EEE");
                circle.animate({ transform: "r" + 180 }, 1000);
           }
        });

i am able to create a circle when document is clicked. Please let me know the code for creating circle objects with different colours based on my click with flying animation on the page at dynamic locations using Raphael.js

Answer 1

Perhaps you can adapt something from this?

var canvas = Raphael( 0, 0, 320, 240 );

var backboard = canvas.rect( 0, 0, 320, 240 ).attr( { fill: 'white', stroke: 'none' } );

backboard.click( function( event, x, y )
    {
        var bbox = backboard.getBBox();
        var x_ratio = x / bbox.width;
        var y_ratio = y / bbox.height;

        var color = 'rgb(' + Math.floor( x_ratio * 255 ) + ',0,' + Math.floor( y_ratio * 255 ) + ")";

        var transient_circle = canvas.circle( x, y, 25 ).attr( { fill: color, stroke: 'black', 'stroke-width': 1 } );
        transient_circle.animate( { cx: bbox.width / 2, cy: bbox.width / 3, 'fill-opacity': 0.25 }, 3000, ">", function()
            {
                transient_circle.animate( { 'stroke-opacity': 0, 'fill-opacity': 0 }, 2500, function() 
                { 
                    transient_circle.remove(); 
                } );
            } );
    } );

The fiddle is here.

The general idea is that you capture the location of the click, using some variable of the location to determine the attributes of your circle, and then animate the circle from the click location to the center, where it then fades out and is removed. I kept the animations slow enough so that it’s possible to see lots of transparent circles of different colors overlapping, just because it’s sparkly.