Spiral Art Maker

Developer
David Storey
Size
4,185 Kb
Views
44,528
  1. Spiral Art Maker Previews
  2. Spiral Art Maker HTML Codes
  3. Spiral Art Maker CSS Codes
  4. Spiral Art Maker JS Codes

How do I make an spiral art maker?

Forked from Nick Watton's Pen Canvas love.. What is a spiral art maker? How do you make a spiral art maker? This script and codes were developed by David Storey on 12 July 2022, Tuesday.

Spiral Art Maker Previews
IQ Test

Spiral Art Maker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Spiral Art Maker</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Lato'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<div id="controls"> <p id="intro">Try different values below and click the Generate button to create new art. Hover over inputs for tips.</p>	<p><label for="numberOfLines">No. of lines</label><input type="text" id="numberOfLines" value="6" title="Number of lines to draw - between 3 and 8 gives the best results"/></p>	<p><label for="size">Line width</label><input type="text" id="size" value="4" title="Width of the lines - try chunky lines for a different effect"/></p>	<p><label for="distance">Step size</label><input type="text" id="distance" value="1" title="The length of each line/step before rotating - smaller numbers produce smoother patterns"/></p>	<p><label for="speed">Draw speed</label><input type="text" id="speed" value="30" title="Delay in milliseconds between draw updates - doesn't affect the end result"/></p>	<p><label for="increment">Step increment</label><input type="text" id="increment" value="0.8" title="Amount to increase the step size by each time - very small numbers are best"/></p>	<p><label for="turn">Rotation amount</label><input type="text" id="turn" value="45" title="Amount to rotate by between steps"/></p>	<p><label for="wobble">Split point</label><input type="text" id="wobble" value="7" title="An interval afterwhich the rotation amount resets to zero - results in sharp turns. Set to zero to turn off."/></p>	<p><label for="opacity">Line opacity</label><input type="text" id="opacity" value="0.5" title="Opacity/alpha values of the lines"/></p> <p id="shareLine"><label for="sharecode">Share code</label><input type="text" id="sharecode" value="" title="Copy and paste this code for easily sharing between friends"/></p>	<p id="buttonsLine"><input type="submit" id="submit" value="Generate" title="Click to redraw with your new settings"/><input type="button" id="hide" value="Hide" title="Get rid of this settings panel - you won't get it back though!"/></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Spiral Art Maker - Script Codes CSS Codes

body { color: #000; background-color:#1D1F20; margin: 0; padding: 0; font-family: 'Lato', sans-serif;
}
canvas { background-color:#000; display: block; margin: 0; width: 100%; height: 100%; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.65); position: absolute; top: 0; right: 0; left: 0; right: 0;
}
#controls { position: fixed; top: 20px; left: 20px; border:1px solid #808080; padding: 5px 15px; background: #CCC; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.65); opacity: 0.95;
}
#intro { width: 170px; font-size: 0.9em; padding-bottom: 10px; font-weight: bold;
}
#controls p { margin: 5px 0;
}
#controls label { display: inline-block; width: 120px; font-size: 0.9em;
}
#controls input { width: 50px; text-align: center;
}
#controls #submit { margin-right: 15px; width: 110px;
}
#controls #hide { width: 50px;
}
#controls #submit, #controls #hide { font-family: 'Lato', sans-serif; cursor: pointer;
}
#controls #shareLine { margin-top: 15px;
}
#controls #buttonsLine { margin-top: 15px;
}

Spiral Art Maker - Script Codes JS Codes

$(function () {	var myCanvas, context, width, height;	var lines = [], numberOfLines = 12;	var colours = ['#FFD800','#FF6A00','#FF0000','#0094FF','#0026FF','#4800FF','#7FFF8E','#B6FF00','#4CFF00', '#FFFFFF'];	var Line = function() {	return {	x: 0,	y: 0,	size: 4,	colour: '#FFFFFF',	distance: 1,	speed: 30,	increment: 0.8,	turn: 45,	wobble: 7,	rotation: random(0, 359),	randomVariance: 0,	opacity: 0.5,	clockwise: true,	glow: true,	interval: {},	tick: function() {	var oldX = this.x;	var oldY = this.y;	// Random wander	if (this.randomVariance) {	this.x += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);	this.y += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);	}	if (this.clockwise)	this.rotation -= this.turn;	else	this.rotation += this.turn;	// Wobble (point at which lines bend sharply)	if (this.wobble) {	if (this.rotation < 0) this.rotation += this.wobble;	if (this.rotation >= this.wobble) this.rotation -= this.wobble;	}	this.x = this.x + this.distance * Math.sin(this.rotation);	this.y = this.y + this.distance * Math.cos(this.rotation);	if (this.glow) {	drawLine(oldX, oldY, this.x, this.y, this.size * 6, this.colour, 0.03);	drawLine(oldX, oldY, this.x, this.y, this.size * 4, this.colour, 0.05);	}	drawLine(oldX, oldY, this.x, this.y, this.size, this.colour, this.opacity);	this.distance += this.increment;	return this;	},	init: function(details) {	for (var x in details) {	this[x] = details[x];	}	var self = this;	this.interval = setInterval(function() { self.tick(); }, this.speed);	return this;	},	stop: function() {	clearInterval(this.interval);	}	};	};	if ($("canvas").length > 0) {	myCanvas = $("#canvas")[0];	context = myCanvas.getContext("2d");	resizeCanvas();	eventListeners();	startAnimation();	}	function resizeCanvas() {	myCanvas.width = $("canvas").width(); myCanvas.height = $("canvas").height(); width = myCanvas.width;	height = myCanvas.height;	}	$(window).on('resize', resizeCanvas);	function eventListeners() {	$('#submit').on('click', function() {	var options = {};	$('#controls input[type="text"]').each(function() {	options[$(this).attr('id')] = checkNumber($(this).val());	});	numberOfLines = options.numberOfLines;	var shareString = '';	for (var x in options) {	shareString += options[x] + '|';	}	$('#sharecode').val(shareString);	startAnimation(options);	return false;	});	$('#hide').on('click', function() {	$('#controls').hide();	});	$('#sharecode').on('paste', function() {	setTimeout(function() {	var shareString = $('#sharecode').val().split('|');	$('#controls input[type="text"]').not('#sharecode').each(function(x) {	$(this).val(shareString[x]);	});	}, 100);	});	}	function startAnimation(options) {	options = options ? options : {};	options.x = width / 2;	options.y = height / 2;	context.clearRect(0, 0, width, height);	for (var x = 0; x < lines.length; x++) {	lines[x].stop();	}	lines = [];	for (var y = 0; y < numberOfLines; y++) {	options.colour = colours[random(0, colours.length - 1)];	options.rotation = (360 / numberOfLines) * y;	lines.push(	Line().init(options)	);	}	}	function drawPoint(x, y, size, colour) {	context.fillStyle = colour;	context.fillRect(x, y, size, size);	}	function drawLine(x1, y1, x2, y2, size, colour, opacity) {	setOpacity(opacity);	context.beginPath();	context.strokeStyle = colour;	context.lineWidth = size;	context.moveTo(x1, y1);	context.lineTo(x2, y2);	context.stroke();	context.closePath();	}	function setOpacity(alpha) {	context.globalAlpha = alpha;	}	function random(min, max) {	return (Math.floor(Math.random() * ((max - min) + 1) + min));	}	function checkNumber(n) {	n = parseFloat(n);	if (isNaN(n) || n < 0) n = 0;	return n;	}
});
Spiral Art Maker - Script Codes
Spiral Art Maker - Script Codes
Home Page Home
Developer David Storey
Username davidpanik
Uploaded July 12, 2022
Rating 3
Size 4,185 Kb
Views 44,528
Do you need developer help for Spiral Art Maker?

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!

David Storey (davidpanik) Script Codes
Name
Cage-o-graph
Speed Reader
Twitter Extractor
Chuck Norris Quotes
Spiral Art Maker
The Swear Machine
Fibonacci sequence
Parallax landscape
Christmas CSS Challenge
Blobs
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!