...

Assignment

’ 1. Serial Communication between Arduino and other Software

Detail image

In testing a P5js sketch to read the data from the serial port, I first uploaded the Arduino code. This code receives and prints out data from the light and distance sensors connected to the Arduino board. In p5js, it is necessary to first include the tag for the p5.webserial library in the index.html file. When the mouse is pressed, options for connecring to the Arduino are displayed. I expected the p5js sketch to respond at this point but upon inspecting the code realized that perhaps there was nothing there that would allow for this.

Detail image

I followed similar steps with the p5js code: EyePlops and I must be missing a step as the response from the Arduino sensor data was not apparent. Do I need to add extra code or is there another step I’ve missed.

  1. Led Matrix Editor

Detail image

Pairing the Led Matrix Editor with the Arduino allowed for live sketching on the editor that was then reflected to the Arduino Led Matrix. This for some reason did not work in class nd was finicky at home as well but worked after multiple attempts.

  1. OSC….

'

Images

Detail image

Detail image

Detail image

Code

You can add code inside the code fences. The letter c after the three backticks means that the syntax highlighting will use the programming language c as the rules on how different parts of the text should be highlighted.

Video

Vimeo or YouTube

If you want to include a video from Vimeo or YouTube, you can use these shortcodes. The numbers/characters is the ID of the video.

{{<vimeo id="84880475" class="video">}}

If you are reading the .md file, the line below is the actual way you use it your page. If you are reading the website, you should see a video player below this.

{{<youtube dQw4w9WgXcQ>}}

If you are reading the .md file, the line below is the actual way you use it your page. If you are reading the website, you should see a video player below this.

Video file in the repository

You can add video files also directly to your site. The recommended way to do this is to use the hugo-video component that we have installed on the site.

Keep in mind a couple of rules:

  • The video needs to be in a folder called video inside the folder where your index.md file is.
  • Your video file needs to be very small so that it fits into the GitLab repository. Maximum size is 50MB, but ideally it should be even much smaller (under 10 MB). You can use the free tool HandBrake to convert your video to a smaller size.
  • Use .mp4 as the file format

Once you have your file ready and placed correctly, you can use the following code snippet to display your video:

<video controls width=100%>
  <source src ="./video/example-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Just update the filename to be correct. Here is the result: