创意编码——120 天中的第 3 天

创意编码——120 天中的第 3 天

所以今天，它更像是一个抽象的学习日。我探索了 HTML 画布并深入了解了 x 和 y 的世界。这是最终结果：

Project folder - https://github.com/sintija/making-visuals-with-canvas/tree/main/sketches — sketch.js

好的，了解如何使用画布进行编码和计算数学已经有点长了；我想我的数学技能有点生疏了

我是怎么找到这个项目的？

这是一个 创意编码：使用 JavaScript 制作视觉效果 课程由 布鲁诺·因布里齐 ，您可以在 https://www.domestika.org/ 平台。

很久以前，我决定参加这门课程。我记得在谷歌上搜索创意编码课程并浏览它们的列表。然后我遇到了这门课程，在看到介绍后，我被卖掉了。

课程价格实惠，而且 国内的 不时提供折扣。这门课程的价格约为 10 英镑，包括大约 3 小时的录制内容。如果您完全遵循本课程，则可能需要更多时间才能完成。

本课程有一些关于介绍 Javascript 基本概念的课程，例如变量和函数。

我从这个项目中学到了什么？

呃，我应该从哪里开始？我浏览了一些介绍视频，其中布鲁诺解释了一些编程和编码的基础知识 帆布 .

1. 创建基本形状 帆布 .

第一个项目是创建一个与最终项目无关的简单形状。它最初是一个内部有一个圆圈的矩形，但我决定尝试各种形状并创建，让我们称之为“鸟屋”。它看起来像这样：

GitHub Repo here — https://github.com/sintija/making-visuals-with-canvas/tree/main/basic-shapes

这并不理想，但玩弄形状并相应地对齐它们很有趣。

我想更深入地了解坐标系以及在画布上绘图的工作原理。

• 首先，要开始使用画布，我们需要定义一个“2D”的画布上下文。
• Canvas.getContext() - 是画布功能之一；布鲁诺分享了一个很棒的参考页面 w3c学校 您可以在其中更熟悉画布功能并查看示例。
• 画布坐标系。我了解到它从画布大小的左上角开始。 （X：0，Y：0）。这是一个很好的例子，可以帮助在画布上可视化 x 和 y 坐标—— https://codedraken.github.io/canvas-coords/ ;但是，可能会有更多结果。

• context2D.beginPath — 这是一个让画布知道我们要从哪里开始在页面上绘制新元素的功能。
• 每个形状都会有需要添加的参数，例如 context.fillRect(100,100,400,400) 需要有 (x 坐标 ,y 坐标 ,width,height)
• 圆的开始和结束角度以弧度而不是度数设置。所以我想知道弧度是什么。我相信如果您更熟悉弧度转换为度数的潜在方法，但我在这里的主要重点是了解弧度的工作原理。

reference — https://c-for-dummies.com/blog/?p=3110

这个单词 弧度 来自半径，它是圆直径的一半。如果你取一个半径并沿着相同长度的圆创建一个弧，你会得到一个弧度。首先，要了解弧度，请看图 1。您会看到左侧圆的半径如何映射到圆上的圆弧。这个长度是一个弧度， r .( https://c-for-dummies.com/blog/?p=3110 )

这些文章还深入探讨了为什么计算机使用弧度而不是度数；读起来很方便。

• 好吧，让我们谈谈数学。 PI。也许你还记得数学课上 π ≈ 3.14159。

在基础数学中，使用 pi 求圆的面积和周长 . Pi 可用于通过将圆的半径乘以 pi 来找到面积。

所以在上面的例子中，我们将使用 Math.PI*2 创建一个完整的圆，你可以找到参考 这里 .

我对这个概念还比较陌生，所以我需要多尝试几次才能完全理解它。

3.使用终端命令

终端很棒，我总觉得从一开始就习惯它很重要。我找到了这个 mac 备忘单 https://github.com/0nn0/terminal-mac-cheatsheet ，其中包括对一些终端命令的引用。

在某些情况下，具有多个矩形的项目使用 画布素描 图书馆。该库有助于导出高分辨率 PNG 用于打印，为 GIF 渲染图像序列。您可以使用它执行的一项很酷的功能是通过按 cmd + s（在 Mac 上）动态保存草图。我相信它是 Windows 上的 ctrl+s 。

每次使用此命令时，画布的 png 图像都会保存在输出文件夹中。下载是输出文件夹；但是，您可以将其更改为终端中的首选输出文件夹。

我发现更改输出文件夹的功能不起作用，所以我做了一些小调整：

1. 您必须首先创建要用于输出图像序列的文件夹

2. 我使用了以下命令：

   画布草图sketch.js — 输出=输出/输出-1

代码结构

code - https://github.com/sintija/making-visuals-with-canvas/blob/main/sketches/sketch.js

Final result

有趣的是，没有 index.html 文件。终端可以使用以下命令运行sketch.js 文件：

 npx canvas-sketch-cli sketch.js[或你的js文件] --open

这将为您提供服务器地址，您可以在本地计算机上访问该地址。

2. 嵌套循环

嵌套循环用于创建多行矩形。

嵌套循环通常用于处理两个维度，例如在行和列中打印星形，如下所示。当一个循环嵌套在另一个循环内时，内循环在外循环内运行多次。 ( https://runestone.academy/ns/books/published/csawesome/Unit4-Iteration/topic-4-4-nested-loops.html )

作为参考，代码是使用包含节点模块的 canvas-sketch 库编写的，并添加了带有必要库的 package.json 文件。安装后，它会提供一个样板 js 文件，您可以在其中添加代码。你可以使用这个库找到一些优秀的例子 这里 .

概括

总体而言，这是一个学习创意编码的好项目；然而，一开始使用画布掌握一些概念有点挑战性，例如使用弧度和使用 javascript 数学函数；因此，我觉得有必要花一些时间研究这些概念并尝试不同的价值观。

其他发现

以下是一些令人惊叹的创意项目，值得一试以获得一些灵感。

[

Matt DesLauriers (@mattdesl_art) * Instagram 照片和视频

编辑描述

www.instagram.com

](https://www.instagram.com/mattdesl_art/)

[

池田亮司 |

Ryoji ikeda 的概念和构图 计算机图形和 Norimichi Hirakawa、Tomonaga Tokuyama、Ryo 的编程...

www.ryojiikeda.com

](https://www.ryojiikeda.com/project/x_verse/)

[

池田亮司 |超对称

概念、构图：池田良司与编程、计算机图形学：平川纪道编程……

www.ryojiikeda.com

](https://www.ryojiikeda.com/project/supersymmetry/)

[

canvas-sketch/installation.md at master · mattdesl/canvas-sketch

使用 canvas-sketch 及其工具的推荐方法是使用它的命令行界面。这将运行一个本地...

github.com

](https://github.com/mattdesl/canvas-sketch/blob/master/docs/installation.md)

好的，现在再见；明天见，祝编码愉快‍

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/15378/43380508