수업 영상

html 기본 형식, p5.js 불러오기

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 웹에 공유되어있는 라이브러리 불러오기 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
        <script>
            // 여기에 입력
        </script>
    </head>
    <body>
    </body>
</html>

저장되는 값의 연쇄

JavaScript
var x1 = 0, y1 = 0, 
x2 = 0, y2 = 0, 
x3 = 0, y3 = 0;

function setup(){
    createCanvas(500, 500);
    background(235);
    noStroke();
}

function mouseClicked(){
    x3 = x2;
    y3 = y2;
    x2 = x1;
    y2 = y1;
    x1 = mouseX;
    y1 = mouseY;
    
    background(235);
    fill(255, 100, 50);
    ellipse(x1, y1, 30, 30);
    
    fill(100, 255, 50);
    ellipse(x2, y2, 30, 30);
    
    fill(50, 100, 255);
    ellipse(x3, y3, 30, 30);
}

배열

JavaScript
/* 배열 선언하기 */
     
// 생성자 함수를 이용해 선언
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]);
    }
}