文由ScriptEcho平臺提供技術支持

項目地址：傳送門

基于 p5.js 的 3D 幾何圖形展示

應用場景介紹

本文展示了如何使用 p5.js 庫創建交互式的 3D 幾何圖形展示。該技術廣泛應用于藝術、教育和科學可視化等領域。

代碼基本功能介紹

這段代碼利用 p5.js 庫繪制了六個不同的 3D 幾何圖形：平面、立方體、圓柱體、圓錐體、環面和球體。這些圖形隨著時間的推移旋轉和移動，呈現出動態的 3D 展示效果。

功能實現步驟及關鍵代碼分析說明

1. 加載 p5.js 庫

首先，通過 loadJavascript 函數異步加載 p5.js 庫。

let jsUrls=['https://registry.npmmirror.com/p5/1.9.3/files/lib/p5.min.js']
await Promise.all(jsUrls.map((jsUrl)=> loadJavascript(jsUrl)))

2. 定義 p5.js 草圖

接下來，定義了一個 p5.js 草圖，其中包含 setup 和 draw 函數。

const sketch=(s)=> {
  s.setup=()=> {
    s.createCanvas(710, 400, s.WEBGL)
  }
  s.draw=()=> {
    // ...
  }
}

3. 設置畫布

在 setup 函數中，創建了一個 WebGL 畫布，并設置畫布大小。

s.createCanvas(710, 400, s.WEBGL)

4. 繪制幾何圖形

在 draw 函數中，使用 p5.js 的 3D 形狀函數繪制了六個不同的幾何圖形。每個圖形都應用了不同的旋轉和移動變換，以創建動態的展示效果。

s.plane(70)
s.box(70, 70, 70)
s.cylinder(70, 70)
s.cone(70, 70)
s.torus(70, 20)
s.sphere(70)

5. 創建 p5.js 實例

最后，創建一個 p5.js 實例，并將其附加到 HTML 元素上。

new p5(sketch, 'container')

總結與展望

開發這段代碼的過程讓我深入了解了 p5.js 庫在創建交互式 3D 可視化方面的強大功能。該代碼可以進一步擴展和優化，例如：

• 添加用戶交互，允許用戶旋轉或縮放幾何圖形。
• 使用更復雜的形狀和紋理創建更逼真的場景。
• 將代碼集成到 Web 應用程序或其他項目中，以增強用戶體驗。
• 更多組件：

獲取更多Echos

本文由ScriptEcho平臺提供技術支持

項目地址：傳送門

微信搜索ScriptEcho了解更多

像處理庫 (IML) 用于對圖像執行各種處理功能：你可以增加圖像的亮度、添加飽和度或濾鏡、裁剪和調整大小，以及更多有價值的功能，這些功能將幫助你完成幾乎所有事情并將你的網絡瀏覽器變成 Adob?e Lightroom！

我們為每項重要的圖像處理任務都提供了庫，從簡單的低級操作（例如濾鏡、亮度和飽和度）到用于裁剪或圖像合成的單一用途庫。最后，我們進入了圖像測試領域，因為沒有可靠的方法來測試結果，任何圖像處理應用程序都是不完整的。

NSDT工具推薦： Three.js AI紋理開發包 - YOLO合成數據生成器 - GLTF/GLB在線編輯 - 3D模型格式在線轉換 - 可編程3D場景編輯器 - REVIT導出3D模型插件 - 3D模型語義搜索引擎 - Three.js虛擬軸心開發包 - 3D模型在線減面 - STL模型在線切割

1、Sharp

Sharp 是一個高性能 Node.js 圖像處理庫，用于調整不同圖像格式（如 JPEG、PNG、WebP、AVIF、SVG 和 TIFF）的大小。此高速 Node.js 模塊的典型用例是將標準格式的大圖像轉換為較小的、適合網絡的圖像。

只有當你想調整大型文件或多種文件的大小時，Sharp 才有用。另一方面，如果你只想調整單個小圖像的大小，那么可能不應該使用它。相反，普通的 HTML 和原生 JavaScript 會更有用。Sharp 充分利用了多個 CPU 核心和 L1/L2/L3 緩存，讓你可以更快地調整和壓縮圖像。

用例

我用它來調整整個 NFT 集合的大小，大小超過 80Gb，壓縮后大約為 10Gb。所以，如果你想使用它來調整幾張大圖像的大小，那么它是你的最佳選擇 - 你將以最快、最有效的方式完成它。

示例

你可以使用以下命令安裝此庫：

npm install sharp

使用 sharp 調整圖像大小的方法如下：

const sharp=require('sharp');
const fs=require('fs');

sharp('yellow.png')
    .rotate(180)
    .resize(200)
    .toBuffer()
    .then( data=> {
        fs.writeFileSync('yellow.png', data);
    })
    .catch( err=> {
        console.log(err);
    });

2、Cropper.js

Cropper.js 是另一個流行的圖像處理 JavaScript 庫。你可以使用它以各種可能的方式裁剪圖像、更改縱橫比、旋轉、縮放和處理畫布數據。Cropper.js 是裁剪的正確選擇，無需任何額外功能。

用例

你可以使用其靈活的 API 在你的 Web 應用中創建自定義圖像裁剪 UI，讓你的用戶可以將照片調整為正確的大小和縱橫比。它將更加高效，因為它幾乎不需要任何東西，沒有任何無用的功能，并且非常適合裁剪！

示例

可以使用以下命令安裝此庫：

npm install cropperjs

import Cropper from 'cropperjs';

const image=document.getElementById('image');
const cropper=new Cropper(image, {
  aspectRatio: 16 / 9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  },
});

查看 Cropper.js 演示，單擊要應用于圖像的任何屬性并立即查看結果。

有關如何將圖像裁剪添加到 React 應用的詳細指南，請查看使用 react-image-crop 的指南。

3、合并圖像

使用畫布可能有點乏味，尤其是當你需要畫布上下文來執行相對簡單的事情（例如合并幾張圖像）時。Merge Images將所有重復任務抽象為簡單的函數調用。它是 Canvas API 的包裝器，抽象了其低級函數，這使得這項特定任務變得容易得多。你還可以創建參數，例如定位、不透明度等。你可以在 GitHub 上的文檔中找到它們。

用例

這是一個有價值的庫，可以幫助完成多項任務。例如，你可以生成一個 NFT 集合，你可以在其中合并所有組件以獲得一套完整的變體?；蛘吣銜l現這個庫對個人使用很有幫助，例如，組合幾張不同的圖像來生成拼貼畫。

示例

安裝庫本身：

npm install --save merge-images

然后可以使用此代碼生成一個簡單的圖像：

//write this inside of your javascript file

import mergeImages from 'merge-images';

mergeImages(['/body.png', '/eyes.png', '/mouth.png'])
  .then(b64=> document.querySelector('img').src=b64);

//And that would update the img element to show this image:

在這里，我用它來合并幾個組件來創建最終的變體（這里我使用了背景、角色、喇叭、情感和配件）：

4、LooksSame

LooksSame 是一個用于比較圖像的庫。如果你上傳的兩張圖片是重復的，該庫會通知你。你所要做的就是提供想要比較的圖片的鏈接。LooksSame 嚴格來說不是一個圖像處理庫，但對測試很有幫助。

用例

你可以使用這個庫并編寫代碼來實現自動化和循環周期，以搜索目錄并比較每對圖像是否存在重復。此外，你還可以刪除這些重復項并自動執行此過程。如果經常使用包含大量圖像的 ML 算法，那么這是一個很棒的庫。

示例

要開始比較圖像，只需使用以下命令安裝它：

npm i looks-same

在這里，你可以看到如何使用 Jest 測試這個庫：

var looksSame=require('looks-same');

//Parameters can be paths to files or buffer with compressed png image

test('image1 and image2 are the same', async ()=> {
	expect(looksSame('image1.png', 'image2.png')).toBe(true);
});

//Result will be "image1 and image2 are the same" if they are the same

5、Jimp

Jimp 代表 JavaScript 圖像處理程序，它允許你以幾乎所有可能的方式編輯圖像。有了它，你可以反轉圖像、添加一些文本、調整大小、使用像素化、克隆圖像、模糊圖像、反轉顏色，以及其他一些很酷的功能，這些功能將提高應用程序的圖像處理能力。

用例

使用 Jimp，你可以構建 Web 應用程序，在其中幾乎可以以任何可能的方式編輯和處理圖像。裁剪、調整大小、旋轉和過濾功能讓你可以創建自己的照片編輯器并在其上添加界面。

示例

以下是嘗試這個優秀庫的 JavaScript 代碼。有一個異步函數，你可以在其中看到許多類型的屬性，你可以輕松更改這些屬性。例如添加文本、調整圖像大小、模糊圖像等。要使用其中至少一個，你只需要取消注釋需要的部分，然后程序就可以運行了！

// Import dependencies
const Jimp=require("jimp");

(async function () {

    // Read the image
    const image=await Jimp.read("images/shapes.png"); // <http://www.example.com/path/to/lenna.jpg>

    // // Add text
    //  const font=await Jimp.loadFont(Jimp.FONT_SANS_16_WHITE); // bitmap fonts
    //  image.print(font, 0, 0, 'Hello world!'); // <https://github.com/libgdx/libgdx/wiki/Hiero>

    //  // Resize the image 
    //  // Resize the image to 250 x 250
    //  image.resize(250, 250);

    //  // Resize the height to 250 and scale the width accordingly
    //  image.resize(Jimp.AUTO, 250);

    //  // Resize the width to 250 and scale the height accordingly
    //  image.resize(250, Jimp.AUTO);

    //  // Add a sepia wash to the image
    //  image.sepia();

    //  // Pixelation 
    //  image.pixelate(5);
    //  image.pixelate(5, 50, 50, 190, 200); pixe,x, y, w, h 

    //  // Clone
    //  const image2=image.clone();

    //  // Blur the image
    //  image.gaussian(1);
    //  image.blur(1);

    //  // Inverts the image
    //  image.invert(); 

    //  // Set the brightness
    //  image.brightness( 0.5 ); // -1 to +1

    //  // Resize the image
    //  image.resize(256, 256);

    //  // Set the quality
    //  image.quality(100);

    //  // Convert to grayscale
    //  image.greyscale();

    // Save the image
    image.write("images/edited-shapes.png"); // writeAsync

})();

PS：不要忘記取消注釋你想要使用的效果，然后保存文件。:)

正如你在此處看到的，我模糊了所有內容并反轉了之前向你展示的圖像的顏色，得到了以下結果：

原文鏈接：Top5圖像處理JS庫 - BimAnt

、什么是HTML

HTML簡介

HTML是用來描述網頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

發展史

HTML：Hyper Text Markup Language超文本標記語言

超文本標記語言—在1993年6月互聯網工程工作小組工作案發布（并非標準）

HTML2.0—1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布過時。

HTML3.2—1996年1月14日，W3C推薦標準

HTML4.0—1997年12月18日，W3C推薦標準

HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準

XHTML1.0—發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布

XHTML1.1—2001年5月31日發布

XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術的成本過高而最終胎死腹中，因此，現在最常用的還是XHTML1.0標準。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度

HTML的優勢

• 各大瀏覽器廠商對H5的支持
• 市場的需求
• 跨平臺

二、HTML的基本結構

• <html>......</html> HTML文檔的開始和結束標記。
• <head>……</head> 頭控制標記，不在界面上進行展示，子標簽可設置SEO優化的一些內容以及設置網頁的編碼。
• <title>……</title>：設置瀏覽器的窗口上標題。
• <body>……</body>：頁面可見內容。

三、HTML的基本標簽

• 標題標簽

h1~h6

• 段落標簽和換行標簽

p標簽為段落標簽，br標簽為換行標簽

• 水平線標簽

hr標簽為水平線標簽

• 字體樣式標簽

em為斜體標簽，strong為字體加粗標簽

• 注釋和特殊符號

注釋使用：<!--被注釋的內容-->

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權符號：©

空格：

以上就是HTML的簡單入門，后續帶大家更深入的了解HTML