前言

根据老师的要求，创作一幅介绍自己的作品，可以是具象化地描绘形象，也可以是任何形式表现自己的兴趣、追求、特色、经历等。

由于最近比较喜欢一款FPS游戏，就做了里面的一把枪的模型。另外实现了一些动态效果和交互效果。

原图

编程语言

p5.js，编程环境：p5.js在线编程

实现逻辑

将整个模型分为四个模块：消音器、枪管、连接座、弹夹。

就是简单的图形堆叠，仔细观察原图，使用ellipse(),rect(),triangle()等函数实现功能。具体的看我下面的

消音器

//绘制消音管的函数
function silenceTube(x,y){fill(30)rect(x+60,y+30,180,30)ellipse(x+240,y+45,10,30)ellipse(x+160,y+45,5,32)ellipse(x+80,y+45,5,32)rect(x+50,y+35,10,20)
}

枪管

//绘制枪管的函数
function barrel(x,y){fill(80)rect(x+220,y+25,20,10,2)rect(x+245,y+40,5,10)rect(x+65,y+33,180,28)triangle(x+65,y+28,x+60,y+61,x+65,y+61)rect(x+65,y+31,20,2)triangle(x+65,y+28,x+65,y+31,x+70,y+31)triangle(x+64,y+41,x+62,y+48,x+56,y+42)arc(x+60,y+42,8,8,PI,0)fill(200)rect(x+140,y+33,30,20)
}

连接座

//绘制连接座的函数
function connection(x,y){fill(80)rect(x+105,y+66,139,12)triangle(x+118,y+91,x+114,y+104,x+133,y+104)rect(x+128,y+100,30,4)triangle(x+164,y+79,x+158,y+104,x+164,y+104)triangle(x+164,y+79,x+164,y+104,x+170,y+79)fill(0)rect(x+60,y+61,185,5)rect(x+60,y+66,45,12)triangle(x+60,y+61,x+56,y+78,x+60,y+78)triangle(x+57,y+78,x+71,y+83,x+71,y+78)triangle(x+71,y+78,x+60,y+163,x+71,y+163)rect(x+71,y+78,40,85)triangle(x+111,y+163,x+111,y+78,x+122,y+78)triangle(x+122,y+78,x+135,y+78,x+118,y+91)noFill()arc(x+150,y+85,12,15,-3/2*PI,-1/2*PI)arc(x+151,y+85,12,15,-3/2*PI,-1/2*PI)arc(x+149,y+85,12,15,-3/2*PI,-1/2*PI)
}

弹夹


//绘制弹夹的函数
function pistolClip(x,y){fill(0)triangle(x+86,y+90,x+86,y+158,x+71,y+158)rect(x+86,y+88,20,70)triangle(x+106,y+88,x+106,y+156,x+121,y+88)rect(x+71,y+158,40,5)triangle(x+111,y+158,x+111,y+163,x+116,y+163)
}

模型建好之后，后面是一些动态效果和交互效果的实现。

动态效果包括：背景的变色和子弹的向前发射。
交互效果包括：点击鼠标左键将手枪拆开和按下键盘空格键手枪发射子弹。

- 背景变色：
使用三个变量，r , g , b ，用来作为颜色的值，然后在draw()函数中改变这三个值，达到改变背景颜色的效果。

  background(r,g,b);r +=2;g +=3;b +=1;if(r>255)r=0;if(g>255)g=0;if(b>255)b=0;

- 子弹向前发射：
设置子弹的相对坐标(bulletx,bullety)，通过在函数中增加bulletx的值，达到子弹向前发射的效果，其中子弹的颜色刚好与背景颜色相对。

      bulletx += 30if(bulletx >= 800)bulletx = 490// 下面是子弹构成的代码fill(255-r,255-g,255-b)ellipse(bulletx,bullety,2,6)rect(bulletx,bullety-3,10,6)triangle(bulletx+10,bullety-3,bulletx+10,bullety+3,bulletx+15,bullety)

- 点击鼠标左键将手枪拆开：
使用了p5.js自带的变量mouseIsPressed以及mouseButton，这两个变量都是关于p5.js的鼠标交互事件，具体可以看：p5.js入门教程(4) 鼠标交互
按下鼠标左键之后，手枪拆分成之前说的四个模块，分别置于鼠标当前位置的上下左右，可移动。

  // 鼠标事件if(mouseIsPressed){// 点击鼠标左键if(mouseButton == LEFT){// 绕鼠标点转，半径为100silenceTube(mouseX-150,mouseY-200)barrel(mouseX+50,mouseY-50)connection(mouseX-300,mouseY-100)pistolClip(mouseX-100,mouseY+50)}}

- 按下键盘空格键手枪发射子弹：
使用了p5.js自带的变量keyIsPressed和key，是关于p5.js的键盘交互事件，具体可以看：p5.js入门教程(5) 键盘交互
按下键盘空格键，当前手枪换位置，然后枪口发射子弹，子弹向前发射，参考前面的介绍。

  // 键盘事件if(keyIsPressed){// 按下键盘空格键if(key == ' '){bulletx += 30if(bulletx >= 800)bulletx = 490silenceTube(250,250)barrel(50,250)connection(50,250)pistolClip(50,250)// 下面是子弹构成的代码fill(255-r,255-g,255-b)ellipse(bulletx,bullety,2,6)rect(bulletx,bullety-3,10,6)triangle(bulletx+10,bullety-3,bulletx+10,bullety+3,bulletx+15,bullety)} }

再后面就是关于最后一个元素，图中的文字。

图中的文字分为两个部分，一个是USP消音版，这是这把手枪在游戏中的名字；一个是by 顾清宇，顾清宇是我的艺名，所以我用了顾清宇，毕竟是创作嘛，哈哈！
另外，值得一提的是，字体的颜色总是和背景色相反，这样可以看的清楚一点。

  textSize(32);fill(255-r,255-g,255-b)text('USP消音版', 280, 60);text('____________',275,75)text('by 顾清宇', 600, 550);

效果图

完整代码

p5.js，编程环境：p5.js在线编程

//创意自画像的代码function setup() {createCanvas(800, 600);
}var r=50,g=50,b=50; // 背景颜色的坐标
var bulletx=490, bullety=295; // 子弹的坐标function draw() {background(r,g,b);r +=2;g +=3;b +=1;if(r>255)r=0;if(g>255)g=0;if(b>255)b=0;textSize(32);fill(255-r,255-g,255-b)text('USP消音版', 280, 60);text('____________',275,75)text('by 顾清宇', 600, 550);// 没有鼠标和键盘事件if(!mouseIsPressed && !keyIsPressed){silenceTube(300,100)barrel(100,100)connection(100,100)pistolClip(100,100)}// 鼠标事件if(mouseIsPressed){// 点击鼠标左键if(mouseButton == LEFT){// 绕鼠标点转，半径为100silenceTube(mouseX-150,mouseY-200)barrel(mouseX+50,mouseY-50)connection(mouseX-300,mouseY-100)pistolClip(mouseX-100,mouseY+50)}}// 键盘事件if(keyIsPressed){// 按下键盘空格键if(key == ' '){bulletx += 30if(bulletx >= 800)bulletx = 490silenceTube(250,250)barrel(50,250)connection(50,250)pistolClip(50,250)// 下面是子弹构成的代码fill(255-r,255-g,255-b)ellipse(bulletx,bullety,2,6)rect(bulletx,bullety-3,10,6)triangle(bulletx+10,bullety-3,bulletx+10,bullety+3,bulletx+15,bullety)} }
}//绘制消音管的函数
function silenceTube(x,y){fill(30)rect(x+60,y+30,180,30)ellipse(x+240,y+45,10,30)ellipse(x+160,y+45,5,32)ellipse(x+80,y+45,5,32)rect(x+50,y+35,10,20)
}//绘制枪管的函数
function barrel(x,y){fill(80)rect(x+220,y+25,20,10,2)rect(x+245,y+40,5,10)rect(x+65,y+33,180,28)triangle(x+65,y+28,x+60,y+61,x+65,y+61)rect(x+65,y+31,20,2)triangle(x+65,y+28,x+65,y+31,x+70,y+31)triangle(x+64,y+41,x+62,y+48,x+56,y+42)arc(x+60,y+42,8,8,PI,0)fill(200)rect(x+140,y+33,30,20)
}//绘制连接座的函数
function connection(x,y){fill(80)rect(x+105,y+66,139,12)triangle(x+118,y+91,x+114,y+104,x+133,y+104)rect(x+128,y+100,30,4)triangle(x+164,y+79,x+158,y+104,x+164,y+104)triangle(x+164,y+79,x+164,y+104,x+170,y+79)fill(0)rect(x+60,y+61,185,5)rect(x+60,y+66,45,12)triangle(x+60,y+61,x+56,y+78,x+60,y+78)triangle(x+57,y+78,x+71,y+83,x+71,y+78)triangle(x+71,y+78,x+60,y+163,x+71,y+163)rect(x+71,y+78,40,85)triangle(x+111,y+163,x+111,y+78,x+122,y+78)triangle(x+122,y+78,x+135,y+78,x+118,y+91)noFill()arc(x+150,y+85,12,15,-3/2*PI,-1/2*PI)arc(x+151,y+85,12,15,-3/2*PI,-1/2*PI)arc(x+149,y+85,12,15,-3/2*PI,-1/2*PI)
}//绘制弹夹的函数
function pistolClip(x,y){fill(0)triangle(x+86,y+90,x+86,y+158,x+71,y+158)rect(x+86,y+88,20,70)triangle(x+106,y+88,x+106,y+156,x+121,y+88)rect(x+71,y+158,40,5)triangle(x+111,y+158,x+111,y+163,x+116,y+163)
}

p5.js案例（二）：创意作品——USP消音版手枪模型相关推荐

用P5 JS绘制二维动画场景——静态篇
绘画根据wiki百科的定义,绘画是在技术层面上,是一个以表面作为支撑面,再在其之上加上颜色的行为,那些表面可以是纸张.油画布.木材.玻璃.漆器或混凝土等,加颜色的工具可以是画笔.也可以是刀.海绵或是 ...
运用p5.js实现王一博q版形象
创意编程--卡通自画像设计展示成果创作灵感交互代码生成动态代码所有代码展示成果静态: gif: 创作灵感这次题目是自画像.自己喜欢的事物,所以我选取了自己喜欢的一个q版形象进行模仿.以 ...
P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
【码绘】p5.js画Q版自画像
[码绘]p5.js画Q版自画像来自互动媒体作业的实验二,这次没有采用processing,而选择了p5.js,原因是用p5.js的在线编辑实时浏览比较方便. 先看一下最后的成果吧我的实验过程: 手 ...
初识react(二) 实现一个简版的html+redux.js的demo
回顾初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的html+redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...
p5.js 交互应用实战 —— 音乐可视化(案例)
案例一将振幅转化为图形准备工作:打开编辑器左边菜单,upload mp3音乐素材(不超过5m) //定义变量 //Sound--声音, amplitude--振幅 let Sound, ampli ...
p5.js创意编程——Q版人像绘制
目录主要函数介绍贝塞尔曲线 Shape frameRate 完整代码实现效果主要函数介绍贝塞尔曲线如图,是p5.js官方reference上关于贝塞尔曲线的说明,一次可以画出一条贝塞尔曲线 ...
p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程走过的弯路拓展总结动态图形的规律分析从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
p5.js 光速入门中文教程
本文简介点赞 + 关注 + 收藏 = 学会了本文的目标是和各位工友一起有序的快速上手 p5.js ,会讲解 p5.js 的基础用法. 本文会涉及到的内容包括: 项目搭建 p5.js 基础2D图形 ...

p5.js案例（二）：创意作品——USP消音版手枪模型

文章目录

前言

原图

编程语言

实现逻辑

效果图

完整代码

p5.js案例（二）：创意作品——USP消音版手枪模型相关推荐

最新文章

热门文章