Previous article: Fill pits! The end of the entertainment industry star relationship map released, gu Liu impression of the past left only the image retrieval (a) : karma and forward-looking follow-up practice code (the original text gives the reference code link) and in douban Top250 movie posters try the effect.
The thought of all the holes being filled in (please don’t remind me of anything I don’t remember) is the conscience of the industry and a relief.
So gu Liu clicked on image search (I) one day. While reviewing his “excellent works”, he also searched zeelab Projects, a collection of works of Xiang Fan from Tsinghua Academy of Fine Arts.
Xiang Fan: If the Annual Spring Festival Gala were rolled up like mosquito coil incense, it would look like this
Among these works, gu Liu prefers and also wants to achieve a similar effect of web presentation: AwardPuzzel-Zeelab. Citing the “official” introduction below, it is suggested to go to the web page to experience:
AwardPuzzel is a national award-winning paintings art oil painting class data visualization works, included the art of the 6th to the 12th, 2276 award-winning works presented by means of dynamic interaction of 30 years of Chinese oil painting art course, shape, color, size and area and change and the relationship between Chinese oil painting masters the art of thinking. This work can be used as a research tool for researchers and critics, and can also be appreciated as a work of art. We want to share our perspective through this platform, and we want users to draw their own conclusions through their own browsing and observations. The National Art Exhibition is the most important event in the Chinese art circle. It is held every five years. The sixth one was held in 1984, and the twelfth one was held in 2014.
Although ancient liu is not very front-end, but since the crawler, right click “review elements”, look at the web source code habit is still there.
So do not see do not know, a look and lead to the follow-up of many stories, borrow a word from the book: “that day is also suitable for something”, and listen to the ancient Liu slowly road……
After clicking on the source code of the web page, it is not difficult to find the code corresponding to the area of data display and interaction. Here, for the convenience of display, I throw it into the Carbon to highlight this code.
It can be seen that canvas tag is mainly used in HTML, which is nothing. Gu Liu doesn’t know canvas anyway, he is just blind and can’t see anything. However, I found that the.pde file corresponding to the data-processing-Soucres attribute in the label was very different, “I have never heard of it, I have never seen it”. I also remembered that I had searched all kinds of files in the hope of reproducing teacher Xiang Fan’s Spring Festival Gala or art exhibition and oil painting project, but it failed. However, I was impressed by processing, a programming language that can realize various artistic ideas.
Therefore, Google “HTML+Canvas+Processing” and other keywords, and unexpectedly found that there are corresponding JavaScript and Python versions in the Java-based Processing language family tree. The former is: P5.js, which can not help but make Gu Liu see the hope to reproduce the above effect in the web page.
Speaking of which, Guliu had never heard of p5.js at all before. I searched the corresponding Chinese materials and there were not many. As a person who preferred watching videos to learn, I saw that someone on the universal B website had transferred Daniel Shiffman’s teaching videos (sections 1-12) on YouTube, so I immediately downloaded p5.js basic tutorial 1-7. And all followed to knock over the code, although no subtitles, but also pretty good to chew, there are a lot of beginner programming knowledge. (Original link: Code! Programming with p5.js – YouTube)
After acquiring new skills, I immediately put together the photo wall with the pictures of the star relationship Atlas. Although it was far from the effect of the oil painting in the art exhibition, it was still the first step to sell.
In fact, I’ve done a lot of photo wall puzzles before, and I think you’ve all seen the article about climbing wechat friends and then doing a puzzle, but gu Liu still has this old article on Amway, and the pictures in it are definitely worth watching (if you don’t feel good after reading it, then… Let it go) : The Python PIL library implementation of the photo wall image sharing.
Via :お, my day off, MY day off, MY day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off, my day off.
Fortunately, I found the source of my work: Generative Art #146 via:お, and I was so happy to see the Processing implementation code attached, and there were so many more games in the series that I decided to open source all of my work in p5.js.
Of course, p5.js is not proficient enough at present, and JavaScript/ES6 is just a beginner, so it is inevitable to have some worries and concerns. However, when reproducing this work, I found that Processing was really similar to P5.js, and many function interfaces were officially designed to be unified, which greatly lowered the threshold.
The above picture is gu Liu’s effect reproduced with p5.js. Although there are some minor problems and the code may not be the most standard, share it first and optimize it later! Generate effect: experience in this site works editor.p5js.org/DesertsX/sk…
Welcome to pay attention, “cow clothes ancient willow” ha!
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(newParticle(x + hs * cos(a), y + hs * sin(a), c)); } circle(x, y, s); }}}function newParticles() {
// particles = new ArrayList<Particle>();
particles = new Array(a); background("#FCFCF0");
forms();
noiseSeed(parseInt(random(100000)));
}
// function mousePressed() {
// newParticles();
// }
function keyPressed() {
// Not yet
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(); }}Copy the code