码绘——动态图形艺术（js）

最新推荐文章于 2019-10-20 18:04:48 发布
最新推荐文章于 2019-10-20 18:04:48 发布
阅读量290 收藏 1
点赞数
分类专栏： js 文章标签： 动态图形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xinprr/article/details/102587769
版权

#**

码绘——动态图形艺术

**（js）

图片格式

**

原临摹图片

规律

  1. 实现步骤：（找规律）每一行和每一列均有六个小圆
  2. 将其每两行看作一个集合，则其中每四个小圆可看成一个组合
  3. 在这里插入图片描述
  4. 现将其中的小圆绘制完成，然后绘制动态圆弧，可根据小组合得知其中转动情形可分为四种
  5. 将其从左到右，从上到下的顺序标记为1234，绘制圆弧时，其中1和2为四分之一圆弧，3和4为四分之三圆弧，1和4转动情况相同（逆时针），2和3转动情况相同（顺时针）
  6. 观察可得每一行每一列第1、3、5的圆弧转动情况一样，同理可得其中每一行每一列第2、4、6的圆弧的转动情况相同
  7. 其中每一行每一列的第1、3、5的小圆即圆弧部分代码：
  8. var xc=36;
    var yc=36;
    for(var i=0;i<=2;i++)//控制每一行
    {
    fill(255,255,255);
    for(var j=0;j<=2;j++)//控制每一列
    {
    fill(255,255,255);
    ellipse(xc+i    144,yc+j144,60,60);//绘制背景小圆
    fill(0);
    arc (xc+i    144,yc+j144,60,60,PI1.5-0.0005mPI,2PI-0.0005mPI);
    }//绘制动态圆弧
    }
    在这里插入图片描述
  9. 过循环变量m来控制，m+=50;，其中四个部分小球的转动只需改动小球和圆弧的圆心位置以及圆弧的转动角度
  10. ##以下为其它部分的小圆和圆弧的变化
  11. ellipse(xc+i*144,yc+j*144,60,60); arc(xc+i*144,yc+j*144,60,60,PI*1.5-0.0005*m*PI,2*PI-0.0005*m*PI);
  12. ellipse(xc+72+i*144,yc+j*144,60,60); arc (xc+72+i*144,yc+j*144,60,60,PI+0.0005*m*PI,1.5*PI+0.0005*m*PI);
  13. ellipse(xc+i*144,yc+72+j*144,60,60); arc (xc+i*144,yc+72+j*144,60,60,PI*0.5+0.0005*m*PI,2*PI+0.0005*m*PI);//注意角度尺寸变化，比前两个圆弧大
  14. ellipse(xc+72+i*144,yc+72+j*144,60,60); arc (xc+72+i*144,yc+72+j*144,60,60,PI-0.0005*m*PI,0.5*PI-0.0005*m*PI);
    ———————————————————————————————————————————————————————————

###拓展图形
在这里插入图片描述

  1. 在原临摹图形上做相关改动让其校园和圆弧尺寸动态变化
  2. 按照对角线的原则，一侧递增，一侧递减，递增的一侧ellipse(xc+i144,yc+j144,60+10t,60+10t);，
  3. 圆弧尺寸随之递增；递减的一侧ellipse(xc+i144,yc+72+j144,60-10t,60-10t);
  4. 在图片上的具体呈现为颜色视觉上的变化，以及1和4转动过程中变大的效果，2和3缩小（编号对应上图规则）
  5. 附相关代码：
var m=0;//圆弧动态变量
function setup() {
  createCanvas(432,432);
}
function draw() {
    fill(0);
    rect(0,0,432,432);
    var xc=36;
    var yc=36;
    var t=millis()/1000;//颜色变换
    for(var i=0;i<=2;i++)//控制每一行
    {
      for(var j=0;j<=2;j++)//控制每一列
      {
        fill(255-20*t,255-30*t,255-50*t);
        ellipse(xc+i*144,yc+j*144,60+10*t,60+10*t);//画每个小圆
        fill(0);
        arc (xc+i*144,yc+j*144,60+10*t,60+10*t,
            PI*1.5-0.0005*m*PI,2*PI-0.0005*m*PI);//绘制圆弧
      }
    }
    /*************/
    for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(255-20*t,255-50*t,255-30*t);
      ellipse(xc+72+i*144,yc+j*144,60-10*t,60-10*t);
      fill(0); 
      arc(xc+72+i*144,yc+j*144,60-10*t,60-10*t,
          PI+0.0005*m*PI,1.5*PI+0.0005*m*PI);
      
    }
  }
  /*****************/
  for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(255-20*t,255-50*t,255-30*t);
      ellipse(xc+72+i*144,yc+j*144,60-10*t,60-10*t);
      fill(0); 
      arc(xc+72+i*144,yc+j*144,60-10*t,60-10*t,
          PI+0.0005*m*PI,1.5*PI+0.0005*m*PI);
      
    }
  }
  /*******************/
  for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(0);
      ellipse(xc+72+i*144,yc+72+j*144,60+10*t,60+10*t);
      fill(255-30*t,255-20*t,255-20*t);
      arc(xc+72+i*144,yc+72+j*144,60+10*t,60+10*t,
          PI-0.0005*m*PI,0.5*PI-0.0005*m*PI);
          }
  }
 m+=50;
}

##拓展图形2
在这里插入图片描述

在这里插入图片描述

  1. （通过sin(t)函数增量变换来控制颜色和小圆和圆弧的大小）
  2. 图像变现为圆弧和小圆半径以及颜色呈现周期变换

附完整代码：

var m=0;
function setup() {
  createCanvas(432,432);
}
function draw() {
    fill(0);
    rect(0,0,432,432);
    var xc=36;
    var yc=36;
    var t=millis()/1000;
    for(var i=0;i<=2;i++)
    {
      for(var j=0;j<=2;j++)
      {
        fill(255-200*sin(2*PI*t),
             255-150*sin(2*PI*t),255-50*sin(2*PI*t));
        ellipse(xc+i*144,yc+j*144,
                60+20*sin(2*PI*t),60+20*sin(2*PI*t));
        fill(200*sin(2*PI*t),100*sin(2*PI*t),30*sin(2*PI*t));
        arc(xc+i*144,yc+j*144,
            60+20*sin(2*PI*t),60+20*sin(2*PI*t),
             PI*1.5-0.0005*m*PI,2*PI-0.0005*m*PI);
      }
    }
    for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(255-200*sin(2*PI*t),
           255-50*sin(2*PI*t),255-130*sin(2*PI*t));
      ellipse(xc+72+i*144,yc+j*144,
              60-20*cos(2*PI*t),60-20*cos(2*PI*t));
      fill(200*sin(2*PI*t),100*sin(2*PI*t),30*sin(2*PI*t)); 
      arc (xc+72+i*144,yc+j*144,
           60-20*cos(2*PI*t),60-20*cos(2*PI*t),
             PI+0.0005*m*PI,1.5*PI+0.0005*m*PI); 
    }
  }
  for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(255-200*sin(2*PI*t),
           255-50*sin(2*PI*t),255-130*sin(2*PI*t));
      ellipse(xc+72+i*144,yc+j*144,
              60-20*cos(2*PI*t),60-20*cos(2*PI*t));
      fill(200*sin(2*PI*t),100*sin(2*PI*t),30*sin(2*PI*t)); 
      arc (xc+72+i*144,yc+j*144,
           60-20*cos(2*PI*t),60-20*cos(2*PI*t),
             PI+0.0005*m*PI,1.5*PI+0.0005*m*PI); 
    }
  }
  
  for(var i=0;i<=2;i++)
    {
      for(var j=0;j<=2;j++)
      {
        fill(200*sin(2*PI*t),100*sin(2*PI*t),30*sin(2*PI*t));
        ellipse(xc+i*144,yc+72+j*144,
                60-20*cos(2*PI*t),60-20*cos(2*PI*t));
        fill(255-150*sin(2*PI*t),
             255-200*sin(2*PI*t),255-20*sin(2*PI*t));
        arc (xc+i*144,yc+72+j*144,
             60-20*cos(2*PI*t),60-20*cos(2*PI*t),
              PI*0.5+0.0005*m*PI,2*PI+0.0005*m*PI);
      }
    }
    for(var i=0;i<=2;i++)
  {
    for(var j=0;j<=2;j++)
    {
      fill(200*sin(2*PI*t),100*sin(2*PI*t),30*sin(2*PI*t));
      ellipse(xc+72+i*144,yc+72+j*144,
              60+20*sin(2*PI*t),60+20*sin(2*PI*t));
      fill(255-30*sin(2*PI*t),
           255-200*sin(2*PI*t),255-120*t);
      arc (xc+72+i*144,yc+72+j*144,
           60+20*sin(2*PI*t),60+20*sin(2*PI*t),
               PI-0.0005*m*PI,0.5*PI-0.0005*m*PI);  
    }
  }
 m+=50;
}
Xinrr
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个基于p5.js的绘画系统
wangyouxu24的博客
12-30 6583
一个基于p5.js的绘画系统 一、实现效果 这个绘画系统具有一般绘画系统的特点，作画者可以通过选择不同的笔刷模仿毛笔笔触，达到水墨画的效果。另外，它还具有一定的动态性，作画者可以看到画上去的东西并不像一般绘画系统静止不动，画面能随着鼠标的位移或时间的变化遵循一定规律变动。 1）动态效果 2）静态效果 二、代码实现 1）静态笔刷 对于第一种效果，作画者可自定义笔刷大小和形状，其笔刷实质...
18副用JavaScript绘制的动态艺术绘画
愿乘长风破万里浪
08-22 574
http://www.webhek.com/post/canvascycle-demo.html
码绘与手绘——表达动态
sinat_41802987的博客
11-24 731
一、手绘表现动态： 这个题目一开始看来 ，手绘是处于非常劣势的地位的，因为电脑上可以实现动态的过程，就是用动画的原理，每秒绘制60帧，不断进行重绘图形，来达到运动的效果的。 而本身来讲，手绘的图片本质上是不能动的，只能通过笔触来表达，来营造一种动态的效果。这个就比较考验功底了，表达动态的话，我总结了一下，是通过这些方式的。 (手绘作品如下：) 人物本身的动态肢体动作来表达动态。 2. 比如飘...
码绘与手绘（一）
Big_Bug_Man的博客
11-24 349
@立十曰 码绘与手绘 工具 p5.js 目录 文章大概包括这么及部分 手绘及作品展示 码绘及作品展示 码绘代码 码绘与手绘的对比 手绘及作品展示 我画的是一个小狗，尽管很简单，但是画的还是很丑。。。 码绘及作品展示 用代码画就好看多了 码绘代码 function setup() { createCanvas(640,480); } function draw() { fill(25...
互动媒体手绘和码绘的比较（静态）
taylor97的博客
11-23 260
互动媒体手绘和码绘的比较（静态） 我做的是一个时钟，因为当时刚开始学，用的是很基础的ellipse和line，手绘是在机房画的，所以画的歪歪扭扭的2333。 在我看来，码绘的画图特别精准，用代码绘画是很理性的一个过程，先构思你要画的东西，然后慢慢地按步骤画出所想的东西，实现的事物十分精准。我在码绘前先会手绘一个大致的草图，方便一步步地实现。 而手绘则就是比较感性的过程，手绘能更好地表现人的情感...
DelFX-CLJS:用 clojurescript 重写动态图形艺术家作品集网站
06-21
《使用ClojureScript重写动态图形艺术家作品集网站——DelFX-CLJS详解》 在当前的Web开发领域，JavaScript一直扮演着至关重要的角色。然而，随着技术的不断发展，开发者开始寻找更高效、更具表达力的编程语言。...
p5.js表现物象特性的线库.rar
12-13
在现代数字艺术和交互设计领域，p5.js作为一款强大的JavaScript库，深受广大开发者和艺术家的喜爱。它为创作动态、交互式的网页图形提供了丰富的工具和可能性。本次我们将深入探讨一个特别的实践项目——使用p5.js...
dandelions_and_void:使用p5.js进行生成艺术
04-28
在这个项目“dandelions_and_void”中，艺术家凯文·博伊尔巧妙地运用了p5.js库，构建了一幅富有诗意的交互式艺术作品——“蒲公英和虚空”。本文将深入探讨p5.js库的使用以及如何通过编程实现这种艺术创作。 p5.js...
动态画图小程序 #资源达人分享计划#
08-14
首先，我们要理解动态画图小程序的核心——图形渲染技术。这种技术涉及到计算机图形学，它能够将二维或三维模型转化为屏幕上可见的图像。在动态画图小程序中，用户可以实时调整图形参数，如位置、大小、颜色和透明度...
HTML——旋转火焰（追光者♂）.zip
最新发布
09-09
在这个特效中，JavaScript可能用于控制火焰的动态行为，比如旋转、移动、缩放等。开发者可能会创建一个时间循环（如使用`setInterval`函数），在每一帧中更新火焰的状态。JavaScript还可以监听用户交互，如鼠标移动...
python 分形
非●梵高
12-16 2166
 代码如下： #!/usr/bin/env python# -*-coding:UTF-8-*-#from common import *import Image, ImageFilter, math, sys, os, randomdef modifyImageObj(img, matrix) : width, height = img.size
p5.js动态图形临摹以及拓展
Yuasin18的博客
10-14 1080
这里写自定义目录标题动态图形原图成果展示临摹拓展作品拓展1拓展2 动态图形原图 本次选择临摹图形为该图 成果展示 临摹 拓展作品 拓展1 拓展2
手绘&码绘的对比--“运动”的异同
yxj
11-24 279
我认为“运动”从某种方面上来说，会表达一种情绪。在艺术创作中更是希望能产生与大多数人的共鸣。 一、“运动”之于手绘 如果要用一幅手绘表现出来的话，我想“运动”亦可以被称之为“生动”。这次依然选择手绘而不是电脑绘画，纸笔的笔触或许能带给我更多生动的效果，活灵活现并且跃然纸上的效果，就是我认为的通过手绘带来的“生命感”。 比如同样是对动物进行绘画，这种对神态的刻画在寥寥数笔下逐渐展现，如不是进行多幅...
使用python绘图
Jayn的专栏
04-19 6032
使用python绘图，需要使用matplotlib库。开始时自己下载matplotlib安装，然后运行，总是报错，少好多的库，如pysparsing,scipy库等，自己一个一个下载很麻烦，而且很容易出现库之间的版本不匹配等问题。后来惊喜的·发现了pip这个自动安装python扩展库的神器，现将配置方法记录如下： 1.在以下地址下载最新的PIP安装文件：http://pypi.python.or
互动媒体——动态图形艺术
danawarm的博客
10-20 320
临摹作品展示： 思路分析 首先看到这张图片，想到的应该就是图形圆的旋转，一种思路是干脆做四分之三个圆，让它们绕自己的中心旋转；另一种思路，就是将圆和底色黑色都作为背景，让各个小正方形绕着他们的顶点旋转。 我选择的方法，是做四分之三个圆，让它们绕自己的中心旋转，这张动图里，相邻的圆旋转的方向都不一样，隔行/隔列的圆形旋转方向则是一样的，所以我用了两个并列的for循环，绘制这些圆。 function...
用Python来画浮雕画
蒲公英
11-29 995
浮雕艺术在世界各地都可以见到，中国古代在唐朝以来就有许多浮雕效果的东西，很多的大型纪念性建筑都有这种作为装饰，常见的有花窗，龙柱等。 简单的来说，浮雕就是把所要呈现的图像突起于石头表面，根据凹凸的程度不同从而形成三维的立体感。 用Python画一张浮雕画，那就进行类似的原理，通过勾画图像的轮廓，并且降低周围的像素值，那就可以产生一张具有立体感的浮雕效果图片。我们可以采用相邻像素相减的方法来得到轮廓...
互动媒体技术——浅谈艺工融合+p5.js实现动态图形
Program_dancing的博客
09-23 983
浅谈艺工融合 作为一名数字媒体技术系的学生来说，在我的观点中，艺工融合即在能够编写代码的前提下也能对设计出来的产品有所审美。如今，很多软件产品设计中，艺术和技术是息息相关的，只会其一虽说也又一定的好处，但是在如今这个社会上却缺乏竞争力。当今社会，需要全方面发展的人才，同时，当具备了艺术和技术的双重本领后，也能在与他人的合作交流中展示出优势。 今天，在互动媒体技术课上，我们观看了短片《达芬奇的科学密...
Intellij IDEA安装过程
weixin_43748216的博客
04-12 1161
第一步：idea官网下载：https://www.jetbrains.com/idea/download/#section=windows 左侧为旗舰版，右侧社区版，一般下载旗舰版， exe文件：需要在线安装 zip文件：离线包，无需安装，解压即可 第二步：安装 第三步：激活 三种激活方式，在这里选择Activation code， ① 下载破解补丁JetbrainsCrac...
1.9 开始第一幅“码绘”——掌握大杀器”循环“，一招搞定百千万个懵逼脸
魔笔玩家的博客
09-09 2122
直觉上，提到“重复”，往往联想到枯燥乏味，想到焦躁的重复性劳动。然而，重复却又是制造“美”的重要手段。 本节首先赏析了多位不同时期不同风格的绘画大师的作品，从中分析其运用重复的手法，并提炼出一个重复与美感的实践法则。 然后，再以程序示例引入循环的语法，并通过循环实现了多种效果。 最后，示意了通过循环，以简介的语句绘制出一大群不同表情的懵逼脸。
探索创意编程：初学者指南——用p5.js创作算法艺术
本书从基础开始，帮助读者理解计算机如何生成数字图像，通过流行的面向艺术家的编程语言Processing（及其Web版p5js）进行编程。学习者将学会欣赏和运用算法，这些数学配方能创造出意想不到的美丽艺术作品。书中涵盖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值