1 Востаннє редагувалося Очі.завидющі (13.11.2013 17:00:47)

Тема: Огляд мови Processing

Читав я про різні мови програмування і випадково натрапив на Processing. Ця мова використовується митцями, статистами, журналістами, розробниками ігор й иншими хорошими людьми. Особливістю мови є те, що пострадянському просторі про неї ніхто не знає, а ті хто знає, не виказують цього, аби потік дармових грошей не скінчався. Я кажу про texty.org.ua, які використовуючи майже не змінні приклади з підручників процесингу та рубі, роблять значний шекель (як я дізнався про їхній шекель? Я побачив, що вони за простий переклад невеликого комікса (точніше visual novel) просять 900 грн. щоб не збрехати. Зазначу, що "перекладом" комікса є лише коментарі під малюнками, а не зміна самих малюнків). І найгірше те, що їхній кагал є одним з найпрогресивніших в українській журналістиці через використання вищезгаданих технологій, а саме - журналістики даних.
Мова processing була розроблена в МІТ і є надбудовою над JAVA, окрім неї існує й інша версія, що заснована на джаваскрипті - processing.js.
Сьогодні розглянемо канонічний приклад використання мови процессинг - обробку зображень. Нашим піддослідним кроликом буде страшна лісова тварюка, яка  схожа за описом на Альонушку у п'єсі Леся "Павлік Морозов", а саме  - солістка гурту Within Temptation на обкладинці альбому Mother Earth.
http://upload.wikimedia.org/wikipedia/en/e/e7/Wtmotherearth04.jpg
Нижченаведений код зробить з неї лісовий аналог Трініті. Коментувати тут нічого, бо мова сіподібна.

PImage img;
// Обчислює середній колір обраного прямокутника на малюнку і озеленяє все навкруги, притлумлюючи инші кольори
color thiscolor(int x, int y, int w, int h) {  
  color c, res; int r = 0, g = 0, b = 0, wh = w*h;
  for(int xt=x; xt<(x+w); xt++) {
    for(int yt=y; yt<(y+h); yt++) {
      c = img.get(x, y);
      r += red(c);
      g += green(c);
      b += blue(c);
    };
  };
  return (color((r/wh)*0.3, (g/wh)*0.9, (b/wh)*0.6)); // Встановлюємо правильні світлові фільтри на нашу "камеру". Червоний колір на малюнку не вписується в наше стильове оформлення, отож його найбільше притлумлюємо
};

void setup() {
  img = loadImage("WithinTemptation.jpg"); \\Створює об'єкт зображення
  size(img.width, img.height);
  int resolutionWidth = 150; \\ кількість "пікселів" у ширину
  int resolutionHeight = 120; \\ кількість "пікселів" у висоту
  int xInc = width/resolutionWidth;
  int yInc = height/resolutionHeight;
  for(int x=0; x<img.height; x+=xInc) {
    for(int y=0; y<img.width; y+=yInc) {
      stroke(0); \\ колір контуру "піксела", 0 - чорний, 255 - білий.
      fill(thiscolor(x, y, xInc, yInc)); \\ встановлення кольору заповнення "піксела"
      rect(x, y, xInc, yInc); \\ малювання "піксела"
    }
  }
};

Зараз поглянемо на одержаний результат:
http://replace.org.ua/misc.php?action=pun_attachment&amp;item=280&amp;download=0
Трішки побавимося із зображенням - приберемо із зображення контури "пікселів", змінивши один рядок в коді програми - stroke(0) на noStroke() і одержимо таке:
http://s23.postimg.org/3oobprbx7/WT_sh02.jpg
Яка гарна 8-бітна краля, монохорму має сподобатися, а тепер змінимо термінал на більш дешевий (90x60 пікселів), тобто замінимо

  int resolutionWidth = 150;
  int resolutionHeight = 120;

на

  int resolutionWidth = 90;
  int resolutionHeight = 70;

http://s22.postimg.org/bq8vwnvgh/WT_sh03.jpg
Як бачимо, зі зміною чіткості зображення, носом лісова хвея стала схожа на Майкла Джексона. І тепер поглянемо на зображення без "піксельних" контурів:
http://s22.postimg.org/ctxlmd5hd/WT_sh04.jpg
Останній малюнок нагадує мозаїку брежнівського періоду на будинку тролейбусного депо.

Post's attachments

WT_sh01.JPG 62.09 kb, 130 downloads since 2013-11-13 

Бодай вас Бог любив, а мене – молодиці!

2

Re: Огляд мови Processing

Я нічого не зрозумів. В чому фішка цих зображень ? Чого тобі поставили дякую ?

3

Re: Огляд мови Processing

Singularity написав:

Я нічого не зрозумів. В чому фішка цих зображень ? Чого тобі поставили дякую ?

В тому, що ці зображення отримані з оригінального. Щойно запрограмований ефект називається пікселізація. А процесинг дуже зручна мова для роботи із зображеннями, що я й спробував показати.

Бодай вас Бог любив, а мене – молодиці!

4

Re: Огляд мови Processing

Гарний український переклад підручника Processing - Початок роботи з Processing

Бодай вас Бог любив, а мене – молодиці!
Подякували: bunyk, Monolith, 221VOLT3

5

Re: Огляд мови Processing

Очі.завидющі написав:

Гарний український переклад підручника Processing - Початок роботи з Processing

Посилання вже мертве, нажаль...

x
Подякували: 221VOLT1

6 Востаннє редагувалося VTrim (11.11.2014 19:30:38)

Re: Огляд мови Processing

Оф сайт
http://www.processing.org/
Для JS
http://www.processingjs.org/

Подякували: 221VOLT1