D2Learn Forums

Littlefean

放一张总结的更完善的开源协议选择路径图。

Littlefean

增加了一个像素点之间液化连接视觉测试功能

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh; /* 使 body 高度为视口高度 */
        margin: 0; /* 去除默认的 margin */
      }
      .matrix {
        display: flex;
        flex-direction: column;
        margin: 10px 0;
        padding: 5px;
        filter: contrast(500%);
      }
      .row {
        display: flex;
      }
      .cell {
        width: 20px; /* 每个单元格的宽度 */
        height: 20px; /* 每个单元格的高度 */
        display: flex;
        align-items: center;
        justify-content: center;
        border: none; /* 单元格边框 */
        margin: 0; /* 单元格间距 */
        filter: blur(10px); /* 默认模糊效果 */
        transition: filter 0.3s ease; /* 过渡效果 */
      }
      .cell.true {
        background-color: rgb(255, 255, 255); /* 1 的背景色 */
      }
      .cell.false {
        background-color: rgb(0, 0, 0); /* 0 的背景色 */
      }
      .slider-container {
        margin-top: 20px; /* 滑动框与矩阵的间距 */
      }
      .input-container {
        margin-bottom: 20px; /* 输入框与滑动框的间距 */
      }
    </style>
  </head>
  <body>
    <div class="input-container">
      <label for="wordInput">输入单词: </label>
      <input type="text" id="wordInput" value="d2learn" />
      <button id="lookUpButton">查询</button>
    </div>
    <div class="slider-container">
      <label for="blurRange">调整模糊程度: </label>
      <input type="range" id="blurRange" min="0" max="50" value="10" />
    </div>
    <div class="slider-container">
      <label for="contrastRange">调整对比度: </label>
      <input type="range" id="contrastRange" min="100" max="5000" value="500" />
    </div>
    <script>
      function charToAsciiBinaryArray(char) {
        const asciiCode = char.charCodeAt(0);
        const binaryString = asciiCode.toString(2).padStart(8, "0");
        return Array.from(binaryString, (bit) => bit === "1");
      }

      function stringToBinaryArrays(str) {
        return str.split("").map(charToAsciiBinaryArray);
      }

      function updateMatrix(word) {
        const d2learnBinaryArray = stringToBinaryArrays(word);

        // 清空矩阵内容
        matrixContainer.innerHTML = "";

        // 创建新的矩阵并添加到 body 中
        d2learnBinaryArray.forEach((row) => {
          const rowDiv = document.createElement("div");
          rowDiv.className = "row";
          row.forEach((cell) => {
            const cellDiv = document.createElement("div");
            cellDiv.className = "cell " + (cell ? "true" : "false");
            rowDiv.appendChild(cellDiv);
          });
          matrixContainer.appendChild(rowDiv);
        });
      }

      const matrixContainer = document.createElement("div");
      matrixContainer.className = "matrix";
      document.body.appendChild(matrixContainer);

      // 初始化默认显示 "d2learn" 的矩阵
      updateMatrix("d2learn");

      // 处理输入框和查询按钮的事件
      const lookUpButton = document.getElementById("lookUpButton");
      lookUpButton.addEventListener("click", () => {
        const word = document.getElementById("wordInput").value; // 获取输入的单词
        updateMatrix(word); // 更新矩阵
      });

      // 处理模糊度滑动框的输入事件
      const blurRange = document.getElementById("blurRange");
      blurRange.addEventListener("input", () => {
        const blurValue = blurRange.value; // 获取当前的滑动值
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => {
          cell.style.filter = `blur(${blurValue}px)`; // 设置模糊效果
        });
      });

      // 处理对比度滑动框的输入事件
      const contrastRange = document.getElementById("contrastRange");
      contrastRange.addEventListener("input", () => {
        const contrastValue = contrastRange.value; // 获取当前的滑动值
        matrixContainer.style.filter = `contrast(${contrastValue}%)`; // 设置对比度效果
      });

      console.log(d2learnBinaryArray);
    </script>
  </body>
</html>

Littlefean

https://madebyevan.com/fsm/
一个在线绘制状态机的小工具（不过它的Canavs忘了调整设备像素比了，有点模糊）

Littlefean

刚刚瞬间想到，开源的一个好处是：对于需求很小很窄的小项目开源出来，实现自己个人的核心需求之后，别人看到的可能对他来说是他的次要需求，他可能会有想继续完善添加对方的核心需求的想法，因此这样一个项目会逐渐“自发性”的“生长”起来。

只是先做个记录，以后突然又想到什么了再来继续填。

Littlefean

https://www.latexlive.com/
Latex公式编辑器

https://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type Something
大型字符画编辑器，可以用于控制台上输出一个超大英文单词欢迎信息

https://asciiflow.com/#/
用字符画画，有时候在函数注释文档里可以画一些简单的小图

Littlefean

刚刚又瞬间想到：上面一楼的内容我本是想记录在自己的个人备忘录或者“idea集”中的，不对外公开的。现在我把这个论坛地方也当成一种专门记录与开源问题相关信息的地方，从某种意义上来说也算一种开源。把“idea公开”。这样和上面的一楼内容对照来看，idea公开本身就能够让它被看见，有被“生长”和“优化”的可能。
（临时快速记录，可能表述比较仓促）

Littlefean

还没细看他们的争论评论具体内容，第一直觉上感觉项目命名结尾加后缀的方式，让原作者感觉自己被蹭热度了？

D2Learn Forums

Littlefean

帖子