Flowers

Developer
Khalkeus
Size
2,588 Kb
Views
8,096
  1. Flowers Previews
  2. Flowers HTML Codes
  3. Flowers CSS Codes
  4. Flowers JS Codes

How do I make an flowers?

Click or hit space to generate a new set of tiles. What is a flowers? How do you make a flowers? This script and codes were developed by Khalkeus on 11 November 2022, Friday.

Flowers Previews
IQ Test

Flowers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>flowers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- click to refresh -->
<canvas id = "c"></canvas> <script src='https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flowers - Script Codes CSS Codes

body, html{	width: 100%;	height: 100%;	margin: 0px;	padding: 0px;	overflow: hidden;
}
canvas{	width: 100%;	height: 100%;
}

Flowers - Script Codes JS Codes

var canvas;
// Utility functions
function randomFloat(a, b){	var r = (Math.random() * (b - a) + a);	return r;
}
function randomFromList(list){	return list[Math.floor(Math.random() * list.length)];
}
// Make a flower tile
function makePattern(palette, x, y, size) {	var numLayers = randomFloat(1, 5);	var rect = new paper.Path.Rectangle(x, y, size, size);	rect.fillColor = randomFromList(palette);	rect.strokeColor = palette[0];	rect.strokeWidth = 5;	var petal;	var center = new paper.Point(x + size/2, y + size/2);	for(var i = 0; i < numLayers; i++){	var rand = Math.random()*2;	if(rand < 1){	petal = new paper.Path.Circle(x + size/2, y + size/(randomFloat(2, 3)), randomFloat(.1, size/3));	petal.scale(randomFloat(.01, 1), randomFloat(.01, 1));	}else{	petal = new paper.Path.Rectangle(x + size/3, y + size/3, randomFloat(.1, size/3), randomFloat(.1, size/3));	}	if(Math.random < .5){	petal.fillColor = palette[i % palette.length];	}else{	petal.strokeColor = palette[i % palette.length];	}	petal.strokeWidth = randomFloat(1, 10);	var numPetals = Math.floor(randomFloat(5, 20));	var p = petal.clone();	for(var j = 0; j < numPetals; j++){	p.rotate(360/numPetals, center);	p = p.clone();	}	petal.remove();	}
}
// Make grid of flower tiles
function makeGrid(){	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	var palettes = [['#ffffff', '#000000', '#ff4422'], ['#4286f4', '#ffae00', '#eff2e1'], ['#4af9a8', '#f73162', '#ffffff'], ['#343D42', '#CBE7C1', '#F6EDC2']];	var pal = randomFromList(palettes);	var tileSize = randomFloat(50, 200);	paper.project.activeLayer.removeChildren();	paper.view.draw();	var rect = new paper.Path.Rectangle(0, 0, window.innerWidth, window.innerHeight);	rect.fillColor = pal[0];	var leftOverX = Math.floor(window.innerWidth/tileSize);	var leftOverY = Math.floor(window.innerHeight/tileSize);	console.log(leftOverX)	console.log(leftOverY)	var i = 0;	var j = 0;	for(var x = (window.innerWidth - (leftOverX * tileSize))/2; x < window.innerWidth; x += tileSize){	for(var y = (window.innerHeight - (leftOverY * tileSize))/2; y < window.innerHeight; y += tileSize){	if(i < leftOverX && j < leftOverY){	makePattern(pal, x, y, tileSize);	j++;	}	}	j = 0;	i++;	}
}
window.onload = function(){	canvas = document.getElementById('c');	canvas.width = window.innerWidth;	canvas.height = window.innerHeight;	paper.setup(canvas);	makeGrid();	paper.view.draw();
}
window.onclick = function(){	makeGrid();
}
window.onkeydown = function(e){	if(e.keyCode === 32){	makeGrid();	}
}
Flowers - Script Codes
Flowers - Script Codes
Home Page Home
Developer Khalkeus
Username khalkeus
Uploaded November 11, 2022
Rating 4
Size 2,588 Kb
Views 8,096
Do you need developer help for Flowers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Khalkeus (khalkeus) Script Codes
Name
Particle fire
Color Name Game
Warpspeed
Live pixel sorting
Soft
Binary clock
Character generator
Boids ii
Capybaras
Metaballs
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!