/* 배열 선언하기 */
// 생성자 함수를 이용해 선언
var arr = new Array();
// 배열 리터럴을 이용해 선언
var arr = [];
JavaScript
/* 배열 초기화 하기 */
// 초기화 : 변수나 배열에 처음 값을 저장하는 걸 이야기한다.
// 생성자 함수를 이용해 초기화
var arr = new Array(1, 2, 3);
// 배열 리터럴을 이용해 초기화
var arr = [1, 2, 3];
// 각 배열 칸에 초기화
// 배열의 각 원소는 배열명[인덱스] 를 통해 접근한다.
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
JavaScript
/* 배열 원소에 접근(사용)하기 */
// 선언과 동시에 배열안에 3칸의 원소를 초기화한다.
var arr = ["이정효", "거손", "거북이손가락"];
// 경고창을 통해서 3번째(index:2) 원소에 접근한다.
alert(arr[2]);
JavaScript
/* 배열 길이 얻기 */
// 선언과 동시에 배열안에 3칸의 원소를 초기화한다.
var arr = ["이정효", "거손", "거북이손가락"];
var arr1 = [1, 2, 3, 4, 5, 6];
// 배열명.length 를 통해서 배열 길이에 접근 할 수 있다.
alert(arr.length + "개의 요소가 들어있는 배열입니다.");
alert(arr1.length + "개의 요소가 들어있는 배열입니다.");
JavaScript
/* 배열에 새 원소 추가하기 */
// 선언과 동시에 배열안에 2칸의 요소를 초기화한다.
var arr = [1, 2];
// 배열명.push(값) 를 통해서 배열에 새 원소를 추가할 수 있다.
arr.push(3);
console.log(arr);
JavaScript
/* 배열의 마지막 원소 제거하기 */
// 선언과 동시에 배열안에 2칸의 요소를 초기화한다.
var arr = [1, 2, 3, 4];
// 배열명.pop() 를 통해서 배열의 마지막 원소를 제거 할 수 있다.
arr.pop();
console.log(arr);
배열과 반복문
JavaScript
/* 1~50까지의 숫자 순서대로 담기 */
// 배열의 인덱스는 0부터 시작한다는 것을 꼭 숙지
// 인덱스를 이용해 담기
var arr = [];
for(var i=0; i<50; i++){
arr[i] = i+1;
}
console.log(arr);
// push함수를 이용해 담기
var arr = [];
for(var i=1; i<=50; i++){
arr.push(i);
}
console.log(arr);
랜덤 함수
Math.random()
0 ~ 1 사이의 랜덤한 실수를 반환하는 함수이다.
JavaScript
/* 랜덤값 출력하기 */
var ranNum = Math.random();
console.log(ranNum);
패럴랙스 효과 구현하기 2
width
캔버스의 가로크기 값을 담고있는 변수이다.
height
캔버스의 세로크기 값을 담고있는 변수이다.
JavaScript
// 원들의 x, y 좌표와 크기에대한 배열을 만든다.
var x = [], y = [], circleSize = [];
function setup(){
createCanvas(500, 500);
background(235);
noStroke();
// 원하는 개수(100개)만큼 반복문을 실행해 랜덤값을 배열에 담아준다.
for(var i=0; i<100; i=i+1){
// 반복될때마다 좌표, 크기를 랜덤하게 생성한다.
var randomX = Math.random() * width;
var randomY = Math.random() * height;
var randomSize = Math.random() * 30;
// push함수를 이용해 각 배열에 생성한 값을 담아준다.
x.push(randomX);
y.push(randomY);
circleSize.push(randomSize);
}
}
function draw(){
// 소실점(중점)을 기준으로 마우스가 움직인 거리를 구한다.
var moveX = mouseX - width/2;
var moveY = mouseY - height/2;
background(235);
// 생성된 배열 칸 만큼 반복문을 실행해 각 원을 그린다.
for(var i=0; i<x.length; i=i+1){
// 최대 크기에 비례해 원이 얼마나 작은지 비율을 구한다.
var ratio = circleSize[i] / 30;
fill(0);
// 각 원의 좌표에서부터 마우스움직임에 원크기의 비율만큼 곱하여 움직인다.
// 작은 원일수록 더 작은 비율로 움직이게 된다.
ellipse(x[i] + moveX*ratio, y[i] + moveY*ratio, circleSize[i], circleSize[i]);
}
}