#348 – Regular Star Polygon Generator

R.S.P.G. pour les intimes.

Hier vous avez eu droit à l’un des pires articles depuis la création du blog, mais aujourd’hui, j’ai pas chômé.

J’ai réussi à le coder entièrement, ce générateur à polygones réguliers étoilés. Ça m’aura pris du temps, mais il est là. Comme dit précédemment, je l’ai fait sur p5.js Avec, on peut obtenir des étoiles comme ceci :

J’ai même ajouté quelques options. Tout à base de boutons, pas à mettre un seul chiffre dans une seul ligne de code. C’est prémâché.

Le générateur permet d’exporter en .png, mais surtout en .svg !
Car, bien sûr, l’intérêt principal de ce générateur est d’obtenir rapidement l’image vectorielle d’une étoile parfaitement régulière afin de pouvoir facilement la modifier pour s’en servir dans différents projets graphiques.

=> R.S.P.G. <=

#343 – Un peu plus près des étoiles

Eh ben finalement, j’ai réussi à le programmer, ce générateur de polygones réguliers étoilés.

Après avoir publié l’article d’hier je m’en voulais d’avoir abandonné sans aboutir il y a plusieurs mois. J’ai recommencé à chercher de la documentation et des tutoriels avec d’autres mots-clés et bingo. Un tuto sur les polygones réguliers et quelques heures de tâtonnement plus loin, j’ai pu générer mes étoiles sur p5.

Voyez donc les 12 premiers polygones réguliers étoilés, classés de gauche à droite et de haut en bas suivant un nombre de sommets, puis un intervalle entre les sommets reliés, croissants :

Ceux-là je leur ai mis un petit cercle autour. Pour faire joli.

Il s’agissait donc des classiques :

{5/2} {7/2} {7/3}
{8/3} {9/2} {9/4}
{10/3} {11/2} {11/3}
{11/4} {11/5} {12/5}

Mais si ça ne vous suffit pas, voilà les 45 premiers, qui forment des étoiles de 5 à 20 branches. Sans cercle autour. Pour pas faire joli.

Comme je le disais, chacune de ces étoiles a été générée sur p5, et voici les quelques lignes de codes qui vous permettent de les produire, n’avez qu’à copier tout ça ici.

let larg = 500; //largeur de l'image
let haut = larg; //hauteur de l'image

let s = 12; //nombre de sommets du polygone
let p = 5; //nombre de pas (intervalles entre sommets reliés)
let r = larg/2.4; //rayon du cercle sur lequel sont les sommets du polygone
let rc = r*2.3; //rayon du cercle extérieur si utilisé

function setup() { 
  createCanvas(larg, haut);
  noLoop();
}

function draw() {
  background(0); //couleur du fond (0 à 255)
  strokeWeight(2); //épaisseur du trait
  stroke(255); //couleur du trait
  noFill(); //pas de remplissage du polygone
  
  sPolygone(width/2, height/2, s, p, r, PI/-2); //PI/2); si vous voulez mettre la "tête" de l'étoile en bas.
  cercleExt(width/2, height/2); //commentez pour cacher le cercle extérieur
  //save('s_p.png'); //dé-commentez pour sauvegarder l'image générée
}

function sPolygone(x, y, s, p, radius, rotation) {
  beginShape();
  for (let i=0; i<s; i++) {
    vertex (x+cos((p*i)*TAU/s+rotation)*radius, y+sin((p*i)*TAU/s+rotation)*radius);
  }
  endShape(CLOSE);
}

function cercleExt(x, y) {
  beginShape();
    circle(x, y, rc);
  endShape(CLOSE);
}

En passant quelques heures supplémentaires dessus, on peut largement améliorer ce code à tout point de vue. Mais bon, même en l’état, ça vous laisse l’occasion de vous amuser, et le mot n’est pas trop fort, je dis bien vous amuser, à changer les valeurs des variables s et p.

Pour faire court, vous trouvez un polygone régulier étoilé à chaque fois que s et p n’ont pas d’autre facteur commun que 1 ET que p et supérieur ou égal à 2. Par exemple : s = 48 et p = 23 marchent très bien.

Il ne me reste maintenant qu’à trouver comment passer des pixels au vectoriel pour rendre ce générateur vraiment utile. Mais pas toutes les émotions d’un coup. On verra ça plus tard, peut-être.

#342 – Starstickers

Dernière fournée d’étoiles. Après, on reviendra à un peu de blabla. J’écoule les stocks. Pas eu grand chose à dire ces derniers jours. Pas eu trop envie non plus.

Ce truc-là, comme les précédents, a été fait pour Numéro 0. À cette période, je photographiais tous les stickers d’Ixelles. Parallèlement, j’essayais de programmer un générateur de polygones réguliers étoilés sur processing. J’ai pas réussi. Celle-ci est dessinée au pifomètre. Je ne baisse pas les bras, mais mon niveau en maths et en programmation ne me laissent pas grand espoir d’y arriver par moi-même.

Et donc, je me disais, faire un sticker ce serait pas mal. Tentons avec une étoile.

polygone à 11 côtés

étoile à 11 branches

Bon. Voilà. C’était un test. J’estime pas ça assez bon pour en imprimer une centaine. Et puisque je n’arrive pas à programmer un générateur qui me permette de les dessiner proprement en quelques clics, c’était la première et dernière tentative de starsticker.

Dommage, je voulais faire une série, présentant tous les modèles de polygones de 5 à… je ne sais pas 12, 13 côtés peut-être plus. Ça en fait un paquet, en comptant que pour 7, 9, 11 et 13, entre autres, côtés, il y a différentes manières de relier les points entre eux qui donnent différentes étoiles. Par exemple il y a quatre façons de dessiner un tel polygone à 11 côtés :

Cette image est piquée de cette page wikipédia.

Ces polygones ont chacun onze sommets. Selon qu’on en relie 1 sur 2, 1 sur 3, sur 4 ou sur 5, on obtient ces différentes formes.

Enfin bref, pas question que je me tape ce travail sans avoir des étoiles parfaites et rapides à générer.

En bonus (quel bonus ! vous vous dites), les deux versions sur fond transparent, pour les qui aimeraient se les imprimer.

#340 – Weeve

Quelques images aujourd’hui. L’une qui bouge. Les autres qui bougent pas.

Comme d’habitude si vous cliquez sur image ça vous l’ouvre dans une nouvelle fenêtre en plus grand. Faudra que je règle ça un de ces jours.

Un de ces jours aussi, faudra que je vous cause des polygones réguliers étoilés. Mais là, je vous avoue que j’ai un peu la flemme.