https://wiki.impvis.co.uk/index.php?action=history&feed=atom&title=Legacy_contentLegacy content - Revision history2026-04-22T18:12:06ZRevision history for this page on the wikiMediaWiki 1.36.0https://wiki.impvis.co.uk/index.php?title=Legacy_content&diff=753&oldid=prevCclewley at 15:41, 27 September 20212021-09-27T15:41:03Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en-GB">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 15:41, 27 September 2021</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">'''</del>jQuery<del style="font-weight: bold; text-decoration: none;">'''</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== </ins>jQuery <ins style="font-weight: bold; text-decoration: none;">==</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>jQuery is a JavaScript plugin that allows more effortless interactivity between the user and different HTML elements. After importing jQuery in your HTML head, you can then treat any HTML elements as a pseudo-JS variable. To do this, you can reference an element by id:<center><code>let Length = $(“#lengthslider”);</code></center>where the id is “lengthslider” in this case. Or by class:<center><code>let Length = $(“.slider”);</code></center>where the class is “slider” in this case. Generally, it is very good practice to use ID, '''NOT''' class, when specifying any one element.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>jQuery is a JavaScript plugin that allows more effortless interactivity between the user and different HTML elements. After importing jQuery in your HTML head, you can then treat any HTML elements as a pseudo-JS variable. To do this, you can reference an element by id:<center><code>let Length = $(“#lengthslider”);</code></center>where the id is “lengthslider” in this case. Or by class:<center><code>let Length = $(“.slider”);</code></center>where the class is “slider” in this case. Generally, it is very good practice to use ID, '''NOT''' class, when specifying any one element.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>When a HTML element is defined in JS, jQuery can then call several different functions on that element. One of the most important functions we use is the value function, which can either return the value of a HTML element:<center><code>let value_of_element = Length.val();</code></center>Or can set the value of the HTML element:<center><code>Length.val(“Hello Mars!”);</code></center>For more on jQuery, visit <del style="font-weight: bold; text-decoration: none;"><nowiki></del>https://www.w3schools.com/jQuery/<del style="font-weight: bold; text-decoration: none;"></nowiki></del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>When a HTML element is defined in JS, jQuery can then call several different functions on that element. One of the most important functions we use is the value function, which can either return the value of a HTML element:<center><code>let value_of_element = Length.val();</code></center>Or can set the value of the HTML element:<center><code>Length.val(“Hello Mars!”);</code></center>For more on jQuery, visit https://www.w3schools.com/jQuery/.</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== p5.js ==</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">'''p5.js'''</del></div></td><td colspan="2"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>p5.js is a drawing tool that allows developers to create non-plot graphics (such as a mass and spring) with heavy mouse interactivity. It does this by repeatedly drawing objects on a canvas at a rate equal to 1/framerate. After p5 is imported in your HTML header, the first step you will want to take is creating setup and draw functions in your JS file:<center><code>function setup() {let canvas = createCanvas(500,400);canvas.parent(‘canvas’);frameRate(60);};</code></center><center><code>function draw() {clear();background('#ffffff');noStroke();fill("#A51900");rect(mouseX, mouseY, 75,75);};</code></center>P5 automatically recognises these two functions. Setup defines all the essential meta-variables for p5’s drawing, variables such as frame rate and canvas size (specified in pixels). The Draw function is then carried out every [1/framerate] seconds. Good practice for p5 is first to clear any previous drawings, then draw your background. After that, you can draw your objects. In the example above, a brick red square is drawn at the mouse position with length and width equal to 75px.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>p5.js is a drawing tool that allows developers to create non-plot graphics (such as a mass and spring) with heavy mouse interactivity. It does this by repeatedly drawing objects on a canvas at a rate equal to 1/framerate. After p5 is imported in your HTML header, the first step you will want to take is creating setup and draw functions in your JS file:<center><code>function setup() {let canvas = createCanvas(500,400);canvas.parent(‘canvas’);frameRate(60);};</code></center><center><code>function draw() {clear();background('#ffffff');noStroke();fill("#A51900");rect(mouseX, mouseY, 75,75);};</code></center>P5 automatically recognises these two functions. Setup defines all the essential meta-variables for p5’s drawing, variables such as frame rate and canvas size (specified in pixels). The Draw function is then carried out every [1/framerate] seconds. Good practice for p5 is first to clear any previous drawings, then draw your background. After that, you can draw your objects. In the example above, a brick red square is drawn at the mouse position with length and width equal to 75px.</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>For more on p5.JS visit <del style="font-weight: bold; text-decoration: none;"><nowiki></del>https://p5js.org/.<del style="font-weight: bold; text-decoration: none;">s</nowiki></del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>For more on p5.JS visit https://p5js.org/.</div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[Category:Tips Whilst Coding]]</ins></div></td></tr>
</table>Cclewleyhttps://wiki.impvis.co.uk/index.php?title=Legacy_content&diff=385&oldid=prevMark Thomas at 19:03, 16 July 20212021-07-16T19:03:09Z<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en-GB">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 19:03, 16 July 2021</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">asd</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">'''jQuery'''</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">jQuery is a JavaScript plugin that allows more effortless interactivity between the user and different HTML elements. After importing jQuery in your HTML head, you can then treat any HTML elements as a pseudo-JS variable. To do this, you can reference an element by id:<center><code>let Length = $(“#lengthslider”);</code></center>where the id is “lengthslider” in this case. Or by class:<center><code>let Length = $(“.slider”);</code></center>where the class is “slider” in this case. Generally, it is very good practice to use ID, '''NOT''' class, when specifying any one element.</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">When a HTML element is defined in JS, jQuery can then call several different functions on that element. One of the most important functions we use is the value function, which can either return the value of a HTML element:<center><code>let value_of_element = Length.val();</code></center>Or can set the value of the HTML element:<center><code>Length.val(“Hello Mars!”);</code></center>For more on jQuery, visit <nowiki>https://www.w3schools.com/jQuery/</nowiki>.</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">'''p5.js'''</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">p5.js is a drawing tool that allows developers to create non-plot graphics (such as a mass and spring) with heavy mouse interactivity. It does this by repeatedly drawing objects on a canvas at a rate equal to 1/framerate. After p5 is imported in your HTML header, the first step you will want to take is creating setup and draw functions in your JS file:<center><code>function setup() {let canvas = createCanvas(500,400);canvas.parent(‘canvas’);frameRate(60);};</code></center><center><code>function draw() {clear();background('#ffffff');noStroke();fill("#A51900");rect(mouseX, mouseY, 75,75);};</code></center>P5 automatically recognises these two functions. Setup defines all the essential meta-variables for p5’s drawing, variables such as frame rate and canvas size (specified in pixels). The Draw function is then carried out every [1/framerate] seconds. Good practice for p5 is first to clear any previous drawings, then draw your background. After that, you can draw your objects. In the example above, a brick red square is drawn at the mouse position with length and width equal to 75px.</ins></div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">For more on p5.JS visit <nowiki>https://p5js.org/.s</nowiki></ins></div></td></tr>
</table>Mark Thomashttps://wiki.impvis.co.uk/index.php?title=Legacy_content&diff=384&oldid=prevMark Thomas: Created page with "asd"2021-07-16T19:02:16Z<p>Created page with "asd"</p>
<p><b>New page</b></p><div>asd</div>Mark Thomas