Embedded Files
The History of Tommow
The History of Tommow
inspiration
inspiration
Pointillism
Pointillism is a painting technique that creates an image by applying small dots of color to the canvas.This method allows the dots of color to visually blend into a complete image when viewed from a distance.A classic example of this technique is Georges Seurat's A Sunday Afternoon on the Island of La Grande Jatte.
e.g. Seurat, A Sunday Afternoon on the Island of La Grande Jatte (left top picture)
Mayday
In addition to the Pointillist art style, I also drew inspiration from the cover of Mayday's album History of Tomorrow, trying to combine musical fluctuations with visual randomness.
album - 自传（ History of Tommow）(left 2nd picture)
coding structure
coding structure
variables
define gradient fuction
draw 函数
use gradient function
调用 gb 填充渐变背景
grass
使用 noFill 关闭填充
design apprance of circle
创建一个新的圆对象，随机设置其位置、颜色和线条粗细
draw circles
循环遍历 circles 数组，绘制已存储的圆点
save circles to the group
将新圆添加到 circles 数组中
border control
更新 x 和 y 的值，控制草地“画笔”的移动
检查 x 是否超出画布边界，如果超出则反向移动
figures
design apprance of circle
for：
循环绘制五个圆点，代表五月天的五位成员
为每个圆点设置随机的纵向偏移量，使它们在中心附近分布
创建新的五月天圆对象，随机设置其位置、颜色和线条粗细
save circles to the group
将新创建的五月天圆添加到 maydays 数组中
draw circles
循环遍历 maydays 数组，绘制每个五月天圆点
[end]
future steps
future steps
I can try to study using exponential functions to enhance the edge blur of figures, for example, the probability of points falling in the middle is greater, and the number of points on the edge is less, otherwise the figure now looks like a square.
Using noise() or random() increases the randomness of the shape outline. Important! ! ! Making people look like they are in a free and stretched state, rather than like a person standing straight.
Incresing the efficiency of the grass painting. Current density is to low!
Moving Shape
Moving Shape
inspiration
inspiration
abstract expressionism
coding structure
coding structure
for (let i = 0; i < 10; i++) { // 绘制10条线条或圆
let ashin = random(0,2);
if (ashin < 1) {
circle(x + random(-100, 100), y + random(-100, 100), random(10, 200));
} else {
line(random(width), random(height), random(width), random(height));
}
}
This code is very interesting. First, a dice (variable: ashin) is used to generate a random number between 0 and 2. If the random number is less than 1, a circle is drawn; if it is greater than 1, a straight line is drawn.
So the effect achieved in this way is like a circle and a straight line superimposed on each other.
Waving
Waving
coding structure
coding structure
variables
h: height
sh: speed of height
r, g, b：初始 RGB 颜色值
masa：random-控制波浪的紧密程度
ming：random-控制波浪的数量
setup() 函数
创建画布
生成随机数 masa 和 ming
draw() 函数
设置背景颜色
波浪绘制循环
设置填充颜色 fill()
设置边框 stroke()
波浪形状绘制
使用 beginShape() 和 endShape() 进行形状定义
波浪形状控制
通过 sin() 函数控制波浪shape
使用 vertex() 定义波浪的height
更新波浪高度 h
color + height 变换
当波浪高度超过阈值时反向改变高度 sh，and change color to the initial
当高度为 0 时，change color
Page updated
Google Sites
Report abuse