Posts

Showing posts from October 16, 2018

Hackathon: Day 1 (Independent Learning Journey) - P5.JS

Image
Mar showed us how to use P5.JS. We first created a square using rect(30, 20, 55, 55);   Then we filled in the square and the line colour using stroke(255, 0, 0) and fill(0, 255, 0); We then created an ellipse using  ellipse(mouseX, mouseY, 100, 55);   The ellipse followed our mouse due to using mouseX and MouseY as values. By removing the background, when the ellipse followed my mouse it created a pattern. We then created a conditional statement that stated: if(mouseY<200) {   ellipse(mouseX, mouseY, 100, 55);   } else {    rect(mouseX, mouseY, 100, 55);   } This means that when the mouse is less than 200 on the Y-axis (halfway), the ellipse would follow the mouse, otherwise the rectangle would follow the mouse instead. I created my own conditional statement which states:   if(mouseY<200) {   ellipse(mouseX, mouseY, 100, 100);       fill(100, 250, 100);       stroke(50,100,230);   } else {    rect(mouseX, mouseY

Hackathon: Day 1 - CSS Advanced

Image
We started the hackathon with simple coding principles in HTML and CSS. Mar Presenting (Stadon, 2018) We began to learn more about jquery using Javascript and learnt to link this using a local file or using a link. I decided to use the local version that I saved in my js/lib folder because this means that I can work on my code without having to use the internet. Mar showed us how to use Google Fonts in our code, which allows us to be original with our fonts as there's a large amount to choose from.  https://fonts.google.com/ I chose the font "Mali" from the Google Fonts website and put this into my code. Google Fonts Website Google Font "Mali" being used in my code Mar also showed up how to use animations which is a new feature that has been added to CSS3. Unfortunately not all animations are compatible in different browsers so this may need to be taken into account. We learnt that z-index is used for depth and layering. B