let palette = ["#CABAC8", "#FF101F", "#B2DDF7", "#81D6E3", "#4CB5AE", "#bf98b2", "#cca1b6", "#e2b2b6", "#ebc5bc"]; let palette2 = ["#FF1E00", "#E8F9FD", "#59CE8F", "#000000", "#FA2FB5", "#31087B", "#FFC23C"]; let mouseX = 40; let lastx; let lasty; let lastlx; let lastly; let count; function setup() { colorMode(HSB, random(300,400),200,200,200); lastx = 0; lasty = 0; lastlx = 0; lastly = 0; ted = new Turtle(); // createCanvas(1600, 2843); //createCanvas(1600, 1600); // createCanvas(800, 800); 　//createCanvas(1066, 600); createCanvas(5506,2160); //createCanvas(3098,1080); angleMode(DEGREES); background("#fff") rectMode(CENTER); noStroke(); //noLoop(); 　//blendMode( random([BURN, MULTIPLY, SOFT_LIGHT, HARD_LIGHT]) ); //make noise 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 couleurs = random(palette); //background(couleurs); background(210); drawvera_bk(); //image(graphics, 0, 0); drawvera_flw(); // drawvera2_2(); image(graphics, 0, 0); count = 0; fill(250, 250, 250) //rect(0, 0, 5506,2160) } function draw() { // blendMode( random([BURN, MULTIPLY, SOFT_LIGHT, HARD_LIGHT]) ); scale(1.05); //translate(1500) frameRate(20); getPixel(); } function getPixel() { // scale(1.2) // translate(10,-10) rotate(random(-0.2,0.2)) // translate(5,0) for (let x = 0; x <= width; x += 10) { for (let y = height; y >= 0; y -= 10) { const index = Math.round(random()); const color = get(x, y); const r = color[0]; const g = color[1]; const b = color[2]; // if (0 < r && r 500) { // stroke(`rgba(${random(g)}, ${b}, ${r}, 4.4)`); rand = random(1000); if (rand > 905) { rect(x, y, 1, 1); push(); // rotate(random(30)) rect(x, y, 1, random(3)); pop(); } //rect(x, y, 1,4); } textSize(10); // var str = '■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△□○●◉▲△×abcdefghijklmnopqrstuvwxyz無'+ 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'+ ''; // var str = '_______|||||||||||===========////////'; var str = '_______|||||||||||===========////////................'; str = str.split(''); var rand_str = ''; // rotate(1001) //translate(-30,0) // for(var t = 0; t < 12; t++) { // fill(random(0,255),random(0,255),random(0,255)); // fill(random(palette2)); fill(b, r, g); //fill(10,10,10, 255); rand_str += str[Math.floor(Math.random() * str.length)]; //for(var t = -20; t < 50; t++) { rand = random(1000); if (rand > 905) { for (let i = 0; i < 3; i++) { // text(rand_str,x+i*5,y); } } if (rand > 405) { //fill(random(palette2)) text(rand_str, x, y); } const color = get(random(width), random(height)); const ra = color[0]; const ga = color[1]; const ba = color[2]; fill(ra, ga, ba); push(); // rotate(random(30)) // rect(x,y,30,1); pop(); /** rand = random(10000); if(rand>0){ 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, 255, 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(255, 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(11 + i / 2) ); }*/ // } // fill(`rgba(${r}, ${g}, ${b}, 4.1)`); //rect(x,y,10); // //rect(x-5,y,5); // fill(255,255,0,120); // circle(x, y, 5); // rect(x+5,y,5); // fill(255); // rect(x+5,y,4); // fill(215); // rect(x+5,y,2); //line(x+1, y+1, x+30+1, y + length+1); lastx = x; lasty = y; lastlx = lastx; lastly = lasty; count++; if (count > 1000) { count = 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 = 6; const gY = 9; 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); 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 pRatio = 400; 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; // pRatio = random(2,40); 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; 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; rand = random(1000); if (rand > 998) { // drawbe6(); } else if (rand > 920) { drawbe7(); } else { // drawbe(); let gradientStroke = drawingContext.createLinearGradient( width * 0.1, height * 0.1, width * 1.2, height * 0.2 ); temperature = 25; /** gradientStroke.addColorStop(0, color(0, 200,250)); gradientStroke.addColorStop(0.1, color(255, 200, 0)); gradientStroke.addColorStop(0.2, color(255, 200, 255)); drawingContext.strokeStyle = gradientStroke; let gradientFill = drawingContext.createRadialGradient( width / 3, height / 3, width * 0.5, width / 4, height / 2, width * 1.2 ); */ /** 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(255), random(255), random(255),random(20,240))); */ // drawingContext.fillStyle = gradientFill; // bezier(px2, px1, x1, x2, x1*random(3), x2*random(3), random(800), random(800)); // drawbe(); drawbe(); } } endShape(); pop(); } var drawMode = 1; function ovly() { overlay(); // second shape (dynamically translated/rotated and scaled) var x = map(mouseX, 0, width, -50, 50); var a = map(mouseX, 0, width, -0.5, 0.5); var s = map(mouseY, 0, height, 0.7, 1); if (drawMode == 1) rotate(a); if (drawMode == 2) translate(x, 0); scale(s); strokeWeight(2); overlay(); } function overlay() { var w = width - random(random(random(1300))); var h = height - random(random(random(1000))); stroke(random(255), random(255), random(255), 80); if (drawMode == 1) { for (var i = -w / 2; i < w / 2; i += 5) { line(i, -h / 2, i, h / 2); } } else if (drawMode == 2) { for (var i = 0; i < w; i += 10) { ellipse(0, 0, i); } } } function drawbe() { 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 * 0.2 ); temperature = 25; let strkey = parseInt(random(2, 2)); 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 * 1.5 ); let flwkey = parseInt(random(8)); 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(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: //console.log('住所はその他です'); } /** 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 drawbe2() { // background(0); //fill(210); strokeWeight(1); //fill(random(200,250),0,0,120); fill(0, 0, 0, 0); //stroke(0,120,random(120,210)); stroke(0, 0, 0); for (let i = 0; i < 2; i++) { bezier( -400 - i / 2.0, -200 + i, random(-10, 200), random(-400, 200), random(-200, 200), random(-200, random(1300)), random(400, 150), //random(40,20), //random(-300,40), // random(-100,40), // random(-30,50) - i / 2, 1100 + i / 2 ); } } function drawbe3() { // background(0); //fill(210); strokeWeight(1); 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 * 0.4 ); 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 * 0.8 ); gradientFill.addColorStop(0, color(210, 210, 210)); gradientFill.addColorStop(0.01, color(0, 210, 210)); gradientFill.addColorStop(0.02, color(random(200, 255), random(200, 255), random(255))); drawingContext.fillStyle = gradientFill; let st = 0; for (let i = 0; i < 8; i++) { bezier( mouseX - 100 - i / 2.0, 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(40,20), random(-300,40), random(-100,40), random(-300,50) - i / 2, */ 11 - 100 + i / 2 ); /** bezier( mouseX - i / 2.0, 300 + i, 0, random(40,200), random(-300,400), random(-100,400), random(-300,50) - i / 2, 101 + i / 2 ); */ } } function drawbe5() { // background(0); //fill(210); strokeWeight(5); /** for (let i = 0; i < 1; i ++) { //fill(random(255),random(255),random(255)); stroke(40,150,random(210,255),random(120,200)); //stroke(210,random(210,255),0,random(120,200)); strokeWeight(12); //fill(random(185,240)); fill(210); bezier( mouseX - i, 0 + i, 0, 200, random(-300,400), 400, random(500) - i / 2, 101 + i / 2 ); } */ 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(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)); gradientFill.addColorStop(0.5, color(random(255), 210, 210)); gradientFill.addColorStop(1, color(random(255), random(255), random(255))); drawingContext.fillStyle = gradientFill; for (let i = 0; i < 2; i++) { bezier( 400 - i / 2.0, 200 + i, random(-10, 200), random(100, 400), random(200, 200), random(200, 400), random(400, 150), //random(40,20), //random(-300,40), random(-100, 40), random(-30, 50) - i / 2, 1100 + i / 2 ); /** bezier( mouseX - i / 2.0, 300 + i, 0, random(40,200), random(-300,400), random(-100,400), random(-300,50) - i / 2, 101 + i / 2 ); */ } } function drawbe6() { // 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(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 * 0.2 ); rand = random(10); if (rand > 5) { gradientFill.addColorStop(0, color(210, 210, 210)); gradientFill.addColorStop(0.5, color(random(255), random(210), 210)); gradientFill.addColorStop(1, color(random(255), random(255), random(255))); } else { gradientFill.addColorStop(0, color(210, 210, 210, 200)); gradientFill.addColorStop(0.5, color(180, 180, 180, 200)); gradientFill.addColorStop(1, color(180, 180, random(255), 200)); } drawingContext.fillStyle = gradientFill; for (let i = 0; i < 1000; i++) { rand = random(10); if (rand > 5) { // noStroke(); // fill(210,210,210,255); circle(random(-1600, 1600), random(-1600, 2600), random(random(10))); } else { // noStroke(); circle(random(-1600, 1600), random(-1600, 2600), random(random(10))); } /** strokeWeight(40); fill(0,0,0,0); bezier( random(120) - i / 2.0, 400 + i, 200, random(-540,200), random(-300,300), random(-100,30), random(-1300,500) - i / 2, 11 + i / 2 ); */ } ovly(); } function drawbe7() { // 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 ); */ } } var coords = [40, 40, 80, 60, 100, 100, 60, 120, 50, 150]; function drawcurv() { background(255); noFill(); stroke(0); beginShape(); curveVertex(40, 40); curveVertex(40, 40); curveVertex(80, 60); curveVertex(100, 100); curveVertex(60, 120); curveVertex(50, 150); curveVertex(50, 150); endShape(); for (var i = 0; i < coords.length; i += 2) { ellipse(coords[i], coords[i + 1], 10, 10); } } function drawvera() { // background(180); // clear the screen to grey let gap = -2; // unlike in w2_03 sketch, gap is always same size here. // calculate the size of each square for the given number of squares and gap between them // this will always be the same number. I could have just given it a specific number, but left the calculation just to try different gap sizes. let cellsize = (width - (5 + 1) * gap) / 80; // if you do the math, this equals to 108. let redCount = 0; // i want no more than 5 red squares. this declares the variable which will keep track of how many red squares there have been randomly generated so far. for (i = 0; i < 5; i++) { // col for (j = 0; j < 5; j++) { // row // To create the red squares, it starts by gnerating a random number between 0 and 5 which will be used to determine whether the square being created should be red or not. let red = random(0, 5); // Only when the random number "red" happens to be 0, the square will be red. And this will happen only if there are less than 5 red squares so far. if (red == 0 && redCount < 5) { fill(couleurs); // red color redCount++; // after each time that a red square is created (determined by the random number being 0), the counter which keeps track of how many red squares have been created so far, is increased by 1. } else { fill(57, 150, random(210, 240), 200); // if the randomly generated number is not 0, or if there are 5 red squares already, then the next square to be generated will be brown. } rect(gap * (i + 1) + cellsize * i + random(-12, 12), // X position. the random number is what makes the squares keep moving slightly left to right. gap * (j + 1) + cellsize * j + random(-12, 12), // Y position. the random number is what makes the squares keep moving slightly up and down. cellsize, cellsize); } } } //end of draw function mousePressed() { //redraw(); } /** function setup() { createCanvas(800, 1200); angleMode(DEGREES); background(220); ted = new Turtle(); textSize(30); fill(128); textAlign(CENTER, CENTER); //text('tap to start', width / 2, height / 2); //mousePressed_3(); //mousePressed(); //mousePressed(); //mousePressed(); // mousePressed_3(); // mousePressed_2(); // mousePressed_3(); // mousePressed_2(); mousePressed_2(); } */ function drawMAN(x, y, noiseFactor) { stroke(color(0, 0, 250, random(100, 240))); strokeWeight(50); let s = 500; line(s, 1000, s + 50, random(700, 1600)); line(s + 50, 700, s + 50, 1600); line(s + 50, 700, s + 300, 600); line(s + 50, 700, s + 300, random(600, 1600)); line(s + 300, 600, s + 300, 1600); line(s + 300, 600, s + 400, 800); line(s + 300, 600, s + 400, random(800, 1600)); line(s + 400, 800, s + 400, 1600); line(s + 400, 800, s + 700, 600); line(s + 400, 800, s + 700, random(600, 1600)); line(s + 700, 600, s + 700, 1600); line(s + 700, 600, s + 800, 600); line(s + 700, 600, s + 800, random(600, 1600)); line(s + 800, 600, s + 800, 1600); line(s + 800, 600, s + 900, random(700, 1700)); line(s + 900, 700, s + 900, random(700, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); /** stroke(color(240,240,240,random(200,240))); strokeWeight(2); s = random(1500); line(s, 1000, s +50, random(700,1600)); line(s+ 50, 0, s+50, 1600); line(s+ 50, 0, s+300, 600); line(s+ 50, 0, s+300, random(600,1600)); line(s+ 300, 300, s+300, 1600); line(s+300, 300, s+400, 800); */ } function drawMAN_2(x, y, noiseFactor) { stroke(color(240, 240, 240, random(200, 240))); strokeWeight(2); let s = random(1500); line(s, 1000, s + 50, random(700, 1600)); line(s + 50, 0, s + 50, 1600); line(s + 50, 0, s + 300, 600); line(s + 50, 0, s + 300, random(600, 1600)); line(s + 300, 300, s + 300, 1600); line(s + 300, 300, s + 400, 800); line(s + 300, 300, s + 400, random(800, 1600)); line(s + 400, 400, s + 400, 1600); line(s + 400, 400, s + 700, 600); line(s + 400, 400, s + 700, random(600, 1600)); line(s + 700, 400, s + 700, 1600); line(s + 700, 200, s + 800, 600); line(s + 700, 200, s + 800, random(600, 1600)); line(s + 800, 200, s + 800, 1600); line(s + 800, 200, s + 900, random(700, 1700)); line(s + 900, 400, s + 900, random(700, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); } function drawMAN_20(x, y, noiseFactor) { stroke(color(120, 120, 120, random(200, 240))); strokeWeight(2); let s = random(1500); line(s, 1000, s + 50, random(700, 1600)); line(s + 50, 0, s + 50, 1600); line(s + 50, 0, s + 300, 600); line(s + 50, 0, s + 300, random(600, 1600)); line(s + 300, 300, s + 300, 1600); line(s + 300, 300, s + 400, 800); line(s + 300, 300, s + 400, random(800, 1600)); line(s + 400, 400, s + 400, 1600); line(s + 400, 400, s + 700, 600); line(s + 400, 400, s + 700, random(600, 1600)); line(s + 700, 400, s + 700, 1600); line(s + 700, 200, s + 800, 600); line(s + 700, 200, s + 800, random(600, 1600)); line(s + 800, 200, s + 800, 1600); line(s + 800, 200, s + 900, random(700, 1700)); line(s + 900, 400, s + 900, random(700, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); } function drawMAN_3(x, y, noiseFactor) { stroke(color(20, 20, 20, random(200, 240))); strokeWeight(50); let s = random(500); line(s, 1000, s + 50, random(700, 1600)); line(s + 50, 0, s + 50, 1600); line(s + 700, s, s + 700, s * 2); line(s + 700, s, s + 800, s * 2); line(s + 700, s, s + 800, random(s, 1600)); line(s + 800, s, s + s, 1600); line(s + 800, s, s + 900, random(700, 1700)); line(s + 900, 400, s + 900, random(700, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); } function drawMAN_4(x, y, noiseFactor) { stroke(color(210, random(210), 0, random(100, 240))); strokeWeight(5); let s = 0; let t = 600; line(s, 1000, s + 50, random(t + 200, 1600)); line(s + 50, t + 200, s + 50, 1600); line(s + 50, t + 200, s + 300, t + 200); line(s + 50, t + 200, s + 300, random(t + 100, 1600)); line(s + 300, t + 100, s + 300, 1600); line(s + 300, t + 100, s + 400, t + 300); line(s + 300, t + 100, s + 400, random(t + 300, 1600)); line(s + 400, t + 300, s + 400, 1600); line(s + 400, t + 300, s + 700, t + 100); line(s + 400, t + 300, s + 700, random(t + 100, 1600)); line(s + 700, t + 100, s + 700, 1600); line(s + 700, t + 100, s + 800, t + 100); line(s + 700, t + 100, s + 800, random(t + 100, 1600)); line(s + 800, t + 100, s + 800, 1600); line(s + 800, t + 100, s + 900, random(t + 200, 1700)); line(s + 900, t + 200, s + 900, random(t + 200, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); /** stroke(color(240,240,240,random(200,240))); strokeWeight(2); s = random(1500); line(s, 1000, s +50, random(700,1600)); line(s+ 50, 0, s+50, 1600); line(s+ 50, 0, s+300, 600); line(s+ 50, 0, s+300, random(600,1600)); line(s+ 300, 300, s+300, 1600); line(s+300, 300, s+400, 800); */ } function drawMAN_5(x, y, noiseFactor) { stroke(color(random(210), random(210), 0, random(100, 240))); strokeWeight(random(20)); let s = 20; let t = random(580, 640); line(s, 1000, s + 50, random(t + 200, 1600)); line(s + 50, t + 200, s + 50, 1600); line(s + 50, t + 200, s + 300, t + 200); line(s + 50, t + 200, s + 300, random(t + 100, 1600)); line(s + 300, t + 100, s + 300, 1600); line(s + 300, t + 100, s + 400, t + 300); line(s + 300, t + 100, s + 400, random(t + 300, 1600)); line(s + 400, t + 300, s + 400, 1600); line(s + 400, t + 300, s + 700, t + 100); line(s + 400, t + 300, s + 700, random(t + 100, 1600)); line(s + 700, t + 100, s + 700, 1600); line(s + 700, t + 100, s + 800, t + 100); line(s + 700, t + 100, s + 800, random(t + 100, 1600)); line(s + 800, t + 100, s + 800, 1600); line(s + 800, t + 100, s + 900, random(t + 200, 1700)); line(s + 900, t + 200, s + 900, random(t + 200, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); /** stroke(color(240,240,240,random(200,240))); strokeWeight(2); s = random(1500); line(s, 1000, s +50, random(700,1600)); line(s+ 50, 0, s+50, 1600); line(s+ 50, 0, s+300, 600); line(s+ 50, 0, s+300, random(600,1600)); line(s+ 300, 300, s+300, 1600); line(s+300, 300, s+400, 800); */ } function drawMAN_6(x, y, noiseFactor) { stroke(color(random(250), random(210), random(210), random(100, 240))); strokeWeight(random(3)); let s = 20; let t = random(400, 640); line(s, 1000, s + 50, random(t + 200, 1600)); line(s + 50, t + 200, s + 50, 1600); line(s + 50, t + 200, s + 300, t + 200); line(s + 50, t + 200, s + 300, random(t + 100, 1600)); line(s + 300, t + 100, s + 300, 1600); line(s + 300, t + 100, s + 400, t + 300); line(s + 300, t + 100, s + 400, random(t + 300, 1600)); line(s + 400, t + 300, s + 400, 1600); line(s + 400, t + 300, s + 700, t + 100); line(s + 400, t + 300, s + 700, random(t + 100, 1600)); line(s + 700, t + 100, s + 700, 1600); line(s + 700, t + 100, s + 800, t + 100); line(s + 700, t + 100, s + 800, random(t + 100, 1600)); line(s + 800, t + 100, s + 800, 1600); line(s + 800, t + 100, s + 900, random(t + 200, 1700)); line(s + 900, t + 200, s + 900, random(t + 200, 1700)); //mousePressed(); //mousePressed(); //mousePressed(); /** stroke(color(240,240,240,random(200,240))); strokeWeight(2); s = random(1500); line(s, 1000, s +50, random(700,1600)); line(s+ 50, 0, s+50, 1600); line(s+ 50, 0, s+300, 600); line(s+ 50, 0, s+300, random(600,1600)); line(s+ 300, 300, s+300, 1600); line(s+300, 300, s+400, 800); */ } function mousePressed_3() { logo(ted, random(400000)); logo2(ted, random(400000)); //logo3(ted, random(400000)); } function mousePressed_2() { logo3(ted, random(400000)); //logo2(ted, random(400000)); } function touchStarted() { // logo(ted, random(2)); } function logo(t, angle) { t.clearscreen(); textSize(30); fill(128); textAlign(LEFT, TOP); //text(floor(angle * 10) / 10, 20, 20); var i = 0; while (t.x > 0 && t.x < width && t.y > 0 && t.y < height) { t.forward(i); //t.forward_2(i); //t.forward_(i); t.right(random(120, 500)); //t.left(random(10,200)); // t.forward(i); i++; } } function logo2(t, angle) { t.clearscreen(); textSize(30); fill(128); textAlign(LEFT, TOP); //text(floor(angle * 10) / 10, 20, 20); var i = 0; while (t.x > 0 && t.x < width && t.y > 0 && t.y < height) { t.forward_8(i); t.forward_6(i); t.forward_7(i); t.right(random(120, 500)); //t.left(random(10,200)); // t.forward(i); i++; } } function logo3(t, angle) { t.clearscreen(); textSize(30); fill(128); textAlign(LEFT, TOP); //text(floor(angle * 10) / 10, 20, 20); var i = 0; while (t.x > 0 && t.x < width && t.y > 0 && t.y < height) { t.forward_9(i); // t.forward_8(i); t.forward_(i); t.right(random(120, 500)); //t.left(random(10,200)); // t.forward(i); i++; } } function logo4(t, angle) { t.clearscreen(); textSize(30); fill(128); textAlign(LEFT, TOP); //text(floor(angle * 10) / 10, 20, 20); var i = 0; while (t.x > 0 && t.x < width && t.y > 0 && t.y < height) { t.forward_10(i); //t.forward_10(i); // t.forward_10(i); //t.forward_2(i); //t.forward_(i); t.right(random(120, 500)); //t.left(random(10,200)); // t.forward(i); i++; } } class Turtle { constructor(x_ = width / 2, y_ = height / 2, direction_ = -90, penDown_ = true, penColor_ = color(0, 25, 255, random(200, 240))) { this.x = x_ + random(-300, 300); this.y = y_ + random(-300, 300); this.direction = direction_; this.penDown = penDown_; this.penColor = penColor_; } forward_(d) { let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(this.penColor); line(oldX, oldY, this.x, this.y); } } forward(d) { d = random(100); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(random(200, 250), random(200, 250), random(200, 250))); strokeWeight(random(1500)); line(oldX, oldY, this.x, this.y); //line(oldX - 5, oldY - 5, this.x - 5, this.y- 5); } //drawMAN(); //drawMAN_6(); //drawMAN_2(); //drawMAN_3(); //drawMAN_4(); //drawMAN_5(); drawMAN_20(); } forward_2(d) { d = random(10, 90); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(10, 0, 0, random(200, 240))); strokeWeight(random(400)); line(oldX, oldY, this.x, this.y); } } forward_6(d) { d = random(10, 90); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(random(200), random(200), random(200), random(200, 240))); strokeWeight(random(5)); line(oldX, oldY, this.x, this.y); } } forward_7(d) { d = random(10, 90); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(random(4), random(4), random(4), random(200, 240))); strokeWeight(random(4)); line(oldX, oldY, this.x, this.y); } } forward_8(d) { d = random(-120); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(random(5), random(5), random(5), random(200, 240))); strokeWeight(random(2)); line(oldX, oldY, this.x, this.y); } } forward_9(d) { d = random(420); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(120, 120, 120, random(200, 240))); strokeWeight(random(4)); // line(oldX, oldY-100, this.x, this.y-100); //line(oldX - random(1400), oldY-100, this.x, this.y-100); //line(oldX , oldY-100- random(800), this.x, this.y-100); line(oldX, oldY - 100 - random(300), this.x, this.y - random(300)); strokeWeight(random(1)); line(oldX - random(300), oldY - 100 - random(700), this.x - random(300), this.y - random(700)); fill(122); //circle(oldX +random(400), oldY + random(800), random(300)); translate(width / 2, height / 2); rotate(PI / 3.0); rect(random(300), random(300), random(300), random(300)); } } forward_10(d) { d = random(-120); let oldX = this.x; let oldY = this.y; this.x += d * cos(this.direction); this.y += d * sin(this.direction); if (this.penDown) { stroke(color(240, 120, 120, random(200, 240))); strokeWeight(random(2)); line(oldX, oldY - 200, this.x, this.y - 200); fill(222); // circle(random(100), random(800), random(300)); } circle(random(100), random(800), random(300)); } backward(d) { this.forward(-d); } right(a) { this.direction += a; } left(a) { this.direction -= a; } setpos(newx, newy) { let oldX = this.x; let oldY = this.y; this.x = newx this.y = newy if (this.penDown) { stroke(this.penColor); line(oldX, oldY, this.x, this.y); } } home() { this.x = width / 2; this.y = height / 2; this.direction = -90; } setheading(a) { this.direction = a; } pendown() { this.penDown = True; } penup() { this.penDown = False; } pencolor(c) { this.penColor = c; } clean() { background(220); } clearscreen() { this.home(); // this.clean(); } }

akml1541