ProcessingでCG作品らしきもの

色々いじって楽しんでます。もっといじれば色々なことできそうですけど、今回はこんな感じです。

void setup() {
 size(600,600,P3D);
 background(255);
 smooth();
 noStroke();
 fill(50,120);
 translate(width/2,height/2,0);
 float xstart = random(100);
 float ynoise = random(100);
 float angle = 0;
 float startx = 0;
 float starty = 0;
 for(float y=-(height/3); y<height/3; y+=1) {
   ynoise += 0.05;
   float xnoise = xstart;
   angle = -45;
   for(float x=-(width/3); x<width/3; x+=1) {
    xnoise += 0.05;
    float rad = radians(random(angle));
    startx = x * cos(rad);
    starty = y * sin(rad);
    drawLine(startx,starty,noise(xnoise, ynoise),angle);
    angle += 0.8;
   }
 }
}

void drawLine(float x, float y, float noise, float angle) {
 pushMatrix();
 translate(x * noise, y * noise, -y);
 float edgeSize = angle + noise * x;
 ellipse(0, 0, edgeSize, edgeSize);
 popMatrix();
}

Processingで作ったCG作品らしきもの
Processingで作ったCG作品らしきもの

HTML,CSS,JavaScriptでMSワードもどき

これを応用すればOne Driveのようなオフィスが作れるかも・・・と思ったんですけど、手間かかるので今はやりませんwソースコードを打ち込んでハイライトするようなテキストエディタは残念ながら今回は作れてないです。選択範囲をプログラムで記述するとできるかもですね。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ワードもどき</title>
    <style>
      div.editor {
          overflow-y: scroll;
          width: 500px;
          height: 500px;
          border: solid 1px #ccc;
          padding: 10px;
      }
    </style>
    <script>
      function green() {
          document.execCommand('foreColor',false,'#00ff00');
      }
    </script>
  </head>
  <body>
    <button onclick="green();">Green</button>
    <div class="editor" contenteditable="true">
      <h1>ワードもどき</h1>
    </div>
  </body>
</html>

HTML,CSS,JavaScript(jQuery)を使ってテキストエディタ

今回は失敗に終わりました。いやーだいぶ奮闘したんですけどねー・・・。調べてみるとDraft.jsを使えばContentEditableなDOMを扱いやすくできるとか。また後日、これを使ってリッチテキストエディタに挑戦してみようと思います。いやー難しい。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>HTML Editor</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <style>
      div.editor {
          overflow-y: scroll;
          width: 500px;
          height: 500px;
          border: solid 1px #ccc;
          padding: 10px;
      }
    </style>
    <script>
      function syntax_highlight() {
          var editor = $('div.editor');
          var contents = editor.html();
          var result = contents.replace(/#include/g, '<font color="blue">#include</font>');
          editor.focus();
          editor.html(result);
      }
    </script>
  </head>
  <body>
    <div class="editor" contenteditable="true" onkeyup="syntax_highlight();">
      <h1>テキストエディタ</h1>
    </div>
  </body>
</html>

Node.jsではてなブックマークAPIの続きとFlickr API

前回のはてなブックマークAPIのプログラムを応用したものです。はてなブログ内のニュース記事のタイトル、概要の取得とはてなブックマーク数の取得です。Flickr APIは、画像検索と画像のダウンロードをプログラムでやるものです。requestモジュールを使ってAPIのURLにGET送信を送ってJSONデータファイルを取得、解析します。解析した結果を利用して画像を一括ダウンロード出来ます。イメージとしては、日々の作業を自動化するような感じです。

// はてなブックマークの注目のエントリーを表示 for Node.js

// 対象RSS
var RSS_URL = "http://b.hatena.ne.jp/hotentry?mode=rss";

// モジュールの読み込み
var client = require('cheerio-httpcli');

// ダウンロード
client.fetch(RSS_URL, {}, function(err, $, res) {
    if(err) { console.log("error"); return; }
    // エントリーを抽出して表示
    $("item").each(function(idx, item) {
        // タイトルと説明とブックマーク数を取得
        var title = $(this).children('title').text();
        var desc = $(this).children('description').text();
        var count = $(this).children("hatena\\:bookmarkcount").text();
        console.log("(" + count + "B!) " + title);
        console.log(desc);
        console.log("--------");
    });
});

// Flickrで写真検索 for Node.js

// APIキーを指定
var key = '';
var keyword = "犬";
var url = 'https://api.flickr.com/services/rest?method=flickr.photos.search&format=json&per_page=5&text=' + encodeURIComponent(keyword) + '&nojsoncallback=1&api_key=' + key;
var request = require('request');

request(url, function(err, res, body) {
    var result = JSON.parse(body);
    var items = result.photos.photo;

    for(var i in items)
        console.log(items[i].title);
});

// Flickrで写真検索 for Node.js

// APIキーを指定
var key = '';
var keyword = '犬';
var url = 'https://api.flickr.com/services/rest?method=flickr.photos.search&format=json&per_page=5&text=' + encodeURIComponent(keyword) + '&nojsoncallback=1&api_key=' + key;
var request = require('request');
var fs = require('fs');

var PHOTO_DIR = __dirname + "/photo";

if(!fs.existsSync(PHOTO_DIR)) fs.mkdirSync(PHOTO_DIR);
    
request(url, function(err, res, body) {
    var result = JSON.parse(body);
    var items = result.photos.photo;

    for(var i in items) {
        var item = items[i];
        var download_url = "https://farm" + item.farm + ".staticflickr.com/" +
            item.server + "/" + item.id + "_" + item.secret + ".jpg";
        var fname = PHOTO_DIR + "/" + item.title + ".jpg";
        console.log("+ " + item.title);
        console.log("| URL:" + download_url);
        request(download_url).pipe(fs.createWriteStream(fname));
    }
});

実行結果

# はてなブックマークプログラムの実行結果
> node bookmark-hotentry.js
--------
(62B!) 天皇陛下のブルーギル「持ち帰り謝罪」発言 舞台裏を証言(京都新聞) - Yahoo!ニュース
「ブルーギルは50年近く前、私が米国より持ち帰りました」。2007年、天皇陛下は大津市で開かれた「全国豊かな海づくり大会」の式典で驚きの発言をされた。琵琶湖の在来魚を減らすほどブルーギルが異常繁殖した事態に「心を痛めています」と後悔の思いを明かした。発言の舞台裏には何があったのか。関係者の証言から振り...
--------
(90B!) 川上量生VS山本一郎「法廷バトル」激化、とうとう「第3弾訴訟」がスタート! - 弁護士ドットコム
出版大手カドカワ前社長で、ニコニコ動画を運営するドワンゴの創業者である川上量生氏と、作家・投資家の山本一郎氏との間で、「法廷バトル」が繰り広げられている。ネット上で抜群の知名度を誇る2人の争いとあって、注目をあつめる。 ●3つの訴訟が進行している 実は現在、3つの訴訟が東京地裁で進行している。 発端とな...
--------
(174B!) 「自分だけのキャラを作りたい」 AIで美少女を「無限生成」、若きオタクエンジニアの挑戦 (1/4) - ITmedia NEWS
女の子の瞳、髪形、表情が変化し、何体ものキャラクターが生まれていく――Preferred Networksが深層学習を活用し、アニメキャラクターを自動生成するサービス「Crypko」(クリプコ)を提供している。開発したのは、中国出身の若きエンジニア。「自分の想像通りのキャラクターを形にできるサービスを作りたい」と意気込む2...
--------

# Flickr API 一つ目のプログラム
> node flickr-search.js
貓狗說的人類文明史
JASDF K-9 Unit warm up
JASDF K-9 Unit warm up
JASDF K-9 Unit warm up
Photoshoot

# Flickr API 二つ目のプログラム
> node flickr-download.js
+ 貓狗說的人類文明史
| URL:https://farm66.staticflickr.com/65535/46785098925_dc76b7e94b.jpg
+ JASDF K-9 Unit warm up
| URL:https://farm66.staticflickr.com/65535/33823244628_0851cdc1cf.jpg
+ JASDF K-9 Unit warm up
| URL:https://farm66.staticflickr.com/65535/40734192083_375e4eab70.jpg
+ JASDF K-9 Unit warm up
| URL:https://farm66.staticflickr.com/65535/33823244438_061bac1ec4.jpg
+ Photoshoot
| URL:https://farm66.staticflickr.com/65535/47645515782_b26405d540.jpg

Node.jsではてなブックマークAPIを使う(今日の分)

途中で疲れたのでここまでです。requestモジュール使って、GETリクエスト送って取得したJSONなどを解析するだけですね。本のプログラムを写経しましたけど、自分用にもプログラムを追加しました。

// はてなブックマークのブックマーク数を取得 for Node.js bookmark-count.js

var targetURL = "http://www.hatena.ne.jp/";
var COUNT_API = "http://api.b.st-hatena.com/entry.count?url=";

var request = require('request');

var url = COUNT_API + escape(targetURL);

request(url, function(err, res, body) {
    console.log("ブックマーク数: " + body);
});

var selfdesignURL = "https://selfdesign.hateblo.jp/";
var original_url = COUNT_API + escape(selfdesignURL);

request(original_url, function(err,res,body) {
    console.log("自分のブログのブックマーク数: " + body); // 0だけどね!閑古鳥・・・。
});

// はてなブックマークのブックマーク数を取得 for Node.js bookmark-count2.js

var url_list = [
    "http://www.hatena.ne.jp/",
    "https://twitter.com",
    "http://www.amazon.co.jp/",
    "https://selfdesign.hateblo.jp"
];

var COUNTS_API = "http://api.b.st-hatena.com/entry.counts";

var request = require('request');

var params = [];

for(var i in url_list) {
    params.push("url=" + escape(url_list[i]));
}

var url = COUNTS_API + "?" + params.join("&");

request(url, function(err, res, body) {
    var obj = JSON.parse(body);
    for(var key in obj) {
        console.log(key + "のブックマーク数: " + obj[key]);
    }
});

実行結果

> node bookmark-count.js
ブックマーク数: 5621
自分のブログのブックマーク数: 0
> node bookmark-count2.js
http://www.amazon.co.jp/のブックマーク数: 5725
http://www.hatena.ne.jp/のブックマーク数: 5621
https://selfdesign.hateblo.jpのブックマーク数: 0
https://twitter.comのブックマーク数: 660

Node.jsでスクレイピング(不定期)

今回はアマゾンの公式サイトをスクレイピングしました。カテゴリの名前の抽出です。疲れてるのでこれぐらいのことしか出来てないですけどね。Pythonを使いたいけど、JavaScriptの方がしっくりきますな〜・・・。今回は、ドロップダウンメニューのカテゴリ名は抽出してないです。JSで記述されているので別の手段が必要になりそうですね。SeleniumとCasperJS,PhantomJSあたりを使えば良いのかなぁ・・・?

// Amazonのカテゴリを抽出

var client = require('cheerio-httpcli');

client.fetch('https://www.amazon.co.jp/ref=nav_logo', function(err,$,res,body) {
    var result = $('select#searchDropdownBox');

    result.each(function(idx) {
        console.log(result.eq(idx).text());
    });
});

実行結果

        すべてのカテゴリー
        Amazon デバイス
        Kindleストア 
        Prime Video
        Alexaスキル
        デジタルミュージック
        Android アプリ
        本
        洋書
        ミュージック
        クラシック
        DVD
        TVゲーム
        PCソフト
        パソコン・周辺機器
        家電&カメラ
        文房具・オフィス用品
        ホーム&キッチン
        ペット用品
        ドラッグストア
        ビューティー
        ラグジュアリービューティー
        食品・飲料・お酒
        ベビー&マタニティ
        ファッション
           レディース
           メンズ
           キッズ&ベビー
        服&ファッション小物
        シューズ&バッグ
        腕時計
        ジュエリー
        おもちゃ
        ホビー
        楽器
        スポーツ&アウトドア
        車&バイク
        DIY・工具・ガーデン
        大型家電
        クレジットカード
        ギフト券
        産業・研究開発用品
        Amazonパントリー
        Amazonアウトレット

C言語とxcbでXプログラミング

xcbというライブラリを使用してXプログラミングを試してるところです。Xlibと迷いましたけど、awesome WMがこれを使っていたのでなんとなくこれにしました。最近、疲れてるので続くかなぁ・・・?

// first.c XCB Tutorial

#include <stdio.h>

#include <xcb/xcb.h>

int main(void) {
    xcb_connection_t *c;
    xcb_screen_t *screen;
    int screen_nbr;
    xcb_screen_iterator_t iter;

    c = xcb_connect(NULL, &screen_nbr);
    iter = xcb_setup_roots_iterator (xcb_get_setup(c));
    
    for(; iter.rem; --screen_nbr, xcb_screen_next (&iter))
        if(screen_nbr == 0) {
            screen = iter.data;
            break;
        }

    printf("\n");
    printf("Informations of screen %d:\n", screen->root);
    printf("    width.........: %d\n", screen->width_in_pixels);
    printf("    height........: %d\n", screen->height_in_pixels);
    printf("    white pixel...: %d\n", screen->white_pixel);
    printf("    black pixel...: %d\n", screen->black_pixel);

    return 0;
}

// second.c XCB Tutorial

#include <unistd.h>

#include <xcb/xcb.h>

int main(void) {
    xcb_connection_t *c;
    xcb_screen_t *screen;
    xcb_window_t win;

    c = xcb_connect(NULL, NULL);

    screen = xcb_setup_roots_iterator(xcb_get_setup (c)).data;

    win = xcb_generate_id(c);

    xcb_create_window(c,
                      XCB_COPY_FROM_PARENT,
                      win,
                      screen->root,
                      0, 0,
                      150, 150,
                      10,
                      XCB_WINDOW_CLASS_INPUT_OUTPUT,
                      screen->root_visual,
                      0, NULL);

    xcb_map_window(c, win);

    xcb_flush(c);

    pause();

    return 0;
}

// third.c XCB Tutorial

#include <xcb/xcb.h>

int main(void) {
    xcb_connection_t *c;
    xcb_screen_t *screen;
    xcb_drawable_t win;
    xcb_gcontext_t black;
    uint32_t mask;
    uint32_t value[1];

    c = xcb_connect(NULL, NULL);
    screen = xcb_setup_roots_iterator(xcb_get_setup(c)).data;

    win = screen->root;
    black = xcb_generate_id(c);
    mask = XCB_GC_FOREGROUND;
    value[0] = screen->black_pixel;
    xcb_create_gc(c, black, win, mask, value);

    return 0;
}
bash,zsh,etc...
> gcc -Wall first.c -o first_result `pkg-config --libs --cflags xcb`
fish
> gcc -Wall first.c -o first_result (pkg-config --libs --clfags xcb)

xcbを試したところ
xcbを試したところ

参考 www.x.org