let palette = ["#4CB5AE", "#bf98b2", "#cca1b6", "#e2b2b6", "#ebc5bc" ]; //let palette = ["#CABAC8", "#FF101F", "#B2DDF7", "#81D6E3", "#4CB5AE", "#bf98b2", "#cca1b6", "#e2b2b6", "#ebc5bc"]; let flwkey; var t; kumaleon.options = { onInit: () => { // called when the app is initialized }, onUpdate: () => { // called in requestAnimationFrame loop }, onResize: () => { // called when window resized }, } // p5 sample code function setup() { // pass a canvas element to app by kumaleon.setCanvas kumaleon.setCanvas(createCanvas(windowWidth, windowHeight).canvas) // background(255) noFill() noLoop() graphics = createGraphics(width, height); graphics.stroke(255, 10 / 100 * 255); /** for (i = 0; i < graphics.width * graphics.height * 20; i++) { graphics.point( random(graphics.width), random(graphics.height) ); } */ let rand2 = random(10); if(rand2>0){ flwkey = parseInt(random(2,4)); }else if(rand2>7){ flwkey = parseInt(random(1,3)); }else if(rand2>5){ flwkey = parseInt(random(7,9)); }else if(rand2>3){ flwkey = parseInt(random(1,1)); }else{ flwkey = parseInt(random(0,4)); } } function drawPolygon(x, y, radius) { const r = (Math.random() * 0.4 + 0.6) * radius const offsetX = x + (Math.random() * 2 - 1) * r const offsetY = y + (Math.random() * 2 - 1) * r const angle = Math.random() * PI * 2 const n = 3 + Math.floor(Math.random() * 4) const v = createVector(r, 0) v.rotate(angle) const angleUnit = (PI * 2) / n for (let i = 0; i < n; i++) { const fromX = v.x const fromY = v.y v.rotate(angleUnit) line(offsetX + fromX, offsetY + fromY, offsetX + v.x, offsetY + v.y) } } function draw() { let couleurs = random(palette); background(couleurs); //background(210); drawvera_bk(); //image(graphics, 0, 0); drawvera_flw(); // drawvera2_2(); // image(graphics, 0, 0); } function drawvera_bk() { // background(255); const side = -1000; const gX = 4; // num of rows const gY = 15; // num of cols const cellSizeX = (width - (side * 2)) / gX; // size of row const cellSizeY = (height - (side * 2)) / gY; // size of col const scaleX = 0.65; // scale width of trapezium const scaleY = 0.65; // scale height push(); stroke(0); strokeWeight(3); translate(side, side); for (let i = 0; i < 4; i++) { for (let j = 0; j < 12; j++) { push(); const x = i * cellSizeX; const y = j * cellSizeY; translate(x + cellSizeX / 2, y); drawBezierShape_bk(); pop(); } } pop(); } function drawvera_flw() { const side = -600; // const side = -1200; // const side = -2200; // const side = 400; // const gX = 12; // const gY = 12; const gX = 12; const gY = 12; const cellSizeX = (width - (side * 2)) / gX; const cellSizeY = (height - (side * 2)) / gY; const scaleX = 0.75; const scaleY = 0.65; push(); stroke(0); strokeWeight(3); translate(side, side); for (let i = 0; i < gX; i++) { for (let j = 0; j < gY; j++) { push(); const x = i * cellSizeX + random(-1000,1000); //const x = i * cellSizeX const y = j * cellSizeY+ random(-1000,1000); translate(x + cellSizeX / 2, y); // drawbe10(); drawBezierShape_flw(); pop(); } } pop(); } function drawBezierShape_bk(x, y, r) { rand = random(10); strokeWeight(0.05); push(); translate(0, 0); r=300; rotate(random(360)); let angleStep = 360 / int(random(5000, 8000)); let noiseScale = int(random(1, 8)) * 10; beginShape(); for (let angle = 0; angle < 1060; angle += 4) { let r1 = map(noise(angle / noiseScale), 0, 1, r / 2, r); let x1 = cos(angle) * r1; let y1 = sin(angle) * r1; vertex(x1, y1); let px1 = x1 + cos(angle + 90) * r1 / 400; let py1 = y1 + sin(angle + 90) * r1 / 400; let angle2 = angle + angleStep; let r2 = map(noise(angle2 % 360 / noiseScale), 0, 1, r / 2, r); let x2 = cos(angle2) * r2; let y2 = sin(angle2) * r2; let px2 = x2 + cos(angle2 - 90) * r2 / 40; let py2 = y2 + sin(angle2 - 90) * r2 / 40; //color setting let gradientStroke = drawingContext.createLinearGradient( width * 0.1, height * 0.1, width * 1.2, height * 1.2 ); temperature =25; gradientStroke.addColorStop(0, color(0, 200,250)); gradientStroke.addColorStop(0.5, color(255, 200, 0)); gradientStroke.addColorStop(1, color(255, 200, 255)); drawingContext.strokeStyle = gradientStroke; let gradientFill = drawingContext.createRadialGradient( width / 3, height / 3, width * 0.5, width / 2, height / 2, width * 1.5 ); gradientFill.addColorStop(0, color(210, 210, 210,120)); gradientFill.addColorStop(0.2, color(210, 240,210,120)); gradientFill.addColorStop(0.5, color(random(255)+angle/20, random(255)+angle/20, random(255)+angle/20,120)); drawingContext.fillStyle = gradientFill; // bezierVertex(px1*angle*random(3), py1*angle*random(3), px2, py2, x2+angle*random(3), y2+angle); } endShape(); pop(); } function drawBezierShape_flw(x, y, r) { rand = random(10); strokeWeight(0.05); push(); translate(0, 0); r=300; rotate(random(360)); let angleStep = 360 / int(random(5000, 8000)); let noiseScale = int(random(1, 8)) * 10; beginShape(); for (let angle = 0; angle < 2000; angle += 200) { let r1 = map(noise(angle / noiseScale), 0, 1, r / 2, r); let x1 = cos(angle) * r1; let y1 = sin(angle) * r1; vertex(x1, y1); let pRatio = 400; let px1 = x1 + cos(angle + 90) * r1 / pRatio; let py1 = y1 + sin(angle + 90) * r1 / pRatio; let angle2 = angle + angleStep; let r2 = map(noise(angle2 % 360 / noiseScale), 0, 1, r / 2, r); let x2 = cos(angle2) * r2; let y2 = sin(angle2) * r2; pRatio = random(2,40); let px2 = x2 + cos(angle2 - 90) * r2 / pRatio; let py2 = y2 + sin(angle2 - 90) * r2 / pRatio; rand = random(1000); if(rand>998){ // drawbe6(); }else if(rand>920){ drawbe_t(); }else{ // drawbe(); let gradientStroke = drawingContext.createLinearGradient( width * 0.1, height * 0.1, width * 1.2, height * 0.2 ); drawbe(flwkey); } } endShape(); pop(); } function drawbe(flwkey) { strokeWeight(5); fill(0,0,0,0); stroke(240,240,0); let gradientStroke = drawingContext.createLinearGradient( width * 0.1, height * 0.1, width * 1.2, height * 1.2 ); let strkey = parseInt(random(2,4)); switch (strkey){ case 1: gradientStroke.addColorStop(0, color(0, 200,250)); gradientStroke.addColorStop(0.1, color(255, 200, 0)); gradientStroke.addColorStop(0.2, color(255, 200, 255)); break; case 2: gradientStroke.addColorStop(0, color(255, 255,255)); gradientStroke.addColorStop(0.1, color(255, 200, 0)); gradientStroke.addColorStop(0.2, color(255, 200, 255)); break; case 3: gradientStroke.addColorStop(0, color(255, 255,120)); gradientStroke.addColorStop(0.1, color(255, 200, 0)); gradientStroke.addColorStop(0.2, color(255, 200, 255)); break; } drawingContext.strokeStyle = gradientStroke; //color setting let gradientFill = drawingContext.createRadialGradient( width / 3, height / 3, width * 0.5, width / 4, height / 2, width * 0.5 ); //let flwkey = parseInt(random(1,3)); // flwkey = parseInt(random(0,3)); switch (flwkey){ case 1: gradientFill.addColorStop(0, color(240, 240, 240,random(20,140))); gradientFill.addColorStop(0.16, color(random(210,255), random(180,200), random(180,200),random(20,140))); gradientFill.addColorStop(0.2, color(random(240,255), random(50,150), random(50,150),random(20,140))); break; case 2: gradientFill.addColorStop(0, color(0, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(150,255), 210,120,random(20,240))); gradientFill.addColorStop(0.2, color(random(150), random(150), random(100,255),random(20,240))); break; case 3: gradientFill.addColorStop(0, color(0, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(150,255), 210,120,random(20,240))); gradientFill.addColorStop(0.2, color(random(150), random(150), random(100,255),random(20,240))); /** gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(150,255), 210,120,random(20,240))); gradientFill.addColorStop(0.2, color(random(100,250), random(150,200), random(10,205),random(20,240))); */ break; case 4: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(210, 110,220,random(20,240))); gradientFill.addColorStop(0.5, color(0, random(150,200), random(10,105),random(20,240))); break; case 5: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(110,110,120,random(20,240))); gradientFill.addColorStop(0.5, color(0, random(150,200), random(10,105),random(20,240))); break; case 6: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(110,110,220,random(20,240))); gradientFill.addColorStop(0.5, color(110,210,220,random(20,240))); break; case 7: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(240),random(240),220,random(20,240))); gradientFill.addColorStop(0.5, color(random(240),random(240),220,random(20,240))); break; case 8: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(240),random(240),120,random(20,240))); gradientFill.addColorStop(0.5, color(random(240),random(240),random(240),random(20,240))); break; case 9: gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(100,140),random(10,240),random(230,240),random(120,240))); gradientFill.addColorStop(0.5, color(random(230,240),random(230,240),random(230,240),random(20,240))); break; default: } /** gradientFill.addColorStop(0, color(240, 240, 240,random(20,140))); gradientFill.addColorStop(0.16, color(random(210,255), random(180,200), random(180,200),random(20,140))); gradientFill.addColorStop(0.2, color(random(240,255), random(50,150), random(50,150),random(20,140))); */ /** gradientFill.addColorStop(0, color(0, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(150,255), 210,120,random(20,240))); gradientFill.addColorStop(0.2, color(random(150), random(150), random(100,255),random(20,240))); */ /** gradientFill.addColorStop(0, color(210, 210, 210,random(20,240))); gradientFill.addColorStop(0.1, color(random(150,255), 210,120,random(20,240))); gradientFill.addColorStop(0.2, color(random(100,250), random(150,200), random(10,105),random(20,240)));*/ drawingContext.fillStyle = gradientFill; let st = 200; for (let i = 0; i < 3; i ++) { rand = random(100); if(rand<85){ //bezier stroke on/off stroke(0,0,0,0); } fill(0,0,0,0); bezier( random(mouseX - i / 2.0), random(st + i), random(st-100,st+100), random(st-300,st+100), random(st-300,st+100), random(st-300,st+100), random(st-300,st+100), random(11 + i / 2) ); } st = 20; for (let i = 0; i < 3; i ++) { // stroke(0,0,0,0); fill(0,0,0,0); bezier( random(mouseX - i / 2.0), random(st + i), random(st-random(30),st+random(30)), random(st-random(30),st+random(30)), random(st-random(30),st+random(30)), random(st-random(30),st+random(30)), random(st-random(30),st+random(30)), /** random(40,20), random(-300,40), random(-100,40), random(-300,50) - i / 2, */ random(11 + i / 2) ); } } function drawbe_t() { // background(0); //fill(0,0,0,0); //stroke(0,120,random(120,210)); //stroke(0,0,0); let gradientStroke = drawingContext.createLinearGradient( width * 0.1, height * 0.1, width * 1.2, height * 1.2 ); temperature =25; /** gradientStroke.addColorStop(0, color(210, 210,210,180)); gradientStroke.addColorStop(0.2, color(0, 10, 250,180)); gradientStroke.addColorStop(1, color(255, 200, 255,100)); *//** gradientStroke.addColorStop(0, color(210, 210,0,180)); gradientStroke.addColorStop(0.2, color(0, 10, 250,180)); gradientStroke.addColorStop(1, color(255, 200, 255,100)); */ //gradientStroke.addColorStop(0, color(240, 240,0,180)); gradientStroke.addColorStop(0, color(250, 250, 250,280)); gradientStroke.addColorStop(0.4, color(220, 100, 150,180)); gradientStroke.addColorStop(1, color(255, 200, 255,100)); drawingContext.strokeStyle = gradientStroke; let gradientFill = drawingContext.createRadialGradient( width / 3, height / 3, width * 0.5, width / 2, height / 2, width * 1.5 ); gradientFill.addColorStop(0, color(210, 210, 210,0)); gradientFill.addColorStop(0.1, color(random(255), 10,10,0)); gradientFill.addColorStop(0.2, color(random(255), random(255), random(255),0)); drawingContext.fillStyle = gradientFill; for (let i = 0; i < 1; i ++) { strokeWeight(random(random(40))); fill(0,0,0,0); bezier( random(120) - i / 2.0, 400 + i, 200, random(-540,2000), random(-300,300), random(-100,30), random(-1300,500) - i / 2, 11 + i / 2 ) /** bezier( random(1200) - i / 2.0, 400 + i, 200, random(-540,200), random(-300,300), random(-100,30), random(-1300,500) - i / 2, 11 + i / 2 ); */ } }

KUMALEON Coding Challenge hasaquick KUMA flw