Articles

Javascript : commandes de base

📘 JavaScript Cheat Sheet 🔹 Affichage & Console console.log("Hello, world!"); alert("Coucou !"); prompt("Ton prénom ?"); confirm("Es-tu sûr ?"); 🔹 Variables let x = 10; // modifiable const y = 20; // constante var z = "test"; // ancienne syntaxe 🔹 Types de données let nombre = 42; // Number let texte = "Bonjour"; // String let booleen = true; // Boolean let tableau = [1, 2, 3]; // Array let objet = {nom: "Alice"}; // Object let rien = null; // Null let indéfini; // Undefined 🔹 Opérateurs let a = 5, b = 2; a + b; // 7 a - b; // 3 a * b; // 10 a / b; // 2.5 a % b; // 1 (reste) a ** b; // 25 (puissance) 🔹 Conditions if (age >= 18) { console.log("Majeur"); } else { console.log("Mineur...

WEBGL code complet

Souris = souffle · B = burst · F = filaire · WebGL2, fond noir, sans dépendances

WEBGL : Vertex Shader dans page html

Particles WebGL2 — cours en 10 étapes (présentation) 1) Structure HTML minimale Une page fond noir avec un unique <canvas> plein écran : c’est la surface de rendu. Copier le code <style> html,body{margin:0;height:100%;background:#000;overflow:hidden} canvas{position:fixed;inset:0;width:100%;height:100%;display:block} </style> <canvas id="gl"></canvas> 2) Canvas + DPR (haute résolution) On utilise le devicePixelRatio (DPR) pour un rendu net et on ajuste le viewport au resize. Copier le code const canvas = document.getElementById('gl'); const gl = canvas.getContext('webgl2', {alpha:false}); let DPR=1, W=0, H=0; function resize(){ DPR = Math.max(1, Math.min(3, window.devicePixelRatio||1)); W = Math.floor(innerWidth * DPR); H = Math.floor(innerHeight * DPR); canvas.width = W; canvas.height = H; gl.viewport(0,0,W,H); } addEventListener('res...

Animation javascript dans page web

Image
1) Etape 1 <!DOCTYPE html> <html lang="fr"> <head>   <meta charset="UTF-8">   <title>Branche simple</title>   <style>     body {       margin: 0;       background: #f4f4f4;     }     canvas {       display: block;       margin: auto;       background: white;       border: 1px solid #ccc;     }   </style> </head> <body>   <canvas id="canvas" width="400" height="400"></canvas>   <script>     const ctx = document.getElementById('canvas').getContext('2d');     ctx.strokeStyle = 'green';     ctx.lineWidth = 4;     ctx.beginPath();     ctx.moveTo(200, 400);     ctx.lineTo(200, 300);     ctx.stroke();   </script> </body> </html> 2) Etape 2: <!DOCTYPE html> <ht...

Mario Kart 2D

 Ressource: Télécharger le projet 1) Création d'un simple véhicule 2) Ajout de friction, accélération et gestion de l'orientation et de la position 3)Ajout de la gestion des bords 4)Utilisation des blocs

Géométrie de la tortue

Ouvrir et reproduire le projet suivant sur votre ordinateur: https://scratch.mit.edu/projects/932273777/

ROBLOX - initiation LUA

 Exemple de script simple ------------------------------------------------------ local part = Instance.new("Part") part.Parent = workspace part.Size = Vector3.new(100, 1, 100) part.Position = Vector3.new(0, 0, 0) part.Anchored = true ------------------------------------------------------ -- création du sol local sol = Instance.new("Part") sol.Parent = workspace sol.Size = Vector3.new(1000, 1, 1000) sol.Position = Vector3.new(0, 0, 0) sol.Anchored = true sol.Color = Color3.new(1,1,1) sol.Parent = game.Workspace --------- local count = 0; function makePart() local rand = math.random(1000) local part = Instance.new('Part') part.Parent = game.Workspace part.Size = Vector3.new(5, 5, 5) part.Position = Vector3.new(0, 20, 20) if count%2 ==0 then part.Color = Color3.new(0,0,0)  else       part.Color = Color3.new(1,1,1)  end part.Anchored = false wait(1) part.Touched:Connect(function(Hit) local h = Hit.Parent:FindFirstChild("Hu...

Hacking : découverte de Kali Linux

  1 - Introduction à Docker 2 - Création d'une image docker de Kali su serveur distant 3 - Découverte et utilisations des outils de Kali.     cible :  http://testphp.vulnweb.com/

Exercices scratch

 https://mathinfo.alwaysdata.net/category/informatique/scratch/ 1) activité dessin :  https://mathinfo.alwaysdata.net/2017/01/4-mouvement-et-graphisme-a-vous-de-faire/ 2) Les listes :  https://mathinfo.alwaysdata.net/2017/01/4-scratch-les-listes/

Quizz

 Quelques Quizz : Javascript : - https://www.qcmquiz.com/Database/Quiz-JavaScript-17.php Scratch: -  https://wordwall.net/fr/resource/12088667/tester-tes-connaissances-sur-scratch Python: 1 -  https://fr.vikidia.org/wiki/Quiz:Python/Facile 2 - https://fr.vikidia.org/wiki/Quiz:Python/Difficile Html : https://www.alsacreations.com/quiz/lire/21-HTMLdebutant

Python/Hacking 2

Image
 - Droits sur les fichier - encrytption/decryption - renommer répertoire / fichier: -  savoir ou on se trouve : pwd - déplacer un fichier mv d'un dossier à un autre UN PEU DE PHP - créer une variable de session - compter les visites et les afficher - variable SERVER - Lister les variables SERVER - Création d'un fichier (si il n'est pas créé) - Créer un cookie - Lire un cookie - Supprimer un cookie

Python - Hacking (éthique) : librairie n-map

Image
https://pypi.org/project/python-nmap/ exemple :

Installation de pip sous windows

 https://www.dataquest.io/blog/install-pip-windows/

Librairie OpenAI et Python

Image
  Ressources : -  https://holypython.com/python-api-tutorial/listing-all-available-openai-models-openai-api/ -  https://platform.openai.com/docs/libraries                                             ChatGPT : fonctionnement ChatGPT est un chatbot d'intelligence artificielle développé par OpenAI (image via ChatGPT). Vous avez probablement entendu parler de ChatGPT à ce stade. Les gens l'utilisent pour faire leurs devoirs, coder des applications Web frontales et rédiger des articles scientifiques. L'utilisation d'un modèle de langage peut sembler magique ; un ordinateur comprend ce que vous voulez et vous donne la bonne réponse. Mais sous le capot, ce ne sont que du code et des données. Lorsque vous invitez ChatGPT avec une instruction, comme 'Ecris moi un poème sur les chats' , il transforme cette invite en jetons . Les jetons sont des fragments de texte, comme wri...

Installation de pip sous windows

  La Python Software Foundation fournit des programmes d'installation pour Windows qui incluent   pip . Pour installer Python 3.7 et  pip  (Windows) Téléchargez le programme d'installation du fichier exécutable Windows x86-64 de Python 3.7 à partir de la  page de téléchargements  de  Python.org . Exécutez le programme d'installation. Choisissez  Add Python 3.7 to PATH (Ajouter Python 3.7 à PATH) . Choisissez  Install Now (Installer maintenant) . Le programme d'installation installe Python dans votre dossier d'utilisateur et ajoute ses répertoires exécutables à votre chemin d'utilisateur.

balle avec gravité

 https://jsfiddle.net/Amatewasu/3mx2agr5/50/

Javascript : Les boids !

  https://github.com/beneater/boids/blob/master/boids.js

3D et shaders

  3D et shaders - Activité 1 : dessin d'un carré via le 'vertex shader' Les vertex shaders permettent de programmer une des étapes de la création d'images par la carte graphique. Quelques vertex shader https://www.vertexshaderart.com https://www.vertexshaderart.com/art/jjpd8XtJ5nJAcmyLh Sur la base de ce code : exercice 1 : changer la couleur du rectangle exercice 2 : doubler la largeur du rectangle exercice 3 : faire se déplacer le rectangle de droite à gauche exercice 4 : faire réapparaître le rectangle sur la gauche lorsqu'il disparaît à droite

Jeu de casse briques en javascript

    Activité 1: Javascript, jeu de casse briques I. Introduction à jsfiddle https://jsfiddle.net/ II. Programmation par étapes du jeu de casse-briques Les différentes étapes peuvent se faire sur jsfiddle, pour chacune des petits jeux/exercices permettent de vous assurer d'avoir bien compris le code. ETAPE 1 : création du canvas et son affichage https://developer.mozilla.org/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it a- Création de la page HTML et de l'objet canvas exercice  : Changer le titre de la page html par un titre que vous choisissez exercice :  Changer le code pour obtecir un objet canvas de 400 pixels x 400 pixels b- Code javascript, création des variable pour manipuler l'objet canvas: exercice :  simplifiez en une ligne l'expression : var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); c- Dessin sur le canvas : rectangle, cercle, remplissage: exercice :  créer 1...