1 var canvas = document.getElementById("sdr");
2 var canvasWidth = canvas.width;
3 var canvasHeight = canvas.height;
4 var ctx = canvas.getContext("2d");
6 ctx.imageSmoothingEnabled = false;
7 ctx.mozImageSmoothingEnabled = false;
8 var canvasData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
11 var buffer = document.createElement('canvas');
12 buffer.width = canvas.width;
13 buffer.height = canvas.height;
17 var pixels = new Array(canvasHeight*canvasWidth);
22 for (y=0; y<canvasHeight; y++) {
23 for (x=0; x<canvasWidth; x++) {
24 //console.log("y:" + y + " x: " + x);
25 r=Math.floor((Math.random() * 255) + 1);
26 g=Math.floor((Math.random() * 255) + 1);
27 b=Math.floor((Math.random() * 255) + 1);
28 pixels[pixelCounter]={x:x, y:y, r:r, g:g, b:b};
33 //convert static to json
34 var pixelJSON = JSON.stringify(pixels);
35 var obj = JSON.parse(pixelJSON);
36 var arr = new Array();
47 socket = new WebSocket("ws://YOURSERVER:9000");
48 //socket.binaryType = "arraybuffer";
50 socket.onopen = function() {
51 console.log("Connected!");
56 socket.onmessage = function(e) {
57 //console.log(e.data);
58 if (typeof e.data == "string") {
61 var arr = new Uint8Array(e.data);
63 for (var i = 0; i < arr.length; i++) {
64 hex += ('00' + arr[i].toString(16)).substr(-2);
66 //console.log("Binary message received: " + hex);
70 socket.onclose = function(e) {
71 console.log("Connection closed.");
78 //socket.send(canvasWidth);
79 //console.log("Text message sent.");
81 console.log("Connection not opened.")
87 function startStatic() {
89 for (var x=0; x<((arr.length)); x++) {
90 drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
95 function animate(newrowJSON) {
97 for (var x=0; x<((arr.length)); x++) {
98 drawPixel(arr[x].x, arr[x].y, arr[x].r, arr[x].g, arr[x].b, 255);
101 //shift everything down
102 for (var x=(arr.length-1); x>canvasWidth; x--) {
103 var offset = x-canvasWidth;
104 arr[x].r = arr[offset].r;
105 arr[x].g = arr[offset].g;
106 arr[x].b = arr[offset].b;
109 var newrow = JSON.parse(newrowJSON);
110 padding=(canvasWidth-newrow.length)/2;
111 for (var x=0; x<padding; x++) {
116 for (var x=padding; x<(newrow.length+padding); x++) {
117 //console.log(padding);
118 arr[x].r = newrow[x-padding].r;
119 arr[x].g = newrow[x-padding].g;
120 arr[x].b = newrow[x-padding].b;
122 for (var x=(newrow.length+padding); x<canvasWidth; x++) {
129 function updateCanvas() {
131 ctx.putImageData(canvasData, 0, 0);
135 //define the value of a pixel
136 function drawPixel (x, y, r, g, b, a) {
137 var index = (x + y * canvasWidth) * 4;
139 canvasData.data[index + 0] = r;
140 canvasData.data[index + 1] = g;
141 canvasData.data[index + 2] = b;
142 canvasData.data[index + 3] = a;