跳舞语法 (Dancing Syntax)

介绍 (Introduction)

About a month into the Flatiron School Bootcamp, a friend of mine gave me this advice:

进入Flatiron学校训练营大约一个月后，我的一个朋友给了我以下建议：

“Learning to read code will help you become a better programmer.”

“学习阅读代码将帮助您成为更好的程序员。”

At first, I heard that and thought, “Yeah!” It made sense to me, but while working on labs, I came across some code that I struggled to make sense of:

一开始，我听到了，然后想：“是的！” 这对我来说很有意义，但是在实验室工作时，我遇到了一些难以理解的代码：

A function called rgbToHex, a pixel matrix, an npm package, some loops, hex codes, and a lot to do with arrays. Fascinating! At a high-level, data.js is loading a file into an npm package called get-pixels, that package is processing the data, which results in a nested array of hex codes. My brain was in overload! I wanted to understand, but so much was unfamiliar. Could I read my way into figuring this out?

名为rgbToHex的函数，像素矩阵，npm包，一些循环，十六进制代码以及与数组有很大关系的函数。 迷人！ 从高层次上讲，data.js正在将文件加载到名为get-pixels的npm包中，该包正在处理数据，这导致嵌套的十六进制代码数组。 我的大脑超负荷了！ 我想了解，但是非常陌生。 我可以读一下解决这个问题的方法吗？

After all, I didn’t need to try to understand it, it’s some helper code for the lab. The purpose of the lab was to learn how information flowed between components in React. The challenge was to finish implementing the functionality for an in-browser pixel drawing app.

毕竟，我不需要尝试去理解它，它是实验室的一些帮助代码。 实验室的目的是了解React中组件之间信息的流动方式。 挑战在于完成为浏览器内像素绘图应用程序实现功能。

Okay! Let’s move on, BUT WAIT… What about that code from earlier?

好的！ 让我们继续前进，但请等待...早先的代码呢？

At first glance, I didn’t know what was going on, but transforming images into pixel data and rendering those pixels as divs seemed pretty bomb.com. With my friend’s advice in mind, Let’s pick it apart!

乍一看，我不知道发生了什么，但是将图像转换为像素数据并以div形式渲染这些像素似乎是bomb.com。 考虑到我朋友的建议，让我们把它分开！

获取像素 (Get-Pixels)

Let’s start with the npm package! After taking a look at the documentation, I found out that Get-Pixels reads the pixel data from an image and returns the result as a ndarray (Nth-Dimensional Array).

让我们从npm包开始！ 查看文档后，我发现Get-Pixels从图像中读取像素数据，并将结果作为ndarray(第N维数组)返回 。

Specifically, it:

具体来说，它：

“Returns An ndarray of pixels in raster order having shape equal to [width, height, channels].”

“以栅格顺序返回形状等于[宽度，高度，通道]的像素nd阵列。”

Two things are new to me here: Raster order and ndarrays.After a quick search, I found out that Raster order describes the ordering of an image divided into rows of its pixels called scan lines.

这里有两件事对我来说是新的： 栅格顺序和ndarrays。 快速搜索后，我发现光栅顺序描述了将图像分成像素行(称为扫描线)的顺序。

In this context, get-pixels takes in an image, reads the pixel data from left-right and top-bottom, and then records that image data to a ndarray. With a console.log of the pixels returned, we can begin to see a piece of the multidimensional array and some information about it. More things to learn about!

在这种情况下，get-pixels会摄取图像，从左至右和从上至下读取像素数据，然后将该图像数据记录到ndarray。 使用console.log记录的返回像素，我们可以开始查看多维数组的一部分以及有关它的一些信息。 还有更多要学习的东西！

// console.log('got pixels', pixels)         line 9 in data.js//=> got pixels View3duint8 {  data: Uint8Array(2500) [    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255,    ... 2400 more items  ],  shape: [ 25, 25, 4 ],  stride: [ 4, 100, 1 ],  offset: 0}

Uint8 is shorthand for unsigned 8bit integer. That means (2⁸)-1, or 255. It’s commonly known as the value range for RGB color values: Red, Green, and Blue channels. Each channel has a value between 0–255, representing the intensity of its corresponding color. There’s also that sometimes hard to see alpha channel too, but that’s for opacity!

Uint8是无符号8位整数的简写。 这表示(2⁸)-1，即255。通常称为RGB颜色值的值范围：红色，绿色和蓝色通道。 每个通道的值在0到255之间，代表其相应颜色的强度。 有时也很难看到Alpha通道，但这是为了不透明！

We also get the shape of this ndarray. That word can kiss it’s bold status goodbye because we’re about to learn about them!

我们也得到了这个ndarray的形状。 这个词可以亲吻它的大胆地位，因为我们将要了解它们！

阵列 (Ndarray)

An Nth-Dimensional Array is a multidimensional array of items of the same type and size. The number of dimensions and items in the array are defined by the shape, positive integers that specify the sizes of each dimension. They are great for representing images, audio, matrices, strings, and other dimensional data.

第N维数组是相同类型和大小的项目的多维数组。 数组中的维数和项目数由shape定义，正整数指定每个维的大小。 它们非常适合表示图像，音频，矩阵，字符串和其他维度数据。

Ndarrays are themselves a part of a Python package called NumPy — a library of code for scientific computing in Python. The library provides a variety of data types for integers and floats, the multidimensional array itself, and methods to operate, transform, and iterate on the ndarrays.

Ndarrays本身就是称为NumPy的Python程序包的一部分， NumPy是用于Python中科学计算的代码库。 该库为整数和浮点数提供了多种数据类型，多维数组本身以及在ndarray上进行操作，转换和迭代的方法。

Get-Pixels uses sciJS, a Javascript library that allows you to implement similar functionality to NumPy’s scientific computing.

Get-Pixels使用sciJS (一个Javascript库)，该库可让您实现与NumPy的科学计算类似的功能。

Cool! Let’s visualize this. A Rubix Cube!

凉！ 让我们将其可视化。 魔方！

Now in code, it is an array of 6 3x3 arrays:

现在在代码中，它是6个3x3数组的数组：

Okay, that was a ton of googling, drawing, and REPL fun y’all. Now we know a bit more about nd-arrays. With all of the knowledge gathered, we can figure out how data.js does all its magic.

好的，这是很多Google搜寻，绘图和REPL的乐趣。 现在，我们对nd数组有了更多了解。 收集了所有知识之后，我们可以弄清楚data.js如何发挥其全部魔力。

破解密码 (Cracking the Code)

Going back to that original console.log, we now know that this is a 3-Dimensional Array of RGB color values, It has a shape equal to its width, height, and channels. In this case [25W, 25H, 4Channels(RGBa)

回到原始的console.log，我们现在知道这是RGB颜色值的3维数组，其形状等于其宽度，高度和通道。 在这种情况下[25W，25H，4通道(RGBa)

// console.log('got pixels', pixels)         line 9 in data.js//=> got pixels View3duint8 {  data: Uint8Array(2500) [    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255,    255, 255, 255, 255,    ... 2400 more items  ],  shape: [ 25, 25, 4 ],  stride: [ 4, 100, 1 ],  offset: 0

We see the first function from the file takes in a single RGB value and converts that value to a hexadecimal string. If that string is only one character long, add a 0 to it.

我们看到文件中的第一个函数采用单个RGB值，并将该值转换为十六进制字符串。 如果该字符串只有一个字符长，请向其添加一个0。

Number(255).toString(16) //=> "ff" or 'red' in hex.

Now we can look at those fancy loops and derive what is happening:

现在我们可以看一下这些奇特的循环并得出正在发生的事情：

First, we traverse the height, then the width of the 3Darray with for loops. Each loop is set to terminate before it’s pointer gets to our width and height values from the shape.

首先，我们遍历高度，然后遍历3Darray的宽度并使用for循环。 每个循环都设置为在指针从形状到达我们的宽度和高度值之前终止。

let row = ['#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF', '#FFF']

Declare a variable and assign it an array of white color hex codes. This array is forming a single line of white hex color pixels to begin our raster scan. We’re building a frame for our picture.

声明一个变量，并为其分配白色十六进制代码数组。 该阵列形成一行白色十六进制彩色像素，以开始我们的光栅扫描。 我们正在为图片建立框架。

If we look closely at this line, you see that we are targeting each pixel element across the RGB channels, converting the values into hex code pieces, and including an octothorpe in the beginning. Then we push those codes onto the end of the row array.

如果我们仔细观察这条线，您会发现我们以RGB通道中的每个像素元素为目标，将这些值转换为十六进制代码段，并在开始处包含一个八面体。 然后，将这些代码推送到行数组的末尾。

Line 7–8: Once the loop reaches the end, push on another line of white hex colors, push the completed row into a container array, then start again at the next step down in our height loop. We continue building rows like this, mimicking the pattern of the raster scan building left-right, top-bottom.

第7-8行：循环结束时，推另一行白色十六进制颜色，将完成的行推入容器数组，然后在高度循环中的下一个步骤再次开始。 我们继续像这样构建行，以模仿从左到右，从上到下的光栅扫描模式 。

One sort of optimization that we could make is making the loops terminate dynamically based on the shape value we have access to.

我们可以进行的一种优化是使循环根据我们可以访问的形状值动态终止。

for (let y = 0; y < 25; y++)change to:for (let y = 0; y < pixels.shape[0]; y++)for (let x = 0; x < 25; x++)change to:for (let x = 0; x < pixels.shape[1]; x++)

I said this is a -sort of- optimization because it is playing with fire. It’s great if you don’t precisely know the pixel dimensions of your image, it’s also terrible if your image has large pixel dimensions. Though, I’d argue that you would rarely use this method of processing a large image anyways, so have fun!

我说这是一种优化，因为它在玩火。 如果您不完全了解图像的像素尺寸，那就太好了，如果图像的像素尺寸很大，那也很糟糕。 不过，我认为您还是很少会使用这种处理大图像的方法，所以请尽情享受！

The completed array of hex values looks like this:

十六进制值的完整数组如下所示：

结论 (Conclusion)

Whew! That’s long, I went ahead and processed a different image to bring you joy. There’s more code going on behind the scenes, but since you know about Raster order, I’m sure you can figure it out!

ew！ 很长一段时间，我继续进行处理，并制作了不同的图像，以带给您快乐。 幕后还有更多代码在做，但是由于您了解Raster的顺序，因此我敢肯定您会发现的！

So what did we learn from all this? We learned about:

那么我们从这一切中学到了什么？ 我们了解到：

1. multidimensional arrays多维数组
2. Two npm packages: get-pixels and scijs/ndarray两个npm软件包：get-pixels和scijs / ndarray
3. Raster scan order栅格扫描顺序
4. A starting point for solving a Rubik’s cube algorithmically从算法上解决魔方的起点
5. Creating fun things with divs.使用div创建有趣的事物。

6. Reading and dissecting code that is unfamiliar to you is a great way to stretch your brain and get exposed to new information.

   整理和剖析您不熟悉的代码是扩展您的大脑并接触新信息的好方法。

Enjoy!

请享用！

资料来源： (Sources:)

1. npmJS: Get-Pixels

   npmJS：获取像素

2. Wikipedia: Raster Scan

   维基百科：光栅扫描

3. Github: sciJs/ndarray library

   Github：sciJs / ndarray库

4. W3Resource: NumPy

   W3资源：NumPy

5. W3Resource: ndarray

   W3资源：ndarray

6. W3Schools: Hex Colors

   W3Schools：十六进制颜色

7. W3Schools: RGB Colors

   W3Schools：RGB颜色