2일동안 html/css/javascript/jquery 를 활용하여 미디어아트 효과를 내는 데 도전,
코딩을 해봤습니다.
웹브라우저상의 빈 화면에서 왼쪽 마우스 클릭에 반응하는 소스코드 입니다.
결론적으로 말하면 비슷한 효과는 낼 수 있었지만, 의도에 100% 부합하는 효과를 내지 못했습니다.
현업에서 손뗀 지 오래 된 것도 있지만, 원래부터 실력이 그다지 좋은 프로그래머도 아니었다는게…
조현병을 사유로 업계를 떠난 게 지금 생각하면 잘했다는 생각이 듭니다.
소스코드는 zoahaza.shop 에서 무료로 배포하고 있으니 받아가실 수 있습니다.
*
최종 소스코드 전문
<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>
조현병인데 사업은 왜함?ㅋ 미쳤음?ㅋㅋㅋ 
답글 남기기