Skip to content

Instantly share code, notes, and snippets.

View claytical's full-sized avatar

Clay Ewing claytical

27 followers · 1 following
View GitHub Profile
@claytical
claytical / sketch.js
Created October 3, 2015 16:52
Simple Object Array with Parameters
var Ball = function(x, y) {
this.x = x;
this.y = y;
this.diameter = 10;
}
var balls = [];
@claytical
claytical / sketch.js
Created October 3, 2015 17:01
Ball Object Example with Methods
var Ball = function(x, y) {
this.x = x;
this.y = y;
this.diameter = 10;
}
Ball.prototype.show = function() {
ellipse(this.x, this.y, this.diameter, this.diameter);
}
@claytical
claytical / sketch.js
Created October 6, 2015 15:36
Array of Object Changes
var Ball = function() {
this.x = random(width);
this.y = random(height);
this.speedX = random(-1,1);
this.diameter = random(20,50);
}
var balls = [];
@claytical
claytical / index.html
Created October 13, 2015 00:37
Canvas Parent and Position Example
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {
@claytical
claytical / index.html
Created October 13, 2015 00:57
Input with Canvas Example
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {
@claytical
claytical / index.html
Last active October 13, 2015 03:19
Clicking Example, Existing Inputs
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {
@claytical
claytical / index.html
Created October 13, 2015 03:20
Clicking Example within p5js
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {
@claytical
claytical / sketch.js
Last active March 28, 2016 18:02
Open Weather Map Example, Forecast First
var canvas;
var base_url = "http://api.openweathermap.org/data/2.5/forecast";
var city_url = "?q=Miami";
var app_id = "&appid=f2dbfb3d770d42cca8ee06ad03edef2a";
var units = "&units=imperial";
var temp;
var temp_min;
var temp_max;
function setup() {
@claytical
claytical / sketch.js
Created October 20, 2015 14:35
Looping through Weather Forecast
var canvas;
var base_url = "http://api.openweathermap.org/data/2.5/forecast";
var city_url = "?q=Miami";
var app_id = "&appid=bd82977b86bf27fb59a04b61b657fb6f";
var units = "&units=imperial";
var temp = [];
var temp_min = [];
var temp_max = [];
var xCursor;
var yCursor;
@claytical
claytical / index.html
Created October 20, 2015 17:11
Using Input Weather Example
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="../p5.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<script language="javascript" src="../addons/p5.dom.js"></script> <!--<script language="javascript" src="../addons/p5.sound.js"></script>-->
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style>
#left_panel {