xxxxxxxxxx
//variabili globali
var x = 35;
var y = x;
var dx;
var dy;
//variabili della forma esterna
var p1x;
var p1y;
var p2x;
var p2y;
var p3x;
var p3y;
var p4x;
var p4y;
var dist1;
var dist2;
var dist3;
var dist4;
//variabili del cerchio rosso
var c1x;
var c1y;
var c2x;
var c2y;
var c3x;
var c3y;
var c4x;
var c4y;
var dist1c;
var dist2c;
var dist3c;
var dist4c;
//variabili per il testo
var distx;
var disty;
var img;
//precarico l'immagine
function preload() {
img = loadImage("logo.png");
}
function setup() {
createCanvas(1350, 715);
background(255, 255, 255)
frameRate(15);
dx = (windowWidth / 2) - (10 * x / 2) - 135;
dy = (windowHeight / 2) - (16 * y / 2) + 55;
//X 0-3 4-7 8-11
//Y 0-2 3-5 6-8
//genero le coordinate dei 4 punti della forma esterna
p1x = (random(4, 7)) * x + dx;
p1y = (random(0, 2)) * y + dy;
p2x = (random(8, 11)) * x + dx;
p2y = (random(3, 5)) * y + dy;
p3x = (random(4, 7)) * x + dx;
p3y = (random(6, 8)) * y + dy;
p4x = (random(0, 3)) * x + dx;
p4y = (random(3, 5)) * y + dy;
stroke("#7d78a6");
strokeWeight(2);
//DISEGNO FORMA ESTERNA
beginShape();
//calcola distanza tra i punti per avere la tangente alla curva di bezier
dist1 = p2y - p1y;
dist2 = p2x - p3x;
dist3 = p3y - p4y;
dist4 = p1x - p4x;
vertex(p1x, p1y);
//line(p2x, p2y - dist1, p2x, p2y);
bezierVertex(p2x, p2y - dist1, p2x, p2y, p2x, p2y);
vertex(p2x, p2y);
//line(p3x+dist2, p3y, p3x, p3y);
bezierVertex(p3x + dist2, p3y, p3x, p3y, p3x, p3y);
vertex(p3x, p3y);
//line(p4x, p4y+dist3, p4x, p4y);
bezierVertex(p4x, p4y + dist3, p4x, p4y, p4x, p4y);
vertex(p4x, p4y);
//line(p1x-dist4, p1y, p1x, p1y);
bezierVertex(p1x - dist4, p1y, p1x, p1y, p1x, p1y);
endShape();
//DEFINISCO CERCHIO ROSSO
num = [1, 2, 3, 4]
var ciao = random(num);
switch (ciao) {
case 1:
//calcolo la distanza tra i punti per poter posizionare il cerchio
distx = (p2x - p1x);
disty = (p2y - p1y);
//posiziono il cerchio rosso
//quadrante 1-2
c1x = p1x + distx;
c1y = p1y + disty;
c2x = p1x + distx + (1 * x);
c2y = p1y + disty + (1 * y);
c3x = p1x + distx;
c3y = p1y + disty + (2 * y);
c4x = p1x + distx - (1 * x);
c4y = p1y + disty + (1 * y);
//posiziono il testo all'opposto del cerchio rosso
//quadrante 3-4
ix = p4x - ((p3x - p4x) / 2);
iy = p4y + ((p3y - p4y) / 2);
break;
case 2:
//calcolo la distanza tra i punti per poter posizionare il cerchio
distx = (p2x - p3x);
disty = (p3y - p2y) / 1.5;
//posiziono il cerchio rosso
//quadrante 2-3
c1x = p2x - distx;
c1y = p2y + disty;
c2x = p2x - distx + (1 * x);
c2y = p2y + disty + (1 * y);
c3x = p2x - distx;
c3y = p2y + disty + (2 * y);
c4x = p2x - distx - (1 * x);
c4y = p2y + disty + (1 * y);
//posiziono il testo all'opposto del cerchio rosso
//quadrante 4-1
ix = p4x - ((p1x - p4x) / 2);
iy = p1y + ((p4y - p1y) / 2);
break;
case 3:
//calcolo la distanza tra i punti per poter posizionare il cerchio
distx = (p3x - p4x) -15;
disty = (p3y - p4y) +15;
//posiziono il cerchio rosso
//quadrante 3-4
c1x = p3x - distx;
c1y = p3y - disty;
c2x = p3x - distx + (1 * x);
c2y = p3y - disty + (1 * y);
c3x = p3x - distx;
c3y = p3y - disty + (2 * y);
c4x = p3x - distx - (1 * x);
c4y = p3y - disty + (1 * y);
//posiziono il testo all'opposto del cerchio rosso
//quadrante 1-2
ix = p1x + ((p2x - p1x) / 1.5);
iy = p1y + ((p2y - p1y) / 2);
break;
case 4:
//calcolo la distanza tra i punti per poter posizionare il cerchio
distx = (p1x - p4x) / 2;
disty = (p4y - p1y) +15;
//posiziono il cerchio rosso
//quadrante 4-1
c1x = p4x + distx;
c1y = p4y - disty;
c2x = p4x + distx + (1 * x);
c2y = p4y - disty + (1 * y);
c3x = p4x + distx;
c3y = p4y - disty + (2 * y);
c4x = p4x + distx - (1 * x);
c4y = p4y - disty + (1 * y);
//posiziono il testo all'opposto del cerchio rosso
//quadrante 2-3
ix = p2x - ((p2x - p3x) / 1.5);
iy = p2y + ((p3y - p2y) / 2);
break;
}
//c1x = 2 * x;
//c1y = 2 * y;
//c2x = 3 * x;
//c2y = 3 * y;
//c3x = 2 * x;
//c3y = 4 * y;
//c4x = 1 * x;
//c4y = 3 * y;
fill("#f97775");
noStroke();
//DISEGNO CERCHIO ROSSO
beginShape();
//calcolo la distanza tra i punti per poter posizionare il cerchio
dist1c = c2y - c1y;
dist2c = c2x - c3x;
dist3c = c3y - c4y;
dist4c = c1x - c4x;
//rect(c1x, c1y, 20, 20);
vertex(c1x, c1y);
//line(c2x, c2y - dist1c, c2x, c2y);
bezierVertex(c2x, c2y - dist1c, c2x, c2y, c2x, c2y);
//rect(c2x, c2y, 20, 20);
vertex(c2x, c2y);
//line(c3x+dist2c, c3y-5, c3x, c3y);
bezierVertex(c3x + dist2c, c3y - 5, c3x, c3y, c3x, c3y);
//rect(c3x, c3y, 20, 20);
vertex(c3x, c3y);
//line(c4x, c4y+dist3c, c4x, c4y);
bezierVertex(c4x, c4y + dist3c, c4x, c4y, c4x, c4y);
//rect(c4x, c4y, 20, 20);
vertex(c4x, c4y);
//line(c1x-dist4c, c1y+10, c1x, c1y);
bezierVertex(c1x - dist4c, c1y + 10, c1x, c1y, c1x, c1y);
endShape();
//posiziono l'immagine
image(img, ix, iy, img.width / 3, img.height / 3);
}
function draw() {
//grid();
}
function grid() {
var k;
var space = 25;
stroke(0, 0, 0, 0.5);
strokeWeight(1);
for (k = 0; k < windowWidth; k += space) {
line(k, 0, k, windowHeight);
}
for (k = 0; k < windowHeight; k += space) {
line(0, k, windowWidth, k);
}
}