Processing

本文记录了作者初次接触Processing的经历,从下载困难到临摹作品,再到理解工作流并尝试原创。作者分享了两个作品的创作过程,一个是通过动态圆的运动形成整体效果,另一个则是通过三角函数和细分技术实现图形的变化。通过学习,作者了解到如何利用时间参数、位置参数以及细分技术来控制图形的位置、大小和颜色,为后续创作提供了灵感。
摘要由CSDN通过智能技术生成

作品展示
在这里插入图片描述
在这里插入图片描述这周开始接触processing,首先下载就很痛苦,莫名地github就很难下。最后同学发来环境,竟然不用安装,体量也小。(面向设计师的东西果然都将设置对用户透明了)
然后开始临摹,开始很懵,除了在OPenGL做过那么几次后,没什么概念。就先借鉴了一位同学的
https://blog.csdn.net/OumaNatsumi/article/details/102604827
通过代码对于整体工作流有了了解后,开始进一步的学习。作业要求里不仅是临摹还有原创,感觉在作业的压榨下没有一点灵感,近期也没有时间思考灵感,就先上网搜罗其他的创意。在openprocessing上有很多好玩的作品,最初看粒子系统还有绘画流的时候完全没有概念是怎么做出来的,就先挑了一个简单的做
https://www.openprocessing.org/sketch/742556
也就是图中第一个。
下面是作品一的介绍:

  1. 首先先将最后的几个嵌套的圆画出来容易看出来的是这些圆的大小关系是1/5倍递减,直径值由此确定。
    在这里插入图片描述
  2. 确定最终状态的圆心。对于次大的圆可以用过最大圆的的最终圆心0.5+W得出0.5+W+(radius-4/5radius)*0.5,其中W为屏幕宽度,radius为大圆直径,相应的4/5radius为次大圆直径。以此类推画出其他圆
  3. 加入动态效果。这个样例初看圆的运动很乱,但若一个圆一个圆地入手分析轨迹 便不难。首先观察最大的圆,初始状态其圆心在(W,0.5H),最后的状态是(0.5W,0.5H)
    在这里插入图片描述
    在这里插入图片描述
    那么显然鼠标的纵坐标对大圆的运动没有影响(其他圆也同样),并且在鼠标从窗口的最右端滑向最左端运动W距离时,大圆向左运动0.5W的距离。显然,大圆的中心坐标为(0.5W+0.5mouseX,0.5*H)。
    相同的方法分析其他的圆,比如图中的玫红色圆,它的运动轨迹有竖直方向的改变,但这依然和鼠标Y值没有关系,显然它是运动中横坐标减小了一定的值,纵坐标也减小了一定的值,减小的值都与鼠标X坐标有关,并且必须小于0.5mouseX,因此可以凭感觉赋值,运动幅度大一点的就可以减去0.4左右的的mouseX,运动幅度小一点的减去少一点。

很容易总结出:所有运动的圆的轨迹都是在最终的静止状态加上或减去一定倍数的0.5*mouseX,这样就有了许多杂乱的部件最终拼凑出一个整体。依照这个思路可以做出更多类似的作品

public class drawCircles{
   
  drawCircles(int W,int H,int X){
   
    noStroke();
    float radius=0.5*W;
    fill(240,178,165);
    arc(0.5*W+0.5*X,0.5*H,radius,radius,PI,TWO_PI);
    fill(32,45,86);
    arc(0.5*W-0.5*X,0.5
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值