개시하다

여러분 수학 소녀 공부하세요?최신 권1의 주제는'비트와 바이너리', 즉 바이너리에 관한 화제다.
수학 소녀의 비밀 노트/비트와 2진
제2장은'변환 픽셀'이라는 제목으로 16x16의 이미지를 비트 연산을 통해 변환(필터)한다.이전 권과 달리 루비로 구현한 예 절차가 공개됐다.
여기까지.
저번는 파이톤(matplotlib)에서 이뤄졌고, 이후 트위터에서는 "JavaScript로 이뤄졌다!"가끔 이런 사람을 보면 "소통이 참 좋네요"
리액트로 설치해 봤어요.
코드를 여기에 놓으세요.
https://github.com/junjis0203/math_girls-secret_notebook_bits_and_binary

필터

책에서는 필터를'수신','발송'형태로 입력·출력하고, 앞서 소개한 루비 구현에서도 파이버로 구현한다.
JavaScript에서도 async를 사용하여 노력하면 실현할 수 있지만 테마에서 벗어나 최종 형식의 필터를 고려하면 상태 관리가 번거롭기 때문에 일반적으로 입력 배열에 맡기고 출력 배열로 되돌아간다.
src/pixel-filter.발췌하다

const right = (input) => {
  const output = [];
  for (let i = 0; i < 16; i++) {
    let x = input[i];
    x = x >> 1;
    output.push(x);
  }
  return output;
};

Figure 구성 요소

구현된 주요 이미지를 표시합니다.이를 위해 Figure 구성 요소(src/pixel-component.js)를 제작했습니다.사용법은 이런 느낌이에요.
src/pixel-main0.js

const world = <Figure lines={input1} clickable={true} />;

아래와 같다.파일로예)

클릭블이 사실이라면 클릭 후 흑백 반전이 나타나지만 엣지는 문제가 없고 크롬은 맨 아래 반응만 한다.이유는 line-height를 0으로 설정한 것 같은데 어떻게 고쳐야 할지 몰라서 그냥 뒀어요.
구성 요소의 그림은render()→lines()→pixels(y,line)의 등급 구조입니다.원래는 Figure Pixel Line의 계층 구조였으나 사건 처리가 부모에게 거슬러 올라가는 게 번거롭다는 점을 고려해 Figure에서 모두 처리했다.

Store

이 실현의 주요 2. 상호작용성.이미지 웨이브를 입력하면 출력이 변경됩니다.
리액트의 구조와 장르를 잘 몰라서 힘들었지만 결국 다음과 같은 느낌을 줬다.

const in1 = <Figure lines={input} clickable={true} store={store} dst_tag={'INPUT1'} />;
store.addFilter('INPUT1', right, 'OUTPUT1');
const out1 = <Figure store={store} src_tag={'OUTPUT1'} />;

in1의 Figure를 클릭한 후 store에 'INPUT1'의 라벨로 store에 전체 그림을 던지기(Figure류의 dispatch 방법)

right 필터가 'INPUT1'에 투척되었을 때 동작하여 결과를 'OUTPUT1' 투척(Store류 디스패치 방법)

으로 한다.

out1의Figure 수신 디스플레이'OUTPUT1'(Figure류의onDispatch방법)

pixel1.> 해당 코드(실제 아래 설명된 Composier)

참고로 이ddFilter의 설치(필터는listener의 일부분)는 매우 아름다워서 나는 자화자찬한다.
src/composer.발췌하다

  addFilter(src_tag, filter, dst_tag) {
    // listen tag and execute filter
    const listener = {
      onDispatch: (input) => {
        const output = filter(input);
        this.dispatch(dst_tag, output);
      }
    };
    this.addListener(src_tag, listener);
  }

Composer

따라서 활동에 대한 반응, 출력이 바뀌었으니 다시 한 번 보세요.

const in1 = <Figure lines={input} clickable={true} store={store} dst_tag={'INPUT1'} />;
store.addFilter('INPUT1', right, 'OUTPUT1');
const out1 = <Figure store={store} src_tag={'OUTPUT1'} />;

촌스럽다.전혀 DRY가 아니야.그래서 저는 Composter라는 반을 설립하여 다음과 같은 내용을 쓸 수 있습니다.
pixel1.발췌하다

const composer = new Composer();

const in1 = composer.makeSource(input1);
const r_block1 = composer.addFilter(in1, right);
const world = r_block1.component;

구조는 다음과 같다.

"연호"는 임의로 분배한다.

makeSource와ddFilter가 되돌아옵니다{component: Reactコンポーネント, tag: 割り振られたタグ}.다른 입력에 사용할 수 있습니다.

최종 형식: 프레임 필터

그럼 약간 복선의 최종 형태.그림 테두리를 입력하는 필터에 대해 샤오리가 생각해 내지 못하면 리사가 답을 줄 것이다.

오른쪽 상단의 외딴 F는 사실상 마지막 AND 입력의 조각으로 CSS를 단독으로 만지작거리면 눈길을 끌 수 있다.
이걸 만든 코드는 다음과 같다.
pixel3.발췌하다

const out1_1 = composer.addFilter(in1, right);
const out1_2 = composer.addFilter(in1, left);
const out1_3 = composer.addFilter(in1, up);
const out1_4 = composer.addFilter(in1, down);

const out2_1 = composer.addFilter2(out1_1, out1_2, and);
const out2_2 = composer.addFilter2(out1_3, out1_4, and);

const out3 = composer.addFilter2(out2_1, out2_2, and);

const out4 = composer.addFilter(out3, complement);

const out5 = composer.addFilter2(in1, out4, and);

실제 행동하는 모습은 이쪽이다.왼쪽 끝에 있는 4개의 F도 입력이기 때문에 동기화해야 하는데 분기를 이루려면 코드가 늘어나기 때문에 이번 결정은 불완전하다.

끝말

이번에는 리액트로 비밀 노트/비트와 바이너리 소개 필터 프로그램을 실시했다.ReactNative2를 사용해 봤기 때문에 Figure 구성 요소는 금방 만들어졌지만 입력→필터 실행&전파의 구조는 생각해 내는 데 오랜 시간이 걸렸다.더워서 기운이 없는 경우도 있다(웃음)
맞다
pixel3.발췌하다

  <script src="pixel-filter.js"></script>
  <script src="pixel-component.js"></script>
  <script src="pixel-composer.js"></script>
  <script src="pixel-main_common.js"></script>

어느 시대의 JS인 것 같은데?import과 Webpack을 잘 사용하고 싶은데 번거로워서 재료를 줄였어요.

선전

그럼 처음부터 쓴 것처럼 수학녀의 비밀 노트 최신권이'비트와 이진법'이라니!다음 권이 결정됐습니다.
수학 소녀의 비밀 노트/학습 대화
'수학을 못하는 아이를 어떻게 가르쳐야 하는가','모르는 것을 어떻게 가르쳐야 하는가'를 주제로 연재 당시 큰 반향을 일으켰던 시리즈가 곧 서적화됐다!수학뿐만 아니라 가르치고 배우는 것에 흥미가 있는 사람은 없는 사람도 반드시 읽어야 한다!
그나저나 내 광고는 한 푼도 떨어지지 않기 때문에 순전히 홍보다.
2019/8/26 현재↩
리액트네이티브를 써봤지만 리액트를 써본 적이 없다,'슈퍼사이언이 될 수 있는데 무공술을 못 쓴다'같은 사람이 있어서 리액트를 쓰는 것도 이번 동기라고 생각한다.  ↩