JavaScript 開発者向けの Processing.js 入門チュートリアル_JavaScript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 開発者向けの Processing.js 入門チュートリアル_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:13 PM

javascript

この入門ガイドは JavaScript 開発者向けに書かれています。このドキュメントを読む前に、JavaScript と Web 開発プログラミングをマスターし、処理に関する非常に基本的な知識を持っていることをお勧めします。
ディレクトリ:
長い記事を読むのに忍耐力がない人向け:
急いで始めたい場合は、次の点を知っておく必要があります:
1. Processing.js は、Processing コードをブラウザ側で実行できる JavaScript コードに変換します。
タグを通じて描画を実現します。 2. 使用するには、まず Processing.js
をダウンロードする必要があります。 3. サフィックス「.pde」が付いた処理ファイルを作成します。これは、通常作成する通常のテキストファイルと同じです。例: hello-web.pde
4. HTML ページを作成し、ページ内外で Processing.js ファイルを参照し、

<script src="processing-1.3.6.min.js"></script> 
<canvas data-processing-sources="hello-web.pde"></canvas>

ログイン後にコピー

加载你的 web 页面，processing.js 将解析、翻译 sketch file，然后你的sketch file就会运行在浏览器里。
Processing.js的来源？
Processing为何物？
Processing 语言原先被MIT创建，被作为多媒体实验室和美学&计算机组的一部分。借助Processing能打通软件开发者，艺术家，数据可视化工程师们之间的隔阂，并且能够让编程人员和非编程人员非常容易地胜任视觉化工作。Processing 是用java创建的，你可以把它认为是一种被简化了的java，并且带被简化了的用来绘画和绘图的API。
Processing 能在web端做点什么？
Processing 拥有大型并且和活跃的社区群体，他们擅长创建2D和3D图象，可视化数据套件，音频，视频等等。因为HTML5，web端拥有了 canvas，audio,video,这些原先只能通过flash 和java插件拥有的功能。与此同时，高级的javascript引擎使得javascript 可以完全胜任以前做起来很慢的事情。
通过把Processing语言移植到web端，Processing 和 web社区都会收益。对于Processing来说，这意味这源码不仅可以在桌面上工作，而且可以在跑在浏览器上。对于web社区来说，一个新而成熟并且接近全功能的图象编程语言从而诞生了。

 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>Hello Web - Processing.js Test</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
 <body> 
 <h1>Processing.js Test</h1> 
 <p>This is my first Processing.js web-based sketch:</p> 
 <canvas data-processing-sources="hello-web.pde"></canvas> 
</body> 
</html>

ログイン後にコピー

当页面加载完（on page load）,processing.js将会自动浏览web页面的document，去查找

 // hard-coded Processing code, text from an HTML widget, downloaded text, etc. 
var processingCode = "..."; 
var jsCode = Processing.compile(processingCode).sourceCode;

ログイン後にコピー

例如，转化如下的Processing 代码会生成在它之下的编译的来的javascript代码：

// Processing code 
 void setup() { 
 size(200, 200); 
 background(100); 
 stroke(255); 
 ellipse(50, 50, 25, 25); 
 println("hello web!"); 
} 
 
 // "Comiled" JavaScript code 
 // this code was autogenerated from PJS 
 (function(processing, $constants) { 
 function setup() { 
 processing.size(200, 200); 
 processing.background(100); 
 processing.stroke(255); 
 processing.ellipse(50, 50, 25, 25); 
 processing.println("hello web!"); 
 } 
 processing.setup = setup; 
 })

ログイン後にコピー

只写 javascritp的 processing.js code
前面的方法把 processing 代吗生成了 javascript 代码，但是你也可以单独写javascript。processing.js的解析器将Processing代码转化成javascript方法，然后运行它。因此，完全有可能跳过Processing代码，只写javascript 方法，将方法传给一个Processing实例。这有个例子如下：

function sketchProc(processing) { 
 // Override draw function, by default it will be called 60 times per second 
 processing.draw = function() { 
  // determine center and max clock arm length 
  var centerX = processing.width / 2, centerY = processing.height / 2; 
  var maxArmLength = Math.min(centerX, centerY); 
 
  function drawArm(position, lengthScale, weight) { 
  processing.strokeWeight(weight); 
  processing.line(centerX, centerY, 
   centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, 
   centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength); 
  } 
 
  // erase background 
  processing.background(224); 
 
  var now = new Date(); 
 
  // Moving hours arm by small increments 
  var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12; 
 drawArm(hoursPosition, 0.5, 5); 
 
  // Moving minutes arm by small increments 
  var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60; 
  drawArm(minutesPosition, 0.80, 3); 
 
  // Moving hour arm by second increments 
  var secondsPosition = now.getSeconds() / 60; 
  drawArm(secondsPosition, 0.90, 1); 
 }; 
} 
 
var canvas = document.getElementById("canvas1"); 
// attaching the sketchProc function to the canvas 
var processingInstance = new Processing(canvas, sketchProc);

ログイン後にコピー

这儿是创建了一个 sketch 方法，这个方法就和解析器生成的代码一样。这个方法需要一个参数，它是一个指向某个由Processing构造器生成的processing对象（例如，Processing运行时对象）的引用，任何 Procesing方法或者对象都一个作为它的属性来访问。
一旦这个方法完成，并且通过，随着就有一个引用指向canvas，一个引用指向 Processing构造器（记得用"new"）。
写一个 Processing 和 javascript结合的文件
人们经常问的第一个问题就是processing.js是否可以读取来自正在运行Processing sketch的文件的值。或者反过来的观点。答案是肯定的。
Processing.js 转化 Processing 代码成一个含有函数闭包javascript代码。所有你创建的变量和方法没有被绑定到全局变量上（即：window）。然而，你仍然可以访问他们。
1)、从Processing里访问 javascript对象
从Processing代码转化成javascript并且和其他函数一样运行起来，所有Processing代码都可以访问全局对象。这意味着你可以在全局脚本模块里创建一个变量或者方法，它们就可以自动被Processing来访问。考虑这样一个例子：
首先是 Processing 文件，mixed.pde:

 String processingString = "Hello from Processing!"; 
 
 void setup() { 
 printMessage(jsString + " " + processingString); 
}

ログイン後にコピー

接下来是web页面：

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Hello Web - Accessing JavaScript from Processing</title> 
 <script src="processing-1.3.6.min.js"></script> 
 </head> 
<body> 
 <div id="msg"> 
 </div> 
 <canvas data-processing-sources="mixing.pde"></canvas> 
 <script type="application/javascript"> 
 var jsString = "Hello from JavaScript!"; 
 var printMessage = function (msg) { 
  document.getElementById('msg').innerHTML = "Message: " + msg; 
 }; 
 </script> 
</body> 
 </html>

ログイン後にコピー

这里 Processing.js允许使用的变量和方法声明在 Processing代码的外边。
2）、javascript 和 Processing代码的混合
前面的例子使得javascript和processing代码各自放在单独的文件里，当它们之间的界限不是分的很近时。
因为Processing.js在转化代码时，也可能直接将他们直接混在一起。Processing.js解析器保留包含在Processing代码里的 javascript不变，这样就允许开发者能写processing和javascript的混合代码（注意：这也就是为什么 processing.js里没有使用纯processing解析器的原因）。这是一个之前也是用这个方法写的例子：

var jsString = "Hello from JavaScript!"; 
var printMessage = function(msg) { 
 document.getElementById('msg').innerHTML = "Message: " + msg; 
 }; 
 
 String processingString = "Hello from Processing!"; 
 
 void setup() { 
 printMessage(jsString + " " + processingString); 
 }

ログイン後にコピー

有些javascript语法很难用这种方式混在一起写（例如：正则语法）。如果是那样的情况的话，你可以简单地将纯javasript代码移到一个

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7356

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1265

PHP チュートリアル

1214

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles

JavaScript 開発者向けの Processing.js 入門チュートリアル_JavaScript スキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック