Hi Guys,
I wanted to use programming to create art, and I stumbled upon generative art. I am still a newbie to programming, and would like to ask the community help on the code I am writing. Here is the code:
<html>
<canvas id="canvas" width="" height=""></canvas>
<body>
<script>
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var size = 320;
var step = 20;
var dpr = window.devicePixelRatio;
canvas.width = size * dpr;
canvas.height = size * dpr;
context.scale(dpr, dpr);
function draw(x, y, width, height) {
var leftToRight = Math.random() >= 0.5;
if(leftToRight) {
context.moveTo(x, y);
context.lineTo(x + width, y + height);
} else {
context.moveTo(x + width, y);
context.lineTo(x, y + height);
}
context.strokeStyle= 'hsl(20, 100%, 50%)'
context.stroke();
}
for(var x = 0; x < size; x += step) {
for(var y = 0; y < size; y+= step) {
draw(x, y, step, step);
}
}
</script>
</body>
</html>
Here is the output:
My question is how can I make some lines have different colors than the other, by using hsl and not gradient?
Thank you in advance!!!
). I think for the sort of thing you’re looking to introduce, you may want to see if generating random HSL colours for the different lines will give you what you want. I’ve come up with the following code which uses random number generation to output a different HSL colour every time it is run. What I haven’t been able to do is find where to put it in your code so that it affects different lines rather than the whole thing. At first I thought it may need to go in the inner