code your way_ Week2_recode2

//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();
}