//decide color put into array //gradient in javascript //set two colors and alpha //add colorstop //draw circle in randon position //with random color. random size //-> put all painting in a function let colors = ['#390099','#9e0059','#ff0054','#ff5400','#ffbd00','#FF99C8','#FCF6BD']; function setup() { createCanvas(windowWidth, windowHeight); background(0); } function draw(){ let x = random(-0.5, 1.5) * width; let y = random(-0.5, 1.5) * height; let d = decreaseRandom(3) * width; // console.log("size:"+d); let a = random(2*PI); gradientCircle(x, y, d, a); // console.log("location:"+x,y); } // to made the size appear more smaller one than just randon between small and big function decreaseRandom(t) { let n = 0.5; while (t > 0) { n = random(n); t-- // console.log("n:"+n); } return n; } function gradientCircle(x, y, d, a) { let grd = drawingContext.createLinearGradient(-d / 2, 0, d / 2, 0); //https://p5js.org/reference/#/p5/drawingContext // to call javascript function //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient let col1 = color( // chose a color from the color array colors[//in the array, pic a location on noise // times the length and get the int to chose one color int(noise(x * 0.1, y * 0.1) * colors.length)] ); let col2 = color(random(colors)); while (col1 == col2) { col2 = color(random(colors)); } col1.setAlpha(random(300)); col2.setAlpha(random(300)); //https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop grd.addColorStop(0, col1); grd.addColorStop(1, col2); push(); drawingContext.fillStyle = grd; noStroke(); translate(x, y); rotate(a); circle(0, 0, d); pop(); }