Des formes simples
function setup(){ createCanvas(400, 400) background(160) stroke(255,0,0); noFill(); ellipse(300,100,80,50); line(0, 0, 200, 400); line(100, 50, 400, 50); fill("blue") rect(200, 150, 150, 150); fill("green") noStroke() circle(100, 100, 15) } function draw(){ }
function setup() { createCanvas(400, 400); background(255); } function draw() { } function mousePressed() { a = random(50, 210); b = random(50, 210); c = random(50, 210); opacite = random(0,255); fill(a,b,c, opacite); r = random(10,60); circle(mouseX, mouseY, r); }
function setup() { createCanvas(800, 600); background(0); } function draw() { a = random(50, 210); b = random(50, 210); c = random(50, 210); fill(a,b,c); circle(mouseX, mouseY, 24); } function mousePressed() { }
function setup(){ createCanvas(200, 200) background(160) r = 0 } function draw(){ fill("blue") background(200) r = r + 1 circle(100, 100, r) }
function setup(){ createCanvas(200, 200) background(160) radius = 0 } function draw(){ fill("blue") background(200) if (radius==100) variation = -1 if (radius==0) variation = +1 radius = radius+variation circle(100, 100, radius) }
function setup() { createCanvas(400, 400); noStroke(); x = 0; y = 60; } function draw() { background(131, 175, 155); if (mouseX > x) x = x + 1; else x = x - 1; if (mouseY > y) y = y + 1; else y = y - 1; translate(x, y); //On déplace l'origine //Visage fill(249,205,173);//rosy beige ellipse(0, 0, 100, 100); //oeil 1 fill(30);//dark gray ellipse(0, 10, 10, 10); //oeil 2 ellipse(20, 10, 10, 10); //Bouche fill(252,157,154);//light pink arc(0, 25, 30, 30, 0, radians(180), PIE); }
function setup() { createCanvas(400, 400); background(0); n = 0; while (n < 10){ a = random(50, 210); b = random(50, 210); c = random(50, 210); fill(a,b,c); x = random(0, 400); y = random(0, 400); circle(x, y, 24); n = n+1; } } function draw() { }
function setup(){ createCanvas(400,400); background(240); textSize(42); push(); translate(30,50) rotate(radians(20)); text("A",0,0); pop(); push(); translate(50,55) rotate(radians(50)); text("B",0,0); pop(); push(); translate(200,200) rotate(radians(50)); rect(0,0,30,30); rotate(radians(120)); rect(0,0,30,30); pop(); } function draw(){ }
function setup(){ createCanvas(400,400); background(240); x=20; sens = -1; } function draw(){ background(240); if (x<-19) sens = +1; if (x>19) sens = -1; x = x+sens; push(); translate(210,205) rotate(radians(45+x)); rect(0,0,50,50); pop(); }
Des rectangles dont on fait varier la taille, la couleur ou l'orientation
var maxOffset = 30 function setup() { createCanvas(400, 400) rectMode(CENTER) noLoop() } function draw() { background(255) for (var size = 10; size < 300; size += 10) { var offsetX = random(-maxOffset, maxOffset) var offsetY = random(-maxOffset, maxOffset) noFill() rect(width/2 + offsetX, height/2 + offsetY, size, size) } }
var padding = 20 var cellSize = 40 var chance = 0.8 function setup() { createCanvas(400, 400) rectMode(CENTER) noLoop() } function draw() { background(255) for (var y = padding; y < height - 2 * padding; y += cellSize) { for (var x = padding; x < width - 2 * padding; x += cellSize) { drawCell(x + cellSize/2, y + cellSize/2) } } } function drawCell(x, y) { push() translate(x, y) for (var size = 5; size <= cellSize; size += 5) { if (random() < chance) { noFill() rect(0, 0, size, size) } } pop() }
var padding = 20 var cellSize = 40 var maxRotate = 30 var maxTranslate = 15 function setup() { createCanvas(400, 400) rectMode(CENTER) angleMode(DEGREES) noLoop() } function draw() { background(255) for (var y = padding; y < height - 2 * padding; y += cellSize) { for (var x = padding; x < width - 2 * padding; x += cellSize) { drawCell(x + cellSize/2, y + cellSize/2) } } } function drawCell(x, y) { push() translate(x, y) var translateBy = random(-maxTranslate, maxTranslate) * y / height var rotateBy = random(-maxRotate, maxRotate) * y / height translate(translateBy, 0) rotate(rotateBy) rect(0, 0, cellSize, cellSize) pop() }
var thickness = 3 var colorChance = 0.3 var colorValues = ["#ff0101", " #fff001", "#0101fd"] // Chance a grid cell will split (vertically or horizontally). var splitChance = 0.75 // Maximum depth to which a grid cell can split. var maxDepth = 4 function setup() { createCanvas(400, 400) noLoop() } function draw() { background(255) for (var y = 0; y < height; y += 100) { for (var x = 0; x < width; x += 100) { drawMondrianGrid(x + 4, y + 4, 100 - 8, 100 - 8) } } } function drawMondrianGrid(x, y, w, h, depth = 1) { push() translate(x, y) if (depth <= maxDepth && random() < splitChance) { if (depth % 2 == 0) { // "split vertical" var dw = random(w * 0.3, w * 0.7) drawMondrianGrid( 0, 0, dw, h, depth + 1) drawMondrianGrid(dw, 0, w - dw, h, depth + 1) } if (depth % 2 != 0) { // "split horizontally" var dh = random(h * 0.3, h * 0.7) drawMondrianGrid(0, 0, w, dh, depth + 1) drawMondrianGrid(0, dh, w, h - dh, depth + 1) } } else { stroke("#30303a") strokeWeight(thickness) if (random() < colorChance) { fill(random(colorValues)) } else { fill("#f9f9f9") } rect(0, 0, w, h) } pop() }
Et puis