let w = 900, h = 900; let count = 70; let s = 10; var ss; let xa = [count * 3]; let ya = [count * 3]; let level = 30; let percent = 0.09; let dir1, dir2, dir3; let pal = ['#ECAA9C','#B1D1C6', '#2E5B8B', '#F2CA60', '#d4c7a3', '#DE7830', '#513C2C', '#1F3858', '#C9292E', '#bfb8a3']; function mousePressed() { redraw(); } function setup() { createCanvas(w, h); noLoop(); smooth(); colorMode(HSB, 360, 100, 100, 100); dir1 = PI/4 * 3; dir2 = PI/4 * 1; dir3 = PI/4 * 5; } function drawGrids() { stroke(0,0,10,100); strokeWeight(1.5); noFill(); var tx = int(w / s); var ty = int(h / s); for(let i = 0; i < ty; i++) { cy = i * s; for(let j = 0; j < tx; j++) { cx = j * s; point(cx, cy); } } } function drawFrame() { rectMode(CENTER); noStroke(); fill(220); rect(s*2-1, h/2, s*4, h); rect(w-s*2+1, h/2, s*4, h); rect(w/2, s*2-1, w, s*4); rect(w/2, h-s*2+1, w, s*4); } // --------------------------------------------- // // --------------------------------------------- // // --------------------------------------------- // function drawGradientCircle(px,py, radius, col) { var ctx = drawingContext; push(); noStroke(); translate(px, py); let r1 = radius; let r2 = radius*.1; let gradient = ctx.createRadialGradient( 0,0,r1,radius/2,-radius/2,r2 ); gradient.addColorStop(1, color(0,0,100,100)); gradient.addColorStop(0.4, col); ctx.fillStyle = gradient; circle(0, 0, r1); pop(); } function drawNoiseLines(num) { var o = 150; noFill(); stroke(0,0,0,2); for(let i = 0; i< num; i++) { var x1 = random(-o, w + o); var y1 = random(-o, h + o); var x2 = random(-o, w + o); var y2 = random(-o, h + o); line(x1, y1, x2, y2); } } function drawVerticalLines(num) { noFill(); stroke(0,0,0,23); for(let j = 0; j < 3; j++) { push(); shearX(PI / random(2,18)); var sx = random(w/4, w*3/4); var sy = random(w/6, w/3); var ln = random(w/2); var e = 3; for(let i = 0; i< num; i++) { var k = random(0,2); var n = noise(i*0.01) -0.5; line(sx, sy+i*e + k, sx+ln*n, sy+i*e + k); } pop(); } } // --------------------------------------------- // // --------------------------------------------- // // --------------------------------------------- // function getAmp(i, c, level) { var theta = map(i, 0, c, -PI,PI); return level * sin(theta) * noise(i*0.001); } function drawLines(x1, y1, x2, y2) { var num = 600; var sx, sy, rr; var amp; noStroke(); fill(0, 5, 20, 50); for(let i = 0; i < num; i++) { rr = noise(i*0.05)*5; amp = getAmp(i, num, 50); sx = x1 - i*(x1-x2)/num + amp; sy = y1 - i*(y1-y2)/num - amp; circle(sx, sy, rr); } } function drawColorfulCircle(i) { var cr = int( random(30,150) ); var cx = random(+s*3+cr, w-s*3-cr); var cy = random(+s*3+cr, h-s*3-cr); var diff_cx = random(-3,3); var diff_cy = random(-6,6); var pp = 0; // add arc position0 let i3 = i*3; let ir = (cr/2+pp); let d0 = random(0, TWO_PI/3); xa[i3] = cx + ir * cos(d0); ya[i3] = cy + ir * sin(d0); // add arc position1 let d1 = random(TWO_PI/3, TWO_PI*2/3); xa[i3 + 1] = cx + ir * cos(d1); ya[i3 + 1] = cy + ir * sin(d1); // add arc position2 let d2 = random(TWO_PI*2/3, TWO_PI) ; xa[i3 + 2] = cx + ir * cos(d2); ya[i3 + 2] = cy + ir * sin(d2); var type = random(); var dd = random(-3,3); var z = 5; shuffle(pal, true); noStroke(); if(type < percent) { fill(pal[0]); circle(cx + dd, cy - dd - z, cr); } else if(type < percent*2) { fill(pal[1]); circle(cx + dd, cy - dd - z, cr); } else if(type < percent*3) { fill(pal[2]); circle(cx + dd, cy - dd - z, cr); } var num = 600; var step = TWO_PI / num; var theta, diff_dx, diff_dy; noStroke(); for(let k = 0; k < num; k++) { theta = step*k; diff_dx = random(0,2); diff_dy = random(0,2); var dx = cx + cr/2 * cos(theta); var dy = cy + cr/2 * sin(theta); fill(0,0,7,random(50,80)); circle(dx+diff_dx, dy+diff_dy, random(0,3)); } } function draw() { background(220); for(let i = 0; i < count; i++) { drawColorfulCircle(i); } var gg = count*3; for(let i = 0; i < 8; i++) { var a1 = int(random(gg)); var a2 = int(random(gg)); drawLines(xa[a1], ya[a1], xa[a2], ya[a2]); } drawGrids(); drawFrame(); } function getColor() { var l = pal.length; var cc = random(); shuffle(pal, true); if(cc < 1/l) { return pal[0]; } else if (cc < 2/l + .05) { return pal[1]; } else if (cc < 3/l - .03) { return pal[2]; } else if (cc < 4/l + .05) { return pal[3]; } else if (cc < 5/l - .02) { return pal[4]; } else if (cc < 6/l + .06) { return pal[5]; } else if (cc < 7/l + .02) { return pal[6]; } else if (cc < 8/l - .01) { return pal[7]; } else if (cc < 9/l + .02) { return pal[8]; } else { return pal[9]; } }