Skip to content

Instantly share code, notes, and snippets.

@odayibasi

odayibasi/ImageShufflingGame.html

Last active February 7, 2020 21:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save odayibasi/89dd0da358a71643e90476821252df7a to your computer and use it in GitHub Desktop.
Save odayibasi/89dd0da358a71643e90476821252df7a to your computer and use it in GitHub Desktop.
Download ZIP
Image Shuffling Game shuffle images pixel according to words characters wrong places
Raw
ImageShufflingGame.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="ShufflingImage.js"></script>
</head>
<body>
<h1>IMG SHUFFLING</h1>
<table id="imageTable" border="1"></table>
<table id="imagePreviewTable"></table>
<table id="wordTable"></table>
</body>
</html>
Raw
ShufflingImage.js
//=====================================================================================
//====================SUFFLING=============================================================
//=====================================================================================
var cPalet=['#F20aA5','#F7F36F','#050505','#A8A66F','#FFFFFF','#FFFFFF','#FFFFFF','#FFFFFF','#FFFFFF'];
var originalWord="mario";
var currentWord="rimao";
var maxComplexWord="oriam"
var selectedIndex=0;
var width=12;
var height=7;
$(document).ready(function(){
testWord(currentWord);
$("#w").val(width);
$("#h").val(height);
$("#originalWord").val(originalWord);
});
var colorArray = [
4,4,0,0,0,0,0,4,4,4,4,4,
4,0,0,0,0,0,0,0,0,0,4,4,
4,3,3,3,1,1,1,2,1,4,4,4,
3,1,3,1,1,1,1,2,1,1,1,4,
3,1,3,3,1,1,1,1,2,1,1,1,
4,3,1,1,1,1,1,2,2,2,2,4,
4,4,1,1,1,1,1,1,1,1,4,4
]
function imageScale(pxArry,width,height,scale){
displayImage("original",pxArry,width,height);
var pxResizedArryX=new Array();
for(var y=0;y<height;y++){
for(var x=0;x<width;x++){
var val=pxArry[x+y*width];
pxResizedArryX.push(val);
pxResizedArryX.push(val);
}
}
displayImage("resizeX"+scale,pxResizedArryX,width*scale,height);
var pxResizedArryY=new Array();
for(var y=0;y<height;y++){
for(var j=0;j<scale;j++){
for(var x=0;x<width*scale;x++){
var val=pxResizedArryX[x+y*width*scale];
pxResizedArryY.push(val);
}
}
}
displayImage("resize"+scale,pxResizedArryY,width*scale,height*scale);
return pxResizedArryY;
}
function sufflingImage(pxArry, width,height, complexity){
complexity=complexity/2;
displayImage("Original",pxArry,width,height);
pxModified=new Array();
var pxModified = pxArry.slice(0);
var colorMap={};
if(complexity>0){
for(var i=0;i<pxArry.length;i++){
var cIndex=pxArry[i];
if(colorMap[cIndex]==undefined){
colorMap[cIndex]=new Object();
colorMap[cIndex].color=cPalet[cIndex];
colorMap[cIndex].count=1;
colorMap[cIndex].address=new Array();
colorMap[cIndex].address.push(i);
}else{
colorMap[cIndex].count++;
colorMap[cIndex].address.push(i);
}
}
var cIndexes = Object.keys(colorMap);
for(var i=0;i<cIndexes.length;i++){
var cIndex=cIndexes[i];
colorMap[cIndex].suffleCount=Math.floor(colorMap[cIndex].count*complexity);
colorMap[cIndex].suffleAddress=shuffle(colorMap[cIndex].address.slice(0));
}
var changingArry = new Array();
for(var i=0;i<cIndexes.length;i++){
var cIndex=cIndexes[i];
var cObj=new Object();
cObj.cIndex=cIndex;
cObj.color=colorMap[cIndex].color;
cObj.count=colorMap[cIndex].suffleCount;
cObj.address=colorMap[cIndex].suffleAddress.slice(0,cObj.count);
changingArry.push(cObj);
}
changingArry.sort(function(a,b) { return parseFloat(a.count) - parseFloat(b.count) } );
var changingItems=new Array();
for(var i=0;i<changingArry.length;i++){
for(j=0;j<changingArry[i].address.length;j++){
var cItem=new Object();
cItem.status=false;
cItem.cIndex=changingArry[i].cIndex;
cItem.color=changingArry[i].color;
cItem.address=changingArry[i].address[j];
changingItems.push(cItem);
}
}
for(var i=0;i<changingItems.length;i++){
var cItem=changingItems[i];
if(!cItem.status){
var cOtherItem=getChangeItemFromOtherColorSpace(cItem.color,changingItems);
if(cOtherItem!=null){
cItem.status=true;
cOtherItem.status=true;
//console.log(cItem.color+"-"+cItem.address+"/"+cOtherItem.color+"-"+cOtherItem.address);
var temp=pxModified[cItem.address];
pxModified[cItem.address]=pxModified[cOtherItem.address];
pxModified[cOtherItem.address]=temp;
}
}
}
}
displayImage("Modified",pxModified,width,height);
}
function getChangeItemFromOtherColorSpace(activeColor,arry){
var otherSpace=new Array()
for(var j=0;j<arry.length;j++){
if(!arry[j].status && arry[j].color!=activeColor){
otherSpace.push(arry[j]);
}
}
if(otherSpace.length==0){
return null;
}else{
otherSpace=shuffle(otherSpace);
return otherSpace[0];
}
}
function shuffle(array) {
var m = array.length, t, i;
// While there remain elements to shuffle…
while (m) {
// Pick a remaining element…
i = Math.floor(Math.random() * m--);
// And swap it with the current element.
t = array[m];
array[m] = array[i];
array[i] = t;
}
return array;
}
function displayImage(title,pxArry, width,height){
renderImage("imageTable",pxArry,width,height,20,20);
renderImage("imagePreviewTable",pxArry,width,height,5,5);
$(".pixel").on("mouseenter",function(e){
e.preventDefault();
if(e.shiftKey){
$(this).css("background-color",cPalet[selectedIndex]);
var id=$(this).attr("id");
var index=parseInt(id.replace("pixelno_",""));
colorArray[index]=selectedIndex;
testWord(currentWord);
}
});
return;
console.log(title+"[");
for(var y=0;y<height;y++){
var row="";
for(var x=0;x<width;x++){
row+=pxArry[x+y*width]+",";
}
console.log(row);
}
console.log("]");
}
function renderImage(container,pxArry,width,height,sizeW,sizeH){
var dom="";
for(var y=0;y<height;y++){
dom+="<tr>";
for(var x=0;x<width;x++){
var temp="<td class='pixel' id='${id}'' style='background-color:${color}; width:${sizeW}px;height:${sizeH}px' ></td>"
dom+=temp.replace("${color}",cPalet[pxArry[x+width*y]]).replace("${sizeW}",sizeW).replace("${sizeH}",sizeH).replace('${id}','pixelno_'+(x+y*width));
}
dom+="</tr>";
}
$("#"+container).html(dom);
}
var selectedFirst=null;
function renderWord(word){
var dom="";
dom+="<tr>";
for(var i=0;i<word.length;i++){
var temp="<td id='${id}' class='alphbt' style='border-color:blue; background-color:gray; text-align:center; width:40px;height:40px'>${alphabet}</td>"
dom+=temp.replace("${alphabet}",word[i]).replace("${id}",'alphbt_'+i);
}
dom+="</tr>";
$("#wordTable").html(dom);
$(".alphbt").click(function(event){
event.preventDefault();
if(selectedFirst==null){
selectedFirst=$(this).attr("id");
$(this).css("border-style","solid");
}else if(selectedFirst==$(this).attr("id")){
selectedFirst=null;
$(this).css("border-style","none");
}else{
$(this).css("border-style","none");
$("#"+selectedFirst).css("border-style","none");
var temp=$("#"+selectedFirst).text();
$("#"+selectedFirst).text($(this).text());
$(this).text(temp);
selectedFirst=null;
var wordChanged=""
for(var i=0;i<word.length;i++){
wordChanged+=$('#alphbt_'+i).text();
}
testWord(wordChanged);
}
})
}
function LevenshteinDistance(s, len_s, t, len_t)
{
if (len_s == 0) return len_t;
if (len_t == 0) return len_s;
var cost = 0;
if (s.charAt(len_s-1) == t.charAt(len_t-1)) cost = 0;
else cost = 1;
return Math.min(LevenshteinDistance(s, len_s - 1, t, len_t ) + 1,
LevenshteinDistance(s, len_s , t, len_t - 1) + 1,
LevenshteinDistance(s, len_s - 1, t, len_t - 1) + cost);
}
function testWord(word){
currentWord=word;
maxDistance=LevenshteinDistance(originalWord,originalWord.length,maxComplexWord,maxComplexWord.length);
currentDistance=LevenshteinDistance(currentWord,currentWord.length,originalWord,originalWord.length);
sufflingImage(colorArray,width,height,(currentDistance/maxDistance));
renderWord(currentWord);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment