少し前ですが、代官山から原宿を散歩してきました。
宮下公園や原宿駅は様変わりしましたね。
人も多く賑わっていました。
カメラを持って撮りながら歩いたので、その時の写真をいくつか載せておきます。
自作PC構成メモ(2020)
9月中頃にデスクトップPCがなくなりました。
そんなわけでデスクトップPCを組み替えました。
グラフィックボードとSSD,HDDは今まで使っていたものをそのまま流用。
新規購入したのはCPU、マザーボード、メモリ、電源、ケースです。
購入金額は約6.5万円。
基本構成のものをほぼほぼ新規で組み上げました。
そして初のAMD構成。
以下が今回の自作で組み上げたPCの構成です。記録として残すためにメモ。
- CPU: AMD Ryzen 5 3600 BOX
- マザーボード: MSI B450 GAMING PLUS MAX
- メモリ: G.SKILL F4-3600C19D-16GSXWB (DDR4 PC4-28800 8GB 2枚組)
- 電源: Antec NE750 GOLD (750W)
- ケース: Antec ATX対応 P101 Silent
(↓流用)
- グラフィックボード: Palit GeForce GTX 1050Ti 4GB STORMX
- SSD: 128GB * 1
- HDD: 2TB * 1 + 3TB * 1
- OS: Ubuntu 20.04 + Windouw 8.1
電源がオーバースペック過ぎました。
構成考えたときにあまり考慮できてなかった。（勢いで選んでしまった）
ゲームとかをするわけではないので、この構成で満足しています。
いずれグラボはもっとスペック高いものにしてみたいです。
自作PCを新しくして1ヶ月程が経過しました。
PCの使用目的が
- WEB閲覧
- 動画鑑賞
- プログラミング
- 写真編集
という前提での感想を書いていきます。
結果から言うと大満足です。
CPUはパワーがあるので、写真編集でRaw現像する際に処理時間が格段に短くなりました。
大量のRaw現像を一括で行っても、現像時間で苦になる程は待たなくて良いです。
動画の再生はグラフィックボードにも依存する部分があるのですが、4K動画でも問題なく再生できますね。
4Kモニタを使ってないので、その恩恵は受けられませんが、試しに再生したらモニタを4K対応に変えたくなってしまいました。
プログラミングはグラフィカルなProcessingやp5.jsでの描写もなんなくこなしてくれます。
AMD Ryzen 5 3600 は評判高かったので期待して購入したのですが、評判通りの良いスペックで私の使い方では何をするにも問題なくこなしてくれます。
今回買い替えたパーツは6.5万円でしたが、コスパで考えても大満足です。
p5.jsのP2DとWebGLの透過度による描写の違い
p5.jsのP2DとWebGLの透過度によって描写が異なっている様な気がします。
ブラウザ上では違いが分からないのですが、画像として保存した時に差異が顕在化しました。
比較のために半透明の四角形を明度、彩度を変えて描写したものを見てみましょう。
保存形式はpngとしています。
P2Dによる描写
WebGLによる描写
何が起きているのだろう
おそらくですが、WebGLモードで保存した画像に何かありそうな気がしますね。
背景を黒の描写を見ると分かりやすいですが、WebGLモードの方は保存した画像が半透明なんですね。
WebGLの方は保存した画像にアルファ値が残っているというか、有効になっているということですかね。
P2Dの方は保存した画像自体にはアルファ値が残っていないのかな。
詳細考察
保存された画像を解析していきます。
今回はLinux環境でコマンドidentify -verbose hoge.pngにて画像情報を比較していきます。
画像情報から差分が見えたので、わかりやすい部分を以下に抜粋します。
- P2D保存PNG画像
Channel depth:
Red: 8-bit
Green: 8-bit
Blue: 8-bit
Alpha: 1-bit
Channel statistics:
...
Alpha:
min: 255 (1)
max: 255 (1)
mean: 255 (1)
Channel depth:
Red: 8-bit
Green: 8-bit
Blue: 8-bit
Alpha: 8-bit
Channel statistics:
...
Alpha:
min: 191 (0.74902)
max: 255 (1)
mean: 233.487 (0.915635)
アルファ値の深度が異なっています。
P2Dでは1bit、WebGLでは8bitです。
P2Dではアルファ値は無効な状態(どのピクセルも透明でない)で使われていないですが、
WebGLではアルファ値も描写した通りに保存されています。
保存形式の差がP2DとWebGLではあるようで、 それよって描写が異なる様に見えたということでした。 jpegで保存した場合にどうなるのかなど調べきれていない部分はありますが、 個人的にWebGLの透明度が残ることがわからず悩まされました。 原因を突き止めることができたのでよかったです。
最後に、今回使ったソースコードを以下に記載しておきます。
P2D描写でのソースコード
let bg=100;
let nx=7;
let ny=5;
let d=50;
function setup() {
createCanvas(500, 500);
colorMode(HSB);
rectMode(CENTER);
background(bg);
strokeWeight(1);
stroke(0,0,50,0.5);
for(let i=0;i<nx;i++){
for(let j=0;j<ny;j++){
let col = color(360/(nx-1)*i ,(i==0)?0:100 , 100/ny*j, 0.5) ;
let x = (i+0.5)*width/nx;
let y = (j+0.5)*height/ny;
push();
fill(col);
translate(x, y);
rect(0, 0, d);
pop();
}
}
}
function keyPressed(){
//save PNG
save("img_"+month()+day()+hour()+minute()+second()+".png");
}
WebGL描写でのソースコード
let bg=100;
let nx=7;
let ny=5;
let d=50;
function setup() {
createCanvas(500, 500, WEBGL);
colorMode(HSB);
rectMode(CENTER);
background(bg);
translate(-width/2, -height/2);
strokeWeight(1);
stroke(0,0,50,0.5);
for(let i=0;i<nx;i++){
for(let j=0;j<ny;j++){
let col = color(360/(nx-1)*i ,(i==0)?0:100 , 100/ny*j, 0.5) ;
let x = (i+0.5)*width/nx;
let y = (j+0.5)*height/ny;
push();
fill(col);
translate(x, y);
rect(0, 0, d);
pop();
}
}
}
function keyPressed(){
//save PNG
save("img_"+month()+day()+hour()+minute()+second()+".png");
}