jarEl.src ='{{background}}';
this.cupBarrierImg = '{{wall}}';
this.config.jar.type = "custom";
//For easier debugging
window.scriptDaddy = this;
window.scriptDaddy.jarEl = jarEl;
//Removes vertexes that are too close.
//This makes the walls slightly less accurate
// but results in MUCH better performance.
window.scriptDaddy.pruningThreshold = 5;
//Just in case something realy crazy gets thrown in.
// raise this if you have a lot of odd shapes that need
// to be accurate. Hint: You dont.
window.scriptDaddy.MAX_SCANNING_ATTEMPTS = 360000;
scriptDaddy.createBarrier = function(imgUrl){
window.canvas = null;
window.ctx = null;
window.threshold = 1; //keep at 1 for now.
var blobimg = new Image();
$(blobimg).css('opacity', 0);
$(document.body).append(blobimg);
$(blobimg).css('transform', $("#sl__tip__jar > #widget ").css('transform'));
blobimg.onload = function (){
window.canvas = document.createElement('canvas');
window.canvas.width = scriptDaddy.renderer.width;
window.canvas.height = scriptDaddy.renderer.height;
window.ctx = window.canvas.getContext('2d');
window.ctx.drawImage(blobimg, (scriptDaddy.renderer.width - $(blobimg).width())/2, $(blobimg).position().top,$(blobimg).width(),$(blobimg).height());
$(document.body).append(window.canvas);
window.theThickness = 1;
window.imgMap = [];
for(var i = 0; i < window.canvas.width; i++){
imgMap[i] =[];
}
window.groupings = [];
window.yGroupings = [];
window.isEdge = function (x,y, isVertical){
if(imgMap[x][y] == 1){
//registered border detected
return false;
}
if(isVertical){
if(imgMap[x][y+threshold] == 1 || imgMap[x][y-threshold]==1 ){
//adjacent to border. Risk of stepping out.
return false;
}
y--;
height = threshold*2+1;
width = 1;
}else{
if(imgMap[x+threshold][y] == 1 || imgMap[x-threshold][y]==1 ){
//adjacent to border. Risk of stepping out.
return false;
}
x--;
height=1;
width=threshold*2+1;
}
var iData = window.ctx.getImageData(x, y, width, height);
var hasTransparency = false;
var hasNoTransparency = false;
for(var i = 3; i < iData.data.length; i+=4){
if(iData.data[i] == 0){
hasTransparency = true;
}else{
hasNoTransparency = true;
}
}
return hasTransparency && hasNoTransparency;
}
window.addVertexToImgMap = function (vertex){
var x = vertex[0];
var y = vertex[1];
imgMap[x][y] = 1;
}
window.groupingFound = function(vertex){
var group = [];
var x = vertex[0];
var y = vertex[1];
var borderVertex;
var emergencyExit = scriptDaddy.MAX_SCANNING_ATTEMPTS;
do{
emergencyExit--;
if(emergencyExit<0){
console.warn("emergency exit reached!");
break;
}
borderVertex=null;
if(isEdge(x, y+threshold, false)){
borderVertex = [x, y+threshold];
}else if(isEdge(x-threshold, y, true)){
borderVertex = [x-threshold, y];
}else if(isEdge(x, y-threshold, false)){
borderVertex = [x, y-threshold];
}else if(isEdge(x+threshold, y, true)){
borderVertex = [x+threshold, y];
}
if(borderVertex != null){
addVertexToImgMap(borderVertex);
group.push(borderVertex);
x = borderVertex[0];
y = borderVertex[1];
}else if(group.length > 2){
console.log('grouping completed with ' + group.length + ' elements');
groupings.push(group);
}
}while(borderVertex != null);
return group;
}
window.findGroupings = function(){
var spacing = 30;
for(var y = 0; y < window.canvas.height; y+=spacing){
var imgData = ctx.getImageData(0, y, window.canvas.width, 1);
for(var i = 0 ; i < imgData.data.length; i+=4){
imgData.data[i+3] =0;
}
ctx.putImageData(imgData,0,y);
}
for(var x = 0; x < window.canvas.width; x+=spacing){
var imgData = ctx.getImageData(x, 0, 1, window.canvas.width);
for(var i = 0 ; i < imgData.data.length; i+=4){
imgData.data[i+3] =0;
}
ctx.putImageData(imgData,x,0);
}
for(var y = 0; y < window.canvas.height; y+=threshold){
var isInsideGroup = false;
for(var x = 0; x < window.canvas.width; x+=threshold){
var iData = window.ctx.getImageData(x , y , 1, 1);
if(iData.data[3] != 0 && !isInsideGroup ){
if(imgMap[x][y] != 1){
//console.log('new grouping found. '+x+', '+y);
groupingFound([x, y]);
isInsideGroup = true;
}
}else if(isInsideGroup){
isInsideGroup = false;
}
}
}
}
window.pruneVertices = function (vertices){
var prunedVertices = [];
prunedVertices.push(vertices[0]);
prunedVertices.push(vertices[1]);
for(var i = 2; i
For source code, alternative setup instructions, example images, and guidelines for creating the wall image check out the project here.
Select the image files you use to use.
This tool will upload them to Imgur and add the link into the code for you.
Goto the Tip Jar in Streamlabs and enable Custom HTML/CSS. Replace the contents of the HTML, CSS, and JS tabs in Streamlabs with the code below.Canvas Bit Cup
Images
Finished Code