zim.js 반복문

｜zim 반복문

zim.js에서는 반복을 위해서 for구문을 사용할 필요가 없다.

 

loop( 반복횟수, Callback( index ) )

 

loop명령어에 '반복횟수'와 콜벡함수를 전달하는 방법으로 반복을 구사할 수 있다.

가령, '10회 반복'은 다음과 같다.

loop(10, i=>{ console.log( i ) });

 

특이한 점은 객체의 속성값을 가져오는 부분을 다음과 같이 표현할 수 있다.

 

let person = {
	eye:'brown',
	height:187,
	iq:123
}

loop(person,(prop,val)=>{
	console.log(`${prop}:${val}`);
})

 

zim.js의 loop구문은 배열, 객체타입에 모두 사용가능하다.

(zim DOC참고)

 

loop구문을 응용해서 원을 생성해보자.

 

// See Docs under Frame for FIT, FILL, FULL, and TAG scaling modes 
const frame = new Frame( { 
   scaling:'zimBase', 
   width:724,  
   height:430,  
   color:light 
  }); 

frame.on("ready", () => { 
	const stage = frame.stage; 
	let stageW = frame.width; 
	let stageH = frame.height;
    
	let colors = ['red', 'blue', 'green', 'pink', 'lightGrey', 'lime', 'yellow', 'skyBlue'];
  
	loop(colors, (i,val)=>{
	   console.log('val:'+i+'.'+val);
	})
  
	const circles = new Container(stageW, stageH)
			.addTo(stage);
	loop(7, (i)=>{
	   let circle = new Circle(30, colors[i%colors.length])
			.loc(50 +100*i, stageH/2, circles);
	})
  	
	stage.update();
});

 

[실행]

 

 위의 코드에서 주의할 점은 컨테이너라는 상위 클래스를 추가한 뒤

컨테이너에 객체 인스턴스를 추가하는 부분이다.

zim.js에서 오브젝트를 추가할 때, Container를 사용하자(의존성) 

 

 

 

 

 

｜loop( )체이닝

loop( )구문은 컨테이너와 같은 객체와 연결하는 방식으로

내부 데이터값을 변형할 수 있다.

 

위에서 생성한 원들의 상위 객체(Container::circles)와 loop( )를 연결한 뒤,

조금씩 커지도록 만들어보자. 코드는 아래와 같다.

 

frame2.on("ready", () => { 
   //생략...
  
  	const circles = new Container(stageW, stageH)
    				.addTo(stage);
  	loop(7, (i)=>{
    	let circle = new Circle(30, colors[i%colors.length])
        				.loc(50 +100*i, stageH/2, circles);
    });
  
  	circles.loop((circle,i)=>{
    	circle.sca(0.2 + (0.1 * i))
    })
  	
	stage.update();
});

 

[구현결과]

 

 

 

 

 

｜루프 Scope( )범위

zim.js의 루프 Scope범위는 기본적으로 'const'와 같다.

하지만 loop( )의 마지막 파리미터값에 'true'를 넣으면 '전역'으로 scope범위가 변한다.

 

frame3.on("ready", () => { 
   //...생략
  
	circles.loop((circle,i)=>{
		if(rand() > 0.5){
		   circle.removeFrom();
		}
	//circle.sca(0.2 + (0.1 * i))
	},true)  //scope범위 변경
  	
	stage.update();
});

[실행]

 

 

 

위의 루프구문에서 true를 삭제하면 정상적으로 실행되지 않는다.

if구문이 발생하면서 circle의 Scope범위를 인식하지 못하기 때문이다.

 

 

 

 

 

 

｜continue(x)

zim.js의 loop구문은 continue를 허용하지 않는다.

가령, 아래와 같은 코드를 실행하면 즉시 에러가 발생한다.

 

frame3.on("ready", () => { 
	//...생략
  
  	circles.loop((circle,i)=>{
    
		if(rand() > 0.5){
		   circle.sca(.5);
		   continue;
		}
        
		if(rand() > 0.5){
		   circle.removeFrom();
		}
        
	},true)
  	
	stage.update();
});

 

  zim.js의 loop구문에서 위의 구문을 실행하려면,

continue 대신 return을 사용해야한다.

return을 사용한다면, 아래와 같이 정상적으로 실행된다.

 

frame3.on("ready", () => { 
	//...생략
  
  	circles.loop((circle,i)=>{
    
		if(rand() > 0.5){
		   circle.sca(.5);
		   return;
		}
        
		if(rand() > 0.5){
		   circle.removeFrom();
		}
        
	},true)
  	
	stage.update();
});

 

 [실행]

 

 

첫번째 if구문에서는 0.5보다 큰 원들의 크기를 반으로 줄였고,

두번째 if구문에서는 0.5보다 큰 원들을 삭제한다.

즉, loop구문 내에서 특정 조건값을 여러구문에 걸쳐 실행하기 위해서는,

return문을 사용해야 한다.(by- Zim ver0.4)

 

 

 

 

 

 

｜실습 :: 움직이는 원

루프구문을 응용한 '움직이는 원'을 만들어보자.

구현코드는 아래와 같다.

 

<div id="zimBase5">&nbsp;</div>
<script> 
const frame5 = new Frame( { 
   scaling:'zimBase5', 
   width:724,  
   height:430,  
   color:light 
  }); 

frame5.on("ready", () => { 
    const stage = frame5.stage; 
    let stageW = frame5.width; 
    let stageH = frame5.height;
  
	const circles = new Container(stageW, stageH)
			.addTo(stage);
  	loop(30, (i)=>{
    	new Circle(rand(20,100), [red, green, blue, pink, yellow])
      		.loc(rand(stageW), rand(stageH), circles)
      		.alp(rand(1.1))
      		.animate({
        		props:{scale:.2},
          		loop:true,
          		rewind:true,
          		time:{min:1, max:3}
        	})
	});
  	
	stage.update();
});
</script>

 

[구현 결과]