Comment dessiner un coussin comme rectangle dans le traitement?

Question

J'essaie de dessiner un rectangle comme un coussin dans le traitement comme l'image montrée. Existe-t-il une manière délicate d'utiliser la "lumière" pour réaliser ceci? Est-ce que quelqu'un a une idée à ce sujet? Merci!

référence Pic: http://philogb.github.io/blog/2009/02/05/cushion-treemaps/

Answer 1

Qu'est-ce que vous parlez est appelé un dégradé radial .

Il y a plusieurs façons de le faire. Une façon serait de simplement dessiner un tas de cercles. Voici un petit exemple:

size(200, 200); 
for(float diameter = 255; diameter > 0; diameter--){ 
    noStroke(); 
    fill(0, 255-diameter, 0); 
    ellipse(width/2, height/2, diameter, diameter); 
} 

Vous devrez également limiter vos dessins à une forme rectangle. Vous pouvez le faire en utilisant la fonction createGraphics() pour créer un tampon, puis dessinez le dégradé dans le tampon, puis dessinez le tampon à l'écran. Vous devriez vraiment break your problem down into smaller steps et suivez ces étapes une par une. Commencez par créer une esquisse représentant un dégradé simple. Créez ensuite une esquisse qui utilise un tampon. Obtenez les deux qui travaillent d'eux-mêmes avant de les combiner en une seule esquisse. Bonne chance.

Answer 2

Une autre méthode courante pour mettre en oeuvre un ensemble de gradients radiaux du type représenté (a treemap) est:

1. créer ou acquérir un seul élément d'image relativement haute résolution avec un (JPEG/PNG) - https://www.google.com/search?q=radial+gradient+box&tbm=isch

2. charge l'image

3. que vous dessinez vos boîtes

4. utilisez éventuellement tint() pour colorer l'image en vert, en rouge, etc. Cela fonctionne mieux avec une image source en niveaux de gris.

5. échelle de l'image source à la taille correcte pour chaque boîte à l'aide du 5 argument image(img, x1, y1, x2, y2)