Passée l’émotion, on a finalement continué la programmation d’un Tetris pour les NSI la semaine prochaine, et corrigés des bugs de collision du casse-briques de BdB et Valentin 😀
Archives pour la catégorie ISN Rudloff
Utiliser les coins dans un « casse-briques »
On profite de cette séance en présentiel ISN avec deux sbires du projet « casse-briques » de terminale pour coder ça.
Bastien et Nico H. de première NSI apprécieront !
Quelques correctifs (même s’il reste des bugs) et le réglage de la taille de la balle depuis !
Demo « pythontutor » pour gérer la mémoire
Je reviens dans cette vidéo sur une question de première NSI posée en QCM.
def cube(L): for i in range(len(L)): L[i]= L[i] * L[i] * L[i] return L L = [2, 5] b = cube(L) print(b, L)
La bonne réponse est bien
[8, 125] [8, 125]
et pas
[2, 5] [8, 125]
Pourquoi ? Explication avec python tutor et mes commentaires en vidéo :
Javascript : une appli de calcul de moyenne
Whaouh ! Le résultat de notre séance de deux heures avec Léa puis Zoé au partage d’écran était top. On peut :
- le tester en cliquant ici.
- Afficher le code html avec un « Ctrl – U »,
- voir le code javascript en suivant le lien à la fin de la balise body du code source.
Reste à faire :
- affecter la spécialité, et les changements dans le menu déroulant,
- sauvegarder les données d’un utilisateur dans le localStorage…
Projets pour le bac en ISN
Les discussions se font là :
Projets validés pour 2020 en ISN
- « Calculateur de moyennes » – html – css – js – Léa et Zoé P.
- « Aide aux devoirs » – html – css – js – Sarah et Zoé S.
- « Mario Maker » – python – pygame – Justine, Alex et Axel
- « Casse-briques » – python – pygame – Corentin « BdB » et Valentin
- « Méga Tanks 2D » – python – pygame – Elias, Gaëtan et Noé
- « Photoshop Lite » – python – pygame – Romain et Tom
@Monsef, si tu nous lis, contacte moi !
Rappel :
- Il faut être par deux ou par trois,
- il fallait faire valider le sujet par votre enseignant (moi),
- il fallait envoyer votre ébauche avant jeudi 26 mars avec :
- la composition du groupe,
- un descriptif sommaire,
- une découpage des tâches,
- le langage envisagé (python ? pygame ? html/css/php/sql ?),
- comment vous comptez stocker l’information (choix des variables).
Vous pouvez répondre via les commentaires de cette page pour vous inscrire par groupes.
Discussions sur javascript dans des pages web
Pour commencer, lire :
- « Une page HTML est comme un arbre » dans https://www.lumni.fr/article/structure-de-base-d-une-page-html
Commencer ce cours :
Premiers tests des 3-4 avril :
Les codes de la session discord du 9 avril :
Voir les commentaires pour plein d’autres trucs :
Le cours du 30 avril avec son calculateur de moyenne :
Discussions sur python/pygame
C’est via les commentaires !
Avez-vous bossé les TPs ci-dessous avant ?
Correction des exercices – UTF8
Question 1 :
- Coder en UTF8 (binaire) le
é
codé233
.233
donne11101001
- Notes :
- On peut l’obtenir avec
,
- ou par divisions successives par 2 :
- On a zéro au quotient on s’arrête et on prend les restes successifs 1, 0, 0, 1, 0, 1, 1, 1 dans l’ordre inverse 😉
- ou en
python
:>>> ord('é') 233 >>> bin(ord('é')) '0b11101001' >>> bin(233) '0b11101001' >>> hex(233) # au passage '0xe9' >>> bin(233) # reour au sujet '0b11101001' >>> bin(ord('é')) '0b11101001' >>> bin(ord('é'))[2:] # avec ça on a toujours le code '11101001'
- On peut l’obtenir avec
- Notes :
- Il faut les caser dans ces 2 octets
110xxxxx 10xxxxxx
, - donc
11000011 10101001
.
Question 2 :
- Combien de caractères différents peut on coder en UTF-8 ?
Alors là, j’ai souvent dit des âneries…
La bonne réponse est toute bête :
- 1 octet
0xxxxxxx
, de l’ASCII, 7 bits avec deux possibilités, zéro ou un …
possibilités
- 2 octets
110xxxxx 10xxxxxx
, mais seulementbits disponibles …
possibilités ?
Non, car on ne mettra pas de code en dessous de huit bits !
possibilités !
- 3 octets
1110xxxx 10xxxxxx 10xxxxxx
, mais seulementbits disponibles …
possibilités ?
Non plus, car on ne mettra pas de code en dessous de huit bits !
possibilités !
- 4 octets
11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
, mais seulementbits disponibles …
possibilités ?
Vous avez compris…
possibilités !
Au final, un total de .
Bref, c’est tout bête, 21 bits au max en UTF-8 et possibilités !
En vrai… « Le standard Unicode décrit comment les caractères sont représentés par les points de code. Une valeur de point de code est un nombre entier compris entre 0
et 0x10FFFF
(environ 1,1 million de valeurs, avec environ 110 000 valeurs attribuées à ce jour). » comme le dit la doc de python…
Question 3 :
On a la séquence de huit octets suivante :
C3 A9 6C C3 A8 76 65 73
où chaque octet est représenté par deux chiffres hexadécimaux.
- C’est en UTF-8, décoder la séquence.
- En binaire,
- le
C
donne12
donc1100
, - le
3
donne…3
donc0011
, - le
A
donne10
donc1010
, - le
9
donne …9
donc1001
, - etc
- le
- Donc les octets donnent :
C3 A9
donne11000011 10101001
soit un code de11101001
donc233
doncé
,6C
donne01101100
soit108
doncl
,C3 A8
donne11000011 10101000
soit un code de11101000
donc232
doncè
,76
donne01110110
soit118
doncv
,65
donne01100101
soit101
donce
,73
donne01110011
soit115
doncs
.
- La séquence donne la chaîne «
élèves
» !
- En binaire,
- N.B. : si c’était pas en UTF8 mais en latin-1, une norme en voie de disparition, ça afficherait … «
élèves
» ! On comprend mieux certains bugs d’affichage.
Maintenant que tout ceci est plus clair, plongeons-nous dans le TP « Afficheur utf-8 » !
TP pygame – Rebondir avec Mario
Première prise en main
- Comprendre ce code.
- Le modifier pour que ça « rebondisse » sur tous les murs.
import pygame from pygame.locals import * pygame.init() fenetre=pygame.display.set_mode((640, 480)) pygame.display.set_caption("Une balle ?") clock = pygame.time.Clock() continuer=True # un rectangle que nous déplacerons ... hitbox = pygame.Rect(80, 120, 40, 40) # ... à l'aide de ce vecteur vecteur = [10, 10] while continuer : # déplcement du rectangle hitbox.move_ip(vecteur) # collision avec un mur ? if hitbox.right > 640: vecteur[0] *= -1 if hitbox.bottom > 480: vecteur[1] *= -1 # le fond fenetre.fill((0, 160, 160)) # dessiner le cercle x, y = hitbox.centerx, hitbox.centery pygame.draw.circle(fenetre, (255, 255, 255), (x, y), 20, 1) #mettre à jour l'affichage pygame.display.flip() #30 images par seconde clock.tick(30) #gestion des événements for event in pygame.event.get(): if event.type==QUIT: #la croix en haut à gauche continuer=False elif event.type==MOUSEBUTTONUP : # clic de souris hitbox.centerx, hitbox.centery = event.pos pygame.quit()
On ramène Mario
- Placer Mario sur la fenêtre,
- créer un rectangle « virtuel » ou « hitbox » de la taille de Mario, et placer Mario dedans,
- déplacer ce rectangle au clavier,
- faire que en sorte que la balle « rebondisse » sur Mario.
Notes de Léa (merci) :
Le code proposé en cours :
import pygame from pygame.locals import * pygame.init() fenetre=pygame.display.set_mode((640, 480)) pygame.display.set_caption("Une balle ?") clock = pygame.time.Clock() continuer=True # un rectangle que nous déplacerons ... hitbox = pygame.Rect(80, 120, 40, 40) # ... à l'aide de ce vecteur vecteur = [10, 10] imageG = pygame.image.load("mario_left.png").convert_alpha() imageD = pygame.transform.flip(imageG, True, False) joueurRect = imageG.get_rect() # rectangle de même taille que l'image joueurRect.centerx = 400 joueurRect.centery = 300 position = "gauche" while continuer : # déplcement du rectangle hitbox.move_ip(vecteur) # collision avec un mur ? if hitbox.right > 640 or hitbox.left < 0: vecteur[0] *= -1 if hitbox.bottom > 480 or hitbox.top < 0: vecteur[1] *= -1 if joueurRect.right < 0: joueurRect.left = 640 elif joueurRect.left > 640: joueurRect.right = 0 if joueurRect.bottom < 0: joueurRect.top = 480 elif joueurRect.top > 480: joueurRect.bottom = 0 if joueurRect.colliderect(hitbox): vecteur[0] *= -1 vecteur[1] *= -1 # le fond fenetre.fill((0, 160, 160)) if position == "gauche": fenetre.blit(imageG, joueurRect) else : fenetre.blit(imageD, joueurRect) # dessiner le cercle x, y = hitbox.centerx, hitbox.centery pygame.draw.circle(fenetre, (255, 255, 255), (x, y), 20, 1) #mettre à jour l'affichage pygame.display.flip() #25 images par seconde clock.tick(25) #gestion des événements non clavier for event in pygame.event.get(): if event.type==QUIT: #la croix en haut à gauche continuer=False elif event.type==MOUSEBUTTONUP : # clic de souris hitbox.centerx, hitbox.centery = event.pos # touches pressées dans une liste tkey = pygame.key.get_pressed() if tkey[K_UP]: joueurRect.move_ip(0, -5) if tkey[K_DOWN]: joueurRect.move_ip(0, 5) if tkey[K_LEFT]: joueurRect.move_ip(-5, 0) position = "gauche" if tkey[K_RIGHT]: joueurRect.move_ip(5, 0) position = "droite" if tkey[K_ESCAPE]: continuer = False pygame.quit()
Planning du 2 avril
Dernier jour où on fait du contenu collectif (notions, TP guidés) avant levée éventuelle du confinement. Après, que du projet.
10h12 : on s’échauffe avec
10h17 : on s’étire (longuement) avec :
11h12 : on corrige les exercices :
11h42 : maintenant que tout ceci est plus clair, plongeons-nous dans le