JavascriptでPPM画像を作ってみる。

PPMとは？

とてもシンプルな画像形式です。
Wikipediaの解説

グラデーション

var ppm="P3 256 256 255 ";
var n=255
for(i=0;i<=n;i++){
    for(j=0;j<=n;j++){
        ppm=ppm+String(j)+" "+String(i)+" 0 ";
    }
}
var blob=new Blob([ppm],{type:"text/plain"});
const link=document.createElement("a");
link.href=URL.createObjectURL(blob);
link.download="image.ppm";
link.click();

リサジュー曲線

var ppm="P3 100 100 255 ";
var list=[];
var n=100
for(i=0;i<=n;i++){
    for(j=0;j<=n;j++){
            list.push(" 0 0 0");
    }
}
for(theta=0;theta<2*Math.PI;theta+=0.01){
    var y=Math.floor(50+50*Math.cos(6*theta));
    var x=Math.floor(50+50*Math.sin(5*theta));
    list[100*y+x]=" 255 255 255";
}
for(i=0;i<=n**2;i++){
        ppm+=list[i];
    }
var blob=new Blob([ppm],{type:"text/plain"});
const link=document.createElement("a");
link.href=URL.createObjectURL(blob);
link.download="image.ppm";
link.click();

参考

JavaScriptで文字列をファイル出力する方法を現役エンジニアが解説【初心者向け】