#2. Создайте шаблон для будущих скетчей

Для выполнения заданий и разработки своих собственных программ на Processing.js удобно использовать заранее подготовленный шаблон. Создадим его!

Создайте отдельную папку, например, с именем "шаблон pjs" и скопируйте туда файл "processing-1.2.3.js" (файл находится в zip-архиве, который мы скачали на сайте Processing.js; последние цифры зависят от конкретной версии и могут отличаться от приведенных).

Теперь откроем Notepad++ (мы скачали его в ходе задания #1) и введем следующий код:

<!DOCTYPE html>
<html>
  <head>
    <title>Шаблон программы Processing.js</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="processing-1.2.3.js"></script>
    <script type="text/processing" data-processing-target="targetcanvas">
      //  Пример скетча (программы) на Processing.js
      int fontsize = 24;

      void setup() {
        size(200, 200);
        stroke(0);
        fill(0);
        textFont(createFont("Arial",fontsize));
        noLoop();
      }

      void draw() {
        background(#F0F0E0);
        String textstring = "header example";
        float twidth = textWidth(textstring);
        text(textstring, (width-twidth)/2, height/2);
      }
    </script>
  </head>
  <body>
    <h1>Шаблон программы Processing.js</h1>
    <p>Какие-то заметки...</p>
    <canvas id="targetcanvas" style="border: 1px solid black;"></canvas>
  </body>
</html>

Теперь изменим кодировку документа на UTF-8, выбрав следующую команду меню: Encoding -> Convert to UTF-8. Готово! Можно сохранить документ в созданную ранее папку ("шаблон pjs"), указав в качестве имени, например, "шаблон скетча.html" (называя файл по-своему, обязательно сохраните в конце расширение ".html"!).

Обратите внимание, что весь код наших будущих программ будет размещаться между строками '<script type="text/processing"...' и '</script>'.