码绘：使用p5.js进行简单的作画

使用工具
Visual Studio Code+p5.js
下载地址
Visual Studio Code：https://code.visualstudio.com/Download
p5.js:https://p5js.org/zh-Hans/download/
目标
在网页上用简单的线条画出一辆自行车
具体流程
首先我们建立一个index.html文件（主页）和一个sketch.js文件（码绘实现文件），并把sketch.js和p5.js链接到index.html上。
在sketch.js的draw()中通过使用简单的图形函数画出自行车。

// sketch.js
function setup() {createCanvas(1280, 1080);
}function draw() {ellipse(200, 200, 80, 80);ellipse(350, 200, 80, 80);line(200,200,230,120);line(210,110,250,130);line(210,110,225,110);line(250,130,260,125);ellipse(290, 200, 30, 30);line(295,175,285,225);line(285,175,305,175);line(275,225,295,225);line(290,185,350,200);line(290,215,350,200);line(220,150,275,195);line(295,175,310,145);line(310,145,370,150);line(350,200,355,150);triangle(310,145,285,133,325,135);
}

效果图

码绘与手绘相比

从思路方面来考虑，编程和手绘的差距其实并不大，手绘一开始要做的事情就是构图，确定好画面的大致框架和分布，用p5来进行编程作画也是一样，确定好画布的大小和作图的关键点位，确定框架。从技术上来说，手绘的要求更高一点，因为使用p5作画是依靠调用现成画出的都是标准的图形，而手绘有诸多因素的影响，如画笔、纸张、绘画者的技术等，但正是如此，手绘才会显得多样化。创作体验上来说，使用p5编程作画比较适合重复性强的作画，手绘更适合创造性的作画，p5自带的曲线函数要确认点位才能够连出直线，没有手绘那样随心所欲。从创作偏好方面，我喜欢用p5画一些简单、重复性高的画面，手绘更适合创造性的作画。

码绘：使用p5.js进行简单的作画相关推荐

【码绘】p5.js自画像
[码绘]p5.js自画像一.结果: 鼠标交互后: 二.过程 1.先大概想一下自己长啥样,明确一下特点:圆脸,短发,爱吃爱睡觉,本来想交互出来一盘肉,但是想了一下感觉好麻烦,交互就直接睡觉了- 2.然 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
雪梨小白的“码绘”起步——p5.js实现心形动态图形的绘制
作为一个快乐的程序媛,尤其还是一个快乐的树莓程序媛,当然应该什么都会!所以这学期学院开了很多偏艺术类的课程让我们学习,然后就开始了互动媒体这门课的学习.这一次的作业要利用p5绘制动态图形,我自己还真的 ...
雪梨小白的“码绘”日常——p5.js自画像来喽！
这次需要完成互动媒体课程的第二项作业--利用p5.js绘制一幅表现自我的自画像,(雪梨是谁啊,那可是艺工交融的代表,骄傲的抬起快要睁不开的眼-),用三个字,那就是!!!我可以!!!(来啦!) 我觉得码 ...
码绘”与手绘比较——静态篇（码绘使用p5.js）
码绘图手绘图先大体说一下码绘图的实现吧其实实现起来没什么技术难度,就是过程比较繁琐. 背景就是几个不同颜色,不同透明度的四边形和三角形,用quad()和triangle()两个函数搞定,就不贴代 ...
“码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女关于第一点还是比较好实现的,就是外 ...
用p5.js编写简单的动态图形——波纹扩散
用p5.js编写简单的动态图形--波纹扩散第一次使用p5.js写程序,如有错误请指出,多多指教. 没有下载p5.js的小伙伴可以直接使用网页版的,简单注册一个账号之后就可以保存代码啦. 网站:htt ...
基于p5.js的简单绘画系统
本次实验的主题是编写一个绘画系统,提供一系列绘画材料例如画笔.颜料.滤镜等给用户操作,以创作出动态.交互的绘画作品.这个绘画是对传统绘画概念的拓展,但仍然要体现出与传统绘画的相似性. 注意:目标可以理 ...
利用p5.js进行“运动”主题的绘画创作
利用p5.js进行"运动"主题的绘画创作主题用码绘和手绘两种方式创作"运动"主题的作品,对比二者在表现"动态"方面的异同. 码绘工具 ...

码绘：使用p5.js进行简单的作画

码绘：使用p5.js进行简单的作画相关推荐

最新文章

热门文章