P5.js创意编程之自我介绍

构思

作为一个树莓人，熬夜修仙就是条必走之路
那就画个修仙老头？？？
先画草图吧

敲代码环节

就像图上那样，无非就算各种坐标
过程超级繁琐
就直接粘代码了

function person(){strokeWeight(5);//脸arc(200,200,200,140,-PI/6,-5*PI/6);//帽子line(122.85,155.46,277.15,155.46);line(122.85,150.46,277.15,150.46);line(122.85,155.46,122.85,150.46);line(277.15,150.46,277.15,155.46);arc(200,150.46,154.3,120,-PI/2,0);arc(200,150.46,100,120,-PI/2,0);arc(200,150.46,40,120,-PI/2,0);arc(200,150.46,154.3,120,-PI,-PI/2);arc(200,150.46,100,120,-PI,-PI/2);arc(200,150.46,40,120,-PI,-PI/2);ellipse(200, 90.46, 10);//左耳朵arc(100,200,30,30,PI/2.1,-PI/2.1);//墨镜fill(0);ellipse(160, 180, 38);ellipse(240, 180, 38);fill(255);strokeWeight(10);line(181,180,219, 180);//鼻子strokeWeight(2);line(209,169,209, 210);line(191,169,191, 210);line(209,210,219,220);line(191,210,181,220);line(219,220,215,225);line(181,220,186,225);line(215,225,186,225);//嘴strokeWeight(4);push();line(170,235,230,235)arc(200,235,60,50,0,PI)pop();//胡子strokeWeight(8);line(172,225,150,250)line(228,225,250,250)//左胳膊strokeWeight(5);line(140,260,140,310)line(130,250,105,280)line(105,340,140,310)arc(103,335,10,10,PI/3,PI/1.5)line(99,338,53,263)line(112,290,82,244)line(82,244,53,263)line(87,252,60,270)//左手arc(57,242,45,40,PI/2,0)//衣服line(122,325,122,400)line(122,400,278,400)line(278,400,278,300)line(278,300,262,255)//裤子line(128,400,128,470)line(272,400,272,470)line(128,470,272,470)//脚strokeWeight(4);arc(155,477,28,18,-PI/6,7*PI/6)arc(245,477,28,18,-PI/6,7*PI/6)//右胳膊strokeWeight(5);line(278,300,328,320)line(262,255,308,265)line(328,320,373,290)//招牌line(308,120,308,290)strokeWeight(20);line(308,120,438,120)strokeWeight(5);line(438,120,438,290)line(438,290,308,290)strokeWeight(15);line(373,295,373,450)line(373,115,373,60)strokeWeight(10);line(373,70,308,120)line(373,70,438,120)

效果就是下图：

然后在我的招牌上加个小太极：

//太极
function taiji(){strokeWeight(3);push();fill(0);arc(373,205,80,80,-PI/2,PI/2);fill(255);arc(373,205,80,80,PI/2,-PI/2);strokeWeight(2);arc(373, 185,40,40,-PI/2,PI/2);fill(0);arc(373, 225,40,40,PI/2,-PI/2);fill(0);ellipse(373, 185, 15, 15);fill(255);ellipse(373, 225, 15, 15);pop();
}

bingo

添加文本

人物差不多搞定，该介绍下树莓人修仙日常了
用p5.js的text()这个函数就能直接在画面上添加文本了

//文本
function textshow(){push();let s = '树莓人修仙级别';fill(255,132,5);textSize(28);text(s, 400, 50);textSize(18);text('0点睡觉 炼体',450,80);text('1点睡觉 练气',450,110);text('2点 筑基',480,140);text('3点 金丹',480,170);text('4点 元婴',480,200);text('5点 化神',480,230);text('6点 洞虚',480,260);text('7点 渡劫',480,290);text('8点 大乘',480,320);text('9点 飞升',480,350);text('10点就去仙界了',430,380);pop();}

添加动态效果

想添加一个人物处在星河中的效果
代码如下：

function update() {var originX = WIDTH / 2;var originY = HEIGHT / 2;for (var i = 0, x = stars.length; i < x; i++) {var s = stars[i];var rad = (frameCount * (1 / (s.orbit * 2 + s.offset)) + s.offset) % TAU;s.x = (originX + cos(rad) * (s.orbit * 2));s.y = (originY + sin(rad) * (s.orbit));}
}

在setup()中添加下面代码

for (var i = 0; i < NUM_STARS; i++) {stars.push({x: 0,y: 0,offset: Math.random() * 360,// Weight orbit a little to be outside originorbit: (Math.random() + 0.01) * max(WIDTH, HEIGHT),radius: Math.random() * 2,vx: Math.floor(Math.random() * 10) - 5,vy: Math.floor(Math.random() * 10) - 5});}frameRate(FPS);loop();

然后效果变成了：

emmmmm，原来我人物是用黑色线条画的，就很尴尬了
就只能把人物线条换成白色了
使用 stroke( )这个函数

所以最终的效果是这样的！

over

P5.js创意编程之自我介绍相关推荐

p5.js创意编程——Q版人像绘制
目录主要函数介绍贝塞尔曲线 Shape frameRate 完整代码实现效果主要函数介绍贝塞尔曲线如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
关于编程的自我介绍和规划。
自我介绍我是一名编程初学者,学的专业是物联网工程,但是学了两年专业为了应对考试就会了点皮毛,今年暑假开始下功夫去学而且是深入学习. 目标编程目标是希望自己的编程水平每天进步,因为学无止境成为IT ...
p5.js创意绘图(1)动态图形
利用p5.js临摹一幅动态图形. 原图分析看起来像是两个葫芦在转圈,其实每个圆点并没有旋转,只是在以图形中心为原点的射线上来回移动.长瘦葫芦上的圆点移动的周期是短胖葫芦上的圆点移动的周期的两倍,且 ...
p5.js创意绘图(2)自画像
利用p5.js画一幅自画像,效果如下: 1.按下键盘"M"(music)键,音乐停止播放:再次按下"M"键,音乐重新开始播放. 2.按下键盘"S&qu ...
玩点创意编程，发现另一个世界
知识点什么是创意编程创意编程的应用领域创意编程的常见工具 p5.js 简介什么是创意编程创意编程(Creative Coding)的概念非常宽泛,它是一种以创作表达为主要目的的计算机编程实践 ...
超炫酷｜一堂课带你入门 p5.js 数字艺术新世界！
一提起程序员,人们往往会脑补出一副双肩包.格子衫.脱发的画面,同时将程序员和「不修边幅.毫无美感」等糟糕的词汇联系了起来-- 但事实真的如此吗? 事实是: 我们不脱发程序员的脱发比例是各行业中较低的 ...
p5.js案例（二）：创意作品——USP消音版手枪模型
文章目录前言原图编程语言实现逻辑效果图完整代码前言根据老师的要求,创作一幅介绍自己的作品,可以是具象化地描绘形象,也可以是任何形式表现自己的兴趣.追求.特色.经历等. 由于最近比较喜欢 ...
面试时怎样自我介绍比较好？
在求职过程中,自我介绍是最基础也是最重要的环节之一.一个好的自我介绍可以让面试官对你有一个初步的印象,为后续的面试打下良好的基础.但是,在面试时进行自我介绍并不是一件容易的事情.很多求职者在自我介绍时 ...
js高级编程_这位设计师用Processing把创意编程玩到了极致！
Processing作为新媒体从业者的必备工具,近来却越来越成为设计师们的新宠! 今天小编将介绍以为用Processing把创意编程玩到极致的设计师Tim Rodenbröker. "我们的 ...

P5.js创意编程之自我介绍

P5.js创意编程之自我介绍

构思

敲代码环节

添加文本

添加动态效果

P5.js创意编程之自我介绍相关推荐

最新文章

热门文章