• Advertisement
Sign in to follow this  

How to get 86KB/frame in a browser?

This topic is 577 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Advertisement
That is not enough information to work with. JavaScript itself isn't a problem. Consider that several online speed test systems are written in JavaScript and they are able to transfer at multi-gigabit rates.

What are you trying to do? What is the issue you are having?

Share this post


Link to post
Share on other sites

Just load in information I want to load three variables 1 3bit 1 2bit 1 3bit(not color) while having 2 constants over time 6bit and 3 bit to play an animation per pixel on the screen Acording to my calculation i only need 8 new bits per frame but I If there was no problem 20 bits would alllow me to add mor percision.

Edited by Infinity8378

Share this post


Link to post
Share on other sites

You can just send all the animation frames once to the client, then let the client play the animation. Not every pixel has to be a client<->server transaction. You wont get anything fast enough working like that.

Share this post


Link to post
Share on other sites

It's not an image but a brightness (Lighting+Normal) map.

 

Basically i map The GI which is 6 combinations plus the hue which is up to 64 combinations to a 216bit color nondithering color space

Edited by Infinity8378

Share this post


Link to post
Share on other sites

I was trying pixel manipulation but getting inconsistent results.

 

I figured I load it in as a animated sprite.

 

This was my proof that i could get 360*720=512*512 30fps

I still need to add a 240by360 sprite but after changing some things i got worried it would not work

 

 
var canvas = document.getElementById('canvas');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var ctx = canvas.getContext('2d');
var k=0;
for (var h=0;h<6;h++){
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-51*i) + ',' +
Math.floor(255-51*j) + ',' +
Math.floor(255-51*h) + ')'; 
ctx.fillRect(k,0,1,1);
k++;
}
}
}
var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
var buf = new ArrayBuffer(imageData.data.length);
var buf8 = new Uint8ClampedArray(buf);
var data = new Uint32Array(buf);
 
var fps = 30;
var now;
var then = Date.now();
var interval = 1000/fps;
var delta;
var myMap = {};
var screen =new Array(737280);
insert('vvvvv', 215, 215);
screen[0]='vvvvv';
insert('vvvvu', 214, 214);
screen[1]='vvvvu';
insert('vvvvt', 213, 213);
screen[2]='vvvvt';
insert('vvvvs', 212, 212);
screen[3]='vvvvs';
insert('vvvvr', 211, 211);
screen[4]='vvvvr';
insert('vvvvq', 210, 210);
screen[5]='vvvvq';
insert('vvvvp', 209, 209);
screen[6]='vvvvp';
insert('vvvvo', 208, 208);
screen[7]='vvvvo';
insert('vvvvn', 207, 207);
screen[8]='vvvvn';
insert('vvvvm', 206, 206);
screen[9]='vvvvm';
insert('vvvvl', 205, 205);
screen[10]='vvvvl';
insert('vvvvk', 204, 204);
screen[11]='vvvvk';
insert('vvvvj', 203, 203);
screen[12]='vvvvj';
insert('vvvvi', 202, 202);
screen[13]='vvvvi';
insert('vvvvh', 201, 201);
screen[14]='vvvvh';
insert('vvvvg', 200, 200);
screen[15]='vvvvg';
insert('vvvvf', 199, 199);
screen[16]='vvvvf';
insert('vvvve', 198, 198);
screen[17]='vvvve';
insert('vvvvd', 197, 197);
screen[18]='vvvvd';
insert('vvvvc', 196, 196);
screen[19]='vvvvc';
insert('vvvvb', 195, 195);
screen[20]='vvvvb';
insert('vvvva', 194, 194);
screen[21]='vvvva';
insert('vvvuv', 193, 193);
screen[22]='vvvuv';
insert('vvvuu', 192, 192);
screen[23]='vvvuu';
insert('vvvut', 191,191);
screen[24]='vvvut';
insert('vvvus', 190,190);
screen[25]='vvvus';
insert('vvvur', 189,189);
screen[26]='vvvur';
insert('vvvuq', 188,188);
screen[27]='vvvuq';
insert('vvvup', 187,187);
screen[28]='vvvup';
insert('vvvuo', 186,186);
screen[29]='vvvuo';
insert('vvvun', 185,185);
screen[30]='vvvun';
insert('vvvum', 184,184);
screen[31]='vvvum';
insert('vvvul', 183,183);
screen[32]='vvvul';
insert('vvvuk', 182,182);
screen[33]='vvvuk';
insert('vvvuj', 181,181);
screen[34]='vvvuj';
insert('vvvui', 180,180);
screen[35]='vvvui';
insert('vvvuh', 179,179);
screen[36]='vvvuh';
insert('vvvug', 178,178);
screen[37]='vvvug';
insert('vvvuf', 177,177);
screen[38]='vvvuf';
insert('vvvue', 176,176);
screen[39]='vvvue';
insert('vvvud', 175,175);
screen[40]='vvvud';
insert('vvvuc', 174,174);
screen[41]='vvvuc';
insert('vvvub', 173,173);
screen[42]='vvvub';
insert('vvvua', 172,172);
screen[43]='vvvua';
insert('vvvtv', 171,171);
screen[44]='vvvtv';
insert('vvvtu', 170,170);
screen[45]='vvvtu';
insert('vvvtt', 169,169);
screen[46]='vvvtt';
insert('vvvts', 168,168);
screen[47]='vvvts';
insert('vvvtr', 167,167);
screen[48]='vvvtr';
insert('vvvtq', 166,166);
screen[49]='vvvtq';
insert('vvvtp', 165,165);
screen[50]='vvvtp';
insert('vvvto', 164,164);
screen[51]='vvvto';
insert('vvvtn', 163,163);
screen[52]='vvvtn';
insert('vvvtm', 162,162);
screen[53]='vvvtm';
insert('vvvtl', 161,161);
screen[54]='vvvtl';
insert('vvvtk', 160,160);
screen[55]='vvvtk';
insert('vvvtj', 159,159);
screen[56]='vvvtj';
insert('vvvti', 158,158);
screen[57]='vvvti';
insert('vvvth', 157,157);
screen[58]='vvvth';
insert('vvvtg', 156,156);
screen[59]='vvvtg';
insert('vvvtf', 155,155);
screen[60]='vvvtf';
insert('vvvte', 154,154);
screen[61]='vvvte';
insert('vvvtd', 153,153);
screen[62]='vvvtd';
insert('vvvtc', 152,152);
screen[63]='vvvtc';
insert('vvvtb', 151,151);
screen[64]='vvvtb';
insert('vvvta', 150,150);
screen[65]='vvvta';
insert('vvvsv', 149,149);
screen[66]='vvvsv';
insert('vvvsu', 148,148);
screen[67]='vvvsu';
insert('vvvst', 147,147);
screen[68]='vvvst';
insert('vvvss', 146,146);
screen[69]='vvvss';
insert('vvvsr', 145,145);
screen[70]='vvvsr';
insert('vvvsq', 144,144);
screen[71]='vvvsq';
insert('vvvsp', 143,143);
screen[72]='vvvsp';
insert('vvvso', 142,142);
screen[73]='vvvso';
insert('vvvsn', 141,141);
screen[74]='vvvsn';
insert('vvvsm', 140,140);
screen[75]='vvvsm';
insert('vvvsl', 139,139);
screen[76]='vvvsl';
insert('vvvsk', 138,138);
screen[77]='vvvsk';
insert('vvvsj', 137,137);
screen[78]='vvvsj';
insert('vvvsi', 136,136);
screen[79]='vvvsi';
insert('vvvsh', 135,135);
screen[80]='vvvsh';
insert('vvvsg', 134,134);
screen[81]='vvvsg';
insert('vvvsf', 133,133);
screen[82]='vvvsf';
insert('vvvse', 132,132);
screen[83]='vvvse';
insert('vvvsd', 131,131);
screen[84]='vvvsd';
insert('vvvsc', 130,130);
screen[85]='vvvsc';
insert('vvvsb', 129,129);
screen[86]='vvvsb';
insert('vvvsa', 128,128);
screen[87]='vvvsa';
insert('vvvrv', 127,127);
screen[88]='vvvrv';
insert('vvvru', 126,126);
screen[89]='vvvru';
insert('vvvrt', 125,125);
screen[90]='vvvrt';
insert('vvvrs', 124,124);
screen[91]='vvvrs';
insert('vvvrr', 123,123);
screen[92]='vvvrr';
insert('vvvrq', 122,122);
screen[93]='vvvrq';
insert('vvvrp', 121,121);
screen[94]='vvvrp';
insert('vvvro', 120,120);
screen[95]='vvvro';
insert('vvvrn', 119,119);
screen[96]='vvvrn';
insert('vvvrm', 118,118);
screen[97]='vvvrm';
insert('vvvrl', 117,117);
screen[98]='vvvrl';
insert('vvvrk', 116,116);
screen[99]='vvvrk';
insert('vvvrj', 115,115);
screen[100]='vvvrj';
insert('vvvri', 114,114);
screen[101]='vvvri';
insert('vvvrh', 113,113);
screen[102]='vvvrh';
insert('vvvrg', 112,112);
screen[103]='vvvrg';
insert('vvvrf', 111,111);
screen[104]='vvvrf';
insert('vvvre', 110,110);
screen[105]='vvvre';
insert('vvvrd', 109,109);
screen[106]='vvvrd';
insert('vvvrc', 108,108);
screen[107]='vvvrc';
insert('vvvrb', 107,107);
screen[108]='vvvrb';
insert('vvvra', 106,106);
screen[109]='vvvra';
insert('vvvqv', 105,105);
screen[110]='vvvqv';
insert('vvvqu', 104,104);
screen[111]='vvvqu';
insert('vvvqt', 103,103);
screen[112]='vvvqt';
insert('vvvqs', 102,102);
screen[113]='vvvqs';
insert('vvvqr', 101,101);
screen[114]='vvvqr';
insert('vvvqq', 100,100);
screen[115]='vvvqq';
insert('vvvqp', 99,99);
screen[116]='vvvqp';
insert('vvvqo', 98,98);
screen[117]='vvvqo';
insert('vvvqn', 97,97);
screen[118]='vvvqn';
insert('vvvqm', 96,96);
screen[119]='vvvqm';
insert('vvvql', 95,95);
screen[120]='vvvql';
insert('vvvqk', 94,94);
screen[121]='vvvqk';
insert('vvvqj', 93,93);
screen[122]='vvvqj';
insert('vvvqi', 92,92);
screen[123]='vvvqi';
insert('vvvqh', 91,91);
screen[124]='vvvqh';
insert('vvvqg', 90,90);
screen[125]='vvvqg';
insert('vvvqf', 89,89);
screen[126]='vvvqf';
insert('vvvqe', 88,88);
screen[127]='vvvqe';
insert('vvvqd', 87,87);
screen[128]='vvvqd';
insert('vvvqc', 86,86);
screen[129]='vvvqc';
insert('vvvqb', 85,85);
screen[130]='vvvqb';
insert('vvvqa', 84,84);
screen[131]='vvvqa';
insert('vvvpv', 83,83);
screen[132]='vvvpv';
insert('vvvpu', 82,82);
screen[133]='vvvpu';
insert('vvvpt', 81,81);
screen[134]='vvvpt';
insert('vvvps', 80,80);
screen[135]='vvvps';
insert('vvvpr', 79,79);
screen[136]='vvvpr';
insert('vvvpq', 78,78);
screen[137]='vvvpq';
insert('vvvpp', 77, 77);
screen[138]='vvvpp';
insert('vvvpo', 76,76);
screen[139]='vvvpo';
insert('vvvpn', 75,75);
screen[140]='vvvpn';
insert('vvvpm', 74,74);
screen[141]='vvvpm';
insert('vvvpl', 73,73);
screen[142]='vvvpl';
insert('vvvpk', 72,72);
screen[143]='vvvpk';
insert('vvvpj', 71,71);
screen[144]='vvvpj';
insert('vvvpi', 70,70);
screen[145]='vvvpi';
insert('vvvph', 69,69);
screen[146]='vvvph';
insert('vvvpg', 68,68);
screen[147]='vvvpg';
insert('vvvpf', 67,67);
screen[148]='vvvpf';
insert('vvvpe', 66,66);
screen[149]='vvvpe';
insert('vvvpd', 65,65);
screen[150]='vvvpd';
insert('vvvpc', 64,64);
screen[151]='vvvpc';
insert('vvvpb', 63,63);
screen[152]='vvvpb';
insert('vvvpa', 62,62);
screen[153]='vvvpa';
insert('vvvov', 61,61);
screen[154]='vvvov';
insert('vvvou', 60,60);
screen[155]='vvvou';
insert('vvvot', 59,59);
screen[156]='vvvot';
insert('vvvos', 58,58);
screen[157]='vvvos';
insert('vvvor', 57,57);
screen[158]='vvvor';
insert('vvvoq', 56,56);
screen[159]='vvvoq';
insert('vvvop', 55,55);
screen[160]='vvvop';
insert('vvvoo', 54,54);
screen[161]='vvvoo';
insert('vvvon', 53,53);
screen[162]='vvvon';
insert('vvvom', 52,52);
screen[163]='vvvom';
insert('vvvol', 51,51);
screen[164]='vvvol';
insert('vvvok', 50,50);
screen[165]='vvvok';
insert('vvvoj', 49,49);
screen[166]='vvvoj';
insert('vvvoi', 48,48);
screen[167]='vvvoi';
insert('vvvoh', 47,47);
screen[168]='vvvoh';
insert('vvvog', 46,46);
screen[169]='vvvog';
insert('vvvof', 45,45);
screen[170]='vvvof';
insert('vvvoe', 44,44);
screen[171]='vvvoe';
insert('vvvod', 43,43);
screen[172]='vvvod';
insert('vvvoc', 42,42);
screen[173]='vvvoc';
insert('vvvob', 41,41);
screen[174]='vvvob';
insert('vvvoa', 40,40);
screen[175]='vvvoa';
insert('vvvnv', 39,39);
screen[176]='vvvnv';
insert('vvvnu', 38,38);
screen[177]='vvvnu';
insert('vvvnt', 37,37);
screen[178]='vvvnt';
insert('vvvns', 36,36);
screen[179]='vvvns';
insert('vvvnr', 35,35);
screen[180]='vvvnr';
insert('vvvnq', 34,34);
screen[181]='vvvnq';
insert('vvvnp', 33,33);
screen[182]='vvvnp';
insert('vvvno', 32,32);
screen[183]='vvvno';
insert('vvvnn', 31,31);
screen[184]='vvvnn';
insert('vvvnm', 30,30);
screen[185]='vvvnm';
insert('vvvnl', 29,29);
screen[186]='vvvnl';
insert('vvvnk', 28,28);
screen[187]='vvvnk';
insert('vvvnj', 27,27);
screen[188]='vvvnj';
insert('vvvni', 26,26);
screen[189]='vvvni';
insert('vvvnh', 25,25);
screen[190]='vvvnh';
insert('vvvng', 24,24);
screen[191]='vvvng';
insert('vvvnf', 23,23);
screen[192]='vvvnf';
insert('vvvne', 22,22);
screen[193]='vvvne';
insert('vvvnd', 21,21);
screen[194]='vvvnd';
insert('vvvnc', 20,20);
screen[195]='vvvnc';
insert('vvvnb', 19,19);
screen[196]='vvvnb';
insert('vvvna', 18,18);
screen[197]='vvvna';
insert('vvvmv', 17,17);
screen[198]='vvvmv';
insert('vvvmu', 16,16);
screen[199]='vvvmu';
insert('vvvmt', 15,15);
screen[200]='vvvmt';
insert('vvvms', 14,14);
screen[201]='vvvms';
insert('vvvmr', 13,13);
screen[202]='vvvmr';
insert('vvvmq', 12,12);
screen[203]='vvvmq';
insert('vvvmp', 11,11);
screen[204]='vvvmp';
insert('vvvmo', 10,10);
screen[205]='vvvmo';
insert('vvvmn', 9,9);
screen[206]='vvvmn';
insert('vvvmm', 8,8);
screen[207]='vvvmm';
insert('vvvml', 7,7);
screen[208]='vvvml';
insert('vvvmk', 6,6);
screen[209]='vvvmk';
insert('vvvmj', 5,5);
screen[210]='vvvmj';
insert('vvvmi', 4,4);
screen[211]='vvvmi';
insert('vvvmh', 3,3);
screen[212]='vvvmh';
insert('vvvmg', 2,2);
screen[213]='vvvmg';
insert('vvvmf', 1,1);
screen[214]='vvvmf';
insert('vvvme', 0,0);
screen[215]='vvvme';
  
function draw() {
     
    requestAnimationFrame(draw);
     
    now = Date.now();
    delta = now - then;
     
    if (delta > interval) {
 
        then = now - (delta % interval);
         
        for (var i = 0; i < canvasHeight*canvasWidth+canvasWidth; ++i) {
var value = get(screen[i%215],215-(i%215));
var r=imageData.data[4*value];
var g=imageData.data[4*value+1];
var b=imageData.data[4*value+2];
var a=imageData.data[4*value+3];
//Little eddian
data = (a << 24) | 
(b << 16) | 
(g << 8) | 
r;
}
imageData.data.set(buf8);
 
ctx.putImageData(imageData, 0, 0);
imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    }
}
 
draw();
 
function insert(k1, k2, v){
if(!(k1 in myMap)){ myMap[k1] = {}; }
myMap[k1][k2] = v;
}
 
function get(k1, k2){
return myMap[k1] && myMap[k1][k2];
}
Edited by Infinity8378

Share this post


Link to post
Share on other sites

This topic is 577 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Advertisement