Copiando o repositório do Alexandre
This commit is contained in:
fls committed
1 parent
a3e604697b
commit
0ab8836265
363 files changed
+27249
No files matched your search
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"source": "JSON",
|
||||
"data": "BLOCK",
|
||||
"version": "0.0.1",
|
||||
"type": "javascript.webaudio.freqbar",
|
||||
"language": "javascript",
|
||||
"extension": "webaudio",
|
||||
"help": "Freq Bar",
|
||||
"label": "Freq Bar",
|
||||
"color": "#74edac",
|
||||
"group": "GUI",
|
||||
"codes": [
|
||||
{
|
||||
"name": "onload",
|
||||
"code": "draw_freqbar$id$();"
|
||||
},
|
||||
{
|
||||
"name": "declaration",
|
||||
"code": "\n// block_$id$ = $label$\nvar block_$id$ = context.createAnalyser();\nblock_$id$.fftSize = 256;\nvar $port[input]$ = block_$id$;\n"
|
||||
},
|
||||
{
|
||||
"name": "execution",
|
||||
"code": "\nfunction draw_freqbar$id$(){\n var canvas = document.getElementById(\"canvas$id$\");\n var canvasCtx = canvas.getContext(\"2d\");\n var bufferLength = 64;\n var dataArray = new Uint8Array(bufferLength);\n var bufferLengthAlt = block_$id$.frequencyBinCount;\n\n canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n canvasCtx.lineWidth = 2;\n canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\n\n block_$id$.getByteFrequencyData(dataArray);\n\n canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n canvasCtx.beginPath();\n\n\n var barWidth = (canvas.width / bufferLengthAlt) * 2.5;\n var barHeight;\n var x = 0;\n\n for(var i = 0; i < bufferLengthAlt; i++) {\n barHeight = dataArray[i];\n canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';\n canvasCtx.fillRect(x, canvas.height - barHeight/2, barWidth, barHeight/2);\n x += barWidth + 1;\n }\n canvasCtx.stroke();\n drawVisual = requestAnimationFrame(draw_freqbar$id$);\n}\n"
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"code": "\n<canvas id=\"canvas$id$\" class=\"visualizer\" width=\"$prop[width]$\" height=\"$prop[height]$\"></canvas>\n"
|
||||
}
|
||||
],
|
||||
"properties": [
|
||||
{
|
||||
"name": "width",
|
||||
"label": "Width",
|
||||
"type": "Float",
|
||||
"lower": 0,
|
||||
"upper": 32000,
|
||||
"value": 640
|
||||
},
|
||||
{
|
||||
"name": "height",
|
||||
"label": "Height",
|
||||
"type": "Float",
|
||||
"lower": 0,
|
||||
"upper": 32000,
|
||||
"value": 240
|
||||
}
|
||||
],
|
||||
"ports": [
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "input",
|
||||
"label": "Sound",
|
||||
"type": "javascript.sound"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"source": "JSON",
|
||||
"data": "BLOCK",
|
||||
"version": "0.0.1",
|
||||
"type": "javascript.GUI.print",
|
||||
"language": "javascript",
|
||||
"extension": "webaudio",
|
||||
"help": "Print value",
|
||||
"label": "Print",
|
||||
"color": "#23F483",
|
||||
"group": "GUI",
|
||||
"codes": [
|
||||
{
|
||||
"name": "declaration",
|
||||
"code": "\n// $label$\nvar $port[float_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = value;\n return true;\n };\n\nvar $port[char_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = value;\n return true;\n };\n\nvar $port[color_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = value;\n return true;\n };\n\nvar $port[string_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = value;\n return true;\n };\n\nvar $port[point_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = \"(\"+value+\")\";\n return true;\n };\n \nvar $port[bool_value]$ = function(value){\n document.getElementById(\"block_$id$\").innerHTML = \"(\"+value+\")\";\n return true;\n }; \n"
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"code": "\n$prop[label]$ <span id=\"block_$id$\"></span><br>\n"
|
||||
}
|
||||
],
|
||||
"properties": [
|
||||
{
|
||||
"name": "label",
|
||||
"label": "Label",
|
||||
"value": "Label",
|
||||
"type": "String"
|
||||
}
|
||||
],
|
||||
"ports": [
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "float_value",
|
||||
"label": "Float Value",
|
||||
"type": "javascript.float"
|
||||
},
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "char_value",
|
||||
"label": "Char Value",
|
||||
"type": "javascript.char"
|
||||
},
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "color_value",
|
||||
"label": "Color Value",
|
||||
"type": "javascript.color"
|
||||
},
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "string_value",
|
||||
"label": "String Value",
|
||||
"type": "javascript.string"
|
||||
},
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "point_value",
|
||||
"label": "Point Value",
|
||||
"type": "javascript.point"
|
||||
},
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "bool_value",
|
||||
"label": "Bool Value",
|
||||
"type": "javascript.bool"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
{
|
||||
"source": "JSON",
|
||||
"data": "BLOCK",
|
||||
"version": "0.0.1",
|
||||
"type": "javascript.GUI.sinewave",
|
||||
"language": "javascript",
|
||||
"extension": "webaudio",
|
||||
"help": "Sine Wave",
|
||||
"label": "Sine Wave",
|
||||
"color": "#23F483",
|
||||
"group": "GUI",
|
||||
"codes": [
|
||||
{
|
||||
"name": "onload",
|
||||
"code": "draw_sinewave$id$();"
|
||||
},
|
||||
{
|
||||
"name": "declaration",
|
||||
"code": "\n// block_$id$ = $label$\nvar block_$id$ = context.createAnalyser();\nvar $port[input]$ = block_$id$;\n"
|
||||
},
|
||||
{
|
||||
"name": "execution",
|
||||
"code": "\nfunction draw_sinewave$id$(){\n var canvas = document.getElementById(\"canvas$id$\");\n var canvasCtx = canvas.getContext(\"2d\");\n var bufferLength = 64;\n var dataArray = new Uint8Array(bufferLength);\n\n canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n canvasCtx.lineWidth = 2;\n canvasCtx.strokeStyle = 'rgb(0, 0, 0)';\n\n block_$id$.getByteTimeDomainData(dataArray);\n\n canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n canvasCtx.beginPath();\n\n var sliceWidth = canvas.width * 1.0 / bufferLength;\n var x = 0;\n\n for(var i = 0; i < bufferLength; i++) {\n\n var v = dataArray[i] / 128.0;\n var y = v * canvas.height/2;\n\n if(i === 0) {\n canvasCtx.moveTo(x, y);\n } else {\n canvasCtx.lineTo(x, y);\n }\n\n x += sliceWidth;\n }\n\n canvasCtx.stroke();\n drawVisual = requestAnimationFrame(draw_sinewave$id$);\n}\n"
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"code": "\n<canvas id=\"canvas$id$\" class=\"visualizer\" width=\"$prop[width]$\" height=\"$prop[height]$\"></canvas>\n"
|
||||
}
|
||||
],
|
||||
"properties": [
|
||||
{
|
||||
"name": "width",
|
||||
"label": "Width",
|
||||
"type": "Float",
|
||||
"lower": 0,
|
||||
"upper": 32000,
|
||||
"value": 640
|
||||
},
|
||||
{
|
||||
"name": "height",
|
||||
"label": "Height",
|
||||
"type": "Float",
|
||||
"lower": 0,
|
||||
"upper": 32000,
|
||||
"value": 240
|
||||
}
|
||||
],
|
||||
"ports": [
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "input",
|
||||
"label": "Sound",
|
||||
"type": "javascript.sound"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"source": "JSON",
|
||||
"data": "BLOCK",
|
||||
"version": "0.0.1",
|
||||
"type": "javascript.GUI.spectrogram",
|
||||
"language": "javascript",
|
||||
"extension": "webaudio",
|
||||
"help": "Spectrogram",
|
||||
"label": "Spectrogram",
|
||||
"color": "#23F483",
|
||||
"group": "GUI",
|
||||
"codes": [
|
||||
{
|
||||
"name": "onload",
|
||||
"code": "\n(function () {\n function SpectrogramVisualizer(audioContext, canvasElement) {\n this.analyserNode = audioContext.createAnalyser();\n this.analyserNode.fftSize = 8192;\n this.fftData = new Float32Array(this.analyserNode.frequencyBinCount);\n\n this.graphicWidth = parseInt(getComputedStyle(canvasElement).width, 10);\n this.graphicHeight = parseInt(getComputedStyle(canvasElement).height, 10);\n\n var gc = this.graphicContext = canvasElement.getContext(\"2d\");\n gc.fillStyle = '#000000';\n\n this.pixel = gc.createImageData(1,1);\n this.pixel.data[3] = 255;\n\n this.gain = 0;\n this.stopping = false;\n\n this.draw();\n }\n\n SpectrogramVisualizer.prototype.acceptConnection = function (connectedNode) {\n connectedNode.connect(this.analyserNode);\n this.connectedNode = connectedNode;\n };\n\n SpectrogramVisualizer.prototype.draw = function () {\n if (this.stopping) {\n this.stopping = false;\n return;\n }\n\n var gc = this.graphicContext;\n var gw = this.graphicWidth;\n var gh = this.graphicHeight;\n\n if (!this.connectedNode) {\n gc.fillRect(0, 0, gw, gh);\n }\n else {\n var slideImage = gc.getImageData(0, 0, gw - 1, gh);\n gc.putImageData(slideImage, 1, 0);\n\n var i, y, n;\n\n this.analyserNode.getFloatFrequencyData(this.fftData);\n\n for (i = 0; i < gh; ++i) {\n n = Math.min(Math.max((this.fftData[i] + this.gain + 80) * 4, 0), 255);\n this.pixel.data[0] = n;\n this.pixel.data[1] = n;\n this.pixel.data[2] = n;\n gc.putImageData(this.pixel, 0, gh - i);\n }\n }\n\n this.animationHandle = requestAnimationFrame(function () { this.draw(); }.bind(this));\n };\n\n SpectrogramVisualizer.prototype.releaseConnection = function () {\n this.connectedNode.disconnect(this.analyserNode);\n delete this.connectedNode;\n };\n\n SpectrogramVisualizer.prototype.stop = function () {\n this.stopping = true;\n };\n\n window.App = window.App || {};\n window.App.SpectrogramVisualizer = SpectrogramVisualizer;\n})();\n\n(function () {\n var visCanvas_$id$ = document.getElementById('spectrogram_$id$')\n var visualizer_$id$ = new App.SpectrogramVisualizer(context, visCanvas_$id$);\n visualizer_$id$.gain = 1;\n visualizer_$id$.acceptConnection(block_$id$);\n})();\n"
|
||||
},
|
||||
{
|
||||
"name": "declaration",
|
||||
"code": "\nvar block_$id$ = context.createGain();\nblock_$id$.gain = 1;\nvar $port[input]$ = block_$id$;\n"
|
||||
},
|
||||
{
|
||||
"name": "html",
|
||||
"code": "\n<h2>SpectrogramVisualizer_Block$id$</h2>\n<div>\n <canvas id=\"spectrogram_$id$\" width=\"1024\" height=\"300\"></canvas>\n</div>\n\n"
|
||||
}
|
||||
],
|
||||
"properties": [],
|
||||
"ports": [
|
||||
{
|
||||
"conn_type": "input",
|
||||
"name": "input",
|
||||
"label": "Input",
|
||||
"type": "javascript.sound"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user