基于P5“尝试开发”一个“绘画系统”

为了完成大作业,“自愿”开发的"绘画"系统

源代码

因为源代码比较多,所以这里只给出网址:
https://editor.p5js.org/Wangshuo/sketches/BJn8aCbZ4
请感兴趣的朋友去看一看。

编写过程

颜色板

为了完成一个“绘画系统”,我们不妨将其想象为一个传统意义上的绘画过程。在现实中,绘画需要那些要素呢?首先,我们需要一个画布,p5.js已经为我们提供了。然后,我们需要一个调色板,让我们不至于只能使用一种颜色来完成绘画。
受到博主 西河某人:创意动态绘图板的启发,按照RGB颜色与十六进制颜色码转换,我们绘制了如下排列好的色块:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20181226202212249.png在这里插入图片描述
代码如下:


function colorshow(){
	for(var colornum=0;colornum<15;colornum++){
		stroke(255,255,255);
  	    strokeWeight(2);
		if(colornum==0)
			fill(255,182,193);
		if(colornum==1)
			fill(255,20,147);
		...
		rect( 10+30*colornum, 10, 30, 30);
	}
}

这个调色板给出了具体的颜色模版,除此之外,它还有什么用呢?没有任何用,因为它无法进行任何交互。下一步,我们希望这些色块能像按钮一样,点一下就让此刻“画笔”的颜色变为对应的按钮。

function colorselect(){
	drawcolorshow();
	if(mouseIsPres
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值