上一篇文章：填坑！完结娱乐圈明星关系图谱 发布后，古柳印象里过往留下的坑貌似只剩下 图像检索（一）：因缘际会与前瞻 的后续实践代码（原文里给了参考代码链接）和在豆瓣Top250电影海报上的尝试效果了。
![]()
一想到所有坑都被填了（如果还有啥是我不记得的，请千万不要提醒我），就觉得真是业界良心，倍感轻松。
于是古柳某日点开 图像检索（一）：因缘际会与前瞻 一文，回顾“佳作”之余，也找了下里面清华美院向帆老师的作品集网站 zeelab Projects。
PS：如果你没看过这个演讲，推荐一看，古柳至今难忘：【一席】向帆：如果把每年的春晚都像蚊香一样卷起来的话，它就是这样的
[iframe]https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_874687679080857600[/iframe]
![]()
而在这些作品中，古柳更中意且也想实现下类似网页展示效果的是：AwardPuzzel - zeelab 。下面援引下“官方”介绍，建议去网页体验一下：AwardPuzzel 是一个全国美展油画类获奖画作的数据视觉化作品，收录了美展第六届至第十二届的2276幅获奖作品，通过动态交互的方式呈现了中国油画30年间的艺术历程、形态、色彩、尺寸和地区之间的变化和关系以及中国油画大师们的艺术思路。
本作品可以被当作研究工具为研究者和评论家使用，亦可作艺术作品欣赏。
我们希望通过这个平台分享我们的视角，也希望使用者通过自己的浏览和观察得到自己的结论。
全国美展是中国美术界最重要事件，每五年举办一次，第六届是1984年举办，第十二届为2014年举办。 ![]()
虽然古柳不怎么会前端，但自从接触爬虫以来，右键“审查元素”，查看网页源代码的习惯还是有的。
于是不看不知道，一看又引出了后续的诸多故事，借用书上的一句话：“那日也是合该有事”，且听古柳慢慢道来……
![]()
点开网页源代码后，找到数据展示和交互的区域对应的代码自然是不难的。这里为了展示方便，特地丢到Carbon 里，重点突出下这段代码。
可以看到里主要用了标签，这也没什么，古柳反正不懂，睁眼瞎罢了，也看不出什么名堂。但是却发现标签里的属性对应的文件，特别与众不同，“闻所未闻，见所未见”，并且想起当初也曾各种搜罗，希冀能复现向帆老师的春晚或美展油画项目，虽不了了之，但对这一能实现各种艺术创意的编程语言有了印象。
![]()
于是谷歌了下等关键词，意外地发现：基于的语言的家谱中，还有对应和版本，前者即：，而这不禁使古柳看到了能在网页中复现上述效果的希望。
![]()
说起来，之前古柳压根一丁点都没听说过，搜了下对应的中文资料也不算多，更偏爱看视频学习的我，看到万能的B站上有人搬运了油管上的教学视频（1-12节），于是立马刷了下，p5.js 基础教程 1-7，并全部跟着敲了遍代码，虽然无字幕，但还蛮好啃的，有很多针对初学编程的知识讲解。（原始链接：Code! Programming with p5.js - YouTube）
![]()
习得新技能后，立马用明星关系图谱的图片简单粗暴的拼了下照片墙，虽然离美展油画的效果差了十万八千里，但也算是卖出了第一步。
![]()
![]()
其实以前就没少拼照片墙，想来大家也都见过爬取微信好友然后拼图的文章，但古柳还是安利下这篇旧文，里面的图片绝对值得一看（如果你看完觉得也不咋地，那……也就随它去吧）：用python的PIL库实现照片墙的成果分享。
![]()
再就是几天前，看到老师的这则微博：Processing 创作的生成艺术 via:おかず，配图漂亮就不说了，重点是带着关键词，于是就埋下了想用实现一波的念头。
![]()
幸运地找到了作品的出处：Generative Art #146 via:おかず，欣喜地发现附有实现代码，而且该系列有更多不错的作品，遂萌发了想将其所有作品用实现一波并开源的想法。
![]()
当然因为目前不够熟练，/之类也只是入门，难免有所担心和顾虑。但在复现这个作品时发现和真的很像，很多函数接口官方设计成统一的，极大降低了门槛。
![]()
上图就是古柳用复现的效果，虽然还有些小问题，代码也不一定最规范，但先行分享，后续再优化哈！可在此网址体验作品生成效果：https://editor.p5js.org/DesertsX/sketches/GxYHsZg9n- 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();
- 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();
- }
- }
|
|
转播
