Online Sequencer Forums

Full Version: Pointless Program: BMOS v0.1 (CURRENT v1.3)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
BMOS - BitMap to OnlineSequencer v0.1 - Open Beta
Code:
function bytesToInt(array, start, end) {
   var result = 0;
   for (i = end - 1; i >= start; i--) {
       result = result * 256 + array[i];
   }
   return result;
}

function nearestInstrument(color) {
   //var RGBColor = color.length == 4 ? color.slice(0, 3).map(x => x * color[3] / 255) : color;
   var RGBColor = color.slice(0, 3);
   var result;
   var smallest = Infinity;
   for (i = 0; i < settings.numInstruments; i++) {
       var difference = 0;
       for (j = 0; j < 3; j++) {
           difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
       }
       if (smallest > difference) {
           smallest = difference;
           result = i;
       }
   }
   return result;
}

function drawBMP() {
   SequencerView.fastGraphics = true;
   //$.get(url, function (r) {
   const fileData = JSON.parse('[' + localStorage.fileData + ']');
   //const fileData = (new TextEncoder()).encode(r);
   const imageDataOffset = bytesToInt(fileData, 10, 14);
   const DIBLength = bytesToInt(fileData, 14, 18);
   if (DIBLength != 40) {
       return 'Not Supported: DIB: ' + DIBLength;
   }
   const width = bytesToInt(fileData, 18, 22);
   const height = bytesToInt(fileData, 22, 26);
   const heightStretch = (height - height % 72) / 72 + 1;
   const bitsPerPixel = bytesToInt(fileData, 28, 30);
   const compression = bytesToInt(fileData, 30, 34);
   if (compression != 0) {
       return 'Not Supported: Compression: ' + compression;
   }
   //var colors = bytesToInt(fileData, 44, 48);
   colorPalette = [];
   for (var i = 54; i < imageDataOffset; i += 4) {
       colorPalette.push(fileData.slice(i, i + 4));
   }
   instrumentPalette = colorPalette.length ? [] : false;
   if (instrumentPalette.length === 0) {
       for (var color in colorPalette) {
           instrumentPalette.push(nearestInstrument(colorPalette[color]));
       }
       const imageData = fileData.slice(imageDataOffset);
       const jDefault = 256 / 2 ** bitsPerPixel,
           jDevide = 2 ** bitsPerPixel;
       var i = 0,
           j = jDefault;
       for (var h = height - 1; h > -1; h--) {
           if (typeof piano[h / heightStretch] !== 'undefined') {
               for (var w = 0; w < width; w++) {
                   song.addNote(new Note(song, piano[h / heightStretch], w, 1, instrumentPalette[((imageData[i] & (256 - j)) / j) % jDevide]));
                   j /= jDevide;
                   if (j < 1 || w == width - 1) {
                       j = jDefault;
                       i++;
                   }
               }
           }
       }
       for (var x in instrumentPalette) {
           audioSystem.setInstrumentVolume(instrumentPalette[x], 0);
       };
   } else {
       const imageData = fileData.slice(imageDataOffset);
       var i = 0;
       for (var h = height - 1; h > -1; h--) {
           if (typeof piano[h / heightStretch] !== 'undefined') {
               for (var w = 0; w < width; w++) {
                   song.addNote(new Note(song, piano[h / heightStretch], w, 1, nearestInstrument(imageData.slice(i, i +
                       bitsPerPixel / 8))));
                   i += bitsPerPixel / 8;
               }
               //i += 8 - (i % 8);
           }
       }
       for (var x = 0; x < settings.numInstruments; x++) {
           audioSystem.setInstrumentVolume(x, 0);
       };
   }
   //})
}


This is completely pointless, why am I doing this...
"Fork" this in the comments if you feel like a challenge, I made the code super easy to read compared to my other stuff.
UPDATED CODE (v1.3)
Code:
function nearestInstrument(color) {
   RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
   var result;
   var smallest = Infinity;
   for (i = 0; i < 40; i++) {
       var difference = 0;
       for (j = 0; j < 3; j++) {
           difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
       }
       if (smallest > difference) {
           smallest = difference;
           result = i;
       }
   }
   return result;
}

function drawImg(source) {
   var img = new Image();
   img.src = source;
   img.onload = function() {
       canvas.width = 100;
       canvas.height = 50;
       canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
       var total = ':';
       for (var h = canvas.height - 1; h > -1; h--) {
           for (var w = 0; w < canvas.width; w++) {
                var instrument = nearestInstrument(canvas.getContext('2d').getImageData(w, h, 1, 1).data);
                if (instrument != 37) total += [w, piano50[h], 1, instrument].join(' ') + ';';
           }
       }
       if (window.SequencerView) {
           SequencerView.fastGraphics = true;
           loadData(total);
           $.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0));
       } else {
           console.log(total);
       }
   }
}

var piano50 = ["A6", "G#6", "G6", "F#6", "F6", "E6", "D#6", "D6", "C#6", "C6", "B5", "A#5", "A5", "G#5", "G5", "F#5", "F5", "E5", "D#5", "D5", "C#5", "C5", "B4", "A#4", "A4", "G#4", "G4", "F#4", "F4", "E4", "D#4", "D4", "C#4", "C4", "B3", "A#3", "A3", "G#3", "G3", "F#3", "F3", "E3", "D#3", "D3", "C#3", "C3", "B2", "A#2", "A2", "G#2"];
var settings = {instrumentColors: [[3,169,244],[255,152,0],[183,28,28],[233,30,99],[76,175,80],[33,33,33],[63,81,181],[205,220,57],[21,101,192],[130,119,23],[255,234,0],[141,110,99],[78,52,46],[255,99,99],[117,255,99],[99,224,255],[253,99,255],[255,87,34],[27,94,32],[244,67,54],[255,224,178],[117,117,117],[224,173,0],[233,249,189],[168,200,83],[13,71,161],[29,157,157],[30,197,122],[21,33,79],[5,16,47],[108,243,183],[255,112,112],[161,166,53],[234,121,0],[85,202,202],[0,128,64],[127,32,15],[0,0,0],[0,69,31],[159,15,34]]}
var canvas = document.createElement('canvas');
drawImg(document.URL);
Suggestion: instead of parsing a BMP file, just draw the image onto a canvas and read the pixel data from it. Then it will work with any file format. https://stackoverflow.com/questions/8751...m-an-image
(07-13-2018, 05:53 PM)Jacob_ Wrote: [ -> ]Suggestion: instead of parsing a BMP file, just draw the image onto a canvas and read the pixel data from it. Then it will work with any file format. https://stackoverflow.com/questions/8751...m-an-image

1. Thanks for the bombshell. I think I will cry myself to sleep now.
2. I think my next version will
a. incorporate the above and
b. output a string that can be interpreted as OS data for cross-origin convenience.
(07-13-2018, 06:51 PM)Void Wrote: [ -> ]This surprised me when I saw it. That's really cool. Good job Frank!


I myself am doing some very basic stuff with request's (like always, shenanigans with my bots.) like I am trying to figure out how to keep a login session alive long enough to be able to create a thread or respond to posts here on the forums with node-fetch because It's much neater and shorter code to write. 

If you'd like to help me, please tell me what's wrong here if you're willing to look into my issue?

Code:
const { URLSearchParams } = require('url');
const fetch = require('node-fetch');
const delay = timeout => new Promise(resolve => { setTimeout(resolve, timeout); });
const fs = require('fs');

let mysubject = "Thread by : VoidBot"
let mymessage = "Testing content. bla bla bla";

let myusername = "Void"
let mypass = "mypass"

const generate_posthash = (length, chars) => {

 let idk = '';
 while(length--) idk += chars[(Math.random() * chars.length) | 0];
 return idk;
};

(async () => {

    for(let i = 0; i < 1; i++){

        const posthash = generate_posthash(32, 'abcdefghijklmnopstuv0123456789');

        let parameters2 = new URLSearchParams();

        parameters2.append('username', myusername);
        parameters2.append('password', mypass);
        parameters2.append('action', "do_login");
        parameters2.append('url', "");


       let parameters = new URLSearchParams();
        parameters.append('subject', mysubject);
        parameters.append('message', mymessage);
        parameters.append('my_post_key', "e64cc8d83f82219bbe9fb85f7668092a");
        parameters.append('submit', "Post Thread");
        parameters.append('previewpost', "Preview Post");
        parameters.append('savedraft', "Save as Draft");
        parameters.append('action', "do_newthread");
        parameters.append('posthash', posthash);
        parameters.append('attachmentaid', "");
        parameters.append('attachmentact', "");
        parameters.append('quoted_ids', "");
        parameters.append('tid', "0");

        //let login = await fetch('https://onlinesequencer.net/ajax/login.php?user=Void&pass=mypass');


        let session = await fetch('https://onlinesequencer.net/forum/member.php', {
           'method' : 'post',
           'body' : parameters2,
           'credentials' : 'include'
           //'headers' : { 'cookie' : cookie }
        });

        //let cookie = session.headers.get('set-cookie');
        //console.log(session.headers.get('set-cookie'));

        let request = await fetch('https://onlinesequencer.net/forum/newthread.php?fid=8&processed=1', {
           'method' : 'post',
           'body' : parameters,
           //'headers' : { 'cookie' : cookie }
           'credentials' : 'include'
        });

        let result = await request.text();

        fs.writeFileSync('output.html', result);

        console.log(result);
        console.log(request.status + " " + request.statusText);

        //await delay(100); //If we want to run a delay.

    };

})();

So the first part works, sending a post request with the form-data to get myself logged in on the forums, but even before the program is able to print the fs.writeFileSync it has already logged me out and thus I don't see myself logged in on the source code. Postman, an application I use to test these forms does show me logged in in the preview mode so I know it works. This log in is actually so fast that even myBB is unable to update the 'last logged in' time on my forum profile page lol. I need a way to keep the session alive even at the second part, the thread part. Cookie should be stored at the 'credentials : include' but it just doesn't want to work. Any ideas?

Code:
const fetch = require('node-fetch');
const FormData = require('form-data');

const form = new FormData();
form.append('username', "Void");
form.append('password', "pass");
form.append('action', "do_login");
form.append('url', "");

fetch('https://onlinesequencer.net/forum/member.php', { method: 'POST', body: form, headers: form.getHeaders(), credentials: 'same-origin' })
   .then(res => res.text())
   .then(body => console.log(body));
^ simplified BUT WONT WORK!? I don't understand.

I wish I could help you, but I am not familiar with requireJS nor network requests. However, I can tell you have caught the Frank Variable Names Disease of which I am fond:
Code:
const generate_posthash = (length, chars) => {

 let idk = '';
 while(length--) idk += chars[(Math.random() * chars.length) | 0];
 return idk;
};
(07-13-2018, 06:16 PM)Frank Wrote: [ -> ]
(07-13-2018, 05:53 PM)Jacob_ Wrote: [ -> ]Suggestion: instead of parsing a BMP file, just draw the image onto a canvas and read the pixel data from it. Then it will work with any file format. https://stackoverflow.com/questions/8751...m-an-image

1. Thanks for the bombshell. I think I will cry myself to sleep now.
2. I think my next version will
a. incorporate the above and
b. output a string that can be interpreted as OS data for cross-origin convenience.

I guess this is version 1.0!
Code:
function nearestInstrument(color) {
   RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
   var result;
   var smallest = Infinity;
   for (i = 0; i < settings.numInstruments; i++) {
       var difference = 0;
       for (j = 0; j < 3; j++) {
           difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
       }
       if (smallest > difference) {
           smallest = difference;
           result = i;
       }
   }
   return result;
}
SequencerView.fastGraphics = true;
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var img = document.getElementById('sidebar').children[0].children[0].children[0];
var total = ':'
for (var h = img.height - 1; h > -1; h--) {
   for (var w = 0; w < img.width; w++) {
       total += [h, piano[w], 1, nearestInstrument(canvas.getContext('2d').getImageData(h, w, 1, 1).data)].join(' ') + ';';
   }
}
$.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0))
canvas.getContext('2d').getImageData(h, w, 1, 1).data;
loadData(total);
Code:
Frank
Frank
Jacob_
Suggestion: instead of parsing a BMP file, just draw the image onto a canvas and read the pixel data from it. Then it will work with any file format. https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image

1. Thanks for the bombshell. I think I will cry myself to sleep now.
2. I think my next version will
a. incorporate the above and
b. output a string that can be interpreted as OS data for cross-origin convenience.

I guess this is version 1.0!
function nearestInstrument(color) {
   RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
   var result;
   var smallest = Infinity;
   for (i = 0; i < settings.numInstruments; i++) {
       var difference = 0;
       for (j = 0; j < 3; j++) {
           difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
       }
       if (smallest > difference) {
           smallest = difference;
           result = i;
       }
   }
   return result;
}
SequencerView.fastGraphics = true;
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var img = document.getElementById('sidebar').children[0].children[0].children[0];
var total = ':'
for (var h = img.height - 1; h > -1; h--) {
   for (var w = 0; w < img.width; w++) {
       total += [h, piano[w], 1, nearestInstrument(canvas.getContext('2d').getImageData(h, w, 1, 1).data)].join(' ') + ';';
   }
}
$.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0))
canvas.getContext('2d').getImageData(h, w, 1, 1).data;
loadData(total);

[i]

Version 1.1, Version 1.0 was rushed cuz I need [i]sleep
.[/i]
[/i]
Code:
function nearestInstrument(color) {
   RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
   var result;
   var smallest = Infinity;
   for (i = 0; i < settings.numInstruments; i++) {
       var difference = 0;
       for (j = 0; j < 3; j++) {
           difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
       }
       if (smallest > difference) {
           smallest = difference;
           result = i;
       }
   }
   return result;
}
SequencerView.fastGraphics = true;
var canvas = document.createElement('canvas');
var img = document.getElementById('sidebar').children[0].children[0].children[0];
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var total = ':'
for (var h = img.height - 1; h > -1; h--) {
   for (var w = 0; w < img.width; w++) {
       total += [h, piano[w], 1, nearestInstrument(canvas.getContext('2d').getImageData(h, w, 1, 1).data)].join(' ') + ';';
   }
}
loadData(total);
$.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0));

Code:
function nearestInstrument(color) {
    RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
    var result;
    var smallest = Infinity;
    for (i = 0; i < settings.numInstruments; i++) {
        var difference = 0;
        for (j = 0; j < 3; j++) {
            difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
        }
        if (smallest > difference) {
            smallest = difference;
            result = i;
        }
    }
    return result;
}

function drawImg(source) {
    var img = new Image();
    img.src = source;
    img.onload = function() {
        canvas.width = 100;
        canvas.height = 50;
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        var total = ':';
        for (var h = canvas.height - 1; h > -1; h--) {
            for (var w = 0; w < canvas.width; w++) {
                total += [w, piano50[h], 1, nearestInstrument(canvas.getContext('2d').getImageData(w, h, 1, 1).data)].join(' ') + ';';
            }
        }
        if (typeof window.SequencerView == 'object') {
            SequencerView.fastGraphics = true;
            loadData(total);
            $.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0));
        } else {
            console.log(total);
        }
    }
}

var piano50 = ["A6", "G#6", "G6", "F#6", "F6", "E6", "D#6", "D6", "C#6", "C6", "B5", "A#5", "A5", "G#5", "G5", "F#5", "F5", "E5", "D#5", "D5", "C#5", "C5", "B4", "A#4", "A4", "G#4", "G4", "F#4", "F4", "E4", "D#4", "D4", "C#4", "C4", "B3", "A#3", "A3", "G#3", "G3", "F#3", "F3", "E3", "D#3", "D3", "C#3", "C3", "B2", "A#2", "A2", "G#2"];
var canvas = document.createElement('canvas');
drawImg('/forum/uploads/avatars/avatar_9976.png');

BMOS v1.2 is here!
v1.3, just stick it in an image and copy the output, then paste back into loadData(``)
Code:
function nearestInstrument(color) {
    RGBColor = color.slice(0, 3).map(x => x * color[3] / 255);
    var result;
    var smallest = Infinity;
    for (i = 0; i < 40; i++) {
        var difference = 0;
        for (j = 0; j < 3; j++) {
            difference += (settings.instrumentColors[i][j] - RGBColor[j]) ** 2;
        }
        if (smallest > difference) {
            smallest = difference;
            result = i;
        }
    }
    return result;
}

function drawImg(source) {
    var img = new Image();
    img.src = source;
    img.onload = function() {
        canvas.width = 100;
        canvas.height = 50;
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        var total = ':';
        for (var h = canvas.height - 1; h > -1; h--) {
            for (var w = 0; w < canvas.width; w++) {
                var instrument = nearestInstrument(canvas.getContext('2d').getImageData(w, h, 1, 1).data);
                if (instrument != 37) total += [w, piano50[h], 1, instrument].join(' ') + ';';
            }
        }
        if (window.SequencerView) {
            SequencerView.fastGraphics = true;
            loadData(total);
            $.each(audioSystem.instrumentVolume, x => audioSystem.setInstrumentVolume(x, 0));
        } else {
            console.log(total);
        }
    }
}

var piano50 = ["A6", "G#6", "G6", "F#6", "F6", "E6", "D#6", "D6", "C#6", "C6", "B5", "A#5", "A5", "G#5", "G5", "F#5", "F5", "E5", "D#5", "D5", "C#5", "C5", "B4", "A#4", "A4", "G#4", "G4", "F#4", "F4", "E4", "D#4", "D4", "C#4", "C4", "B3", "A#3", "A3", "G#3", "G3", "F#3", "F3", "E3", "D#3", "D3", "C#3", "C3", "B2", "A#2", "A2", "G#2"];
var settings = {instrumentColors: [[3,169,244],[255,152,0],[183,28,28],[233,30,99],[76,175,80],[33,33,33],[63,81,181],[205,220,57],[21,101,192],[130,119,23],[255,234,0],[141,110,99],[78,52,46],[255,99,99],[117,255,99],[99,224,255],[253,99,255],[255,87,34],[27,94,32],[244,67,54],[255,224,178],[117,117,117],[224,173,0],[233,249,189],[168,200,83],[13,71,161],[29,157,157],[30,197,122],[21,33,79],[5,16,47],[108,243,183],[255,112,112],[161,166,53],[234,121,0],[85,202,202],[0,128,64],[127,32,15],[0,0,0],[0,69,31],[159,15,34]]}
var canvas = document.createElement('canvas');
drawImg(document.URL);