Amélioration de la découverte de javascript en ISN
This commit is contained in:
parent
b08c54556f
commit
1af2291059
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="250" height="114" viewBox="0 0 250 114"><style>path{fill:#ed225d}.svglink{border:none}</style><path d="M16.254 27.631v7.998h.359c.715-1.113 1.65-2.248 2.805-3.402 1.153-1.154 2.567-2.188 4.239-3.105 1.671-.912 3.561-1.67 5.671-2.268 2.107-.596 4.477-.896 7.103-.896 4.06 0 7.8.777 11.223 2.328 3.422 1.555 6.368 3.684 8.836 6.389 2.466 2.707 4.376 5.891 5.73 9.551 1.353 3.662 2.03 7.602 2.03 11.82s-.657 8.178-1.971 11.879c-1.312 3.701-3.185 6.924-5.611 9.67-2.429 2.746-5.372 4.938-8.835 6.566-3.463 1.631-7.384 2.447-11.76 2.447-4.06 0-7.781-.836-11.163-2.506-3.385-1.672-5.99-3.939-7.82-6.807h-.238v36.295H2.525V27.631h13.729zm33.43 28.414c0-2.229-.339-4.438-1.015-6.627-.678-2.188-1.692-4.158-3.045-5.91-1.354-1.748-3.064-3.162-5.134-4.238-2.07-1.074-4.497-1.611-7.282-1.611-2.627 0-4.976.557-7.044 1.672a18.075 18.075 0 0 0-5.313 4.297 18.321 18.321 0 0 0-3.343 5.971c-.758 2.229-1.134 4.459-1.134 6.686 0 2.229.376 4.438 1.134 6.625a18.438 18.438 0 0 0 3.343 5.912 17.214 17.214 0 0 0 5.313 4.236c2.068 1.076 4.417 1.611 7.044 1.611 2.785 0 5.212-.555 7.282-1.67 2.069-1.115 3.78-2.547 5.134-4.299 1.353-1.75 2.367-3.74 3.045-5.969a22.937 22.937 0 0 0 1.015-6.686zm139.649-31.152v63.506c0 3.422-.279 6.666-.836 9.73-.559 3.064-1.611 5.73-3.164 8-1.551 2.27-3.662 4.078-6.328 5.432-2.668 1.354-6.148 2.029-10.447 2.029a27.3 27.3 0 0 1-3.582-.238c-1.193-.16-2.148-.32-2.865-.479l1.195-12.178c.637.16 1.312.279 2.029.359.717.078 1.352.119 1.91.119 1.67 0 3.023-.318 4.059-.955a6.402 6.402 0 0 0 2.389-2.627c.555-1.115.914-2.408 1.074-3.881.158-1.473.238-3.043.238-4.715V24.893h14.328zm48.83 18.019c-1.275-1.672-3.025-3.123-5.254-4.357s-4.656-1.852-7.283-1.852c-2.309 0-4.416.479-6.326 1.434-1.912.953-2.865 2.547-2.865 4.775s1.053 3.803 3.162 4.715c2.109.916 5.195 1.852 9.254 2.807 2.148.479 4.316 1.115 6.506 1.91s4.18 1.85 5.971 3.164a15.605 15.605 0 0 1 4.357 4.895c1.113 1.951 1.672 4.318 1.672 7.104 0 3.504-.658 6.469-1.971 8.895-1.312 2.428-3.064 4.398-5.254 5.91s-4.736 2.607-7.641 3.283a39.64 39.64 0 0 1-9.014 1.014c-4.459 0-8.795-.816-13.014-2.447-4.219-1.629-7.721-3.959-10.506-6.982l9.432-8.836c1.592 2.07 3.66 3.781 6.209 5.133 2.547 1.354 5.371 2.029 8.477 2.029 1.033 0 2.088-.117 3.164-.357a10.742 10.742 0 0 0 2.984-1.133 6.202 6.202 0 0 0 2.209-2.09c.555-.877.834-1.949.834-3.225 0-2.389-1.094-4.098-3.281-5.133-2.191-1.035-5.475-2.07-9.85-3.104a47.301 47.301 0 0 1-6.27-1.852c-2.029-.756-3.84-1.75-5.432-2.984a13.778 13.778 0 0 1-3.82-4.598c-.955-1.83-1.434-4.098-1.434-6.805 0-3.184.656-5.928 1.971-8.236a16.936 16.936 0 0 1 5.193-5.674c2.148-1.471 4.576-2.566 7.283-3.281a32.486 32.486 0 0 1 8.357-1.076c4.137 0 8.178.717 12.117 2.148 3.939 1.434 7.062 3.625 9.373 6.568l-9.31 8.238zm-84.604 29.904l8.533-2.576 1.676 5.156-8.498 2.898 5.275 7.48L156.098 89l-5.553-7.348-5.408 7.154-4.319-3.289 5.275-7.223-8.563-3.09 1.677-5.16 8.599 2.771V63.92h5.754v8.896zm-29.473-26.98c-1.473-3.301-3.521-6.088-6.148-8.357-2.626-2.268-5.711-4-9.252-5.193-3.543-1.193-7.384-1.791-11.521-1.791-1.513 0-3.204.082-5.074.238-1.871.162-3.482.439-4.835.838l.835-18.268h34.504V.41H74.481l-1.433 46.201c1.271-.635 2.725-1.232 4.357-1.791a66.991 66.991 0 0 1 5.014-1.49 45.797 45.797 0 0 1 5.254-1.016 38.588 38.588 0 0 1 5.074-.357c2.307 0 4.576.258 6.805.775 2.228.518 4.238 1.434 6.029 2.746s3.242 3.045 4.358 5.193c1.113 2.148 1.671 4.855 1.671 8.119 0 2.547-.418 4.836-1.254 6.865-.835 2.027-1.97 3.721-3.401 5.072a14.723 14.723 0 0 1-5.016 3.104c-1.91.719-3.939 1.076-6.089 1.076-3.819 0-7.124-1.016-9.909-3.045-2.787-2.029-4.775-4.715-5.97-8.059l-.159.059-10.368 9.715c2.097 3.42 4.8 6.281 8.14 8.553 4.854 3.301 10.823 4.955 17.909 4.955 4.218 0 8.197-.678 11.938-2.029 3.74-1.352 7.004-3.303 9.79-5.852 2.785-2.545 4.994-5.67 6.627-9.371 1.63-3.701 2.446-7.898 2.446-12.596.001-4.298-.735-8.096-2.208-11.401z"/></svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -0,0 +1,108 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="./lib/p5.min.js"></script>
|
||||
<script src="./lib/sketch.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./lib/pandoc.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1> Mouvement d'une balle avec P5.js </h1>
|
||||
|
||||
<p>
|
||||
<span id="c1"></span>
|
||||
<span id="c2"></span>
|
||||
<span id="c3"></span>
|
||||
<span id="c4"></span>
|
||||
<span id="c5"></span>
|
||||
<span id="c6"></span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le but de ce TD est découvrir un nouveau langage: Javascript et d'explorer diverses façons de faire déplacer des objets.
|
||||
<p>
|
||||
|
||||
<p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">Documentations en français sur Javascript </a></p>
|
||||
|
||||
<p>
|
||||
De manière générale, quand vous faites une recherche sur javascript ajouter le mot clé ES6 (ou supérieur). Ce sont les spécifications pour écrire correctement du javascript.
|
||||
</p>
|
||||
|
||||
<h2><img height=30 src="assets/p5js.svg" id="logo_image" class="logo" /> </h2>
|
||||
<p> C'est la librairie javascript qui va nous permettre de créer des animations dans une page html. </p>
|
||||
|
||||
<ul>
|
||||
<li>Site internet de <a href="https://p5js.org/"> p5.js </a></li>
|
||||
<li> Documentation des fonctions de cette librairie <a href="https://p5js.org/reference"> ici </a></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Pour faire fonctionner p5.js il faut avoir au minimum les 3 fichiers suivant dans la même répertoire:
|
||||
<ul>
|
||||
<li> <a href="template/index.html">index.html</a> Le fichier html à ouvrir avec votre navigateur.</li>
|
||||
<li> <a href="template/p5.js">j5.js</a> la library p5.js téléchargé depuis le officiel. </li>
|
||||
<li> <a href="template/sketch.js">sketch.js</a> le code javascript pour faire l'animation. </li>
|
||||
</ul>
|
||||
Ces 3 fichiers se trouvent dans le dossier <a href="./template/">./template</a>.
|
||||
<p>
|
||||
|
||||
<p>
|
||||
Vous trouverez un <a href="exemple/index.html">exemple</a> dans le dossier <a href="exemple"> ./exemple </a>.
|
||||
</p>
|
||||
|
||||
<h2> Mouvements à réaliser </h2>
|
||||
<p>Les mouvements suivants sont a réaliser dans l'ordre que vous voulez. Copier le dossier <a href="template/">./template</a> en le renommant puis éditer le fichier <b> sketch.js</b> pour réaliser le mouvement voulu.</p>
|
||||
|
||||
<h3> Mouvement en ligne droite</h3>
|
||||
<p>
|
||||
<b> Difficulté: *</b> </br>
|
||||
La balle se déplace en ligne droite.
|
||||
</p>
|
||||
<div id="cbase"></div>
|
||||
|
||||
|
||||
<h3> Petit mouvements aléatoires</h3>
|
||||
<p>
|
||||
<b> Difficulté: **</b> </br>
|
||||
La balle fait des petits mouvements comme si elle vibrait de façon aléatoire. </br>
|
||||
P5.js met à disposition une fonction <b> random </b> pour générer un nombre aléatoire entre 0 et 1.
|
||||
</p>
|
||||
<div id="c2bis"></div>
|
||||
|
||||
<h3> Mouvement pacman </h3>
|
||||
<p>
|
||||
<b> Difficulté: **</b> </br>
|
||||
La balle se déplace en ligne droite, quand elle atteint un bord elle réapparait sur le bord opposé. </br>
|
||||
L'opérateur javascript modulo ou reste par la division euclidienne (%) est pratique pour ce genre de situation.
|
||||
</p>
|
||||
<div id="c1bis"></div>
|
||||
|
||||
<h3> Rebond aux bords</h3>
|
||||
<p>
|
||||
<b> Difficulté: **</b> </br>
|
||||
La balle se déplace en ligne droite, quand elle atteint un bord elle rebondit.
|
||||
</p>
|
||||
<div id="c3bis"></div>
|
||||
|
||||
<h3> Mouvement fluide périodique</h3>
|
||||
<p>
|
||||
<b> Difficulté: ***</b> </br>
|
||||
La balle a un mouvement périodique de bas en haut (pensez aux fonctions périodiques que vous connaissez).
|
||||
</p>
|
||||
<div id="c5bis"></div>
|
||||
|
||||
<h3> Mouvement en cercle</h3>
|
||||
<p>
|
||||
<b> Difficulté: ***</b> </br>
|
||||
La balle décrit un cercle autour d'un point (pensez au cercle trigonométrique).
|
||||
</p>
|
||||
<div id="c4bis"></div>
|
||||
|
||||
<h3> Mouvement en cloche</h3>
|
||||
<p>
|
||||
<b> Difficulté: ****</b> </br>
|
||||
La balle est lancée dans une direction avec une vitesse initial et est soumis à la gravitation pour retomber (pensez à vos cours de physique).
|
||||
</p>
|
||||
<div id="c6bis"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="p5.min.js"></script>
|
||||
<script src="sketch.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,14 @@
|
|||
function setup() {
|
||||
createCanvas(640, 480);
|
||||
var white = 0;
|
||||
var blakck = 255;
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (mouseIsPressed) {
|
||||
fill(white);
|
||||
} else {
|
||||
fill(black);
|
||||
}
|
||||
ellipse(mouseX, mouseY, 80, 80);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,328 @@
|
|||
/*
|
||||
* I add this to html files generated with pandoc.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
overflow-y: scroll;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #444;
|
||||
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
padding: 1em;
|
||||
margin: auto;
|
||||
max-width: 42em;
|
||||
background: #fefefe;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0645ad;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #0b0080;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #06e;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: #faa700;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
*::-moz-selection {
|
||||
background: rgba(255, 255, 0, 0.3);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
*::selection {
|
||||
background: rgba(255, 255, 0, 0.3);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a::-moz-selection {
|
||||
background: rgba(255, 255, 0, 0.3);
|
||||
color: #0645ad;
|
||||
}
|
||||
|
||||
a::selection {
|
||||
background: rgba(255, 255, 0, 0.3);
|
||||
color: #0645ad;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #111;
|
||||
line-height: 125%;
|
||||
margin-top: 2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: #666666;
|
||||
margin: 0;
|
||||
padding-left: 3em;
|
||||
border-left: 0.5em #EEE solid;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 2px;
|
||||
border: 0;
|
||||
border-top: 1px solid #aaa;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
pre, code, kbd, samp {
|
||||
color: #000;
|
||||
font-family: monospace, monospace;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 0.98em;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ins {
|
||||
background: #ff9;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 1em 0;
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
|
||||
li p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul ul, ol ol {
|
||||
margin: .3em 0;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
margin-bottom: .8em;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 .8em 2em;
|
||||
}
|
||||
|
||||
dd:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
figure {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
figure img {
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
margin: 0 0 .8em;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 2em;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table th {
|
||||
padding: .2em 1em;
|
||||
background-color: #eee;
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: .2em 1em;
|
||||
border-top: 1px solid #ddd;
|
||||
border-left: 1px solid #ddd;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 480px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: black !important;
|
||||
filter: none !important;
|
||||
-ms-filter: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 12pt;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre, blockquote {
|
||||
border: 1px solid #999;
|
||||
padding-right: 1em;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
tr, img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page :left {
|
||||
margin: 15mm 20mm 15mm 10mm;
|
||||
}
|
||||
|
||||
@page :right {
|
||||
margin: 15mm 10mm 15mm 20mm;
|
||||
}
|
||||
|
||||
p, h2, h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
var white = 205;
|
||||
var black = 0;
|
||||
|
||||
var baseBall = function (p) {
|
||||
var x = 50;
|
||||
var y = 50;
|
||||
p.setup = function () {
|
||||
p.createCanvas(500, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white)
|
||||
p.fill(black)
|
||||
p.ellipse(x, y, 20, 20);
|
||||
x += 1
|
||||
if (x > 500) {x = 0};
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(baseBall, 'cbase');
|
||||
|
||||
var pacmanBall = function (p) {
|
||||
var x = 50;
|
||||
var y = 50;
|
||||
var speed = 2;
|
||||
var Xspeed = p.random()*speed;
|
||||
var Yspeed = p.random()*speed;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white)
|
||||
p.fill(black)
|
||||
p.ellipse(x, y, 20, 20);
|
||||
x = (x + Xspeed) % 100
|
||||
y = (y + Yspeed) % 100
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(pacmanBall, 'c1');
|
||||
var myp5 = new p5(pacmanBall, 'c1bis');
|
||||
|
||||
var randomBall = function (p) {
|
||||
var x = 50;
|
||||
var y = 50;
|
||||
var factor = 5;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white);
|
||||
p.fill(black);
|
||||
x += (p.random() - 0.5)*factor;
|
||||
y += (p.random() - 0.5)*factor;
|
||||
p.ellipse(x, y, 20, 20);
|
||||
if (x<0 || x>100 || y<0 || y>100) {
|
||||
x = 50;
|
||||
y = 50;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(randomBall, 'c2');
|
||||
var myp5 = new p5(randomBall, 'c2bis');
|
||||
|
||||
var boundcingBall = function (p) {
|
||||
var x = 25;
|
||||
var y = 25;
|
||||
var radius = 20
|
||||
var speed = 5;
|
||||
var Xspeed = (p.random()-0.5)*speed;
|
||||
var Yspeed = (p.random()-0.5)*speed;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white);
|
||||
p.fill(black);
|
||||
x += Xspeed
|
||||
y += Yspeed
|
||||
p.ellipse(x, y, radius, radius);
|
||||
if ((x-radius < 0) || (x+radius > 100)) {
|
||||
Xspeed = - Xspeed
|
||||
};
|
||||
if ((y-radius < 0) || (y+radius > 100)) {
|
||||
Yspeed = - Yspeed
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(boundcingBall, 'c3');
|
||||
var myp5 = new p5(boundcingBall, 'c3bis');
|
||||
|
||||
var circleBall = function (p) {
|
||||
var x = 25;
|
||||
var y = 25;
|
||||
var ballRadius = 5;
|
||||
var t = 0;
|
||||
var speed = 0.1;
|
||||
var pathRadius = 20;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white);
|
||||
p.fill(black);
|
||||
t += speed;
|
||||
x = p.cos(t) * pathRadius + 50;
|
||||
y = p.sin(t) * pathRadius + 50;
|
||||
p.ellipse(x, y, ballRadius, ballRadius);
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(circleBall, 'c4');
|
||||
var myp5 = new p5(circleBall, 'c4bis');
|
||||
|
||||
var waveBall = function (p) {
|
||||
var x = 25;
|
||||
var y = 25;
|
||||
var ballRadius = 20;
|
||||
var t = 0;
|
||||
var speed = 0.1;
|
||||
var pathRadius = 20;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white);
|
||||
p.fill(black);
|
||||
t += speed;
|
||||
x = p.cos(t) * pathRadius + 50;
|
||||
p.ellipse(x, y, ballRadius, ballRadius);
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(waveBall, 'c5');
|
||||
var myp5 = new p5(waveBall, 'c5bis');
|
||||
|
||||
var gravityBall = function (p) {
|
||||
var ballRadius = 20;
|
||||
var x = 25;
|
||||
var y = 80;
|
||||
var Xspeed = 1;
|
||||
var Yspeed = -3;
|
||||
var Xgrav = 0;
|
||||
var Ygrav = 0.1;
|
||||
p.setup = function () {
|
||||
p.createCanvas(100, 100);
|
||||
};
|
||||
p.draw = function () {
|
||||
p.background(white);
|
||||
p.fill(black);
|
||||
Yspeed += Ygrav;
|
||||
x += Xspeed;
|
||||
y += Yspeed;
|
||||
p.ellipse(x, y, ballRadius, ballRadius);
|
||||
if (y > 100) {
|
||||
x = 25;
|
||||
y = 80;
|
||||
Xspeed = 1;
|
||||
Yspeed = -3;
|
||||
Xgrav = 0;
|
||||
Ygrav = 0.1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var myp5 = new p5(gravityBall, 'c6');
|
||||
var myp5 = new p5(gravityBall, 'c6bis');
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="p5.js"></script>
|
||||
<script src="sketch.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
|||
function setup ( ) {
|
||||
// Entre les deux accolades ({}), on initialise notre animation
|
||||
createCanvas (480 , 600)
|
||||
}
|
||||
function draw ( ) {
|
||||
// Entre les deux accolades ({}), on explique ce que javascript doit repeter indefiniement .
|
||||
// Par exemple colorier le fond de notre image en noir
|
||||
background ( 0 , 0 , 0 )
|
||||
}
|
||||
Loading…
Reference in New Issue