伴随 P5js 入坑创意编程

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

一想到所有坑都被填了(如果还有啥是我不记得的,请千万不要提醒我),就觉得真是业界良心,倍感轻松。

于是古柳某日点开 图像检索(一):因缘际会与前瞻一文,回顾“佳作”之余,也找了下里面清华美院向帆老师的作品集网站 zeelab Projects

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

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

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

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

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

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

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

于是谷歌了下 “HTML+Canvas+Processing” 等关键词,意外地发现:基于 JavaProcessing 语言的家谱中,还有对应 JavaScriptPython 版本,前者即: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 之类也只是入门,难免有所担心和顾虑。但在复现这个作品时发现 ProcessingP5.js 真的很像,很多函数接口官方设计成统一的,极大降低了门槛。

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

欢迎关注,“牛衣古柳”哈!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
复制代码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();
}
}

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%