Rough.js在Vue3中生成随机蒙德里安风格的抽象艺术

本文由ScriptEcho平台提供技术支持

项目地址:传送门

Mondrian风格艺术生成器:用Vue和RoughJS创造抽象艺术

应用场景

Mondrian风格艺术以其大胆的色彩块和简单的几何形状而闻名。这种风格可以应用于各种设计项目,包括海报、插图和网页设计。

代码基本功能

这段代码使用Vue和RoughJS库创建一个交互式Mondrian风格艺术生成器。它允许用户单击一个海报,生成由随机形状和颜色的块组成的抽象艺术品。

功能实现步骤及关键代码分析

  1. **创建框架:**首先,我们使用RoughJS库创建了一个600x700像素的框架。框架定义了艺术品的空间,并提供了一个边界。
javascript 复制代码
let frame = roughSVG.rectangle(0, 0, 600, 700, {
  strokeWeight: 5,
})
  1. **定义样式和参数:**我们定义了一组颜色、样式、尺寸和角度,用于生成块。这些参数将随机组合,创建各种各样的块。
javascript 复制代码
let colors = ['#C0C0C0', '#E91B24', '#FFD207', '#0000FF', '#000000']
let styles = ['hachure', 'zigzag', 'cross-hatch', 'dashed']
let sizes = [40, 80, 120, 160, 200]
let angles = [45, 70, 120, 190, 240]
  1. **生成块:**我们创建了一个函数generateBlocks(),用于生成块并将其添加到海报中。该函数循环遍历框架,随机生成每个块的尺寸、颜色、样式和角度。
javascript 复制代码
function generateBlocks() {
  let y = 0
  let x = 0
  let width = 600
  let height = 700
  let currHeight, currWidth, num

  while (y < height) {
    x = 0
    while (x < width) {
      block = roughSVG.rectangle(x, y, currWidth, currHeight, {
        fill: colors[Math.floor(Math.random() * colors.length)],
        strokeWidth: 2,
        bowing: 1.8,
        hachureAngle: angles[Math.floor(Math.random() * colors.length)],
      })
      svg.appendChild(block)
      x = x + currWidth
      currWidth = sizes[Math.floor(Math.random() * colors.length)]
    }
    y = y + currHeight
    currHeight = sizes[Math.floor(Math.random() * colors.length)]
  }
}
  1. **事件监听:**我们添加一个事件监听器,当用户单击海报时,它将清除海报并生成新的块。
javascript 复制代码
poster.addEventListener('click', () => {
  poster.innerHTML = ''
  generateBlocks()
})

总结与展望

开发这段代码是一个有趣且有教育意义的经历。我了解了RoughJS库的强大功能,以及如何使用Vue来创建交互式应用程序。

未来,我计划扩展此代码以包含更多功能,例如:

  • 保存和加载艺术品
  • 调整块的尺寸、颜色和样式
  • 添加动画效果

我相信这个代码可以成为一个有价值的工具,用于创建独特的和引人注目的Mondrian风格艺术品。

更多组件:


获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址:传送门

微信搜索ScriptEcho了解更多

相关推荐
Yaml4几秒前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 分钟前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 分钟前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 分钟前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v6 分钟前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫7 分钟前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.12 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript