Commit 3f63d75e authored by Md Abid Sikder's avatar Md Abid Sikder

Added Rose Squares project

parent 7754382c
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rose Squares</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
class HollowSquare
{
constructor(x, y, squareWidth, borderColorFunc, innerColorFunc, angleFunc)
{
this.x = x;
this.y = y;
this.squareWidth = squareWidth;
this.borderColorFunc = borderColorFunc;
this.innerColorFunc = innerColorFunc;
this.angleFunc = angleFunc;
}
display()
{
push();
translate(width / 2, height / 2);
rotate(this.angleFunc(frameCount));
translate(-width / 2, -height / 2);
this.borderColorFunc();
rectMode(CORNERS);
rect(this.x, this.y, width - this.x, height - this.y);
this.innerColorFunc();
rect(this.x + this.squareWidth, this.y + this.squareWidth, width - this.x - this.squareWidth, height - this.y - this.squareWidth);
pop();
}
}
let squares = [];
let spaceBetween = 20;
let squareWidth = 10;
function setup()
{
createCanvas(1000, 1000);
noStroke();
for (let i = 0; i < width / 2; i += spaceBetween)
{
let customAngle = i / 10000;
let customInnerColor = () =>
{
colorMode(HSB);
fill(360*noise(i/3000), 360, 360, 1);
}
squares.push(new HollowSquare(
i,
i,
squareWidth,
() =>
{
colorMode(RGB);
fill(0, 0, 0, 20);
},
customInnerColor,
(x) =>
{
return x * customAngle;
}
))
}
}
let angle = 0;
function draw()
{
for (let square of squares)
{
square.display();
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment