基于P5.js的创意交互自画像（状态切换实现变身效果）

最新推荐文章于 2020-05-21 00:53:03 发布
最新推荐文章于 2020-05-21 00:53:03 发布
阅读量895 收藏 5
点赞数
文章标签： p5.js 码绘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43444903/article/details/102888367
版权

创意交互GIF图展示

在这里插入图片描述

交互功能与相应代码介绍

①运行程序后是一只狐狸，此时的交互为鼠标位置的改变会改变狐狸尾巴的位置 每个狐狸尾巴的颜色也会做相位不同的周期性变换，相应的代码如下：

//尾巴
      push();
        fill(color(254,60+60*sin(theta),2,255/colorRate));
        translate(70,10);
        rotate( PI/15+0.5*sin(mouseX/100));
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/6),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/3),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        scale(0.9);
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/2),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        scale(0.9);
        triangle(0, 0, 90, -150, 230, -175);
      pop();

②当单机鼠标左键的时候进入下一个状态,即“影分身”状态：
此时先前的狐狸图像消失，取而代之的是四个alpha值变为原来四分之一的狐狸分身，并做向外部四个方向散发的周期性运动，一共循环运动三次，代码如下：

  if(boolState==1){
  drawBg(theta);
  background(0);
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(-200*sin(theta)), Math.ceil(-200*sin(theta)));
  drawFox(4); 
  pop();
  
  push();
  translate(Math.ceil(200*sin(theta)), Math.ceil(200*sin(theta)));
  //rotate(theta);
  drawFox(4); 
  pop();
    
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(-200*sin(theta)), Math.ceil(200*sin(theta)));
  //rotate(theta);
  drawFox(4);   
  pop();
    
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(200*sin(theta)), Math.ceil(-200*sin(theta)));
  //rotate(theta);
  drawFox(4);   
  pop();
  if(theta<6*HALF_PI){theta=theta+0.15;}
  if(theta>=6*HALF_PI){drawMan(1);  
  theta=theta+0.15;
                      }
  }

③“影分身”状态结束之后进入变身后的形象，变为“神祗”，“神祗”的“太阳背景”做交替性闪烁，身后的由大到小的“九个尾巴”做周期性的加速减速运动，产生华丽的效果。代码如下：

translate(300,300);
    //画背景九尾狐
    strokeWeight(0);
    push();
    for(let i=0;i<30;i++){
    fill(color(254,60+60*sin(theta+PI/2*i),0,120));
//fill(color(254,60+60*sin(theta+PI/6),2,255/colorRate));
    
    translate(0,0);
    rotate( PI/(4+4*sin(theta/10)));
    
    scale(1.08);
    beginShape();
    vertex(0,0);
    bezierVertex(-10,-40,-30,20,-40,-40);
    bezierVertex(-30,40,-10,30,0,0);
    endShape();}

④此时在次点击鼠标左键，画面由“神祗‘再次变为最初的狐狸。

注意事项

创造闭合贝塞尔曲线图形的代码格式基本格式如下：

    beginShape();
    vertex(80,-180);
    bezierVertex(-340,0,-60,180,160,-80);
    bezierVertex(-60,65,-240,0,80,-180);
    endShape();

如果想要加更多的点，可以多加一句bezeirVertex：

    //眉心
    strokeWeight(1);
    fill(color(255,0,0,255/colorRate));
    beginShape();
    vertex(20,-100);
    bezierVertex(-100,-40,-40,20,40,-60);
    bezierVertex(-30,-20,-50,-30,20,-80);
    bezierVertex(-30,-40,-60,-50,20,-100);
    endShape();

然后下面的代码可以先确定要旋转的中心，然后进行旋转缩放，每重复一次，旋转缩放一次；

    translate(0,0);
    rotate( PI/(4+4*sin(theta/10)));
    scale(1.08);

切身感受

本次实验的的自由度很高，进行自由的艺术创作感觉也很棒，除了在贝塞尔曲线上面有点费劲，画点有点费劲，其他还好

源代码

let theta;
let boolState;
let colorRate;
function setup() {
  createCanvas(600, 600);
  theta=0;
  boolState=0;
  colorRate=1;
}

function draw() {
  //noStroke();
  if(boolState==0){
  background(0);
  //画狐狸主体
  drawFox(1);
  //drawMan(1);
  theta=theta+0.1;
  }
  if(boolState==1){
  drawBg(theta);
  background(0);
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(-200*sin(theta)), Math.ceil(-200*sin(theta)));
  drawFox(4); 
  pop();
  
  push();
  translate(Math.ceil(200*sin(theta)), Math.ceil(200*sin(theta)));
  //rotate(theta);
  drawFox(4); 
  pop();
    
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(-200*sin(theta)), Math.ceil(200*sin(theta)));
  //rotate(theta);
  drawFox(4);   
  pop();
    
  push();
  fill(color(200,200,200,255/5));
  translate(Math.ceil(200*sin(theta)), Math.ceil(-200*sin(theta)));
  //rotate(theta);
  drawFox(4);   
  pop();
  if(theta<6*HALF_PI){theta=theta+0.15;}
  if(theta>=6*HALF_PI){drawMan(1);  
  theta=theta+0.15;
                      }
  }
}


function drawBg(theta){
  let c=color(5*mouseX*cos(theta*2)/length,255*mouseY*sin(theta*3)/width,510*sin(theta*20)*mouseX/length,255*mouseY*cos(theta*2)/width); 
  background(c);
}

function mouseClicked()
{
  if(boolState==0){
    boolState=1;
    theta=0;
  }
  else if(boolState==1){
    boolState=0;
    theta=0;
  }
}


function drawMan(colorRate)
{
   push();
    translate(300,300);
    //画背景九尾狐
    strokeWeight(0);
    push();
    for(let i=0;i<30;i++){
    fill(color(254,60+60*sin(theta+PI/2*i),0,120));
//fill(color(254,60+60*sin(theta+PI/6),2,255/colorRate));
    
    translate(0,0);
    rotate( PI/(4+4*sin(theta/10)));
    
    scale(1.08);
    beginShape();
    vertex(0,0);
    bezierVertex(-10,-40,-30,20,-40,-40);
    bezierVertex(-30,40,-10,30,0,0);
    endShape();}
    pop();
  
  
    //画黑圆圈
    fill(255*sin(theta),0,0,255/colorRate);
    
    circle(0,0,300);
    
    //轮廓
    noFill();
    strokeWeight(3);
    stroke(color(255,0,0,255/colorRate));
    line(-100,20,-92,55);
    line(-92,55,-85,60);
    line(-85,60,-95,107);
    bezier(-95,107,-90,110,-80,110,-70,107);
    line(-70,107,-65,115);
    line(-65,115,-60,113);
    line(-60,113,-63,116);
    bezier(-63,116,-65,116,-55,130,-45,136);
    bezier(-45,136,-25,140,50,100,40,50);
    bezier(40,50,50,20,60,20,70,10);
    bezier(70,10,80,0,90,-50,110,-80);
    bezier(110,-80,80,-50,60,-80,0,20);
    bezier(110,-80,80,-50,60,-80,0,20);
    //填充 
    
    //眼睛
    strokeWeight(1);
    fill(color(255,0,0,255/colorRate));
    beginShape();
    vertex(-65,65);
    bezierVertex(-60,80,-50,80,-20,50);
    bezierVertex(-40,70,-60,65,-65,65);
    endShape();
  
    //头环
    strokeWeight(1);
    fill(color(255,0,0,255/colorRate));
    beginShape();
    vertex(80,-180);
    bezierVertex(-340,0,-60,180,160,-80);
    bezierVertex(-60,65,-240,0,80,-180);
    endShape();
    
    //眉心
    strokeWeight(1);
    fill(color(255,0,0,255/colorRate));
    beginShape();
    vertex(20,-100);
    bezierVertex(-100,-40,-40,20,40,-60);
    bezierVertex(-30,-20,-50,-30,20,-80);
    bezierVertex(-30,-40,-60,-50,20,-100);
    endShape();

  pop();
}

function drawFox(colorRate)
{
   push();
    translate(300,300);
    push();
    fill(color(255,0,0,255/colorRate));
    //脚趾头
    noStroke();
    triangle(-90,80,-110,110,-90,110);
    triangle(50,80,30,110,50,110);

    fill(color(254,60,2,255/colorRate));
    ellipse(-90,50,40,100);//腿
    ellipse(50,50,40,100);//腿
    //尾巴
      push();
        fill(color(254,60+60*sin(theta),2,255/colorRate));
        translate(70,10);
        rotate( PI/15+0.5*sin(mouseX/100));
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/6),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/3),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        scale(0.9);
        triangle(0, 0, 90, -150, 230, -175);
  
        fill(color(254,60+60*sin(theta+PI/2),2,255/colorRate));
        rotate( PI/15+0.5*sin(mouseX/100));
        scale(0.9);
        triangle(0, 0, 90, -150, 230, -175);
      pop();
    fill(color(254,100,2,255/colorRate));
    ellipse(-10,30,180,80);//躯干
    triangle(-70,80,-90,110,-70,110);
    triangle(70,80,50,110,70,110);
    fill(color(254,85,2,255/colorRate));
    ellipse(-70,50,40,100);//腿
    ellipse(70,50,40,100);//腿
    //头
    push();
    noStroke();
    //translate(0,0);
    //rotate( PI/15+0.5*sin(mouseX/100));
    fill(color(254,100,2,255/colorRate));
    beginShape();
    vertex(-40, -100);
    vertex(-50, -100);
    vertex(-60, -140);
    vertex(-80, -120);
    vertex(-90, -100);
    vertex(-110, -90);
    vertex(-140, -60);
    vertex(-120, -60);
    vertex(-130, -50);
    vertex(-120, -54);
    vertex(-120, 0);//鼻子
    vertex(-70, 0);
    vertex(-70, 10);
    vertex(-60, 0);
    vertex(-60, 20);
    vertex(-40, 00);
    vertex(-30, -10);
    vertex(-20, -30);
    vertex(0, -40);
    vertex(20, -60);
    vertex(-20, -70);
    vertex(-20, -80);
    endShape(CLOSE);
  
    fill(color(255,0,0,255/colorRate));//红色眉心
    beginShape();
    vertex(-60, -80);
    vertex(-60, -60);
    vertex(-40, -60);
    vertex(-47, -67);
    vertex(-40, -80);
    vertex(-54, -74);
    endShape(CLOSE);
  
    fill(color(255,0,0,255/colorRate));//红色左眼
    beginShape();
    vertex(-94, -80);
    vertex(-100, -60);
    vertex(-90, -50);
    endShape(CLOSE);
  
    fill(color(255,0,0,255/colorRate));//红色右眼
    beginShape();
    vertex(-40, -27);
    vertex(-60, -20);
    vertex(-70, -30);
    endShape(CLOSE);
    
    fill(color(255,0,0,255/colorRate));//红色眉
    beginShape();
    vertex(-80, -90);
    vertex(-87, -40);
    vertex(-120, -10);
    vertex(-110, 0);
    vertex(-80, -34);
    vertex(-30, -40);
    vertex(-74, -47);
    endShape(CLOSE);
  
    fill(color(255,0,0,255/colorRate));//红鼻子
    circle(-120,0,20);
    pop();
  
    pop();
  
  
  //rotate(theta); 
  pop();
}
Alexailin
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
p5.js绘制简单人物+交互
qq_44057258的博客
10-27 2985
人物简单交互成图预览图片使用工具基本图形的绘制重要函数直线圆弧贝塞尔曲线代码实现添加动态图形引入时间参数动态画圆函数实现简单交互眼睛跟随鼠标移动点击眨眼源代码 成图预览 图片 使用工具 p5.js在线编辑网址 基本图形的绘制 重要函数 查p5.js文档得： 直线 //语法 line(x1, y1, x2, y2) line(x1, y1, z1, x2, y2, z2) 参数 x1 Numb...
动画&交互&P5.js
Yangjin121的博客
04-29 1039
一、背景 编程语言：p5.js，p5.js是JavaScript的程式库，它起源于processing的原旨。 p5.j​​s 看起来与 Processing 非常相似，但有一些变化： 因为 size() 已经被 createCanvas() 代替，所以我们的草图不仅仅是画布，还能创建其他元素。 frameRate(num) 设置帧速率，但该 frameRate 变量已被删除。要获取当前帧...
p5.js+创意编程-自画像
here_0199的博客
11-04 1196
绘制自画像 确定样式 网格值对于确定图案的坐标点有很大作用，初步在网格纸上手绘自画Q版人物，只进行轮廓的勾画和变形，对于一些细节不进行处理。 编程实现 主要使用的方法： beginShape(); vertex(30, 20); bezierVertex(80, 0, 80, 75, 30, 75); bezierVertex(50, 80, 60, 25, 30, 20); en...
一个基于p5.js的绘画系统
wangyouxu24的博客
12-30 6574
一个基于p5.js的绘画系统 一、实现效果 这个绘画系统具有一般绘画系统的特点，作画者可以通过选择不同的笔刷模仿毛笔笔触，达到水墨画的效果。另外，它还具有一定的动态性，作画者可以看到画上去的东西并不像一般绘画系统静止不动，画面能随着鼠标的位移或时间的变化遵循一定规律变动。 1）动态效果 2）静态效果 二、代码实现 1）静态笔刷 对于第一种效果，作画者可自定义笔刷大小和形状，其笔刷实质...
用P5 JS绘制动态绚丽烟花——动态篇
qq_40427180的博客
11-23 4219
整个自然界，从最小的东西到最大的东西，从沙粒到太阳，从原生生物到人，都处于永恒的产生和消灭中，处于不断的流动中，处于无休止的运动和变化中。–〔德〕恩格斯：《自然辩证法·导言》 世界处于永恒的运动之中。万物皆在不停顿地运动。–〔法〕蒙田：《散文集》 ...
p5.js绘制创意自画像
10-16
【p5.js绘制创意自画像】是一篇关于使用p5.js库进行创意图像绘制的文章，主要讲解如何利用这个JavaScript库创建一个动态的自画像。p5.js是一个强大的工具，它使得编程与艺术创作相结合变得更加简单。 文章通过一个...
基于 P5.js 的交互式人物换装小项目
01-06
**基于 P5.js 的交互式人物换装小项目** P5.js 是一个强大的 JavaScript 库，专为网页上的艺术、教育、研究等领域的交互式图形设计而开发。它简化了WebGL和HTML5 Canvas API的使用，使得创建复杂的视觉效果和交互...
p5.js实现的点彩画法动画蒙娜丽莎画像效果源码.zip
最新发布
11-19
p5.js是一个开源的JavaScript库，它提供了一套简洁易用的API，使得创建交互式图形、动画和声音变得更加简单。通过p5.js，开发者可以将编程与艺术创作相结合，实现各种创新的视觉效果。 在"132677959911066707"这个...
CodeSelfPortrait：使用p5.js的自画像代码
02-09
P5.js是一个基于JavaScript的开源编程库，它使得艺术家、设计师、教育者和初学者能够轻松地进行创意编码。这个库借鉴了Processing语言的概念，提供了一个简洁、直观的语法来创作交互式图形、动画和声音作品。在...
使用p5.js画一幅简单的风车动态效果图
aasdf245的博客
11-12 6985
使用p5.js画一幅简单的动态风车图 因为大三互动媒体技术课程需要使用p5.js画图显示动态效果，并和自己手绘作品进行对比，查了查网上好像没有做风车相关的教程，就在这里简单介绍下吧。 工具 js编辑器(我用的是visual studio code2017)和p5.js库，具体下载和配置步骤这里就不讲了。不清楚的朋友可以参考下这篇博客: p5.js入门教程. 一.做一个简单的静态风车 画个风车很简...
js手动自动切换图片
12-17
js轮换图片，横向的自动手动切换图片，详细请下载
p5.js临摹动态图形的方法
12-13
本文实例为大家分享了p5.js临摹动态图形的具体代码，供大家参考，具体内容如下 一、描述所临摹图像的规律 1、图像由多个闪光圆点和圆点之间的连线组成 2、圆点的运动轨迹是随机的 3、圆点之间靠近时会产生连线，并且相互靠近的圆点会颜色加深 二、代码实现 圆点之间产生连线，随机生成线条和运动轨迹： //随机生成s.n条线位置信息 for (var t = [], p = 0; s.n > p; p++) { var h = random() * r, //随机位置 g = random() * n, q = 2 * random() - 1, //随机运动方向 d = 2
generative-processing:使用P5.js生成艺术草图
04-29
项目结构 该存储库既是生成艺术品的集合，又是显示其中一些艺术品的网站。 大部分工作可以在sketches/目录中找到。 有些草图已发布在Instagram上，另一些草图仍缺少某些je ne sais quoi ，而有些只是简直是愚蠢的东西。 我认为值得的草图将添加到data.js ，然后将其映射到托管在GitHub Pages上的上。 index.html提供了项目的入口点，底部的script标签确定了将要查看的草图。 talk/文件夹是我于2020年9月为Bekk进行的一次简短演讲的代码演练的一部分。该演讲可以在挪威语中。 演讲对生成艺术进行了粗略的介绍，然后再过渡到从头开始重新构建我的旧草图之一。 article/文件夹是我为撰写的文章的一部分，特别是2020年JavaScript出现日历。该文章可在以英语阅读。 本文的概念是逐步讲解有趣的“是的，浏览器正在下雪”，而不是着眼于生
p5.gibber.js:用于p5.js的音乐和音频编程
05-28
p5.gibber.js 用于p5.js的音乐和音频编程。 这是的薄包装，可轻松进行音乐排序和音频信号处理。 ##用法该库位于dist文件夹中。 在p5草图中使用它： 包含p5.js 包括p5.gibber.js 包括您的sketch.js文件 包含的示例目录中有许多示例。 ##使用鼓样本Gibber将查找一个名为“ resources”的文件夹，该文件夹与index.html和sketch.js文件位于同一目录中。 在此文件夹中，您应放置任何想要使用的音频样本或Gibber鼓样本。 因此，使用标准Gibber Drums对象的示例目录可能如下所示： yourProjectDirectory > resources > audiofiles > electronic kick.wav hat.wav
p5.Fresco:用于p5.js的Fresco是用于生成程序艺术的工具的集合。 它主要关注于在p5.js中处理2D形状，粒子系统，噪声和物理
05-13
p5壁画 p5.Fresco的p5.Fresco是程序艺术生成工具的集合。 在p5.js中，它主要致力于处理2D形状，粒子系统，噪声和物理。 完整的文档可以在找到 产生 该文档是使用生成的。 通过运行gen_docs.sh或使用来构建文档 jsdoc -r ./js -R README.md -d ./docs 您可以找到自己的作品的模板。 波纹管是利用Fresco.p5和本机p5.js API创建的所有部分的集合。 递归是程序艺术的一个非常强大的工具。 它允许从很少的一组规则中获得接缝复杂的结果。 例如，这种循环递归树就是这种情况。 每个分支都会生出一系列分支，每个分支都会生出一系列分支，依此类推。 当需要绘制时间时，将计算分支的权重，从而将其在画布中所占的空间计算为所有子分支的总和。 对根分支的最大允许角度和每个分支的大小进行动画处理，我们得到了这个Kong雀，试图吸引观众。 我们
互动媒体技术——基于p5.js实现创意动态交互自画像：走进奇妙的歌手音乐世界！
小明明明很开心
10-30 1905
互动媒体技术——基于p5.js实现创意动态交互自画像：走进奇妙的歌手音乐世界！
P5.js 实现交互式动态绘画
bear_Tower的博客
12-30 7845
p5.js 实现交互式动态绘画1.关于交互式绘画的思考2.选定题目3.内容展示4.代码分析(1).按钮的实现(2).笔刷（画笔）(3).动作5.总结6.参考文献 1.关于交互式绘画的思考 在前几次的实验中，我们先后完成了静态码绘和动态码绘，对计算机码绘已经有了基本的了解。 在之前的文章中我也有提到过： 一副有趣的码绘需要更多理性的思考，想要实现一个有趣且内容丰富的码绘需要一定的代码经验和创造力。 ...
p5.js 交互应用实战 —— 音乐可视化(案例)
拾一_M的博客
05-21 6196
案例一 将振幅转化为图形 准备工作：打开编辑器左边菜单，upload mp3音乐素材（不超过5m） //定义变量 //Sound–声音, amplitude–振幅 let Sound, amplitude; //1.预读器（新建函数用来读取上传的音频） function preload(){ Sound = loadSound(‘sound.mp3’); } //2.初始化 function setup(){ createCanvas(400,400); amplitude = new p5.Amplit
【p5.js学习笔记】鼠标交互事件
春雪阁
10-12 1337
p5.js入门教程：创意编程之旅
p5.js是一个基于JavaScript的创意编程库，旨在让编程变得更加用户友好，特别适合艺术家、设计师、教育工作者以及编程初学者使用。这个开源项目强调包容性，鼓励所有人利用它进行自由创作和学习。p5.js的核心理念是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值