Seuls les membres ayant 30 points peuvent parler sur le chat.

Forum Casio - Actualités


Index du Forum » Actualités » Concours de démos graphiques en Python
Lephenixnoir Hors ligne Administrateur Points: 17786 Défis: 142 Message

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


Précédente 1, 2, 3, 4, 5, 6, 7
Massena Hors ligne Rédacteur Points: 1239 Défis: 6 Message

Citer : Posté le 09/05/2020 21:44 | #


Je ferais partie du jury
Peace was never an option. - Untitled goose game, 2019
Tituya Hors ligne Rédacteur Points: 864 Défis: 16 Message

Citer : Posté le 09/05/2020 21:50 | #


Moi aussi ! Plus il y a de juges plus c'est représentatif !
Bretagne > Reste du globe
(Et de toute façon, vous pouvez pas dire l'inverse grâce à Bzh)



Lephenixnoir Hors ligne Administrateur Points: 17786 Défis: 142 Message

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.
Hackcell Hors ligne Membre Points: 1329 Défis: 11 Message

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"
I usually spend meow time cosplaying as a diligent student...
So it can get pretty stressful.
That's exactly why PC is such a happy place for meow to be ⭐
Critor En ligne Administrateur Points: 1780 Défis: 18 Message

Citer : Posté le 10/05/2020 09:50 | #


Lephenixnoir a écrit :
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 :

Tore en raytracing par Tbit : #175593 (code source)
Cardiogramme par Hackcell : #175625
Matrix par Dark Storm : #175635 (capture animée)
Radar par Dark Storm : #175854

Animations réalisées mais pas classées :

Rotation 4D par Lephenixnoir : #175493
Bad Apple par Dark Storm : #175915 (capture animée, capture vidéo)


Superbe panaché, félicitations !

@Lephenixnoir , pourrait-on avoir le code source de tes démos maintenant, si tu l'as gardé quelque part ? Merci.
Lephenixnoir Hors ligne Administrateur Points: 17786 Défis: 142 Message

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.

#! /usr/bin/python3

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.
Critor En ligne Administrateur Points: 1780 Défis: 18 Message

Citer : Posté le 10/05/2020 12:17 | #


Merci.
Précédente 1, 2, 3, 4, 5, 6, 7

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
Pour coloriser votre code, cliquez ici.
Sinon cliquez sur le bouton ci-dessous.
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v42 © créé par Neuronix et Muelsaco 2004 - 2020 | Il y a 75 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd