{"id":860,"date":"2022-11-29T19:27:15","date_gmt":"2022-11-30T00:27:15","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/?page_id=860"},"modified":"2022-12-08T09:11:31","modified_gmt":"2022-12-08T14:11:31","slug":"programming","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/modules\/programming\/","title":{"rendered":"Module 5: Programming"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-secondary-color has-foreground-background-color has-text-color has-background has-link-color wp-elements-32ea40c3b23bf77bb1d7636d6cbc494d is-layout-flow wp-block-group-is-layout-flow\" style=\"padding-top:var(--wp--custom--spacing--large, 8rem);padding-bottom:var(--wp--custom--spacing--large, 8rem)\">\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\">\n<h1 class=\"alignwide wp-block-heading\" id=\"warble-a-film-about-hobbyist-bird-watchers-1\" style=\"font-size:clamp(3rem, 6vw, 4.5rem)\"><em>Programming Intro<\/em><\/h1>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Programming Module Replit Setup and Submit\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wsXe3WIDjIk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<p>This video shows how to setup and submit the Programming Module Project in Replit. We will go over this in class on 11.29.2022<\/p>\n<\/div>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p><strong>What You Will Need for the Module<\/strong><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:35%\">\n<ul class=\"wp-block-list\"><li>Online Accounts<ul><li>GitHub<\/li><li>CodePen<\/li><li>Replit<\/li><\/ul><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:35%\">\n<ul class=\"wp-block-list\"><li><strong>Computer<\/strong> that has a browser<\/li><\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-53a80aa\" data-block-id=\"53a80aa\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-53a80aa-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-7db899f\" data-block-id=\"7db899f\"><style>@media screen and (min-width:768px){.stk-7db899f{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-7db899f-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-7db899f-inner-blocks\">\n<figure class=\"wp-block-image aligncenter size-medium is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/machine-learning-300x300.png\" alt=\"icon of computer with brain imposed over it.\" class=\"wp-image-190\" width=\"300\" height=\"300\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/machine-learning-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/machine-learning-150x150.png 150w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/machine-learning.png 512w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption><a href=\"https:\/\/www.flaticon.com\/free-icons\/cognitive\" target=\"_blank\" rel=\"noreferrer noopener\">Cognitive icons created by Eucalyp &#8211; Flaticon<\/a><\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-3fc1354\" data-block-id=\"3fc1354\"><style>@media screen and (min-width:768px){.stk-3fc1354{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-3fc1354-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-3fc1354-inner-blocks\">\n<h2 class=\"has-x-large-font-size wp-block-heading\" id=\"learn\" style=\"margin-top:0px;margin-right:0px;margin-bottom:1rem;margin-left:0px\">What We&#8217;ll Learn<\/h2>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:0px;margin-right:0px;margin-bottom:0rem;margin-left:0px\">PROGRAMMING BASICS<\/h3>\n\n\n\n<p>We will learn the basics of how to write code. This includes how to set things up in Replit (similar to what we did for the Web Design Module), and some programming basics like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>variables<\/li><li>functions<\/li><li>events (responding to mouse and keyboard)<\/li><\/ul>\n\n\n\n<p>We will use <a href=\"https:\/\/p5js.org\" target=\"_blank\" rel=\"noreferrer noopener\">p5.js<\/a> library to help us. It is in the JavaScript language and adds more visual and in some ways simpler ways to add visual and interactive elements to a web page.<\/p>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\">Classes<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>11\/24 Programming Quick Intro<\/li><li>11\/29 Full Intro and tutorial<\/li><li>12\/1 Finishing Touches if needed<\/li><\/ol>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\">project and quiz<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>12\/2: Programming Project Due<\/li><\/ol>\n\n\n\n<p>no quiz for this module<\/p>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-252ea6c\" data-block-id=\"252ea6c\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-252ea6c-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-db3e75b\" data-block-id=\"db3e75b\"><style>@media screen and (min-width:768px){.stk-db3e75b{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-db3e75b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-db3e75b-inner-blocks\">\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/technical-support.png\" alt=\"icon of computer with tools, text and gears on it.\" class=\"wp-image-195\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/technical-support.png 512w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/technical-support-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/technical-support-150x150.png 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption><a href=\"https:\/\/www.flaticon.com\/free-icons\/support\" title=\"support icons\">Support icons created by Freepik &#8211; Flaticon<\/a><\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-5020a65\" data-block-id=\"5020a65\"><style>@media screen and (min-width:768px){.stk-5020a65{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-5020a65-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-5020a65-inner-blocks\">\n<h2 class=\"has-x-large-font-size wp-block-heading\" id=\"setup\" style=\"margin-top:0px;margin-right:0px;margin-bottom:1rem;margin-left:0px\">Setup and Materials<\/h2>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:0px;margin-right:0px;margin-bottom:0rem;margin-left:0px\">software: BROWSER<\/h3>\n\n\n\n<p>We will use the same accounts we had for Web Design. The main difference is that I made a Team in Replit with a project starter template for you.<\/p>\n\n\n\n<p>To use these you will need the same accounts we used for Web Design:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><strong>GitHub<\/strong>&nbsp;Account:&nbsp;<a href=\"https:\/\/github.com\/\">https:\/\/github.com<\/a><\/li><li><strong>CodePen<\/strong> Sign in&nbsp;using your GitHub Account:&nbsp;<a href=\"https:\/\/codepen.io\/\">https:\/\/codepen.io\/<\/a><\/li><li><strong>Replit<\/strong> Sign in&nbsp;using your GitHub account:&nbsp;<a href=\"https:\/\/replit.com\/\">https:\/\/replit.com\/<\/a><ol><li>There is now a mobile app that you can also use in a pinch but it&#8217;s easier on a computer with a keyboard.&nbsp;<\/li><\/ol><\/li><\/ol>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\"><\/h3>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-b34bae3\" data-block-id=\"b34bae3\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-b34bae3-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-489963c\" data-block-id=\"489963c\"><style>@media screen and (min-width:768px){.stk-489963c{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-489963c-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-489963c-inner-blocks\">\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/project.png\" alt=\"icon of paper with the word project and representation of a document\" class=\"wp-image-191\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/project.png 512w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/project-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/project-150x150.png 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption><a href=\"https:\/\/www.flaticon.com\/free-icons\/project\" title=\"project icons\">Project icons created by Freepik &#8211; Flaticon<\/a><\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-476d5d3\" data-block-id=\"476d5d3\"><style>@media screen and (min-width:768px){.stk-476d5d3{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-476d5d3-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-476d5d3-inner-blocks\">\n<h2 class=\"has-x-large-font-size wp-block-heading\" id=\"project\" style=\"margin-top:0px;margin-right:0px;margin-bottom:1rem;margin-left:0px\">Module Media Project<\/h2>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:0px;margin-right:0px;margin-bottom:0rem;margin-left:0px\">Small web site<\/h3>\n\n\n\n<p><\/p>\n\n\n\n<p>Create a simple interactive project using p5js. Your project should include drawing some shapes and interactivity where the user can change part of the project through the mouse or keyboard).<\/p>\n\n\n\n<p>Finally, use Replit to put the entire project on GitHub and then enable GitHub Pages for the project.<\/p>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\">REPLIT TEAm and starter project<\/h3>\n\n\n\n<p>We will walk through setting this up in class on 11\/29. I have also made a post where you can find the invite to the Replit Team and a video walkthrough that includes the GitHub part: <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/29\/programming-project-setup\/\" data-type=\"post\" data-id=\"854\">Programming Project Setup<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Requirements<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>p5.js Project<\/strong><ul><li>index.html file that includes the p5js library and script.js file (should be done automatically for you)<\/li><li>script.js file<\/li><li>readme.md file (use this to describe your project)<\/li><\/ul><\/li><li>p5.js JavaScript Code (in the scripts.js file) that includes<ul><li>visual elements (shapes, text, color)<\/li><li>interactivity (something changes based on the user using the mouse or keyboard)<\/li><li>at least one custom variable<\/li><li>Use comments to describe what your code does<\/li><\/ul><\/li><li>The project files are on GitHub<\/li><li>GitHub pages used to display files<\/li><\/ul>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\">DUE DATE<\/h3>\n\n\n\n<p>Friday, December 2<\/p>\n\n\n\n<h3 class=\"has-medium-font-size wp-block-heading\" style=\"font-style:normal;font-weight:300;text-transform:uppercase;margin-top:1rem;margin-right:0px;margin-bottom:0rem;margin-left:0px\">Turning it in<\/h3>\n\n\n\n<p>There are two parts.<\/p>\n\n\n\n<p>PART 1: Submit in Replit<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Click the Submit button on your project in Replit (you have to have followed the directions to start the project through the Team we created)<\/li><\/ul>\n\n\n\n<p>PART 2: You will submit the following to Blackboard:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>URL to GitHub Repository<\/li><li>URL to GitHub Pages<\/li><\/ol>\n<\/div><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-stackable-columns alignwide stk-block-columns stk-block stk-ba6d150\" data-block-id=\"ba6d150\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-ba6d150-column alignwide\">\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-266b2ec\" data-block-id=\"266b2ec\"><style>@media screen and (min-width:768px){.stk-266b2ec{flex:1 1 33.3% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-266b2ec-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-266b2ec-inner-blocks\">\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/resources.png\" alt=\"\" class=\"wp-image-193\" width=\"431\" height=\"431\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/resources.png 512w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/resources-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/08\/resources-150x150.png 150w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><figcaption><a href=\"https:\/\/www.flaticon.com\/free-icons\/cognitive\" target=\"_blank\" rel=\"noreferrer noopener\">Cognitive icons created by Eucalyp &#8211; Flaticon<\/a><\/figcaption><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-block-column--v2 stk-column stk-block stk-2811df7\" data-block-id=\"2811df7\"><style>@media screen and (min-width:768px){.stk-2811df7{flex:1 1 66.7% !important}}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-2811df7-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-2811df7-inner-blocks\">\n<h2 class=\"has-x-large-font-size wp-block-heading\" id=\"resources\" style=\"margin-top:0px;margin-right:0px;margin-bottom:1rem;margin-left:0px\">Tutorials and Resources<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Prof Stein Codepen Examples<\/li><li>Collection: <a href=\"https:\/\/codepen.io\/collection\/KpewQg\">https:\/\/codepen.io\/collection\/KpewQg<\/a><ul><li>Shapes: <a href=\"https:\/\/codepen.io\/profstein\/pen\/oNyMrpB\">https:\/\/codepen.io\/profstein\/pen\/oNyMrpB<\/a>&nbsp;<\/li><\/ul><ul><li>Mouse Events: <a href=\"https:\/\/codepen.io\/profstein\/pen\/wvXEwdo\">https:\/\/codepen.io\/profstein\/pen\/wvXEwdo<\/a>&nbsp;<\/li><li>KeyisPressed: <a href=\"https:\/\/codepen.io\/profstein\/pen\/qBKMBXN\">https:\/\/codepen.io\/profstein\/pen\/qBKMBXN<\/a>&nbsp;<\/li><\/ul><\/li><li>Official p5 library website:<a href=\"https:\/\/p5js.org\/examples\/\">examples<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/p5js.org\/reference\/\">references<\/a><\/li><\/ul>\n\n\n\n<p>Please feel free to suggest resources that helped you.<\/p>\n\n\n\n<p><\/p>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Programming Posts<\/h2>\n\n\n\n\t\t\t<div class=\"wp-block-uagb-post-grid uagb-post-grid  uagb-post__image-position-top uagb-post__image-enabled uagb-block-f79333cf     uagb-post__items uagb-post__columns-3 is-grid uagb-post__columns-tablet-2 uagb-post__columns-mobile-1 uagb-post__equal-height\" data-total=\"1\" style=\"\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<article class=\"uagb-post__inner-wrap\">\t\t\t\t\t\t\t\t<h4 class=\"uagb-post__title uagb-post__text\">\n\t\t\t\t<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/12\/08\/programming-project-walk-through\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Programming Project Walk-Through<\/a>\n\t\t\t<\/h4>\n\t\t\t\t\t\t<div class='uagb-post__text uagb-post-grid-byline'>\n\t\t\t\t\t\t\t\t<time datetime=\"2022-12-08T12:34:24-05:00\" class=\"uagb-post__date\">\n\t\t\t\t<span class=\"dashicons-calendar dashicons\"><\/span>\t\t\t\t\tDecember 8, 2022\t\t\t\t<\/time>\n\t\t\t\t\t\t\t<span class=\"uagb-post__comment\">\n\t\t\t\t<span class=\"dashicons-admin-comments dashicons\"><\/span>\t\t\t\t\tNo Comments\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class='uagb-post__text uagb-post__excerpt'>\n\t\t\t\t\tIn the video below I walk through creating a programming project. This project is creating&#8230;\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"uagb-post__text uagb-post__cta wp-block-button\">\n\t\t\t\t<a class=\"wp-block-button__link uagb-text-link\" style=\"\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/12\/08\/programming-project-walk-through\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Read More<\/a>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t\t\t\t<\/article>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<article class=\"uagb-post__inner-wrap\">\t\t\t\t\t\t\t\t<h4 class=\"uagb-post__title uagb-post__text\">\n\t\t\t\t<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/29\/programming-project-setup\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Programming Project Setup<\/a>\n\t\t\t<\/h4>\n\t\t\t\t\t\t<div class='uagb-post__text uagb-post-grid-byline'>\n\t\t\t\t\t\t\t\t<time datetime=\"2022-11-29T19:13:56-05:00\" class=\"uagb-post__date\">\n\t\t\t\t<span class=\"dashicons-calendar dashicons\"><\/span>\t\t\t\t\tNovember 29, 2022\t\t\t\t<\/time>\n\t\t\t\t\t\t\t<span class=\"uagb-post__comment\">\n\t\t\t\t<span class=\"dashicons-admin-comments dashicons\"><\/span>\t\t\t\t\t1 Comment\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class='uagb-post__text uagb-post__excerpt'>\n\t\t\t\t\tFor the Programming Module project, we&#8217;re going to use a teams feature in Replit that&#8230;\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"uagb-post__text uagb-post__cta wp-block-button\">\n\t\t\t\t<a class=\"wp-block-button__link uagb-text-link\" style=\"\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/29\/programming-project-setup\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Read More<\/a>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t\t\t\t<\/article>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<article class=\"uagb-post__inner-wrap\">\t\t\t\t\t\t\t\t<h4 class=\"uagb-post__title uagb-post__text\">\n\t\t\t\t<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/22\/programming-intro-with-p5-js\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Programming Intro with p5.js<\/a>\n\t\t\t<\/h4>\n\t\t\t\t\t\t<div class='uagb-post__text uagb-post-grid-byline'>\n\t\t\t\t\t\t\t\t<time datetime=\"2022-11-22T19:26:11-05:00\" class=\"uagb-post__date\">\n\t\t\t\t<span class=\"dashicons-calendar dashicons\"><\/span>\t\t\t\t\tNovember 22, 2022\t\t\t\t<\/time>\n\t\t\t\t\t\t\t<span class=\"uagb-post__comment\">\n\t\t\t\t<span class=\"dashicons-admin-comments dashicons\"><\/span>\t\t\t\t\tNo Comments\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class='uagb-post__text uagb-post__excerpt'>\n\t\t\t\t\tThis is an introduction to programming using your Replit account and the p5.js library. p5.js&#8230;\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"uagb-post__text uagb-post__cta wp-block-button\">\n\t\t\t\t<a class=\"wp-block-button__link uagb-text-link\" style=\"\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/22\/programming-intro-with-p5-js\/\" target=\"_self\" rel=\"bookmark noopener noreferrer\">Read More<\/a>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t\t\t\t<\/article>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is an introduction to programming using your Replit account and the p5.js library. p5.js allows you to use relatively simple JavaScript code to create interactive projects. The purpose of p5.js is to allow people to quickly and easily create &hellip;<\/p>","protected":false},"author":16,"featured_media":0,"parent":161,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-no-separators","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"openlab_post_visibility":"","footnotes":""},"class_list":["post-860","page","type-page","status-publish","hentry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"Programming Intro This video shows how to setup and submit the Programming Module Project in Replit. We will go over this in class on 11.29.2022 What You Will Need for the Module Online AccountsGitHubCodePenReplit Computer that has a browser Cognitive icons created by Eucalyp &#8211; Flaticon What We&#8217;ll Learn PROGRAMMING BASICS We will learn the basics of how to write code. This includes how to set things up in Replit (similar to what we did for the Web Design Module), and some programming basics like: variablesfunctionsevents (responding to mouse and keyboard) We will use p5.js library to help us. It&hellip;","category_list_v2":"","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"This is an introduction to programming using your Replit account and the p5.js library. p5.js allows you to use relatively simple JavaScript code to create interactive projects. The purpose of p5.js is to allow people to quickly and easily create &hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/pages\/860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/comments?post=860"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/pages\/860\/revisions"}],"predecessor-version":[{"id":874,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/pages\/860\/revisions\/874"}],"up":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/pages\/161"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/media?parent=860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}