HTML菊花图案绘制,HTML5/Canvas数学之美 - 神秘花圈图案生成器
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var config = {
color: 'blue',
distribution: 'circle'
};
var colorOptions = {
blue: {
bg: "rgb(0, 20, 20)",
fg: "rgba(22, 33, 220, 0.05)"
},
fire: {
bg: "rgb(20, 0, 0)",
fg: "rgba(255, 120, 0, 0.04)"
},
gold: {
bg: "rgb(0, 20, 20)",
fg: "rgba(80, 60, 60, 0.06)"
},
green: {
bg: "rgb(0, 20, 0)",
fg: "rgba(16, 88, 33, 0.06)"
},
purple: {
bg: "rgb(7, 7, 20)",
fg: "rgba(50, 50, 150, 0.02)"
},
mono: {
bg: "rgb(0, 0, 0)",
fg: "rgba(255, 255, 255, 0.008)"
}
};
function sandline(ctx, p1, p2) {
var samples = 35;
for (var i = 0; i < samples; i++) {
var location = Math.random();
var x = lerp(p1.x, p2.x, location);
var y = lerp(p1.y, p2.y, location);
ctx.fillRect(x, y, 1, 1);
}
}
function lerp(a, b, f) {
return a + f * (b - a);
}
function Point(x, y) {
this.pos = Vector(x, y);
this.lastpos = Vector(x, y);
this.origin = Vector(x, y);
this.velocity = Vector((0.5 - Math.random()) * 0.8, (0.5 - Math.random()) * 0.8);
this.acceleration = Vector();
}
Point.prototype.updatePos = function() {
this.pos.add(this.velocity);
this.velocity.add(this.acceleration);
};
var ctx = fullscreenCanvas().ctx;
var canvas = ctx.canvas;
function Randomwalk(x, y, color) {
this.person = new Point(x, y);
this.friend = new Point(x + (0.5 - Math.random()) * 10, y + (0.5 - Math.random()) * 10);
this.color = color;
this.life = 0;
}
function gravity(pos1, pos2, G) {
var diff = Vector(pos1).subtract(pos2);
var norm = Math.sqrt(100.0 + diff.lengthSq());
var mag = G / (norm * norm * norm);
return diff.scale(G / Math.pow(norm, 3));
}
Randomwalk.prototype.update = function() {
this.person.velocity.x += (0.5 - Math.random()) * 0.1;
this.person.velocity.y += (0.5 - Math.random()) * 0.1;
this.friend.velocity.x += (0.5 - Math.random()) * 0.1;
this.friend.velocity.y += (0.5 - Math.random()) * 0.1;
var dx = this.person.velocity.x - this.friend.velocity.x;
var dy = this.person.velocity.y - this.friend.velocity.y;
this.person.velocity.x += dx * 0.05;
this.person.velocity.y += dy * 0.05;
this.friend.velocity.x += dx * 0.05;
this.friend.velocity.y += dy * 0.05;
var d = gravity(this.person.pos, this.friend.pos, 8);
this.person.velocity.subtract(d);
this.friend.velocity.add(d);
var d1 = gravity(this.person.pos, this.person.origin, 3);
this.person.velocity.subtract(d1);
var d2 = gravity(this.friend.pos, this.friend.origin, 3);
this.friend.velocity.subtract(d2);
this.person.updatePos();
this.friend.updatePos();
this.life += 1;
};
Randomwalk.prototype.draw = function(ctx) {
var originalAlpha = Spectra(this.color).alpha();
ctx.fillStyle = Spectra(this.color).alpha(originalAlpha - this.life / 43500).rgbaString();
sandline(ctx, this.person.pos, this.friend.pos);
};
var rs = [];
// different distributions
function init() {
rs = [];
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = colorOptions[config.color].bg;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = colorOptions[config.color].fg;
if (config.distribution === "grid") {
var amountPerRow = 8;
var dx = canvas.width / amountPerRow;
var dy = canvas.height / amountPerRow;
for (var i = 0; i < amountPerRow; i++) {
for (var j = 0; j < amountPerRow; j++) {
var amount = Math.ceil(Math.random() * 6);
for (var k = 0; k < amount; k++) {
rs.push(new Randomwalk(
dx * i + dx / 2,
dy * j + dy / 2,
colorOptions[config.color].fg
));
}
}
}
} else if (config.distribution === "random") {
for (var i = 0; i < 500; i++) {
rs.push(new Randomwalk(Math.random() * ctx.canvas.width, Math.random() * ctx.canvas.height, colorOptions[config.color].fg));
}
} else if (config.distribution === "circle") {
var r = canvas.width / 7;
for (var i = 0; i < 2 * Math.PI; i += 0.04) {
var x = Math.cos(i) * r;
var y = Math.sin(i) * r;
rs.push(new Randomwalk(x + canvas.width / 2, y + canvas.height / 2, colorOptions[config.color].fg));
}
} else if (config.distribution === "anima") {
var r = 155;
for (var i = 0; i < 2 * Math.PI; i += 0.04) {
var x = Math.cos(i) * r;
var y = Math.sin(i) * r;
rs.push(new Randomwalk(x + canvas.width / 2, y + canvas.height / 2, colorOptions['blue'].fg));
}
for (var i = 0; i < 2 * Math.PI; i += 0.06) {
var x = Math.cos(i) * r;
var y = Math.sin(i) * r;
rs.push(new Randomwalk(x + canvas.width / 2, y + canvas.height / 2, colorOptions['fire'].fg));
}
for (var i = 0; i < 2 * Math.PI; i += 0.06) {
var x = Math.cos(i) * r;
var y = Math.sin(i) * r;
rs.push(new Randomwalk(x + canvas.width / 2, y + canvas.height / 2, colorOptions['green'].fg));
}
} else if (config.distribution === "heart") {
for (var t = 0; t < 300; t++) {
x = 16 * Math.pow(Math.sin(t), 3);
y = 100 - (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
x *= 12;
y *= 12;
rs.push(new Randomwalk(x + canvas.width / 2, y - 800, colorOptions[config.color].fg));
}
} else if (config.distribution = 'point') {
for (var i = 0; i < 75; i++) {
rs.push(new Randomwalk(canvas.width / 2, canvas.height / 2, colorOptions[config.color].fg));
}
}
}
init();
// options
// {
// color: ['orange', 'blue', 'gold', 'green', 'purple', 'mono'],
// distribution: ['random', 'grid', 'heart', 'circle', 'anima']
// }
var toggle = renderLoop(function() {
rs.forEach(function(r) {
r.update();
r.draw(ctx);
});
});
config.init = init;
config['pause/unpause'] = function freeze() {
toggle();
};
var gui = new dat.GUI();
gui.add(config, 'color', ['fire', 'blue', 'gold', 'green', 'purple', 'mono']);
gui.add(config, 'distribution', ['random', 'grid', 'heart', 'circle', 'anima', 'point']);
gui.add(config, 'init');
gui.add(config, 'pause/unpause');
config['.'] = 'Right click on image to save';
gui.add(config, '.');
HTML菊花图案绘制,HTML5/Canvas数学之美 - 神秘花圈图案生成器相关推荐
- HTML菊花图案绘制,用HTML5中的canvas元素画菊花
用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩. 使用Canvas元素绘制美丽的花朵 var context; var A,n; function btn_onclick() ...
- html城市绘制,HTML5/Canvas二分法构建城市版图
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var ctx = fullscreenCanvas().ctx; var canvas = ctx.can ...
- HTML5canvas万花筒的绘制,HTML5/Canvas万花筒镜像绘制画板应用
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 /* Canvas kaleidoscope drawing. Supports mouse, touch ...
- HTML菊花图案绘制,国画菊花绘画(图解)
得闲图 画菊花其实也不是一日之功,所谓凡事只要意志坚,没有学不会练不好的事情.画菊花,要想快速学会,其实也不难,今天小编就给大家推荐一种快速画菊花的方法,戏画画画的朋友可以批判地吸收一些技法,特别是那 ...
- 【绘制】HTML5 Canvas 中渐变色和图案(图文、示例)
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
- html绘制圆形和弧形的代码,通过HTML5 Canvas API绘制弧线和圆形的教程
在html5中,CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法,请参考以下属性和方法介绍: JavaScript Code复制内容到剪贴板 arc(x, y, ...
- HTML5 Canvas 高仿逼真 3D 布料图案效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.下面给大家分享一个 HTML5 C ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- html5 canvas 椭圆,html5中怎么利用Canvas绘制椭圆
html5中怎么利用Canvas绘制椭圆 发布时间:2021-07-08 16:32:10 来源:亿速云 阅读:58 作者:Leah html5中怎么利用Canvas绘制椭圆,针对这个问题,这篇文章详 ...
最新文章
- 朋友在小厂待到三十多岁了 现在跳槽能找到什么样的工作
- Altium Designer唤出关掉的窗口
- linux 文件io实例代码,linux 文件IO(示例代码)
- Linux 命令之 ll -- 列出当前文件或目录的详细信息
- php实现数字滚动效果,vue如何实现数字滚动增加效果?代码示例
- MySQL流浪记(七)—— MySQL删除表数据
- mysql在同一台机器上实现主从_MySQL 5.7主从搭建(同一台机器)
- ORA-01810格式代码出现两次 的解决方案
- scala面试问题_Scala高级面试问答
- 2009年IT行业最重要的十大认证
- 学习资料(干货汇集)不断更新【更新于2017-9-17】
- matlab的mkdir创建新的文件夹,并把图像保存在该文件夹内
- 破天服务器的系统,《新破天一剑》束缚系统
- 使用百度的地图生成器部署到https域名
- 中山纪中集训Day5叒是测试
- react 日期格式 排序
- 使用vue-print-nb打印element table时表格打印不全的问题
- 上午还在改bug,下午就被离职!年底大裁员寒潮来袭……
- 农用旋涡泵行业调研报告 - 市场现状分析与发展前景预测
- Nginx反向代理服务
热门文章
- Android 头 5 年最重要的 20 个里程碑
- 行为式验证码家族再添一员 网易易盾推出推理拼图验证码
- 19号笔刷是哪个_19号笔刷怎么设置?超详细的19号笔刷设置!
- 计算器app制作实录
- C 语言基础【对称数】
- SQL Server常见面试题
- 企业应如何正确应对负面报道?
- 每一个JavaScript开发者都应该知道的10道面试题
- 计算机二级c语言考试内容有哪些,全国计算机二级C语言公共部分考什么的那些内容?..._公共英语考试_帮考网...
- Spring框架下集成Activiti 5.17.0的diagram-viewer