ちさとのblog

ハッカーっぽい画面を作る

2021年08月01日00:36

Processingでロボットアニメ的な小物を作っている話

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　６月(公開２週目)に"閃光のハサウェイ"を見てきて影響されたので、それっぽいものをProcessingで作りました。
　いつも通り全部ランダムofランダムなので毎回挙動が違っていい感じです。
　希望があれば.exeとか.pdeとかで公開しようと思います。







　せっかく作ったので今度出るガンダムのFPSとかで使おうと思っています。
このエントリーをはてなブックマークに追加 mixiチェック


2021年05月15日12:30

黛灰さんの背景っぽい画面をProcessingで作った話

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　にじさんじの黛灰さんの背景っぽい映像を映すProcessingのコードを書きました。Dropboxにコードを置いておくので自由に使ってください。

　配布しているコードではフォントが"DSEG14Modern-Regular.ttf"というものになっているのでそこは各々変更してもらえると嬉しいです。ちなみにこのフォントは↓のサイトで配布してあります。

　実際に動くと↓の感じです。個人的にはまあまあ良くできてると思ってます。

このエントリーをはてなブックマークに追加 mixiチェック


2021年05月03日00:15

憲法記念日なので憲法をかっこよく表示した話。

カテゴリ
どうでもいい日記
ハッカーっぽい画面を作る
　今日は憲法記念日なので憲法をかっこよく表示しました。

　使っているコードは前の記事(https://www.chisatofu.com/archives/26990736.html)の物です。
　変更点としては、日本語対応させ、フォントを装甲明朝と限界明朝にし、表示を手直ししただけです。

　ていうことで今回はこれだけです。YouTubeに動画が上がってるので見てってください。

このエントリーをはてなブックマークに追加 mixiチェック


2021年04月21日19:01

Processingで昔のパソコンみたいな画面を作る

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　前回(http://blog.livedoor.jp/chisato_tofu/archives/26990604.html)の応用例として、昔のパソコンみたいな画面を作った話です。

　内容としては.txtファイル内の文字を順番に表示していくだけです。
　作ったのはこんな感じです。特に難しいことはしていないので下にコードだけ共有しておきます。しいて言えば今回"list"を使いましたが、今回の使い方では長さが決まっていない配列ぐらいの使い方しかしていません。

　コードはDropBox(https://www.dropbox.com/sh/kxa7ugqqsf1sk1r/AAAqzezBDWzq6RdSk-eL73e4a?dl=0)においてあるので使ってください。フォントだけ抜いてあるのでお好みのフォントで動かしてみてください。
　フォントの替え方はこちら(http://blog.livedoor.jp/chisato_tofu/archives/25772956.html)
このエントリーをはてなブックマークに追加 mixiチェック


2021年04月21日19:00

Processingでテキストファイル（.txt）を読み込む方法

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　今回はProcessing Javaモードで.txtファイルから文字データを読み込む方法です。

　今回主に使うのは"loadStrings()"です。
　この関数は書いたコードの.pdeと同じファイル内にある"data"の中に入っているファイルから、一行ごとに書いてある文字を読み取ってくれます。

①使いたい.txtファイルの準備
　メモ帳などを使って適当に作成してください。
スクリーンショット 2021-04-21 113129

②.txtファイルをProcessingのIDEにドラッグアンドドロップ
　この時.pdeと同じ階層に"data"というファイルができ、その中に先ほど作ったファイルが入っているか確認してください。なくても自分で"data"というファイルを作成し、その中に.txtを入れることで動作するようです。
スクリーンショット 2021-04-21 113704

③プログラムを書く
　これを動かすための最小構成は下の通りです。
  1. void draw() {
  2.   String[] lines = loadStrings("sample.txt");
  3.   for (int i = 0; i < lines.length; i++) {
  4.     println(lines[i]);
  5.   }
  6. }
　２行目で"sample.txt"からデータを"lines[]"に格納し、行目で表示しています。

④実行する
　実行すると下のようにコンソールに.txtファイルの内容が表示されます。
スクリーンショット 2021-04-21 114535



　また、これを応用すると下のようなものが作れます。これの作り方及びコードはこの記事(http://blog.livedoor.jp/chisato_tofu/archives/26990736.html)で紹介しています。
このエントリーをはてなブックマークに追加 mixiチェック


2021年01月12日19:00

Processingで作るハッカーっぽい画面のまとめ

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　今まで書いてきた"ハッカーっぽい画面を作る"のタブのまとめです。これまでの技術を組み合わせると↓のような映像が作れます。


　難しい技術は使っていないのでどうにかできると思います。また、コードを添付しますが自分が分かればいいと思って適当に書いてたので汚いです。ゲーミングPCで動かすことを想定して作ったので、処理が重いです。変数もグローバルで乱立させてしまっているので、わかりにくかったらtwitterかコメントで聞いてください。なるべく丁寧に解説します。

　今回使用したコードはDropBoxに入れておきます。Readmeにも書いてありますが、今回使ったフォントを利用する場合はこちら(https://www.keshikan.net/fonts.html)のサイトのフォントを使用してください。
このエントリーをはてなブックマークに追加 mixiチェック


2021年01月11日23:32

Processingでグリッチエフェクトを作る

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　有名な画面効果にグリッチエフェクトというものがあります。今回はそれをProcessingで描画した図形にかける方法です。

　今回使用したのはPImageという機能で、これによって画像を表示したりそれにエフェクトを足したりすることができます。今回は前回(http://blog.livedoor.jp/chisato_tofu/archives/25967168.html)の7セグマトリクスにエフェクトをかけたいため、Processingの画面をPImageで扱える形に変更する必要があります。そのために今回はget()関数を利用しています。
　get()関数はget(x,y,dx,dy)とすることで、(x,y)から(dx,dy)分の色を取得できます。今回はこれをランダムに決められた値分移動させることで、それっぽいエフェクトにしています。今回は自分の趣味でrandom関数を使用しましたが、noise関数を利用することでより連続的なノイズを作ることができるとおもいます。

　今回作ったエフェクトは↓のようなものです。元の図形は緑色の正方形が連続しているものです。

　以下コードです。get()で取得した範囲は真っ黒のrectで埋めることで、ずらして描画した際の重なりをなくしています。
  1. import java.util.Random;

  3. PImage img;
  4. int[] glitch = new int[4];
  5. Random random = new Random();


  8. void setup() {
  9.   size(1920, 1080);
  10.   img = createImage(width, height, ARGB);
  11.   colorMode(HSB, 360, 255, 255, 255);
  12.   noStroke();
  13. }

  15. void draw() {
  16.   background(0);
  17.   fill(156, 137, 172, 255);
  18.   for (int i=0; i<9; i++) {
  19.     for (int j=0; j<16; j++) {
  20.       if ((i + j) % 2 == 0) {
  21.         rect(120 * j, 120 * i, 120, 120);
  22.       }
  23.     }
  24.   }

  26.   glitch();
  27. }


  30. void glitch() {
  31.   if (random.nextInt(10) >= 9) {
  32.     if (random.nextInt(2) > 0) {
  33.       glitch[0] = random.nextInt(1080);//y
  34.       glitch[1] = random.nextInt(60);//dx
  35.       glitch[2] = random.nextInt(100);//dy
  36.       glitch[3] = random.nextInt(2) * 2 + 1;//n
  37.     } else {
  38.       glitch[0] = 0;
  39.       glitch[1] = 0;
  40.       glitch[2] = 0;
  41.       glitch[3] = 0;
  42.     }
  43.   }

  45.   switch(glitch[3]) {
  46.   case 1:
  47.     img = get(0, glitch[0], width, glitch[2]);
  48.     fill(0, 0, 0);
  49.     rect(0, glitch[0], width, glitch[2]);
  50.     image(img, 30 - glitch[1], glitch[0]);
  51.     if (glitch[1] > 30) {
  52.       image(img, 30 - glitch[1] + width, glitch[0]);
  53.     } else {
  54.       image(img, 30 - glitch[1] - width, glitch[0]);
  55.     }
  56.     break;

  58.   case 3:
  59.     img = get(0, glitch[0], width, glitch[2]);
  60.     fill(0, 0, 0);
  61.     rect(0, glitch[0], width, glitch[2]);
  62.     image(img, 30 - glitch[1], glitch[0]);
  63.     if (glitch[1] > 30) {
  64.       image(img, 30 - glitch[1] + width, glitch[0]);
  65.     } else {
  66.       image(img, 30 - glitch[1] - width, glitch[0]);
  67.     }
  68.     img = get(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
  69.     fill(0, 0, 0);
  70.     rect(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
  71.     image(img, -30 + glitch[1], glitch[0] - glitch[2] / 2);
  72.     if (glitch[1] > 30) {
  73.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2] / 2);
  74.     } else {
  75.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2] / 2);
  76.     }
  77.     img = get(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
  78.     fill(0, 0, 0);
  79.     rect(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
  80.     image(img, -30 + glitch[1], glitch[0] + glitch[2] / 2);
  81.     if (glitch[1] > 30) {
  82.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2] / 2);
  83.     } else {
  84.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2] / 2);
  85.     }
  86.     break;

  88.   case 5:
  89.     img = get(0, glitch[0], width, glitch[2]);
  90.     fill(0, 0, 0);
  91.     rect(0, glitch[0], width, glitch[2]);
  92.     image(img, 30 - glitch[1], glitch[0]);
  93.     if (glitch[1] > 30) {
  94.       image(img, 30 - glitch[1] + width, glitch[0]);
  95.     } else {
  96.       image(img, 30 - glitch[1] - width, glitch[0]);
  97.     }
  98.     img = get(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
  99.     fill(0, 0, 0);
  100.     rect(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
  101.     image(img, -30 + glitch[1], glitch[0] - glitch[2] / 2);
  102.     if (glitch[1] > 30) {
  103.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2] / 2);
  104.     } else {
  105.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2] / 2);
  106.     }
  107.     img = get(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
  108.     fill(0, 0, 0);
  109.     rect(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
  110.     image(img, -30 + glitch[1], glitch[0] + glitch[2] / 2);
  111.     if (glitch[1] > 30) {
  112.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2] / 2);
  113.     } else {
  114.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2] / 2);
  115.     }
  116.     img = get(0, glitch[0] - glitch[2], width, glitch[2]);
  117.     fill(0, 0, 0);
  118.     rect(0, glitch[0] - glitch[2], width, glitch[2]);
  119.     image(img, -30 + glitch[1], glitch[0] - glitch[2]);
  120.     if (glitch[1] > 30) {
  121.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2]);
  122.     } else {
  123.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2]);
  124.     }
  125.     img = get(0, glitch[0] + glitch[2], width, glitch[2]);
  126.     fill(0, 0, 0);
  127.     rect(0, glitch[0] + glitch[2], width, glitch[2]);
  128.     image(img, -30 + glitch[1], glitch[0] + glitch[2]);
  129.     if (glitch[1] > 30) {
  130.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2]);
  131.     } else {
  132.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2]);
  133.     }
  134.     break;
  135.   }
  136. }
このエントリーをはてなブックマークに追加 mixiチェック


2021年01月11日15:10

Processingで7セグマトリクスを作る

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　もうそろそろこのシリーズも終盤に差し掛かってきました。今回は↓の映像のような7セグマトリクスを作っていきたいと思います。
　これはあらかじめ決められた40*18の升目にランダムな数字を表示し、その明るさが徐々に表示していくというものです。それなので今回は、
  1. ランダムに抽出された場所にランダムな数字を表示する部分
  2. その表示をだんだん暗くさせていく部分
に分けて作成しました。最後にプログラムを載せていますが、randomnum()がランダムな場所の数字を抽選し透過率を0にする関数、matrix()がマトリクスを表示させつつ透過率を上げていく関数です。

  1. import java.util.Random;

  3. Random random = new Random();
  4. char[] mode = new char[2];
  5. int[][] txt = new int[40][18];
  6. int[][] Br = new int[40][18];
  7. PFont D7;

  9. void setup() {
  10.   size(1920, 1080);
  11.   D7 = createFont("DSEG7ClassicMini-Regular.ttf", 60);
  12.   colorMode(HSB, 360, 255, 255, 255);
  13.   textAlign(CENTER, CENTER);
  14.   textFont(D7);
  15. }

  17. void draw() {
  18.   background(0);
  19.   randomnum();
  20.   matrix();
  21. }

  23. void keyPressed() {
  24.   mode[0] = key;
  25. }

  27. void randomnum() {
  28.   for (int i=0; i<24; i++) {//ランダムな24ますにランダムな数字を入れ、透過率を0にする
  29.     int c = random.nextInt(40);//ランダムなx座標
  30.     int d = random.nextInt(18);//ランダムなy座標
  31.     txt[c][d]=random.nextInt(10);//0~9のランダムな数字
  32.     Br[c][d]=255;//透過率最大
  33.   }
  34. }

  36. void matrix() {//マトリクスを表示し、各マス目の透過率を下げる。
  37.   for (int i=0; i<40; i++) {
  38.     for (int j=0; j<18; j++) {
  39.       fill(180, 255, 255, Br[i][j]);
  40.       Br[i][j]=Br[i][j]-5;
  41.       text(txt[i][j], -20 + i * 49, 30 + j * 65);
  42.     }
  43.   }
  44. }
このエントリーをはてなブックマークに追加 mixiチェック


2021年01月10日14:37

Processingにデスクトップ音声を入力する方法(Windows10)

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　Processingでは基本的にWindowsのデフォルト入力しか使えません。それなのでProcessingでデスクトップ音声を認識したい場合は、デスクトップ出力をデフォルト入力にすることが必要です。

　これを実現するために今回はVB-Audioというソフトを使います。
　このソフトの使い方としては、まずhttps://vb-audio.com/Cable/からダウンロードをします。そしたらダウンロードしたzipファイルを解凍し、その中のVBCABLE_Setup_x64.exeを実行するとこのソフトが使えるようになります。

　windowsの設定画面で↓のように設定すると出力が入力にループバックします。それなので、Processingでデフォルト入力を使用するとデスクトップ出力を使用できます。

スクリーンショット 2021-01-10 142431
このエントリーをはてなブックマークに追加 mixiチェック


2021年01月10日12:51

Processingで作るオーディオビジュアライザー

カテゴリ
チサトの開発日記
ハッカーっぽい画面を作る
　オーディオビジュアライザーってかっこいいので作りたくなることがあります。自分も今回初めて正式名称を知りましたが、オーディオビジュアライザーとは音の大きさによってぴょこぴょこする棒のことです。

　今回はProcessingで作成するのでminimライブラリの中にあるFFTという機能を使います。そもそもオーディオビジュアライザーとはFFT(高速フーリエ変換)の結果をかっこよく表示したものなので、FFTをすれば後は表示するだけです。
　↓のような画面ぐらいならすぐに作ることができます。
　この時に前回(http://blog.livedoor.jp/chisato_tofu/archives/25956603.html)のソフトを使用するとデスクトップ音声のオーディオビジュアライザが使用できます。

　↓に今回のコードを載せておきます。
  1. import java.util.Random;
  2. import ddf.minim.*;
  3. import ddf.minim.analysis.*; 
  4. import ddf.minim.effects.*;
  5. import ddf.minim.signals.*;
  6. import ddf.minim.spi.*;
  7. import ddf.minim.ugens.*;

  9. Minim minim; 
  10. AudioInput in; 
  11. FFT fft; 
  12. int w;

  14. void setup() {
  15.   size(1920, 1080);
  16.   colorMode(HSB, 360, 255, 255, 255);
  17.   strokeWeight(5);
  18.   fill(180, 255, 255, 100);
  19.   minim = new Minim(this);
  20.   in = minim.getLineIn(Minim.STEREO, 512);//デフォルト入力をProcessingに取り込み
  21.   fft = new FFT(in.bufferSize(), in.sampleRate()); 
  22.   fft.logAverages(60, 2);//(FFTのバンドの数,FFTのオクターブ当たりの分割数)を設定
  23.   w=width/fft.avgSize();
  24. }

  26. void draw() {
  27.   background(0);
  28.   fft.forward(in.mix);
  29.   for (int i = 0; i < fft.avgSize(); i++) { //オーディオビジュアライザを描画
  30.     rect((i*w), height, w, -fft.getAvg(i) * 50);
  31.   }
  32. }
このエントリーをはてなブックマークに追加 mixiチェック


アクセスカウンター
  • 今日：
  • 昨日：
  • 累計：

読者登録
LINE読者登録QRコード
人気記事