Generative Art- Need your help please

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:

<canvas id="canvas" width="" height=""></canvas>
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%)'

for(var x = 0; x < size; x += step) {
  for(var y = 0; y < size; y+= step) {
    draw(x, y, step, step);    

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!!!

1 Like

Hi @Katoch!

Looks like you’re having fun there! :slightly_smiling_face:

It’s great that you’re already experimenting with your new JavaScript skills to build actual projects. That’s definitely a great way to learn! :+1:
As the programming courses in this academy are for future blockchain developers, we can’t really support posts about projects specific to other industries such as the one you are working on here, and so I would encourage you to ask for help and support in forums such as or a forum aimed at developers in the field of art and graphic design.

Having said that, the last thing we want to do is discourage you from developing your JavaScript skills, as the basic functionality can be used in programs for any industry, including blockchain development.

So, I have had a quick look and play with your program (I did actually get a bit distracted and started enjoying myself too much :wink:). 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 for loop, but that didn’t seem to work. As I have no knowledge of how the different context methods work to draw the lines, and also no experience in this particular field, I’ll have to leave you with my contribution below and these thoughts to get you thinking further. Random number generation is something that is useful in any programming field and so it’s useful to learn about in greater depth anyway, even if you end up finding something else is more appropriate here.

let randomH = Math.floor(Math.random() * 361); //random number 0 - 360 (degrees)
let randomS = Math.floor(Math.random() * 101); //random number 0 - 100 (%)
let randomL = Math.floor(Math.random() * 101); //random number 0 - 100 (%)
context.strokeStyle = `hsl(${randomH}, ${randomS}%, ${randomL}%)`;
/* Here I've used a template literal which I think is much clearer than
string concatenation but you could use either */
// The following console.log() is just to check the HSL string(s) generated.
console.log(`hsl(${randomH}, ${randomS}%, ${randomL}%)`);

If you want to just run this code separately first, you’ll need to comment out the context.strokeStyle variable, as it will throw an error unless it is used in the context of your program. Otherwise it runs successfully if you insert it into your program first.

If you want to learn more about the different ways to generate random numbers, or how template literals work, check out these links to MDN web docs :


Template literals


Hi @jon_m,
Thank you so so soooo much for your input!!! I will definitely try it once I am done working on the some of the course material today. I am glad you had fun working on it hahahaha, my curiosity about integrating coding and art lead me there because I wanted to know if I can take my hobby to the digital world.
Here is a link to a reddit for generative art, so many talented artist:

I appreciate the words of encouragement! This project made me even more interested in coding.