Concours de démos graphiques en Python
Posté le 21/04/2020 18:26
Salut à tous, chers programmeurs et avides de toutes choses stylées sur calculatrices. Vous êtes tous tombés au bon moment, car il est temps de jouer avec les nouveaux modules de dessin en Python ! 
Casio a récemment annoncé puis publié trois modules de rendu graphique en Python pour Graph 35+E II et Graph 90+E :
•
matplotl, une version minimale de matplotlib très fidèle à l'original.
•
turtle, une reproduction en règle parfaitement identique à l'original.
•
casioplot, un module bas-niveau pour modifier les pixels à l'écran avec des performances très intéressantes.
On a déjà
commencé à parler de ces modules en détails dans un article précédent, et on va continuer dans le futur. Pour l'instant, on peut résumer les nouveautés en quelques points !
• Les modules
matplotl et
turtle sont très conformes aux originaux, ce qui permet aux mêmes programmes de marcher sur calculatrice et sur PC. D'autres constructeurs comme Numworks ont fait ce choix, et sur Planète Casio on trouve ça génial.
• Le module
casioplot permet de faire du dessin très précis. Les performances ne permettent pas de faire du dessin en temps réel, mais on peut déjà faire pas mal de choses !
• Malheureusement, on n'a toujours rien pour interagir avec le clavier (
à part quelques essais avec AC/ON) donc on peut pas faire de jeux.
Ce qui nous amène au concours d'aujourd'hui. Pour lancer tout le monde sur le chemin de ces bibliothèques et découvrir tout ce qu'on peut faire de stylé avec, je vous propose un
concours de démos graphiques accessible à tous !
Qu'est-ce qu'une démo graphique ?
Une démo graphique, c'est un petit programme qui affiche des choses stylées à l'écran, pour démontrer les capacités graphiques d'une plateforme. Ça peut être des animations stylées, des choses colorées, des cubes en 3D... ça peut être une seule image, une animation, peu importe.
En gros si c'est beau et stylé, vous gagnez.
Voilà des exemples de démos graphiques que j'ai codées sur ma Graph 90+E. Celles-ci tournent en temps réel ! (Les captures ont été prises par un logiciel vidéo donc c'est bruité, ce n'est pas un effet du programme.)
Comme vous pouvez le voir, il y a plein de choses à faire, et vous pouvez vraiment vous lâcher !
Dates, fonctionnement, et lots du concours
Voilà comment ça va se passer. Vous avez
jusqu'au Samedi 9 Mai (un peu plus de 2 semaines) pour poster vos participations sur ce sujet. Pour participer, vous devez :
Poster sur ce sujet
une image ou animation de votre démo. Votre démo doit fonctionner sur Graph 35+E II ou sur Graph 90+E. Dans les deux cas, vous pouvez prendre une capture avec
Screen Receiver.
Si vous n'y arrivez pas, envoyez-moi le code par message privé et je vous enverrai l'image ou l'animation en retour. Vous pourrez alors poster. Ne partagez pas votre code sur ce sujet !
Si vous n'avez pas de Graph 35+E II ou de Graph 90+E, vous pouvez utiliser
les émulateurs officiels qui disposent d'une version d'essai de 90 jours. Si même ça vous est inaccessible (parce que vous avez déjà utilisé la période d'essai, par exemple), vous pouvez m'envoyer le code d'un programme compatible Graph 35+E II ou Graph 90+E et je le lancerai pour vous.
À la fin du concours, vous devrez partager votre code et on discutera des techniques utilisées, des optimisations, et de la créativité dont vous aurez fait preuve pour abuser des mécanismes de tracé pas prévus pour ça.
Les meilleures participations seront classifiées par un petit jury (jusqu'à 5 membres hors participants) pour élire les démos les plus impressionnantes.
Il y a un lot à gagner, l'auteur·e de la meilleure démo graphique recevra une
clé USB multi-émulateurs à usage à vie. Cette clé USB contient les trois émulateurs
fx-92 Spéciale Collège+,
Graph 35+E II et
Graph 90+E, tous utilisables dans leur version complète sans limite de durée pourvu que la clé USB soit branchée à l'ordinateur. Ce système permet d'utiliser les émulateurs sur plusieurs ordinateurs sans difficulté !
Les deux émulateurs de Graph sont dans les premières versions Python. Mais pas d'inquiétude, car cette clé USB peut être mise à jour avec les nouvelles versions de l'OS ! Comme annoncé durant
la tournée pédagogique en ligne ce mois-ci, la mise à jour avec les bibliothèques graphiques est disponible pour les clés USB d'émulation. Casio a pensé à tout !
Alors évidemment, contrairement au CPC ce petit concours repose sur un système de notation assez subjectif. J'espère que tout le monde saura prendre le lot comme une incitation à participer, avec le recul suffisant pour éviter les mauvaises surprises à la fin !
À vos calculatrices !
Je compte sur vous pour envoyer le feu avec ces nouveaux modules. Si les participations sont vraiment stylées, on pourra en mettre en page d'accueil !
Je déclare le concours de démos graphiques Python ouvert !
Fichier joint
Citer : Posté le 09/05/2020 21:44 | #
Je ferais partie du jury
Citer : Posté le 09/05/2020 21:50 | #
Moi aussi !
(Et de toute façon, vous pouvez pas dire le contraire)
MultipliCasio
RDM Calculs
Back Mirror
A Switch To The Top C
Citer : Posté le 09/05/2020 22:18 | #
Alright, validés tous les deux. Envoyez-moi un classement avec des détails/du feedback pour les participants par MP.
Citer : Posté le 09/05/2020 22:42 | # |
Fichier joint
Du coup, voiçi le code, le premier script sert a generer la liste utilisé dans le second afin de racourcir le temps de chargement de ... beaucoup, j'ai pas calculé, mais même sur mon ordis ça prend un peu de temps (0.03s)
Après j'ai ajusté a la main avec l'option chercher/remplacer de vim pour transformer les 80 en 51 et voilà~
Plus qu'a créer une fonction pour tracer des ligne horizontales et tracer en décalé en noir, vert foncé, vert clair et blanc pour donner l'effet que vous avez içi~
Pour la fonction, elle etait dans la version originale du chapitre 0 du manga de "Casio Academy: Function Hero"
Citer : Posté le 10/05/2020 09:50 | #
Voici la liste des participations. Pour les jurés, votre job est de les ordonner de la meilleure à la moins bonne. Prenez en compte au moins les critères suivants dans votre notation :
• Présence d'animation et fluidité de l'animation
• Prouesse technique (repousse un peu les limites de ce que la calto peut faire)
• Aspect classe de la démo
Voici les participations :
Animations réalisées mais pas classées :
Superbe panaché, félicitations !
@Lephenixnoir , pourrait-on avoir le code source de tes démos maintenant, si tu l'as gardé quelque part ? Merci.
Citer : Posté le 10/05/2020 11:49 | #
Oups, c'est vrai que j'ai pas donné mes sources ! Les voilà. Pour lancer sur la calculatrice, il suffit de virer la section du haut qui utilise pygame et les deux lignes dans la boucle while finale qui permettent de quitter proprement.
import sys
import pygame
pygame.init()
screen = pygame.display.set_mode((384, 216))
def set_pixel(x, y, color):
pygame.draw.rect(screen, color, pygame.Rect(x, y, 1, 1))
def show_screen():
pygame.display.flip()
#---
from math import sin, cos, pi
def compute_points(theta):
points = [ (-1,-1,-1,-1), (-1,-1,+1,-1), (-1,+1,+1,-1), (-1,+1,-1,-1),
(+1,+1,-1,-1), (+1,+1,+1,-1), (+1,-1,+1,-1), (+1,-1,-1,-1),
(+1,-1,-1,+1), (+1,-1,+1,+1), (+1,+1,+1,+1), (+1,+1,-1,+1),
(-1,+1,-1,+1), (-1,+1,+1,+1), (-1,-1,+1,+1), (-1,-1,-1,+1) ]
# Rotate by theta around (z,w), around (y,z) and around (x,w)
s, c = sin(theta), cos(theta)
points = [ (c*x - s*y, s*x + c*y, z, w) for (x,y,z,w) in points ]
s, c = sin(theta/3), cos(theta/3)
points = [ (c*x - s*w, y, z, s*x + c*w) for (x,y,z,w) in points ]
s, c = sin(theta/7), cos(theta/7)
points = [ (x, c*y - s*z, s*y + c*z, w) for (x,y,z,w) in points ]
# Move back along x
camera_x = -4
camera_w = -4
points = [ (x - camera_x, y, z, w - camera_w) for (x,y,z,w) in points ]
# Project perspective
points = [ (y / (w*x), z / (w*x)) for (x,y,z,w) in points ]
# Scale up for the display and move to the center
points = [ (384//2 + 384*y, 216//2 + 384*z) for (y,z) in points ]
return points
def line(p1, p2, color):
x1,y1=p1
x2,y2=p2
x1=int(x1)
y1=int(y1)
x2=int(x2)
y2=int(y2)
dx=x2-x1
dy=y2-y1
if round(abs(dx))==0 and round(abs(dy))==0:
set_pixel(x1+dx,y1+dy,color)
elif abs(dx)>=abs(dy):
e=int(dx/abs(dx))
m=dy/dx
p=y1-m*x1
for x in range(int(round(x1)),int(round(x1+dx)),e):
set_pixel(x,int(m*x+p),color)
else:
e=int(dy/abs(dy))
m=dx/dy
p=x1-m*y1
for y in range(int(round(y1)),int(round(y1+dy)),e):
set_pixel(int(m*y+p),y,color)
def draw_points(points, color):
for (x,y) in points:
set_pixel(int(x), int(y), color)
for i in range(16):
line(points[i], points[(i+1)&15], color)
line(points[1], points[6], color)
line(points[2], points[5], color)
line(points[0], points[3], color)
line(points[4], points[7], color)
line(points[8+1], points[8+6], color)
line(points[8+2], points[8+5], color)
line(points[8+0], points[8+3], color)
line(points[8+4], points[8+7], color)
line(points[1], points[14], color)
line(points[2], points[13], color)
line(points[3], points[12], color)
line(points[4], points[11], color)
line(points[5], points[10], color)
line(points[6], points[9], color)
line(points[0], points[7], color)
line(points[8], points[15], color)
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
theta = 0
for y in range(216):
for x in range(384):
set_pixel(x, y, WHITE)
while 1:
#---
for event in pygame.event.get():
if event.type == pygame.QUIT: sys.exit()
#---
points = compute_points(theta)
draw_points(points, BLACK)
show_screen()
theta += pi / 384
# Erase just the lines to save time
draw_points(points, WHITE)
Explication rapide sans rentrer dans les détails de la 4D. Presque tout se passe dans compute_points().
• On part des 16 points de l'hypercube centrée en (0,0,0).
• Ensuite je fais des petites rotations autour des plans (z,w), (y,z) et (x,w) pour faire tourner toutes les dimensions. Je tourne à des vitesse différentes autour de chaque plan pour que l'animation soit pas trop régulière et mette plus longtemps avant de revenir à la position initiale.
• Ensuite je déplace l'hypercube en (4,0,0,4) parce que la caméra est en (0,0,0,0) et il faut que l'objet qu'on regarde soit pas juste sur nous si on veut pouvoir le voir.
• Ensuite la perspective, j'aplatis les dimensions x et w sur l'écran. Les points loin sur x ou sur w se retrouvent rapprochés du centre de l'écran à (0,0). Les dimensions z et y sont donc les coordonnées de l'écran.
• Enfin je déplace le repère 2D pour que (0,0) soit en haut à gauche, et j'agrandis pour que le cube de largeur 2 prenne la majorité de la place à l'écran.
Et c'est à peu près tout, la fonction draw_points() hardcode l'ensemble des lignes qui forme l'hypercube. J'ai piqué le tracé de ligne dans turtle.
Citer : Posté le 10/05/2020 12:17 | #
Merci.