들어보셨겠지만 tixy.land 창조적 인코딩의 간단한 자바스크립트 운동장입니다.



마틴 클레프
@aemkei

가장 단순하고 창조적인 인코딩 환경은 여전히 존재한다.⟶ tixy.land 단일 JavaScript 함수를 사용하여 16x16 점진의 크기와 색상을 제어합니다.입력은 32자로 제한되지만 창의력은 제한되지 않습니다!🔴🔴🔴🔴
2020년 11월 2일 오후 23:01
1158
4106
Tixy 개요를 훑어보았을 때 저는 사람들의 창의력에 놀랐습니다. 우연히 Tixy의 창립자인 Martin Kleppe와 유명 보안 연구원인 Gareth Heyes가 Tixy를 위한 모호한 프로그램을 만드는 것을 발견했습니다.

칼리스 헤에스
@ 칼리세예스

다른 항목을 조합해서 코드를 무작위로 변경합니다.예를 들어 항목 1의 작은 부분을 무작위로 추출하고 항목 2의 작은 부분과 무작위로 조합한다
2020년 12월 2일 오후 19:57
0
1
나는 코드 수정 도구의 경험이 있기 때문에, 나는 어떤 것들을 해독하고, 빠른 모호기를 만들어 보기로 결정했다.
결과를 먼저 보고 싶으세요?
이 가능하다, ~할 수 있다,...
그럼요, click here!

개시하다

Tixy 설정

로컬에서 tixy를 설정하는 것은 매우 쉽습니다. 특히 github 에서!
그러나 자바스크립트를 조금만 수정하고 싶기 때문에, CSS를 직접 컴파일할 필요가 없는 파일 index.html 을 원합니다.
나는 마침내 tixy에서 실시간 버전의 html을 복제했다.script 내용을 환매 협의에서 축소되지 않은 index.js로 바꾸고 가져온 example.json 내용을 같은 값을 가진 변수로 바꾼다.

jscodeshift 추가

JSCodeShift는 내가 사용할 AST 소스 코드를 내비게이션하고 수정하는 데 사용되는 강력한 도구이다.
추가jscodeshift는tixy를 설정하는 것보다 조금 어렵다. 나는 일을 간단하게 하려고 하기 때문에 기존 npm버전을 사용할 수 없다. 왜냐하면 프로젝트를 컴파일해야 하기 때문이다.
나는 최종적으로 Browserify를 사용하여 그것을 파일로 컴파일했다.

npx browserify jscodeshift/index.js -o jscodeshift.min.js --standalone jscodeshift

그리고 이 파일을 프로젝트에 복사해서 HTML에 인용을 추가하고 준비했습니다.

샘플 가져오기

모호한 값을 위해서는 기존의 예시를 수집하는 것부터 시작해야 한다. 가장 좋은 것은 재미있는 효과가 있는 예시들이다.
나는 최종적으로 기존examples.json과 tixy.land/gallery 페이지의 내용을 합병했다.

벨벳 제조기

우리의 설정이 완료됨에 따라fuzzer를 어떻게 실제적으로 실현할 것인가에 대해 생각하기 시작합니다.
다음은 이 계획의 대략적인 윤곽이다.

샘플을 샘플에서 무작위로 추출

무작위 세션으로 변환

조각을 합쳐서

프로젝트를 더욱 작은 견본으로 나누려면, 우리는 분할의 위치를 정확하게 찾아야 한다.
astexplorer에 있는 몇 개의 tixies를 분석한 후에 나는 최종적으로 두 가지 다른 조작을 선택했다. 그들은 보통 문제 없이 추출할 수 있다.
2진 표현식과 호출 표현식!
이진 표현식은 주로 산술 연산자이다. 예를 들어+와- 등은 소수의 예외만 있다.
이 작업자의 전체 목록은 ast-types 저장소에서 볼 수 있습니다.
이원 표현식 노드를 추출하는 것은 방정식의 양쪽과 조작부호 자체를 선택하는 것이다. 이것은 보통 자체로 포함된다.
호출 표현식은 함수 호출입니다. 예를 들어 Math.random() 또는 sin(y)입니다.바이너리 표현식과 마찬가지로, 그것들은 통상적으로 자체적으로 포함되며, 충분히 작아서 문제 없이 추출할 수 있다.
이제 우리는 무엇을 추출해야 하는지 알았으니, 그것을 어떻게 추출하는지 알아보자!
랜덤 샘플을 선택하는 것은 간단합니다: 크기를 선택한 다음 examples 그룹의 랜덤 요소를 선택하십시오!
이 예에서 나는 임의의 크기8를 최대 견본수로 선택했는데 특별한 이유가 없다.

const sampleCount = Math.floor(Math.random() * 8) + 1
const samples = new Array(sampleCount).fill(0).map(
    () => pickRandom(allSamples)
);

JScodeShift를 사용하는 것부터 유효한 세그먼트로 구분합니다.
유효한 JavaScript 코드를 포함하는 문자열에서 우리는 호출 jscodeshift 을 통해 자신의 jscodeshift(code) 실례를 만들 수 있다.
그리고 유형이 .find인 결과 대상에 대해 BinaryExpression 방법을 사용하여 모든 이진 표현식의 유사한 그룹을 포함하는 대상을 얻는다.
마지막으로 JScodeShift에서 되돌아온AST 노드를JavaScript로 전환하려면 toSource 방법을 호출해야 합니다.
간단하지 않습니까?
다음은 생성된 코드의 모양입니다.

const availableOperations = [];
const jsc = jscodeshift(sample);
jsc.find("BinaryExpression").forEach(v => availableOperations.push(v));
const chosenSnippet = pickRandom(availableOperations);
const resultingCode = jscodeshift(chosenSnippet).toSource();

마지막으로, 우리가 선택한 모든 견본과, 2진 표현식과 호출 표현식에서, 우리는 마침내 일련의 무작위 코드 세션을 얻었다.
현재, 이 부분들을 한데 합치기 위해서, 나는 그것들 사이에 무작위 연산자를 추가하기로 결정했다.
고맙게도 쌍방이 모두 유효한 자바스크립트 문자열이어야 하기 때문에 JScodeShift를 사용할 필요가 없고 간단한 연결만 하면 된다.

const delimiters = ['+', '-', '*', '%', '|', '<<', '>>', '%', '^'];
const newCode = fragments.reduce((acc, v) => {
    return (acc ? acc + pickRandom(delimiters) : '') + v;
}, '');

결실

만약 우리가 결과를 볼 수 없다면, 랜덤 세션을 만드는 즐거움은 어디에 있는가!
나는 기존 nextExample 사이트의 기존 tixy 함수를 삭제했고, 아래의 예시를 사용하지 않고,fuzzer의 무작위 코드 세션을 사용했다.
지금, 놀라운 결과를 얻기 위해, 나는 너를 도와 내가 손찌검하는 번거로움을 없앴다!반대로 당신은 garand.dev/projects/tixy/에 방문하여tixy를 눌러서 재미있는 결과를 발견할 수 있습니다!
가장 큰 관람의 즐거움을 얻기 위해 나는 갤러리 페이지를 교환하고 좋은 예가 아니라fuzzer를 사용했다. https://garand.dev/projects/tixy/gallery
그중 많은 것들이 악몽을 꾸거나 이런 예들을 모방하지만 때로는 재미있는 패턴이 나타난다.
뭐 재미있는 거 있어요?댓글로 연결해 주세요!나는 이 프로젝트가 무엇을 가져올 수 있는지 매우 보고 싶다.