Web Browser Arduino Simulation

In this instructable we're making a led chaser using 123D Circuits.io's breadboard virtual protyping and Arduino simulation. Here is an animation showing what we will have at the end:

Step 1: Create a New Circuit

As a first step click "Create a new circuit". Check Breadboard+Arduino circuit as Circuit Type.

Step 2: Make Your Breadboard Schematic

Connect an LED on each digital pin 2-13 with the anodes (bend side of the LED). Connect the cathodes to each other and then to a resistor to the Arduino GND. Set the resistor value to 300 Ohm.  

Note: In the 123D Circuits breadboard view if the LED is pointing up the cathodes are the pins on the LEFT.  In this figure the anodes and cathodes of all the LEDs appear to be connected, this is not true, overlapping wires only connect at their endpoints.

Step 3: Program the Arduino

Select the Arduino and click on the bottom of the page on "Arduino code editor" and add the following code:

int i = 2;
int time = 200;
int dir = 1;
// the setup routine runs once when you press reset:
void setup() {               
  // initialize the digital pin as an output.
    for(i=2;i<=13;i++){
  pinMode(i, OUTPUT);
  }   
}

// the loop routine runs over and over again forever:
void loop() {
  digitalWrite(i, HIGH);  
  delay(time);              
  digitalWrite(i, LOW);   
  i+=dir;            
  if(i<2|i>13){
  dir*=-1;
  i+=dir*2;
  } 
}

Step 4: Start Simulation

Click play to start the simulation.

Step 5: Show Off Your Design

You can embed your design on another site such as Instructables to show off your design. It even includes simulation!



To do this, visit the circuits page by clicking its name at the top. Click "Share Circuit", copy the embed code and paste it in your instructabe using the "Embed video" button.

Comments

[sharepksn]

Hey, here i found a very helful and up to date Arduino IDe which is completely web based. You can run it without leaving the browser. Many sensors and peripherals are supported https://wokwi.com/arduino/libraries example links are presented below. Give a try

[remusulik25]

Unable to contact the code compilation service.

Please try again later or contact us if the problem persists.

[awalsh5]

Getting the following error:

Connection Error
Unable to contact the code compilation service.

Please try again later or contact us if the problem persists.

[VijendraK]

Good one !!!

[wizable]

I noiced that the test "if(i<2|i>13)" is using a BITWISE OR (indicated by a single "|") to combine the comparison expressions. It should instead use a LOGICAL OR ("||").

It does work as is, but it is dependent on the compiler's internal representation of boolean values.

Also applying good practice spacing rules, the corrected test would be:

if (i < 2 || i > 13)