1.1: Drawing with Pixels - Processing Tutorial

1.1: Drawing with Pixels – Processing Tutorial



我们准备开始了 一套新的视频。第一组视频是
所有只是介绍,“我们在哪里? 世界将会发生什么?“所有这一切
有点东西,现在我们要去 开始实际看实际
编写代码的现实。 现在,我们正在做这件事
“无论你想叫它什么” 我们正在学习的视频系列 关于计算机编程,
通过计算的基础 计算机图形学的镜头, 画到屏幕上。所以,实际上就是这个
本系列中的第一部视频 我们不会写指令
还没。 我们将从感觉开始
舒服,聚会, 有一个时刻,并了解什么
它意味着画画 像素到屏幕。是什么
屏幕坐标系? 画一条线,一条线是什么意思
一个矩形?我们怎么样呢 把东西放到那个?所以,这应该是一个
短视频我们将首先播放此视频 那么我们实际上会考虑开放
处理,处理如何工作和写作 用于实现我们图纸的代码, 然后我们将添加颜色并做各种各样的事情
其他的东西也是。 那么,什么是开始?什么是
我们需要了解的第一件事是什么? 什么时候我们 写我们的第一个Proccessing程序,哪个 我们最终称它为草图, 会发生什么是一个窗口打开,这里是
怎么了。我们可以代表这个窗口 通过画一个 在这里的矩形。这是我们的电脑
图形窗口。所有说明 当我们了解所有这些东西时,我们写
关于计算的基础, 我们要编写将要绘制的指令
东西到屏幕上。 你知道,重要的是要注意
这是一小部分 你可以用计算做什么
对?画, 制作图纸。这只是一个很好的开始方式
但是,你知道, 你应该意识到你并不受限制 到了这个绘制到屏幕的世界。你将去
出去和 解决各种有趣的问题
并创造各种奇妙的 具有计算能力的东西,但我们是
要开始,你知道,我们要去 当有的时候会非常兴奋 知道屏幕中间的红圈。
我们会想到我们 真的取得了辉煌的成就好的,
所以我们有这个 矩形,男孩,我啰嗦。
你可能有 你生命中的某一次 数学课程,几何课程,某种
课程 在哪里你画了一些东西
像这样。笛卡尔坐标 系统也许你有方格纸。 方格纸是一件好事。如果你
周围有任何方格纸 房子停了下来, 去拿它,把它拉出来。你会很的
很高兴你有方格纸。但当 你有一个笛卡尔坐标系,你添加
一种叫做“x轴”的东西。 我会走到这里。 然后你添加一个叫做“y轴”的东西。和
然后我们可以说,“哦,看,有一个 指出这里“。 那是什么意思?也许它是1,2,3,4,5。 1,2,3,4。我们会说,嘿,是的 5逗号4意思是它
x等于5,右边,这一点在这里。 中心是你的起源。 (0,0)
对? 这是5个逗号4,为什么,
对不起,1,2,3,4,对吧? 这在某种程度上应该有些直观
对你熟悉吧? 这就是这个想法,你有这个坐标系
我们可以找到 他们的坐标系上的斑点
数字数字水平值,x,由它们 数字垂直值,y。我们要去做
这个 仅在计算机图形学中完全相同
该 坐标系将是
稍微不一样。你知道,有一件事我 应该提一下,这是什么意思
这里? 这一点是1个逗号-3, 对?这是正1,2,3,4,负
指向下方。 -1 -2 -3。这里是-1 -2 -3沿着
x轴上。 所以,我们有这个想法
坐标系统 (0,0)在中心,正x向前
在右边, 积极的y上升。现在,在电脑里
图形, 我们有类似的东西但是 翻转并在(0,0)不同的地方,
对?一个计算机图形窗口, 对,这是一个窗口。这实际上是
处理,但你可以看到,我们可以说,嘿,这是 这个的左上角 窗口是屏幕上的这个大矩形。
任何计算机图形窗口的左上角 是起源,(0,0)
这是这样的x轴, 这是y轴这样的方式。
但我们应该注意一些事情: 这点是什么? 这是第5点 逗号4,对吧? 这是5个逗号4
坐标系, 这是5个逗号4. 1,2,3,4,5。 在这个坐标系中有1,2,3,4。 y是正向下,x是正数
指向右边。 ???? !!!! 我不知道,我感到安心
有这个,但我不知道是否 这让你不舒服或者就像,
哦,我的上帝, 我不敢相信你还在谈论的地方
第5点逗号4是。但, 我们在这里应该注意的是它
有负像素是没有意义的, 对?那么,我们窗口内的所有像素
是正数。 没有负像素这样的东西。
当然,现在, 所有这一切都可能会发生
更改 当我们看到更高级的环境时。
当我们进入3D时,有一些方法, 你要考虑的地方(0,0) 中央。有各种各样的原因
为什么你可以考虑负数 与正数相比 但我们开始的时候很简单,很好
友好,快乐的地方 我们只有(0,0)的地方
左上角,正x向右, 积极的y下降。 现在,你可能想知道,男孩,你带了一个
很长一段时间 解释一下,我不知道为什么我这样做
希望这很有帮助。 所以,我们真正需要的原因
对此很满意 是因为我们开始写作
绘制到屏幕的说明, 我们要怎么说,嘿,
在这里放一个矩形 在这个(x,y)位置,宽度为
高度为像素的像素。 从此(x,y)画一条线到此
(x,y)位置。 所以,这个想法很舒服
x轴,y轴, 而这种像素比例很重要
实现。 现在,让我们来看看,我有一个橡皮擦。 我们再向前迈出几步吧。现在我们就是
我们很舒服 坐标系,让我们开始了解如何
我们可以写一个 指示,对,我们想借鉴
屏幕。 我们怎么写一个画画的指令
到屏幕?那么,让我们开始吧 与我有点不同的东西
预期。 这对你来说很震撼,我将从一开始
线 而不是一个矩形。矩形通常是第一个例子,但让我们从一行开始。所以,让我们说吧 这是我们的窗户,也是唯一的另一件事
关于窗口,我们需要定义, 我们需要定义宽度的任何窗口
高度。所以, 让我们说,我认为大多数处理
例子 往往以640像素的宽度开始 和高度360像素。这是相对绘制的
扩大规模。 所以。那是你想要意识到的另一个。
如果这是左上角的(0,0), 这个像素在中间是什么?它会
是 到640的一半我们可以做那个数学
在我们的头脑中 <i>数学</ i> 320.中途 右下角底部有360,逗号
180。 是的,所以,这就是我们需要开始的
习惯了,这个想法规模我们是 没想到,好吧 它距离墙壁或三英尺两米
这条路。 我们总是会像素一样思考,一般来说, 你知道吗,我们在谈论什么?某物
这是全屏,就像1920年的1080 或者它是200乘200的小窗口。
这真的取决于。我在打印, 一个充气,一个小游戏
网站的? 什么类型的规模?我们一般都在工作
在这个规模。 好吧,让我们说出我们想要的东西
去做 我们决定设计一个
小图片 通过制作一堆线。你知道,也许吧
线条是这样的。 我们要做一张脸
用鼻子。 所以,我们可以想象如果我们可以画出来的话
屏幕上的所有这些线条 我们可以创建这种模式 这张非常安详的脸。所以,我们需要
了解, 写一个是什么意思
划线的指示 屏幕上?实际上甚至可以做到, 让我们这样做。我要随意
做些什么。 我在这里画小圆圈
表明开始 并结束了。所以, 我没有任何人可以在这里交谈,但是,如果你正在看这个,那就有点儿了 不管怎样,你还是
和我一起思考。 我们需要什么
定义如何画线? 我们要找的是如何写作
指示 划一条线。一旦我们想到这一点
出去,我们可能会明白怎么做 写下绘制矩形的指令,
画一个圆,绘制一条曲线, 绘制多边形。各种精致的形状
和我们可能想要的设计。 但是对于这条线,你可能会说嘿,一条线就是 一堆像素之间
A点和B点 我们可以称之为A点,我们可以称之为
要点B.我们需要定义什么 每个点? 一个(x,y)。我们可能会说这是 (x1,y1)和这个 (x2,y2),对吗?所以,画一条线
我们可能会说, 用英语我们可以说,“画一条线 介于“和我们之间,我们可以这样说吧 弥补一些数字。在这里,也许这是
大约100,200,300,400。 也许这是关于像素100,这是关于像素50。 “在(100,50)到”之间画一条线“ 也许这就像像素600一样 这是像素250.我有点制作 这个。 “至(600,250)” 对,你怎么写这个
英语。 “画一条线 介于(100,50)到(600,250)之间。 我们画那条线。我们怎么写
这个 在代码?我们不知道!这是哪里 学习编程进来。我们的一件事
必须学习的是语法。 所以,虽然我们都有一个通用的
理解的语法 英语或其他语言
你可能会说, 你不熟悉
处理的语法。 所以,我会告诉你它是什么。这是
句法 “100号线 逗号50逗号600 逗号250“所以,你走了。 这是我们的第一行代码 我们一直在写我们的
整个人生, 为了戏剧效果。说是行
括号数字逗号 另一个数字逗号另一个数字逗号
另一个数字括号和分号。 事实上,这是我们开始的地方。
我们要写的一切 在这第一个开始集
的视频, 我忘记了相机在那里。你好!
有这种格式。 它有,我们要说的是一个功能
名称, 你能看到吗?是。
后跟一个括号, 接下来是一些论点。我们打算打电话给这些 参数是由…分隔的值
逗号。 以括号结束并结束
用分号。 这究竟是什么意思? 你可以把它想象成一个命令
现在。 确实,它是一种功能或方法或者
程序。这有很多不同的词。 我认为,功能将是我们使用的词
不断。但是,我们可以将此视为一种命令。我吩咐你 划一条线。争论是
参数 这定义了我们将如何执行该命令。 如果我想给你编程,我可以
说,“走路”或 我可以说,“快走”或者我可以说,“走到这个地方”。 “快速”或“这个位置”,这些是争论的
命令,功能,走路。 所以,我们写的所有东西和第一批
我们要学习 像矩形,椭圆形, 我们刚刚排队, 还有一点。所以,我认为这很好,很容易
我们开始的地方。 我们如何定义矩形?我们怎么样
定义一个椭圆? 我们如何定义一条线?我们如何定义
一个点?每个人的论据是什么? 其中的一个? 然后我们可以画出矩形,椭圆形,
线,点。所以, 我建议你,在这里你的
在本视频结束时练习, 你应该怎么做才能想出来
一些设计 你只需要用铅笔画画
纸,如果你有方格纸,太棒了。 画出那个设计。简单一点。只能使用
矩形,圆形,椭圆形, 圆圈,线条和点, 然后尝试猜测,会是什么
说明看起来像这种 句法。什么论点
绘制矩形有意义吗? 提示:位置,宽度和高度。什么论点
有意义的椭圆? 对于一条线?有意义吗?试着想出来
一些东西,在下一个视频中,我们将开始看到 回答其中一些问题,我们将会
开始将此代码放入Processing, 执行它,看到我们的第一个程序
跑。我不知道- 我忘记设置计时器,所以我不知道多久
这是,但我希望它只是大约五或 六分钟 然后你可能往下看,它就像是20分钟或者其他东西。无论如何,我会在下一个见到你 视频,如果你选择观看,这是
完全合理 如果不这样做,我会完全理解,好吗?
谢谢!

40 thoughts on “1.1: Drawing with Pixels – Processing Tutorial”

  1. Thank you so much!!!! It's just priceless and amazing to have such a good free content with my first language subtitles (pt-br)

  2. is it possible to load a illustrator file into processing ? like a foreground image with no background?

  3. No way your going to start with a line wich is used to make ever shape known to humanity before you go into shapes known to humanity what?

  4. 'Yeah I know you whatched what like five videos already and some people probably already understand what processing is for but I felt like peving those guys off a little but thats in the past this is now the first video(1.1st actully I do not know how to say that as a word nor spell it so sorry people with ocd)' – said by Dan (may or may not be tweaked slightly(if it is it still has true infomation.).

  5. size(640,360);
    line(200,180,300,120);
    line(400,120,500,180);
    line(270,180,300,180);
    line(400,180,430,180);
    line(335,240,365,240);
    line(250,320,450,320);

  6. "Thank You", thank you very much. I "TOTALLY" understood EVERYTHING you said. You might want to consider teaching other CS instructors, who are very dry in their presentations, your methods…

  7. just asking, the very first pixel in the top left, isn't it 0,0 then if the screen is 640 wide, shouldn't it go from 0 to 639?, and the 'middle' would be then at "319.5" ?:P

    (I know there is no 0.5 pixel step, but theoretically 320 is not the middle but a half pixel distance left from the middle)?:D

  8. i had no interest in learning this langage, i m here by pure coincidence…and after a few videos i m still here with an open screen of processing on my laptop trying to draw some nonsence..DAAMN ure good sir..

    Thanks for the great tutos 😉

  9. This is my tutorial(unfinished):https://www.khanacademy.org/computer-programming/intro-to-programming-in-khanacademy-languagenot-processingjs/4884990820024320

Leave a Reply

Your email address will not be published. Required fields are marked *