Unit 4: Starter Code
Code Samples
Unit 4 - STARTER CODE - HTML File
<!DOCTYPE html>
<html>
<head>
<link href="indexstyle.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="p5.sound.js"></script>
<!-- ----------------- PLACE EXAMPLE SCRIPTS HERE ----------------------------------------->
<!-- To comment or uncomment: MAC Users: Command+Slash PC or CHROMEBOOK: Ctrl+Slash -->
<!-- <script src="ex1_welcome.js"></script> -->
<script src="ex2_sunmoon.js"></script>
<!-- <script src="ex3_registration.js"></script> -->
<!-- <script src="ex4_driver.js"></script> → Greyed out code was added later but is provided for your reference
<!-- <script src="ex5_bomby.js"></script> -->
<!-- <script src="ex6_NumberGuess.js"></script> -->
<!-- <script src="ex7_slideshow.js"></script> -->
<!-- <script src="ex8_button.js"></script> -->
<!-- <script src="ex9_gravity.js"></script> -->
<!-- -----------------PLACE ASSIGNMENT SCRIPTS HERE------------------------------------------>
<!-- <script src="assign1_cool.js"></script> -->
<!-- <script src="assign2_squaremove.js"></script> -->
<!-- <script src="assign3_marvel.js"></script> -->
</head>
<body>
<div>
<h2>Intro to Computer Science - Second Programming Unit</h2>
</div>
<div id="mycanvas"></div>
</body>
</html>
Unit 4 - STARTER CODE - CSS File
div{
width:95%;
margin-top: 30px;
margin-left: 100px;
margin-right: 100px;
margin-bottom: 30px;
background-color:blanchedalmond;
border: 2px solid black;
padding: 20px;
}
body{
background-color: darkseagreen;
}
Unit 4 - STARTER CODE - Example 1 - Welcome
This example requires fonts and images to be uploaded separately.
//Global Variables
let face;
let font1;
function preload(){
face = loadImage("images/happyface.png");
font1 = loadFont("fonts/Hanalei.ttf");
}//end preloading of images and fonts
function setup() {
let sketch = createCanvas(700, 500);
sketch.parent("mycanvas");
}//end setup
function draw() {
background(200, 50, 50);
image(face, 100, 50, 300, 300);
drawText(“Spring is Coming!”);
}//end draw
function drawText(message){
textFont(font1);
textSize(80);
textAlign(CENTER);
text(message, mouseX,420);
}//end drawText
Unit 4 - STARTER CODE - Example 2 - Sun & Moon
//Global Variables
let sky = 255;
let house, sun, moon;
let big = 10;
function preload(){
house= loadImage("images/house.png"); //not in start file
sun= loadImage("images/sun.gif");
moon= loadImage("images/moon.png");
}//end preloading of images and fonts
function setup() {
createCanvas(500, 600) ;
}//end setup
function draw() {
background(sky);
//draw the sun & moon
image(sun, mouseX, 100, 100, 100);
//draw the snow
fill(200);
noStroke();
rect(0,550,500,50);
fill(255,0,0);
//draw caption
textSize(big);
textAlign(CENTER);
text("A fine winter's day!", width/2,590);
}//end draw
Unit 4 - STARTER CODE - Example 3 - Contest Registration
//Global Variables
let name;
let year;
let age;
let instrument;
let cat;
let logo;
let angle = 0;
function preload() {
logo = loadImage("images/musiclogo.png");
}//end preloading of images and fonts
function setup() {
let sketch = createCanvas(600, 500);
sketch.parent("mycanvas");
background(155, 135, 155);
textSize(24);
text("Click anywhere to register for the competition.", 50, 300);
}//end setup
function draw() {
angleMode(DEGREES);
translate(300,150);
rotate(angle);
angle++;
if(angle>360){
angle = 0;
}
imageMode(CENTER);
image(logo, 0,0);
translate(0,0);
}//end draw
function mousePressed() {
background(155, 135, 155);
name = window.prompt("What is your name");
// print("Debug: testing name variable: " + name);
year = window.prompt("What year were you born?");
age = 2020 - year;
fill(0);
noStroke();
textSize(24);
text("Competitor Name: " + name, 50, 300);
text("Age: " + age, 50, 325);
if (age > 21) {
text("Division: Senior", 50, 350);
} else if (age >= 16) {
text("Division: Junior", 50, 350);
} else {
text("Division: Child", 50, 350);
}
cat = window.prompt("What category pro or amateur?");
if( cat === "pro"){
text("Fee for Professionals: $100", 50, 400);
} else {
text("Fee for Amateurs: $30", 50, 400);
}//end mousePressed
Continue to Unit 4: Day 1 »