とてもシンプルな話ですぐできるという話を口頭で伝えきれなかったので補足．技術的に有意義な情報はありません．
普段扱う2次元画像は，普段扱う画像なら各ピクセル が (r,g,b) の値を持つ二次元配列と捉えることができる．
逆に，横x, 縦y の位置にあるピクセル に対して，その持つべき色 (r,g,b) を与えることができれば，それを画像化することができる．こういうケースは多いので，手で PNG ファイルとかを書き込んでいくのは大変でも，多くの言語ではライブラリとかでかんたんに使えるようになっている．
ほか，コードからお絵描きするときのもう一つの手として，多くのライブラリには「円を書く」「四角を塗りつぶす」とかそういう命令を持っていて，多くの場合はこちらが使いやすい．
命令を重ねて絵を書いていく
たとえば javascript なら canvas を使うのがシンプルかつ触りやすい：
< html lang = "ja" >
< head > < script src = "./main.js" ></ script >
</ head >
< body >
< canvas id = "example" width = "500" height = "500" style = "border:2px solid black; width:500px; height:500px;" ></ canvas >
</ body >
</ html >
function main(){
const c = document .getElementById("example" );
const ctx = c.getContext('2d' );
for (let i=0; i<50; i++){
for (let j=0; j<50; j++){
ctx.fillStyle="#193" ;
ctx.fillRect(i*10, j*10, 6+Math.random(), 6+Math.random());
ctx.fillStyle="#9af" ;
ctx.fillRect(i*10+3+Math.random(), j*10+3+Math.random(), 3, 3);
}
}
}
window .addEventListener('load' , main);
いろんな錯視が見えそうになる
例えば2018年の年賀状の柄 も同じように書いている．
各ピクセル (x,y) に対してそこでの色 (r,g,b) を与えて，そこから画像を作ることを考える．
概念的には二次元配列 [[ c(x,y) ]] を用意して（各 c(x,y) は (r,g,b) の組），それを画像に変換することになる．
javascript でいうと，canvas 関連で ImageData[ rxy, gxy, bxy, αxy ] の順でできた1次元配列に近い形式になっている．
これをCanvasRenderingContext2D.putImageData()
const WIDTH=500;
const HEIGHT=500;
function main(){
const c = document .getElementById("example" );
const ctx = c.getContext('2d' );
let imageData = ctx.createImageData(WIDTH,HEIGHT);
for (let y=0; y<HEIGHT; y++) {
for (let x=0; x<WIDTH; x++) {
let loc = (y*WIDTH + x)*4;
imageData.data[ loc] = 0;
imageData.data[ loc+1] = y/HEIGHT * 255;
imageData.data[ loc+2] = x/WIDTH * 255;
imageData.data[ loc+3] = 255;
}
}
ctx.putImageData(imageData,0,0);
}
window .addEventListener('load' , main);
ピクセル ごとに値を決めるというやり口はシェーダと近いのだが，こちらは並列計算のための制約があるわけではないので，他のピクセル に依存したりするの (cellular automata とか) も書ける．
この前話題になったの
この前のは， (x_0, y_0) = (0,0) から初めて， x_{n+1} = y_n + a*x_n, y_{n+1} = (x_n)^2 +b で決まる (x_n, y_n) （ただし a= 0.18525845, b=-1.1336243）の列がどういう点を動くかを画像にしたもの（点が通ったところに青の点を打っていっている）． それぞれの点 (x,y) を，ここではちょっと大きめの 1500*1000 px のキャンバスに移して，そのピクセル の色だけ書き換えれば良い．
だいたい -1.8 - 1.8 くらいの座標に収まるから，そのように変形して
< html lang = "ja" >
< head >
< script src = "./main.js" ></ script >
</ head >
< body >
< canvas id = "example" width = "1500" height = "1000" style = "border:2px solid black; width:1500px; height:1000px;" ></ canvas >
</ body >
</ html >
const WIDTH=1500;
const HEIGHT=1000;
const N = 200000;
const A= 0.18525845;
const B=-1.1336243;
const DW = 1.8;
const DH = DW/1.5;
function main(){
const c = document .getElementById("example" );
const ctx = c.getContext('2d' );
let imageData = ctx.createImageData(WIDTH,HEIGHT);
let x = 0; let y = 0;
for (let i=3; i<imageData.data.length; i+=4){ imageData.data[ i] =255; }
for (let n=0; n<N; n++){
let x_next = y+ A*x; let y_next = x*x + B;
let grid_x = Math.floor((x_next * WIDTH) / (2*DW) + WIDTH/2);
let grid_y = Math.floor((y_next * HEIGHT) / (2*DH) + HEIGHT/2);
let loc = (grid_y*WIDTH+ grid_x)*4;
imageData.data[ loc] = 60;
imageData.data[ loc+1] = 100;
imageData.data[ loc+2] = 200;
imageData.data[ loc+3] = 255;
x = x_next; y = y_next;
}
console.log(imageData.data);
ctx.putImageData(imageData,0,0);
}
window .addEventListener('load' , main);
こんな感じになる:
ちょっとかっこいいアレ
Python なら Pillow , Rust なら image などを使えば同じことはほぼ同じ手間でできるはず．
