Draw some line art

Developer
Matthias Dittgen
Size
3,145 Kb
Views
34,408
  1. Draw some line art Previews
  2. Draw some line art HTML Codes
  3. Draw some line art CSS Codes
  4. Draw some line art JS Codes

How do I make an draw some line art?

…is a string art inspired experiment, I've done about five year ago using Flash/Actionscript, which I now ported to Javascript.. What is a draw some line art? How do you make a draw some line art? This script and codes were developed by Matthias Dittgen on 21 August 2022, Sunday.

Draw some line art Previews
IQ Test

Draw some line art - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Draw some line art</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="space"></canvas>
<div id="info"> <h1>Draw some lines art</h1> <p> …is a string art inspired experiment<br> R: <span id="r"></span> G: <span id="g"></span> B: <span id="b"></span> x: <span id="x"></span> y: <span id="y"></span><br> click to start over again </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Draw some line art - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { position: absolute; top: 0px; left: 0px; margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px; line-height: 20px;
}
p span { display: inline-block; width: 25px; color: #ffffff;
}

Draw some line art - Script Codes JS Codes

var main = (function () {	var canvas, ctx;	var deg360 = Math.PI*2; var r, g, b; var dom = {}; var count = 0; var last = 5;	var latency = 5; var points = [];	var randomRange = function (min, max) {	return min + Math.random() * (max - min);	};	var randomRangeInt = function (min, max) {	return Math.round(randomRange(min, max));	}	var cropInt = function (min, max, int) {	return Math.min(max, Math.max(min, int));	}	var colorCompChange = function (colorComp) {	return cropInt(50, 200, colorComp + randomRangeInt(-15, 15));	} var circle = function (x, y, r, c) { ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x, y, r, 0, deg360, false); ctx.fillStyle = 'rgb(' + c.join(',') + ')'; ctx.fill(); }; var line = function (sx, sy, ex, ey, w, c) { ctx.beginPath(); ctx.moveTo(sx, sy); ctx.lineTo(ex, ey); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(' + c.join(',') + ', 0.5)'; ctx.stroke(); }; var drawNextPoint = function (x, y) { // update color components r = colorCompChange(r); g = colorCompChange(g); b = colorCompChange(b); // display corrdinates and color components var v = {x:x, y:y, r:r, g:g, b:b}; for (var k in v) dom[k].innerHTML = v[k]; // draw current point circle(x, y, 3, [r, g, b]);	// connect to last 5 points	for (var i = 0; i < points.length; i++) { var w = randomRange(0.2, 3); line(x, y, points[i].x, points[i].y, w, [r, g, b]);	}	// (re)set the last 5 points if (points.length > last) {	points.splice(0, 1); }	points.push( { x: x, y: y } ); }; var startOver = function () { points = []; ctx.clearRect (0, 0, canvas.width, canvas.height); }; var demoCount = 0; var demo = function () { demoCount++; var x, y; if (points.length==0) { x = 240; y = 80; } else { x = points[points.length-1].x; y = points[points.length-1].y; }	x = cropInt(0, canvas.width, x + randomRangeInt(-35, 35));	y = cropInt(0, canvas.height, y + randomRangeInt(-35, 35)); drawNextPoint(x, y); if (demoCount < 100) { setTimeout(arguments.callee, 1000/60); } }; var start = function () { canvas = document.getElementById('space'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); var spans = 'rgbxy'; for (var i=0; i<spans.length; i++) dom[spans[i]] = document.getElementById(spans[i]);	r = randomRangeInt(50, 200);	g = randomRangeInt(50, 200);	b = randomRangeInt(50, 200); canvas.addEventListener('click', startOver, false); canvas.addEventListener('mousemove', function (e) {	count++; if (count % latency == 0) {	drawNextPoint(e.clientX, e.clientY); } }, false); demo(); }; // domReady if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function () { document.removeEventListener('DOMContentLoaded', arguments.callee, false); setTimeout(start, 60); }, false ); }
})();
Draw some line art - Script Codes
Draw some line art - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 21, 2022
Rating 4.5
Size 3,145 Kb
Views 34,408
Do you need developer help for Draw some line art?

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!

Matthias Dittgen (matths) Script Codes
Name
Draw a line coord
Additive color mix with triangles
Text-shadow outline demo
SVG Button
Moving lines illusion while scrolling
Shapes in cricles
Animating non-CSS property
1x1 trainer
Smooth font animation
Outline demo
Create amazing Facebook ads 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!