伴随 P5.js 入坑创意编程

上一篇文章：填坑！完结娱乐圈明星关系图谱 发布后，古柳印象里过往留下的坑貌似只剩下 图像检索（一）：因缘际会与前瞻 的后续实践代码（原文里给了参考代码连接）和在豆瓣Top250电影海报上的尝试效果了。

一想到全部坑都被填了（若是还有啥是我不记得的，请千万不要提醒我），就以为真是业界良心，倍感轻松。

因而古柳某日点开 图像检索（一）：因缘际会与前瞻一文，回顾“佳做”之余，也找了下里面清华美院向帆老师的做品集网站 zeelab Projects。

PS：若是你没看过这个演讲，推荐一看，古柳至今难忘：【一席】向帆：若是把每一年的春晚都像蚊香同样卷起来的话，它就是这样的

而在这些做品中，古柳更中意且也想实现下相似网页展现效果的是：AwardPuzzel - zeelab 。下面援引下“官方”介绍，建议去网页体验一下：

AwardPuzzel 是一个全国美展油画类获奖画做的数据视觉化做品，收录了美展第六届至第十二届的2276幅获奖做品，经过动态交互的方式呈现了中国油画30年间的艺术历程、形态、色彩、尺寸和地区之间的变化和关系以及中国油画大师们的艺术思路。
本做品能够被看成研究工具为研究者和评论家使用，亦可做艺术做品欣赏。
咱们但愿经过这个平台分享咱们的视角，也但愿使用者经过本身的浏览和观察获得本身的结论。
全国美展是中国美术界最重要事件，每五年举办一次，第六届是1984年举办，第十二届为2014年举办。

虽然古柳不怎么会前端，但自从接触爬虫以来，右键“审查元素”，查看网页源代码的习惯仍是有的。

因而不看不知道，一看又引出了后续的诸多故事，借用书上的一句话：“那日也是合该有事”，且听古柳慢慢道来……

点开网页源代码后，找到数据展现和交互的区域对应的代码天然是不难的。这里为了展现方便，特意丢到 Carbon 里，重点突出下这段代码。

能够看到 HTML 里主要用了 canvas 标签，这也没什么，古柳反正不懂 canvas，睁眼瞎罢了，也看不出什么名堂。可是却发现标签里的 data-processing-soucres 属性对应的 .pde 文件，特别不同凡响，“闻所未闻，见所未见”，而且想起当初也曾各类搜罗，希冀能复现向帆老师的春晚或美展油画项目，虽不了了之，但对 processing 这一能实现各类艺术创意的编程语言有了印象。

因而谷歌了下 “HTML+Canvas+Processing” 等关键词，意外地发现：基于 Java 的 Processing 语言的家谱中，还有对应 JavaScript 和 Python 版本，前者即：P5.js，而这不由使古柳看到了能在网页中复现上述效果的但愿。

提及来，以前古柳压根一丁点都没据说过 P5.js，搜了下对应的中文资料也不算多，更偏心看视频学习的我，看到万能的B站上有人搬运了油管上Daniel Shiffman 的教学视频（1-12节），因而立马刷了下，p5.js 基础教程 1-7，并所有跟着敲了遍代码，虽然无字幕，但还蛮好啃的，有不少针对初学编程的知识讲解。（原始连接：Code! Programming with p5.js - YouTube）

习得新技能后，立马用明星关系图谱的图片简单粗暴的拼了下照片墙，虽然离美展油画的效果差了十万八千里，但也算是卖出了第一步。

其实之前就没少拼照片墙，想来你们也都见过爬取微信好友而后拼图的文章，但古柳仍是安利下这篇旧文，里面的图片绝对值得一看（若是你看完以为也不咋地，那……也就随它去吧）：Python PIL库实现的照片墙成果图分享。

再就是几天前，看到 @爱可可-爱生活 老师的这则微博：Processing 创做的生成艺术 via:おかず​，配图漂亮就不说了，重点是带着 Processing 关键词，因而就埋下了想用 P5.js 实现一波的念头。

幸运地找到了做品的出处：Generative Art #146 via:おかず，欣喜地发现附有 Processing 实现代码，并且该系列有更多不错的做品，遂萌发了想将其全部做品用 P5.js 实现一波并开源的想法。

固然由于目前 P5.js 不够熟练，JavaScript / ES6 之类也只是入门，不免有所担忧和顾虑。但在复现这个做品时发现 Processing 和 P5.js 真的很像，不少函数接口官方设计成统一的，极大下降了门槛。

上图就是古柳用 P5.js 复现的效果，虽然还有些小问题，代码也不必定最规范，但先行分享，后续再优化哈！可在此网址体验做品生成效果：editor.p5js.org/DesertsX/sk…

欢迎关注，“牛衣古柳”哈！

let particles;
const n = 120;

function setup() {
  createCanvas(900, 900);
  // pixelDensity(2);
  colorMode(HSB, 360, 100, 100, 100);
  rectMode(CENTER);
  newParticles();
}

function draw() {
  for (let i in particles) {
    let p = particles[i];
    p.run();
    if (p.isDead()) {
      particles.splice(i, 1);
    }
  }
}

function forms() {
  for (let j = 0; j < n; j++) {
    let x = random(width), y = random(height);
    let s = random(20, 100);
    let hs = s / 2;
    let c = getCol();
    noStroke();
    fill(c);
    if (random(1) > 0.5) {
      for (let i = -s / 2; i < s / 2; i++) {
        particles.push(new Particle(x + i, y - hs, c));
        particles.push(new Particle(x + i, y + hs, c));
        particles.push(new Particle(x - hs, y + i, c));
        particles.push(new Particle(x + hs, y + i, c));
      }
      square(x, y, s);
    } else {
      for (let a = 0; a < TAU; a += TAU / 360) {
        particles.push(new Particle(x + hs * cos(a), y + hs * sin(a), c));
      }
      circle(x, y, s);
    }
  }
}
function newParticles() {
  // particles = new ArrayList<Particle>();
  particles = new Array();
  background("#FCFCF0");
  forms();
  noiseSeed(parseInt(random(100000)));
}
// function mousePressed() {
// newParticles();
// }
function keyPressed() {
  // 还没生效
  if (keyCode === 's') {
    saveFrame("123.png");
  }
}
function getCol() {
  let colors = ["#e4572e", "#29335c", "#f3a712", "#a8c686", "#669bbc", "#efc2f0"];
  //let colors = ["#880D1E", "#DD2D4A", "#F26A8D", "#F49CBB", "#CBEEF3"];
  let idx = parseInt(random(colors.length));
  // console.log(idx + colors[idx]);
  return colors[idx];
}
class Particle {
  constructor(x, y, col) {
    this.pos = createVector(x, y);
    this.step = 1;
    this.angle = random(10);
    this.lifeSpan = 100;
    this.noiseScale = 800;
    this.noiseStrength = 90;
    this.col = col;
  }
  show() {
    noStroke();
    // fill(this.col, this.lifeSpan);
    fill(this.col);
    circle(this.pos.x, this.pos.y, 0.5);
  }
  move() {
    this.angle = noise(this.pos.x / this.noiseScale, this.pos.y / this.noiseScale) * this.noiseStrength;
    this.pos.x += cos(this.angle) * this.step;
    this.pos.y += sin(this.angle) * this.step;
    this.lifeSpan -= 0.1;
  }

  isDead() {
    return (this.lifeSpan < 0.0)
  }
  run() {
    this.show();
    this.move();
  }
}复制代码