创意自画像及简单交互

最新推荐文章于 2019-11-04 22:55:56 发布

weixin_44764538

最新推荐文章于 2019-11-04 22:55:56 发布

阅读量338

点赞数

文章标签： p5.js

本文链接：https://blog.csdn.net/weixin_44764538/article/details/102884225

版权

本文介绍了一个利用p5.js库创作的创意自画像项目，详细讲述了如何通过编程绘制自画像，并实现交互功能，包括鼠标点击拖动人物、鼠标左击触发雪花飘落、鼠标右击启动花瓣飘落的动画效果。代码分为自画像、花瓣、雪花和交互主函数四个部分，项目参考了P5.JS官方文档。

摘要由CSDN通过智能技术生成

创意自画像

主要是人物各个线的坐标，角度等等比较难算，花了一下午加一晚上的时间。
画完这个人物还需要各种微调，最后呈现出来的效果如下。

在这里插入图片描述
弧度的角度要调好，不然填充的时候会变成这种效果。

交互功能

1.鼠标点击拖动人物，改变人物位置；
2.鼠标左击，雪花飘落效果，再点一次，雪花效果消失；
3.鼠标右击，花瓣飘落效果，再点一次，花瓣效果消失。
在这里插入图片描述

代码

1.自画像

function drawmine(x,y){

	push();
	stroke(139,71,38);
	fill(255,255,255);
	ellipse(x,y-4,100,95);
	ellipse(x,y-15,100,95);
	pop();

	stroke(139,71,38);

	strokeWeight(1.5);

	arc(x,y-4,100,95,0,PI);//脸
	//眉毛
	arc(x-28, y-20,25,10,PI,2*PI);
	arc(x+28, y-20,25,10,PI,2*PI);

	strokeWeight(3);
	
	ellipse(x-28,y,42,42);//左眼镜
	ellipse(x+28,y,42,42)