太极图形课S1第05讲：程序动画

已于 2022-07-08 22:14:43 修改
阅读量275 收藏
点赞数 1
分类专栏： 计算机图形学——Taichi 文章标签： 动画
于 2022-07-01 22:29:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/averagePerson/article/details/125566607
版权

序

视频： 

太极图形课S1第05讲：程序动画_哔哩哔哩_bilibili

相应的代码：

 GitHub - taichiCourse01/--Shadertoys

 Shadertoys: taichi图形课 (gitee.com)

这个代码，大概都是这种感觉的：

 具体内容

对立统一规律与一分为三 

后半部分是CG，这个G可以这么理解： 

 后面的内容，小白劝退形……

这一节里，说程序动画

程序动画，按规则生成的动画

程序动画与树，以后能不能用的上呢？……不知道

 现实画图的六个步骤

  1. 准备一块画布（画布的初始化）
  2. 泼颜色
  3. 如果觉得泼太粗糙了，也可以细致一点，用笔去画（基础图元）
  4. 重复这些基础图元
  5. 引入时间，让它们动起来
  6. 加点随机性

 

 在代码里，步骤也差不多

代码里画图的六个步骤

1.编程中的画布的初始化

# reference ==> 

import taichi as ti
import handy_shader_functions as hsf

ti.init(arch = ti.cuda)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i,j in pixels:
        color = ti.Vector([0.0, 0.0, 0.0]) # init your canvas to black
        pixels[i,j] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

初始化成全黑，也算一种初始化…… 

 2.泼颜色，上色

 3.画具体的图形

代码

# reference ==> 

import taichi as ti

ti.init(arch = ti.cpu)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i,j in pixels:
        color=ti.Vector([.7,.7,.7])

        pos=ti.Vector([i,j])
        center=ti.Vector([res_x/2,res_y/2])
        r=(pos-center).norm()#计算了一下距离，norm,L2-norm?

        radius=100
        if r<radius:
            color=ti.Vector([1,1,0])


        pixels[i, j] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

 结果

 这个画圆的过程，是不是像那个高通/低通滤波的函数？

这个clamp，是截断，只取设置的min和max之间的那部分函数值的意思

 

 所以也可以不用圆的那么锋利

# reference ==> 
import handy_shader_functions as hsf
import taichi as ti

ti.init(arch = ti.cpu)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ti.func
def ratio(pos,center,radius,blur):
    d=(pos-center).norm()
    return hsf.smoothstep(1,1-blur,d/radius)
    

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i,j in pixels:

        pos=ti.Vector([i,j])
        center=ti.Vector([res_x/2,res_y/2])
        radius=100

        #如果以画布中心为原点的话，这相当于一个低通滤波器
        color=ti.Vector([0,0,0.7])*ratio(pos,center,radius,0.9)

        pixels[i, j] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

 4.重复

重复，可以通过取余来实现

# reference ==> 
import handy_shader_functions as hsf
import taichi as ti

ti.init(arch = ti.cpu)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ti.func
def ratio(pos,center,radius,blur):
    d=(pos-center).norm()
    return hsf.smoothstep(1,1-blur,d/radius)
    

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i_,j_ in pixels:

        tile_size=64
        i=hsf.mod(i_,tile_size)
        j=hsf.mod(j_,tile_size)


        pos=ti.Vector([i,j])
        center=ti.Vector([tile_size/2,tile_size/2])
        radius=tile_size/4

        #如果以画布中心为原点的话，画这个圆，相当于一个低通滤波器
        color=ti.Vector([0.7,0.7,0])*ratio(pos,center,radius,0.5)

        pixels[i_, j_] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

 还可以去分形

这么写，就可以叠加三层 

# reference ==> 
import handy_shader_functions as hsf
import taichi as ti

ti.init(arch = ti.cpu)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ti.func
def ratio(pos,center,radius,blur):
    d=(pos-center).norm()
    return hsf.smoothstep(1,1-blur,d/radius)
    

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i_,j_ in pixels:

        color = ti.Vector([.0,.0,.0])
        tile_size=16
        for k in range(3):#从小多向着大少去累加
            i=hsf.mod(i_,tile_size)
            j=hsf.mod(j_,tile_size)

            pos=ti.Vector([i,j])
            center=ti.Vector([tile_size/2,tile_size/2])

            radius=tile_size/2
            c=ratio(pos,center,radius,0.1)
            color+=c*ti.Vector([1,1,1])#图层，一层层累加

            color/=2#防止颜色超过255，导致过曝
            tile_size*=2

        pixels[i_, j_] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

 5.让画面动起来

 6.随机性

随机函数生成随机数，随机扰动

 实际应用

 代码在链接里

# reference ==> 

import taichi as ti
import handy_shader_functions as hsf

ti.init(arch = ti.cuda)

res_x = 512
res_y = 512
pixels = ti.Vector.field(3, ti.f32, shape=(res_x, res_y))

@ ti.func
def circle(pos, center, radius, blur):
    r = (pos - center).norm()
    t = 0.0
    if blur > 1.0: blur = 1.0
    if blur <= 0.0: 
        t = 1.0-hsf.step(1.0, r/radius)
    else:
        t = hsf.smoothstep(1.0, 1.0-blur, r/radius)
    return t

@ti.func
def square(pos, center, radius, blur):
    diff = ti.abs(pos-center)
    r = ti.max(diff[0], diff[1])
    t = 0.0
    if blur > 1.0: blur = 1.0
    if blur <= 0.0: 
        t = 1.0-hsf.step(1.0, r/radius)
    else:
        t = hsf.smoothstep(1.0, 1.0-blur, r/radius)
    return t

@ti.kernel
def render(t:ti.f32):
    # draw something on your canvas
    for i,j in pixels:
        color = ti.Vector([0.0, 0.0, 0.0]) # init your canvas to black

        tile_size = 16
        for k in range(3):
            
            center = ti.Vector([tile_size//2, tile_size//2])
            radius = tile_size//2

            pos = ti.Vector([hsf.mod(i, tile_size), hsf.mod(j, tile_size)]) # scale i, j to [0, tile_size-1]
            
            blur =hsf.fract(ti.sin(float(0.1*t+i//tile_size*5+j//tile_size*3)))
            c = circle(pos, center, radius, blur)
            
            r = 0.5*ti.sin(float(0.001*t+i//tile_size)) + 0.5
            g = 0.5*ti.sin(float(0.001*t+j//tile_size) + 2) + 0.5
            b = 0.5*ti.sin(float(0.001*t+i//tile_size) + 4) + 0.5

            color += ti.Vector([r, g, b])*c
            
            color /= 2
            tile_size *= 2

        pixels[i,j] = color

gui = ti.GUI("Canvas", res=(res_x, res_y))

for i in range(100000):
    t = i * 0.03
    render(t)
    gui.set_image(pixels)
    gui.show()

既随机又连续——柏林噪声

总结

6个步骤

 介绍了一个网站

Shadertoy BETA

里面有很多东西……

比如这个

Galaxy of Universes (shadertoy.com)

原理是很多颜色渐变的螺旋线，中间白一些，四周暗一些 

一个讲代码的视频

太极图形课S1第05讲：程序动画_哔哩哔哩_bilibili

《惊人的30万跑分》 

后记

有那么几天，我就在想，看这些会有用吗？

后来想一想，以后也许真的用的上。

所以，接着来吧，虽然不会……

averagePerson
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
程序动画
wenzhilu的博客
05-26 1788
程序性动画介绍     我们今天讨论的是关于电子游戏逆向运动学的新系列介绍。在开始介绍之前，这个帖子将会展示一些使用了程序性动画的游戏，以及它们与传统资源库动画的不同。 你可以从这里找到此系列所有的章节： Part 1：程序性动画介绍 Part 2：正向运动学的数学运算 Part 3：执行正向运动学 Part 4：梯度下降的介绍 Part 5：
程序性动画 1 ——程序性动画介绍
hoofi.xyz
07-03 2056
http://www.manew.com/thread-104164-1-1.html我们今天讨论的是关于电子游戏逆向运动学的新系列介绍。在开始介绍之前，这个帖子将会展示一些使用了程序性动画的游戏，以及它们与传统资源库动画的不同。在帖子的底端你都可以找到一个链接来下载所有必要的资源和场景来再现这些教程。介绍 #在大多数游戏中，角色动画是“静止的”。每次角色在屏幕上移动，都是被艺术家创造的一种特制运动
unity程序动画
applex250的博客
11-13 1237
unity程序动画，animation rigging
完整的动画程序
leafinsnowfield的专栏
08-09 751
import javax.swing.*; import java.awt.*; public class SimpleAnimation { int x=70; int y=70; public static void main(String [] args) { SimpleAnimation gui=new SimpleAnimation(); gui.go(); }
小程序动画的使用
xxooff的博客
02-26 3596
小程序使用动画API实现以物体中心原点为中心的旋转,先看效果图：wxml:&lt;view  animation="{{animationData}}"&gt;    以我为中心旋转&lt;/view&gt;js:Page({data({    animationData: {}})  onLoad:function() {  var animation = wx.createAnimation(...
计算机图形学(MFC)-太极图
03-24
语言：C++ 运行环境：Visual Studio 2013/更高版本
利用C语言的Cairo图形库绘制太极图实例教程
08-31
几天都在研究Cairo图形库，这是一个开源跨平台的图形库，相对于OpenGL来说更容易上手使用。这篇文章是利用C语言的Cairo图形库绘制了一个太极图，对大家学习Cairo图形库具有一定的参考借鉴价值，下面来一起看看吧。
旋转的阴阳鱼太极图源程序
08-21
本资源是孔令德开发的阴阳鱼太极图的旋转程序。使用MFC编写。阴阳鱼使用定时器驱动，开机后可以一直顺时针旋转。程序的解释见孔令德《计算机图形学基础教程（Visual C++版）》（第2版），清华大学出版社
taiGi:使用会动的代码展示太极动画的制作过程：
03-31
taiGi:使用会动的代码展示太极动画的制作过程：
基于微信小程序的太极打卡锻炼系统设计与实现
04-20
本课题题目是基于微信平台的太极锻炼打卡小程序设计与实现。本文从系统开发环境、系统目标、设计流程、功能设计等几个方面进行系统的总体设计，并详细描述了一个功能齐全的太极锻炼打卡系统的前台及后台开发、运作...
程序化动画的简单尝试
smartfeng_bnf的博客
02-18 514
unity 2019 就推出了 Animation Rigging 插件。（我最近才看到。。。）， 我在尝试使用的过程中看到了一些非常有趣的东西那就是程序化动画。 所以顺便学习了一下。 一个简单的四足机械（生物） 向前的走和转身的动画逻辑。 一、4 个脚绑定 IK 可用Animation Rigging 实现 二、 得到每个脚的下一个落脚点 ，（我用了射线去探测 脚前的一个地方）。 leg_t.transform.Rotate(0, 0, 45); ...
Unity 程序化动画：还原塞尔达旷野之息 守护者 (六足)
weixin_42264818的博客
11-05 1114
Unity使用程序化动画，通过IK还原塞尔达中的守护者移动追逐林克
Unity 程序动画 2D,3D程序蜘蛛脚,人物程序性动画
CTangZe的博客
05-25 541
程序脚制作,带demo
【游戏开发】程序化动画的基础流程
最新发布
m0_62210253的博客
10-13 323
（Procedural Animation）是一种由程序通过和来控制动作的方式形成的动画，适用于动作较复杂的异形角色，如多足机器人、蜘蛛、蛇等。
这个神器，让你的代码运行快上100倍！
weixin_48923393的博客
11-14 421
文 |闲欢来源：Python 技术「ID: pythonall」Python 已经得到了全球程序员的喜爱，连续多期稳坐编程语言排行榜第一把交椅。但是还是遭到一些人的诟病，原因之一就是认为它运行缓慢。于是，大家都在想尽各种办法来提高 Python 代码的运行速度，大多数体现在写代码的习惯优化以及代码优化上。但是平时写代码注意太多这些方面可能会有糟糕的体验，甚至会不利于我们的工作效率。要是有一款能够...
太极图形0，1
averagePerson的博客
06-30 323
图形学，了解的不多。
【GAMES201学习笔记】00 - Taichi 编程
捕鱼维的个人小站
05-19 2736
《GAMES201》 学习笔记
【小程序动画合集】10种小程序动画效果实现方法，文章太长建议收藏！
Dreawer微信小程序联盟
06-25 1万+
前言 一提小程序与动画，首先想到的是什么？嗯，微信小程序独创了一套动画玩法，官方支持3种动画方案，分别是createAnimation、this.animate和CSS3动画。 1.createAnimation与Animation 创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。 var animation = wx.createAnimation({ transformOrig...
小程序学习：动画animation
热门推荐
一只程序媛
06-08 2万+
wxml： <view class="box"> <view class="headerimg" bindtap="click" animation="{{animationData}}"> <open-data type="userAvatarUrl" ></open-data> &l...
使用turtle绘制太极图形
07-28
使用turtle库可以绘制太极图形。以下是一个使用turtle库绘制太极图形的完整代码： ```python import turtle window = turtle.Screen() bage = turtle.Turtle() radius = 100 bage.width(3) bage.color("black", ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值