Знакомьтесь - Processing.js

Processing.js — это открытый язык программирования для визуализации в вебе который представляет собой портированный Processing на JavaScript. Processing.js использует Js для анимации и тег canvas для работы с изображением.

Сразу начнем с примеров. Вот вам модель руки, которая управляется курсором мышки - перемещайте курсор по экрану в зоне рисунка и наблюдайте за динамикой руки.

Для того, чтобы разместить такой пример у себя, вам понадобится подключить скрипт, можно прямо с официального сайта языка программирования.

<script 
src="https://processing.org/javascript/processing.js" 
type="text/javascript"></script>

И теперь сам код, отвечающий за изображение и динамику руки:

<script type="application/processing">
float x, y;
float angle1 = 0.0;
float angle2 = 0.0;
float segLength = 100;
void setup() {
 size(739, 360);
 strokeWeight(30);
 stroke(255, 160);
 x = width * 0.3;
 y = height * 0.5;
}
void draw() {
 background(226);
 angle1 = (mouseX/float(width) - 0.5) * -PI;
 angle2 = (mouseY/float(height) - 0.5) * PI;
 pushMatrix();
 segment(x, y, angle1); 
 segment(segLength, 0, angle2);
 popMatrix();
}
void segment(float x, float y, float a) {
 translate(x, y);
 rotate(a);
 line(0, 0, segLength, 0);
}
</script>

И канва, на которой эта рука будет отображаться:

<canvas>обновите браузер ...</canvas>

Продолжим приводить примеры. Теперь - разворачивающееся фрактальное дерево. Поднесите курсор к вертикальной линии, которую вы видите после загрузки страницы.

Этот пример демонстрирует и трансформацию элементов и рекурсивное построение изображения. Приводим код примера:

<script type="application/processing">
// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
float theta; 
void setup() {
 size(739,200);
 smooth();
}
void draw() {
background(79,90,110);
frameRate(30);
stroke(255);
 // Let's pick an angle 0 to 90 degrees based on the mouse position
 float a = (mouseX / (float) width) * 90f;
 // Convert it to radians
 theta = radians(a);
 // Start the tree from the bottom of the screen
 translate(width/2,height);
 // Draw a line 60 pixels
 line(0,0,0,-60);
 // Move to the end of that line
 translate(0,-60);
 // Start the recursive branching!
 branch(60);
}
void branch(float h) {
 // Each branch will be 2/3rds the size of the previous one
 h *= 0.66f;
 // All recursive functions must have an exit condition!
 // Here, ours is when the length of the branch is 2 pixels or less
 if (h > 2) {
// Save the current state of transformation (i.e. where are we now)
 pushMatrix(); 
 rotate(theta); // Rotate by theta
 line(0,0,0,-h); // Draw the branch
 translate(0,-h); // Move to the end of the branch
 branch(h); // Ok, now call myself to draw two new branches!!
 // Whenever we get back here, we "pop" 
//in order to restore the previous matrix state
 popMatrix();
 // Repeat the same thing, only branch off to the "left" this time!
 pushMatrix();
 rotate(-theta);
 line(0,0,0,-h);
 translate(0,-h);
 branch(h);
 popMatrix();
 }
}
</script>

И опять канва для рисования:

<canvas >обновите браузер....</canvas>

Похожие публикации: JavaScript

Войти и комментировать [ Вход | Регистрация ]