javascript / jquery / processing.js - как наиболее эффективно создавать и анимировать элементы холста - PullRequest
Новая
       22

javascript / jquery / processing.js - как наиболее эффективно создавать и анимировать элементы холста

0 голосов
/ 01 ноября 2011

Я пытаюсь создать приложение, которое на основе различных взаимодействий с пользователем позволяет добавлять на сцену различные визуальные эффекты на основе эллипса, а затем очень просто анимировать. В настоящее время у меня есть базовая демонстрационная версия, в которой javascript / jquery взаимодействует с processing.js, но это выглядит как действительно неэффективный код, потому что обработка опирается на выполнение непрерывного цикла для рисования на экране. Мне интересно, во-первых, будет ли эффективен способ, которым я это делаю, в более широком масштабе, и во-вторых, если есть лучшая технология или метод для использования. Я пришел из фона вспышки, где ничто на экране не изменено или нарисовано / анимировано, если не активирована функция, сообщающая об анимации, что кажется разумным В любом случае, вот мой код:

HTML / JS: 

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Processing</title>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
        <script src="js/processing-1.3.6.min.js"></script>
        <script src="processing/Tween.lib"></script>
    </head>

    <body>
        <canvas id="circles" data-processing-sources="js/drawCircles.js"></canvas>
        <div id="clicker">Click</div>
        <script>

        window.Processing.data = {};

        var dataRef = window.Processing.data;
        var animInterval;
        dataRef.circleArray = new Array();


        $('#clicker').click(function(){
            var circle = {};
            circle.radius = 50;
            dataRef.circleArray.push(circle)
            var from = {property: 50};
            var to = {property: 75};

            jQuery(from).animate(to, {
                duration: 300,
                step: function() {
                    for (var i in dataRef.circleArray){
                        circle.radius = this.property;
                    }
                }
            });
        })

        </script>
    </body>
</html>

Processing.js 

// Global variables
float radius = 1.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
    // Fill canvas grey
    background( 100 );
    size( 200, 200 );
    strokeWeight( 10 );
    frameRate( 15 );
    X = width / 2;
    Y = width / 2;
    nX = X;
    nY = Y;  
}

// Main draw loop
void draw(){
    var dataRef = window.Processing.data;
    for (var i in window.Processing.data.circleArray){
        radius = dataRef.circleArray[i].radius;
        // Set fill-color to blue
        fill( 0, 121, 184 );
        // Set stroke-color white
        stroke(255); 
        // Draw circle
        ellipse( X+(i*10), Y, radius, radius );
    }          
}

Ответы [ 2 ]

2 голосов
/ 01 ноября 2011

Если вы хотите контролировать, когда Processing.js рисует на холсте, у вас есть два варианта. В обоих случаях первое, что вам нужно сделать, это получить доступ к экземпляру Processing: 

var p = Processing.instances[0];

Теперь вы можете делать все необходимые вызовы API обработки из JavaScript. Вы можете вызвать noLoop () в функции setup () вашего эскиза, а затем внутри цикла анимации jQuery вы можете вызвать p.redraw (), который будет анимировать один кадр.

В Processing.js мы присоединяем все функции к экземпляру Processing. Так что другой вариант - создать свою собственную функцию в эскизе и вызвать ее с помощью: 

var p = Processing.instances[0];
p.drawEllipses(radius);

Вы даже можете передавать данные в параметры функции, что устраняет необходимость в windows.Processing.data.

1 голос
/ 02 ноября 2011

Для того, что вы хотите сделать, вы можете использовать другую библиотеку, например paperjs http://paperjs.org/

...