javascript - How do i make an automated traffic light? -

-

this question has answer here:

var red = "#ff0000";  var yellow = "#ffff00";  var green = "#00ff00";  var dark_red = "#380000";  var dark_yellow = "#383800";  var dark_green = "#003800";  var x_all = 150;  var y_red = 100;  var y_yellow = y_red + 150;  var y_green = y_yellow + 150;  var trafficlightsstatemachine;  function trafficlightsstatemachine() {    this.state = 0;    this.statemachine = new array();    this.statemachine[0] = function () { drawcircles(dark_red, yellow, dark_green); };    this.statemachine[1] = function () { drawcircles(red, dark_yellow, dark_green); };    this.statemachine[2] = function () { drawcircles(red, yellow, dark_green); };    this.statemachine[3] = function () { drawcircles(dark_red, dark_yellow, green); };    this.process = function() {      this.statemachine[this.state]();      this.state = (this.state + 1) % this.statemachine.length;    };    this.drawcircle = function(canvas, color, x, y) {      var context = canvas.getcontext('2d');      context.strokestyle = "#000000";      context.fillstyle = color;      context.beginpath();      context.arc(x, y, 50, 0, math.pi * 2, true);      context.closepath();      context.stroke();      context.fill();    };  }    function drawcircles(first, second, third) {    var id = 'canvas';    var canvas = document.getelementbyid(id);    if (canvas.getcontext) {      trafficlightsstatemachine.drawcircle(canvas, first, x_all, y_red);      trafficlightsstatemachine.drawcircle(canvas, second, x_all, y_yellow);      trafficlightsstatemachine.drawcircle(canvas, third, x_all, y_green);    }  }    function init() {    trafficlightsstatemachine = new trafficlightsstatemachine();    drawcircles(dark_red, dark_yellow, green);  }
#page  {    width: 300px;    height: 500px;    margin: auto;  }  #canvas:hover  {    cursor: crosshair;    background-color: #191919;  }  #canvas  {    background-color: #252525;  }  body  {    background: #222222;    color: white;  }
<body onload="init()">    <div id="page" onclick="trafficlightsstatemachine.process()" title="please, press button.">      <canvas id="canvas" height="500px" width="300px">      </canvas>    </div>  </body>

i able change code when run traffic light changes automatically. know need add in setinterval(trafficlightsstatemachine.process,1000) not know where. please advise.

  1. remove init body onload
  2. remove onclick div
  3. add onload event handler this:
window.onload=function() {    init();    setinterval(     trafficlightsstatemachine.process.bind(trafficlightsstatemachine),   1000); // syntax necessary able use "this" in statemachine }

result:

var red = "#ff0000";  var yellow = "#ffff00";  var green = "#00ff00";  var dark_red = "#380000";  var dark_yellow = "#383800";  var dark_green = "#003800";  var x_all = 150;  var y_red = 100;  var y_yellow = y_red + 150;  var y_green = y_yellow + 150;  var trafficlightsstatemachine;  function trafficlightsstatemachine() {    this.state = 0;    this.statemachine = new array();    this.statemachine[0] = function () { drawcircles(dark_red, yellow, dark_green); };    this.statemachine[1] = function () { drawcircles(red, dark_yellow, dark_green); };    this.statemachine[2] = function () { drawcircles(red, yellow, dark_green); };    this.statemachine[3] = function () { drawcircles(dark_red, dark_yellow, green); };    this.process = function() {      this.statemachine[this.state]();      this.state = (this.state + 1) % this.statemachine.length;    };    this.drawcircle = function(canvas, color, x, y) {      var context = canvas.getcontext('2d');      context.strokestyle = "#000000";      context.fillstyle = color;      context.beginpath();      context.arc(x, y, 50, 0, math.pi * 2, true);      context.closepath();      context.stroke();      context.fill();    };  }    function drawcircles(first, second, third) {    var id = 'canvas';    var canvas = document.getelementbyid(id);    if (canvas.getcontext) {      trafficlightsstatemachine.drawcircle(canvas, first, x_all, y_red);      trafficlightsstatemachine.drawcircle(canvas, second, x_all, y_yellow);      trafficlightsstatemachine.drawcircle(canvas, third, x_all, y_green);    }  }    function init() {    trafficlightsstatemachine = new trafficlightsstatemachine();    drawcircles(dark_red, dark_yellow, green);  }  window.onload=function() {    init();    setinterval(trafficlightsstatemachine.process.bind(trafficlightsstatemachine),1000);  }
#page  {    width: 300px;    height: 500px;    margin: auto;  }  #canvas:hover  {    cursor: crosshair;    background-color: #191919;  }  #canvas  {    background-color: #252525;  }  body  {    background: #222222;    color: white;  }
    <canvas id="canvas" height="500px" width="300px"></canvas>


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more