艺术编程Processing基础——钟表（简单）

刚接触到processing这个简单而强大的工具，看了一些基础便可以制作一些简单的“小玩意”，下面是一个简单的钟表的制作过程，记录下来

效果：

表盘，圆形，有60个刻度，12个明显一些的刻度

float lineLength = 10;
for(int i = 1;i <= 60;i++){if(i % 5 == 0){lineLength = 20;}else{lineLength = 10;}
//processing通过弧长进行运算的话  0在钟表“3点”的位置，12点的位置为-PI/2
float x1 = width/2 + cos(i * PI / 30 - PI / 2) * (radius - lineLength);
float y1 = height/2 + sin(i * PI / 30 - PI / 2) *(radius - lineLength);
float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius;
float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;
line(x1,y1,x2,y2);

表盘上有字，显示1-12，在长刻度下面进行显示

for(int i = 1;i <= 60;i++){if(i % 5 == 0){lineLength = 20;pushMatrix();translate(width/2,height/2);int numTex = i / 5;rotate(radians(30 * numTex));String str = numTex + "";fill(255);//注释部分为另一种显示数字的方式，所有数字都是正向显示，与画刻度线的方式同理//text(str,width/2 + cos(i * PI / 30 - PI / 2) * 160,height/2 + sin(i * PI / 30 - PI / 2) * 160);textSize(10);text(str,cos(-PI/2) * 160,sin(-PI/2) * 160);popMatrix();}else{lineLength = 10;}float x1 = width/2 + cos(i * PI / 30 - PI / 2) * (radius - lineLength);float y1 = height/2 + sin(i * PI / 30 - PI / 2) * (radius - lineLength);float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius;float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;line(x1,y1,x2,y2);}

这样刻度就显示出来了，现在还差左上角的时间和指针

时间就是简单的hour() minute() second()内置函数来获取
指针思路：
把一整天的时间换算成秒，计算当前时间为多少秒
通过当前时间有多少秒和整天时间的比值求指针在一圈之中转到了多少度

显示时间：

  fill(0,0,0,50);noStroke();rect(0,0,220,48);textSize(25);fill(255);text(hour() + ":" + minute() + ":" + second(),110,25);

绘制指针

float secondNum = 0;
float hourLineLength = 60;
float minuteLineLength = 90;
float secondLineLength = 120;secondNum = hour() * 60 * 60 + minute() * 60 + second();stroke(18,255,255);line(width/2,height/2,width/2 + cos(radians((secondNum/86400) * 720 - 90)) * hourLineLength,height/2 + sin(radians((secondNum/86400) * 720 - 90)) * hourLineLength);stroke(255,219,147);line(width/2,height/2,width/2 + cos(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength,height/2 + sin(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength);stroke(18,255,150);line(width/2,height/2,width/2 + cos(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength,height/2 + sin(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength);//上面是通过角度算出指针指向角度，注释部分是通过弧长计算//secondNum = (hour()%12) * 60 * 60 + minute() * 60 + second();//line(width/2,height/2,width/2 + cos(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength,//height/2 + sin(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength);

这样基本上就完成了
其中运用到一点点数学知识就是通过三角函数求圆上的某一点的坐标
在绘画刻度，指针的时候用到

下面是全部代码

float radius = 200;
float lineLength = 10;
float hourLineLength = 60;
float minuteLineLength = 90;
float secondLineLength = 120;
PFont myFont;void setup(){ size(500,500);background(0);strokeWeight(3);myFont = createFont("font1.ttf",48);ellipseMode(RADIUS);textFont(myFont);textAlign(CENTER,CENTER);
}void draw(){stroke(255,252,31);fill(0);ellipse(width / 2,height / 2,200,200);for(int i = 1;i <= 60;i++){if(i % 5 == 0){lineLength = 20;pushMatrix();translate(width/2,height/2);int numTex = i / 5;rotate(radians(30 * numTex));String str = numTex + "";fill(255);//text(str,width/2 + cos(i * PI / 30 - PI / 2) * 160,//height/2 + sin(i * PI / 30 - PI / 2) * 160);textSize(10);text(str,cos(-PI/2) * 160,sin(-PI/2) * 160);popMatrix();}else{lineLength = 10;}float x1 = width/2 + cos(i * PI / 30 - PI / 2) * (radius - lineLength);float y1 = height/2 + sin(i * PI / 30 - PI / 2) *(radius - lineLength);float x2 = width/2 + cos(i * PI / 30 - PI / 2) * radius;float y2 = height/2 + sin(i * PI / 30 - PI / 2) * radius;line(x1,y1,x2,y2);}fill(0,0,0,50);noStroke();rect(0,0,220,48);textSize(25);fill(255);text(hour() + ":" + minute() + ":" + second(),110,25);float secondNum = 0;secondNum = hour() * 60 * 60 + minute() * 60 + second();stroke(18,255,255);line(width/2,height/2,width/2 + cos(radians((secondNum/86400) * 720 - 90)) * hourLineLength,height/2 + sin(radians((secondNum/86400) * 720 - 90)) * hourLineLength);stroke(255,219,147);line(width/2,height/2,width/2 + cos(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength,height/2 + sin(radians(((secondNum%3600)/3600) * 360 - 90)) * minuteLineLength);stroke(18,255,150);line(width/2,height/2,width/2 + cos(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength,height/2 + sin(radians(((secondNum%60)/60) * 360 - 90)) * secondLineLength);//secondNum = (hour()%12) * 60 * 60 + minute() * 60 + second();//line(width/2,height/2,width/2 + cos(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength,//height/2 + sin(secondNum/43200 * TWO_PI - PI / 2) * hourLineLength);}

Processing基础——钟表（简单）相关推荐

ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 异常和错误处理 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 异常和错误处理上一章节中,我们学习了 ASP.NET Cor ...
ASP.NET Core macOS 环境配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core macOS 环境配置 - ASP.NET Core 基础教程 - 简单教程,简单编程原文:ASP.NET Core macOS 环境配置 - ASP.NET Core 基础 ...
Python基础之简单用户交互
Python基础之简单用户交互一.要求及目的二.代码内容三.学习总结一.要求及目的要求设计一个简单的计算程序二.代码内容 # 简单计算 a = input("please inp ...
ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Razor 标签助手 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 标签助手上一章节我们介绍了视图导入,学习了 ...
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单编程原文:ASP.NET Core 登录登出 - ASP.NET Core 基础教程 - 简单教程,简单 ...
ASP.NET Core 动作结果 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core 动作结果 - ASP.NET Core 基础教程 - 简单教程,简单编程原文:ASP.NET Core 动作结果 - ASP.NET Core 基础教程 - 简单教程,简单 ...
ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程，简单编程
ASP.NET Core Identity 迁移数据 - ASP.NET Core 基础教程 - 简单教程,简单编程原文:ASP.NET Core Identity 迁移数据 - ASP.NET C ...
ASP.NET Core Windows 环境配置 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core Windows 环境配置 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Windows 环境配置 ASP.NET Core ...
ASP.NET Core 基础教程 - ASP.NET Core 基础教程 - 简单教程，简单编程
原文:ASP.NET Core 基础教程 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 是对 ASP.NET 有重大意义的一次重新设计.本章节我们将介绍 A ...

Processing基础——钟表（简单）

艺术编程Processing基础——钟表（简单）

Processing基础——钟表（简单）相关推荐

最新文章

热门文章