# data[].attributes.headline
시뮬레이션 코딩 실습 사이트 (p5)

# data[].attributes.subject
시뮬레이션 코딩 실습 사이트 (p5)

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.headline
움직임 예술분야 갤러리

# data[].attributes.subject
움직임 예술분야 갤러리

# data[].attributes.headline
어떤 현상을 구현한 걸까?

# data[].attributes.subject
어떤 현상을 구현한 걸까?

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.headline
질문 - 시뮬레이션 사용되는 상황?

# data[].attributes.subject
질문 - 시뮬레이션 사용되는 상황?

# data[].attributes.body
https://editor.p5js.org/2530224/full/qtRIXUS4B

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
let total = 0;

let inside = 0;

function setup() {

createCanvas(400, 400);

frameRate(100);

noFill();

rect(0, 0, 400, 400);

ellipse(200, 200, 400, 400);

}

function draw() {

let x = random(400);

let y = random(400);

let d = dist(x, y, 200, 200);

total++;

if (d <= 200) {

inside++;

fill(0, 0, 255);

} else {

fill(255, 0, 0);

}

noStroke();

ellipse(x, y, 4, 4);

let result = 4 * inside / total;

fill(255);

rect(0, 0, 200, 30);

fill(0);

textSize(16);

text(result, 10, 30);

}

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
캔버스 위에서 마우스 좌클릭을 해보세요

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
1) angle += 0.08로 바꿔서 프레임당 회전 속도를 더욱 빠르게 바꿈

2) background 색을 (210, 4, 6)으로 바꿈

3) ellipse 인 원의 크기를 (100, 100) 으로 바꿈

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
false일 경우에는 제한이 없어 마우스가 가까우면 60보다 큰 원이, 멀면 20보다 훨씬 작은 원이 나타남. 따라서 false를 사용하면 크기 변화가 훨씬 극단적으로 나타남.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
1. angle += 0.1로 바꾸어서 회전 속도를 빠르게 함

2. background를 255로 하여 하얗게 함

3. ellipse(50, 0, 50, 50)으로 바꾸어 x좌표의 타원 중심을 바꿈

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
반복과 회전 0,255/120으로 해서 색이 천천히 사라지도록 함

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
https://editor.p5js.org/2530224/sketches/74eURtXE4

원끼리 합쳐지게 하는 아이디어를 내봤는데, harder than you think 류 게임이 생각나서 한번 ai로 만들어뵜습니다

# data[].attributes.attachment_link.title
반복과 반응 색 합치기 by 2530224 -p5.js Web Editor

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
1. ellipse를 rect로 바꿔 사각형으로 바꿈

2. fill(x, y, 255)로 바꿔 색상을 바꿈

# data[].attributes.attachment_link.title
Tattered cord by 2530409 -p5.js Web Editor

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
1. 분야별 예제 선택

2. 코드 복사/실행해보기

3. 수정(분석)후 코드 링크 제출

핵심 알고리즘은?

수정 아이디어 ? - 구현도 가능

댓글로 작성

# data[].attributes.attachment_link.description
p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
마우스 근처만 색이 생김

클릭하면 사각형으로 바뀜

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
마우스 위치에 따라 원의 거리 변경,

클릭하면 회전 방향 전환,

키보드로 속도 조절,

창 크기에 반응(반응형 중앙 정렬)

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
map(mouseX, 0, width, 0, 255) : 마우스 X 좌표를 빨강(R) 값으로 변환

map(mouseY, 0, height, 0, 255) : 마우스 Y 좌표를 초록(G) 값으로 변환

200 : 파랑(B) 값은 고정

결과적으로 마우스를 움직이면 색상이 부드럽게 변함

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
map(mouseX, 0, width, 0.01, 0.1) : 마우스 X 좌표(0400)를 회전 속도 범위(0.010.1)로 변환

마우스를 오른쪽으로 옮길수록 회전이 빨라지고, 왼쪽으로 옮기면 느려짐

angle += speed; : 변환된 속도를 angle에 더해 회전각을 계속 변화시킴

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
수정: 마우스를 클릭하면 원들의 색상이 다른 분위기로 바뀌는 효과

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.body
마리오 게임을 구현하려고 했던것

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

# data[].attributes.attachment_link.description
A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.