html, css, js integrated get el by id to modify html and css in javascript js function loop accumulator

---

See the Pen Template 0 - 9 lines by Joseph (@wynottwynott) on CodePen.

---

See the Pen Template 1: link and css by Joseph (@wynottwynott) on CodePen.

---

See the Pen Template 2 - CSS and JS by Joseph (@wynottwynott) on CodePen.

---

See the Pen 270 Adding JavaScript by Joseph (@wynottwynott) on CodePen.

html, css, js integrated get el by id to modify html and css in javascript js var, scope loop if % accumulator

---

QUIZ: WRITE the JavasSript to create this

See the Pen 377 start 0 by Joseph (@wynottwynott) on CodePen.

---

QUIZ: SHOW the Output

See the Pen 377 start by Joseph (@wynottwynott) on CodePen.

canvas - new to html5 width height attributes must be specified, don't use css for sizing may style otherwise needs id as a hook for JS the rendering "context" provides a 2d object which as an api used to draw

---

simple canvas Canvas rectangles and ellipses // x,y,w,h ctx.fillRect(Math.floor(Math.random()*400), Math.floor(Math.random()*250), Math.floor(Math.random()*140), Math.floor(Math.random()*100)); .... // x, y, radius, startAngle, endAngle, anticlockwise ctx.arc( Math.floor(Math.random()*450), Math.floor(Math.random()*250), Math.floor(Math.random()*40), 0.0, (Math.PI * 2), true); ctx.fill();// actually draws here

See the Pen Template 3 - Canvas by Joseph (@wynottwynott) on CodePen.

---

trig boxes circles colors listeners callbacks!! Canvas: Boxes, Circles, Trig, Listeners, Call-backs

---

---

Diving Into HTML5: canvas text Mozilla canvas tutor JS: Spirals and Trig JS: Snow

---

Canvas: Boxes, Circles, Trig, Listeners, Call-backs(*LOCAL)

See the Pen Canvas: boxes and trig by Joseph (@wynottwynott) on CodePen.

---

Canvas: Assignment w/ trig mouse, keyboard, shapes (*LOCAL)

---

listeners callbacks!! trig boxes circles colors keyboard event mouse events

The hardest part of CSS is controlling the layout, especially allowing for reponsive design that accomodates a variety of screen widths. My CSS: responsive css and the other page My Grid: responsive & fixed using CSS float and box-sizing

var a=[]; var EL=100; var colors=["black", "white"]; function dataStruct() { for(var i=0; i<EL; i++) { a[i] = new Array(EL); for(var j=0; j<EL; j++) { a[i][j] = {}; a[i][j].x=i; a[i][j].y=j; a[i][j].color=colors[Math.floor(Math.random()*colors.length)]; a[i][j].z= function(){ $("rep").innerHTML="I am pixel at: " + this.x + " " + this.y + " " + this.color; } } } GOL Video & Assignment Page Flood Video Page 244/a/aXFlood/floodpage.html

---

Flood Canvas(*LOCAL)

From Wolfram on additive cellular automata: "An additive cellular automaton is a cellular automaton whose rule is compatible with an addition of states. Typically, this addition is derived from modular arithmetic. Additive rules allow the evolution for different initial conditions to be computed independently, then the results combined by simply adding. The results for arbitrary starting conditions can therefore be computed very efficiently by convolving the evolution of a single cell with an appropriate convolution kernel (which, in the case of two-color automata, would correspond to the set of initially "active" cells)." wolfram: sierpinski sieve wolfram: additive CA wolfram: rule 102 1d CA Can write arrays that are generated in code to the canvas as an image.

// display image img4 = new Image(); img4.src = 'myPicture.jpg'; img4.onload = function(e) { // draw after image is loaded ctx.drawImage(img4, 0, 0); } // gets rgb for all pixels from image (entire canvas) // 1-d array // num pixels = canvas.width x canvas.height // num data items = pixels x 4 imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); // holds total length of rgba array imgData.data.length // data organized as rgba / rgba / rgba /... imgData.data[i] - contains 1 byte of data (rgba) at index 'i' // average the rgb of one pixel at "i" // assign the avg to each rgb component var avg = imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]; imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] = avg; // writes data array to canvas at 0,0 ctx.putImageData(imgData, 0, 0);

A Euclidean vector is defined as an entity that has both magnitude and direction. A vector is typically drawn as a arrow where direction is where the arrow is pointing, and velocity by the length of the arrow. Source: https://software.intel.com/en-us/html5/hub/blogs/build-a-javascript-particle-system-in-200-lines function Vector(x, y) { this.x = x || 0; this.y = y || 0; } // Add a vector to another Vector.prototype.add = function(vector) { this.x += vector.x; this.y += vector.y; } // Gets the length of the vector Vector.prototype.getMagnitude = function () { return Math.sqrt(this.x * this.x + this.y * this.y); }; // Gets the angle accounting for the quadrant we're in Vector.prototype.getAngle = function () { return Math.atan2(this.y,this.x); }; // Allows us to get a new vector from angle and magnitude Vector.fromAngle = function (angle, magnitude) { return new Vector(magnitude * Math.cos(angle), magnitude * Math.sin(angle)); };

In 1982, William T. Reeves, a researcher at Lucasfilm Ltd., was working on the film Star Trek II: The Wrath of Khan. Much of the movie revolves around the Genesis Device, a torpedo that when shot at a barren, lifeless planet has the ability to reorganize matter and create a habitable world for colonization. During the sequence, a wall of fire ripples over the planet while it is being “terraformed": “A particle system is a collection of many many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system.” —William Reeves, "Particle Systems—A Technique for Modeling a Class of Fuzzy Objects," ACM Transactions on Graphics 2:2 (April 1983), 92. Jarrod Overson demo: http://jarrodoverson.com/static/demos/particleSystem/ function Particle(point, velocity, acceleration) { this.position = point || new Vector(0, 0); this.velocity = velocity || new Vector(0, 0); this.acceleration = acceleration || new Vector(0, 0); } Particle.prototype.move = function () { // Add our current acceleration to our current velocity this.velocity.add(this.acceleration); // Add our current velocity to our position this.position.add(this.velocity); };

Framework Integration Closure - controlling scope Shuffling an Array: Fisher-Yates bostock

3d on canvas Trig Transformations: rotate, translate