*
2011년 만든 미디어아트 소스코드의 오류를 고치는 과정입니다
해당 동영상은 2023년 5월 8일 오후 5시에 공개 예정입니다.
*
1. 수정 전 소스코드
<html>
<head>
http://jquery-3.6.0.min.js
<style>
#space{
width: 100%;
height: 100%;
display:block;
overflow:hidden;
scroll:no;
}
div{
position:absolute;
display: block;
animation-name:scale_box;
animation-duration:10s;
animation-iteration-count:1;
border-radius:50%;
transform: translate(-50%, -50%);
background-color:#fff;
}
div.black{
width:0px;
height:0px;
background-color:#000;
}
@keyframes scale_box{
0%{
width:0px;
height:0px;
opacity:1;
}
100%{
width:2000px;
height:2000px;
opacity:0;
}
}
</style>
</head>
<body id="space">
<script>
var spot=$('#space');
var toggleColor = new Array(0,0,0,0,0);
var spotNumber=0;
var ponder = new Array();
var colorR;
var colorG;
var colorB;
var ToggleSN = 0;
spot.click(function(event){
// 색상 생성
colorR=Math.floor(Math.random()*127);
colorG=Math.floor(Math.random()*127);
colorB=Math.floor(Math.random()*127);
// spot 제어
if (spotNumber >= 5){
clearInterval(ponder[spotNumber]);
spotNumber=0;
}
x = event.pageX;
y = event.pageY;
spotNumber++;
ponderMaker(x, y, colorR, colorG, colorB);
});
function ponderMaker(x, y, colorR, colorG, colorB){
ponder[spotNumber-1] = setInterval(function(){
var circle=$("<div>", {
css: {
top: y,
left: x,
backgroundColor: 'rgb('+colorR+','+colorG+','+colorB+')'
},
}).appendTo("#space");
if ((toggleColor[spotNumber-1])%2 == 0){
circle.css("background-color", "white");
}
toggleColor[spotNumber-1]++;
console.log(spotNumber, toggleColor[spotNumber-1], ToggleSN);
}, 1000);
}
</script>
</body>
</html>*
2. 수정 후 소스코드
<html>
<head>
http://jquery-3.6.0.min.js
<style>
#space{
width: 100%;
height: 100%;
display:block;
overflow:hidden;
scroll:no;
}
div{
position:absolute;
display: block;
animation-name:scale_box;
animation-duration:10s;
animation-iteration-count:1;
border-radius:50%;
transform: translate(-50%, -50%);
background-color:#fff;
}
div.black{
width:0px;
height:0px;
background-color:#000;
}
@keyframes scale_box{
0%{
width:0px;
height:0px;
opacity:1;
}
100%{
width:2000px;
height:2000px;
opacity:0;
}
}
</style>
</head>
<body id="space">
<script>
var spot=$('#space');
var toggleColor = new Array(0,0,0,0,0);
var ponder = new Array();
var colorR;
var colorG;
var colorB;
var ToggleSN = 0;
let spotNumber=0;
spot.click(function(event){
// 색상 생성
colorR=Math.floor(Math.random()*127);
colorG=Math.floor(Math.random()*127);
colorB=Math.floor(Math.random()*127);
x = event.pageX;
y = event.pageY;
spotNumber++;
if (spotNumber >= 5){
clearInterval(toggleColor[spotNumber]);
spotNumber=0;
}
ponderMaker(x, y, colorR, colorG, colorB, spotNumber);
});
function ponderMaker(x, y, colorR, colorG, colorB, spotNumber2){
toggleColor[spotNumber2-1] = setInterval(function(){
var circle=$("<div>", {
css: {
top: y,
left: x,
backgroundColor: 'rgb('+colorR+','+colorG+','+colorB+')'
},
}).appendTo("#space");
if ((toggleColor[spotNumber2-1])%2 == 0){
circle.css("background-color", "white");
}
toggleColor[spotNumber2-1]++;
}, 1000);
spotNumber2++;
}
</script>
</body>
</html>*
3. 결론
변수 선언을 let으로 선언해야 할 것으로 var로 선언해서 문제가 생겼다고 판단한 초반의 생각은 들어맞지 않았습니다. 그보단, 다른 영역의 함수에 넘겨줘서 다르게 처리해야 할 변수를 전역변수로 퉁쳐서 처리한 게 문제였다는 것을 발견했습니다.
결국 이 문제를 해결했고, 소스코드는 의도한 대로 정상 동작하게 만들었습니다. 다만, 컴퓨터 사양의 한계로 배열을 5개까지 만들 수밖에 없어서 그 이상의 변수가 들어가면 값이 꼬일 수 있다는 게 한가지 문제이긴 합니다만, 컴퓨터 사양의 한계이므로 어쩔 수 없어서 그냥 놔뒀습니다.
좀 더 좋은 사양의 컴퓨터에서 제대로 동작되길 바란다면, 배열 한계값을 늘려서 처리하시기 바랍니다. (자세한 사항은 해당 동영상 참고)
*
4. 향후 계획
chatGPT에 해당 소스코드의 분석을 의뢰하였고, 제대로 분석하는 것을 확인했습니다. 나중에 chatGPT를 활용해서 좀 더 나은 코딩 방향을 찾아볼 예정입니다.
*
– 블로그 썸네일은 flaticon에서 제공받았습니다. –
조현병인데 사업은 왜함?ㅋ 미쳤음?ㅋㅋㅋ 
답글 남기기