p5.js 临摹作品“随鼠标转动的三角形”及自主作品“太阳花”

太阳花（自己的作品）

最近正在上互动媒体技术这门课，应作业要求用p5.js画了简笔画，好吧，不是很好看，但是在这个过程中，我还是学到了很多。
课上，我们看过一些影片，记忆最深刻的就是关于达芬奇的，他因为画作而出名，但是鲜少有人知道，他在建筑学，医学，光学等领域也有很深的造诣，并且这些知识在他的画作中也有体现，多领域知识的融合更是促进了他在画作上的造诣，作为一名数字媒体技术系的学生觉得应该要向他学习，将技术与艺术融合起来(好吧，其实也有一点私心，作为王一博的mtjj，觉得太阳花很不错，嘿嘿嘿)。

效果图

好吧，这个太阳花是真的不太好看，但是在做的过程中，我还是很快乐的（追星女孩的快乐日常），需要说明的是，因为CSDN上传只能是5M一下，所以看起来不是很流畅，但是代码运行起来的还是很流畅的。

对于程序员来说，我觉得没什么比源代码看得更清楚的了（一些注解都在里面）

///
var s =18,
    m = 15;
    function setup() {
    createCanvas(600, 600);
}
function draw() {
    background(150,250,200);
    translate(width / 2, height / 2);//让图像生成在中心
    for (var i = 0; i < 360; i += m) {  
      push(); 
      stroke(255);
      beginShape();//开始生成自由图像
      rotate(degrees(i));//生成多个花瓣
        for (var j = 0; j <= m; j += 0.3) {
            var line1 = sin(radians(j *8 + 60)) * (5 + sin(radians(j * 9)) * (j * 4));  
          vertex( cos(5+ j * s ) + line1, 0.8*(7+ j * s) );
        }  
        for (var k = m; k >= 0; k -= 0.3) {    
            var line2 = sin(radians(k * 8 + 60)) * (5 + sin(radians(k * 9)) * (k * 4));
          vertex( cos(5 + k * s) - line2, 0.8*(7+ k * s) );
        }
      //上述两个循环为画花瓣的循环，好吧，其实没什么技术含量，是自己慢慢试出来的
        fill("gold");
        strokeWeight(2);//设置边框宽度为2
        rotate(frameCount*0.005);frameCount是程序运行生命周期中draw函数执行的次数，frameRate是draw函数在一秒中执行的次数，这里让所有花瓣都旋转起来
        endShape(CLOSE);
        pop();  
    } 
  push(); 
  drawSmile();
  pop();
}

function drawSmile()//画笑脸
{
  beginShape();
  stroke("gold"); 
  strokeWeight(2);
  ellipse(cos(5),5,70,70);
  fill(177,177,177);
  ellipse(cos(5)-15,-10,10,15);
  ellipse(cos(5)+15,-10,10,15);
  ellipse(cos(5),+15,25,10); 
  rotate(frameCount*0.005);
  endShape(CLOSE);
}

注意
代码中我运用了push()和pop()函数将笑脸和花瓣隔开，为什么呢，如果不隔开的话就会出现下面这种情况(临摹的作品也用了同样的方法处理)，只出现一个笑脸，因为别的都被覆盖啦，p5.js前面的语句会覆盖后面的相同语句（只是参数不同），所以为了应对这个，我用了pop()和push()两个函数，将画花瓣和笑脸的代码段区分开来，这样大家就都不互相影响啦！

跟随鼠标运动的三角形（临摹的作品）

老师要求效果

临摹效果

可以很明显的发现。。。。我的和老师的是相反的我也很忧伤，目前还没想到要怎么修改，有看出来的朋友请联系我！

规律

1.整个画面是由多个半圆弧组成（认真看会发现不是三角形）
2.所有三角形随着鼠标的移动而转动，是所有半圆弧都跟着动，并且每个半圆弧转的角度都是不一样的

实现步骤

1.首先生成一个圆弧，利用translate函数生成多个另外的圆弧
translate(x , y );
2.在生成圆弧之前，必须先找到每个圆弧的横纵坐标，但是因为每个位置都不是一样的所以我们借助两个循环函数来找到不同位置的圆弧的坐标
var x = i * distance;//每个三角形的横坐标
var y = j * distance;//每个三角形的纵坐标
3.找到了坐标，计算旋转角度，利用atan2()函数算出角度
4.生成整个画面

源代码

源代码含解释

/

var rows = 0,
    cols = 0,
    distance= 30;//每个小三角形间隔30
function setup() {
    createCanvas(windowWidth/2, windowHeight /2);
    rows =width / distance;
    cols = height / distance;
   noStroke();//不描边
}
function draw() {
    background(0);
   beginShape();//开始绘制自由图形
    for (var i = 0; i <= rows; i++) {
        for (var j = 0; j <=cols; j++) {
            var x = i * distance;//每个三角形的横坐标
            var y = j  * distance;//每个三角形的纵坐标
            var dx = mouseX - x；
            var dy = mouseY - y;
            var r = atan2(dy, dx);//计算斜率，正切
            push();
            translate(x , y );//生成多个半圆弧，大家仔细看，这不是三角形
            rotate(r);//旋转角度
            push();
            fill(255,200,100);
            arc(0, 0, 35, 35, 0, 0.8);
            pop();
            push();
            fill(250,100,0);
            arc(0,0,25,25,0,0.8);
            pop();
            push();
            fill(255);
            arc(0,0,12,12,0,0.8);
            pop();
            pop();
        }
    }
      endShape(CLOSE);
}

关于atan2(）函数的解析：https://blog.csdn.net/kezunhai/article/details/50161711

拓展

添加旋转角度使得此图在没有鼠标的时候自己也能转动

效果

源代码

var rows = 0,
    cols = 0,
    distance= 30;//每个小三角形间隔30
var theta=0;
function setup() {
    createCanvas(windowWidth/2, windowHeight /2);
    rows =width / distance;
    cols = height / distance;
   noStroke();//不描边
}
function draw() {
    background(0);
   beginShape();//开始绘制自由图形
    for (var i = 0; i <= rows; i++) {
        for (var j = 0; j <=cols; j++) {
            var x = i * distance;//每个三角形的横坐标
            var y = j  * distance;//每个三角形的纵坐标
            var dx = mouseX - x;
            var dy = mouseY - y;
            var r = atan2(dy, dx);//计算斜率，正切
            push();
            translate(x , y );//生成多个半圆弧，大家仔细看，这不是三角形
            rotate(r+theta);//旋转角度
            push();
            fill(255,200,100);
            arc(0, 0, 35, 35, 0, 0.8);
            pop();
            push();
            fill(250,100,0);
            arc(0,0,25,25,0,0.8);
            pop();
            push();
            fill(255);
            arc(0,0,12,12,0,0.8);
            pop();
            pop();
        }
    }
  theta+=0.02;
      endShape(CLOSE);
}

最后的话

p5.js真的很有意思，语句比C/JAVA/C++等语言简单太多了，有太多的封装函数可以直接调用，并且数据类型定义也不用具体指出来，这也算是数据可视化吧。我下次一定早点写完作业！！！熬夜太让人伤心了！！
小白一枚，希望大家不要嫌弃
好了，最后我真的想放一张美照（啊啊啊啊啊，王一博好好看啊！）