- 東京事變
- 월디스플레이
- 유학생 건강검진
- raspberrypi wifi
- 세운전자상가
- 동경사변
- 도쿄지헨
- 東京事変
- IR sensor
- 라즈베리파이 모니터벽
- 인천작업실
- 4대 대첩
- piwall
- 파이월
- 막달운동
- 시이나링고
- wall display raspberrypi
- Shena Ringo
- formex
- 세실내과
- 흥성전기
- OPT #EAD
- 러쉬 해외 직구
- Skins
- sony nex vg20
- 이슬비침
- Arduino
- 라즈베리파이 와이파이
- formex E400
- 시온여성병원
- Today
- Total
'_'
api_p5.js 본문
API _ stands for Application Program Interface
JSON _ stands for JavaScript Object Notation
CVS _ stands for Comma Separated Value
- this tutorial shows how to reach api through an updated version of NYTimes. so adding url source code directly to html by using <script> tag. By this way, I can look through organized data at a console. But, in order to this way, you have to remove <script> tag calling .js file. check the actual code below.
- so, as a second method which allows me to follow Daniel Shiffman's tutorial which is using URL to grab data from it, simply by adding console.log(url); to inside script would give to URL at console box.
https://developers.google.com/speed/libraries/#jquery
- if you follow these steps, possibly end up getting some data pulled out from json. anyway one weird thig is this :
I kind of called headline of an article from js file as you can see below, using p5.js library & tutorial. all the code is declared at that area but for some reason, my console.log is showing correct info I called but, it is showing resource as p5.min.js. assume that because it is using p5.js library and function which is loadJSON(), but still don't get it.
oh I just figured it out! YEAH it was because I was using
print(data.response.docs[5].headline.main);
command which is for p5.js.
if I use
console.log(data.response.docs[5].headline.main);
instead, I will get my yellowDust.js file name appearing at console box.
- now in order to make these data appear, visualize, we need to convert it as <p> or <h1> or <li> et cetera et cetera etc.... and!!! important thing I found is that linking <script> addons/p5.min/js</script> and <script> addons/p5.min/js</script>, sequence matters critically. what I mean you can see below :
this is the one working, scripts listed in this order :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../addons/p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="yellowDust.js"></script>
p5.dom.min.js comes after p5.min.js. but if you switch those two line, p5.dom.js at the top, thigs break down.
actually not just breaking down, it stops reading after p5.dom.min.js. consloe.log window shows nothing comming after that script. so keep that sequence as default!
also as another troubleshooting, there is currently 3 issue ---
1) loading delay among setup > loadJSON
so this, eventhough I call some variable inside function, after calling it from setup, like this :
eventhough BGtemp was defined in gotWeather, when I check console there is several loop that maintains value 233 which should be updated or replaced by draw.
so because of this, I need to assign initial value at setup otherwise it will occur error.
2) some math --- related to .heading() function
so, when you have degree value, you can change it into radian value. like, 360 degree is combination of + PI (3.14) and - PI (-3.14). so
var angle = radians(Number(weather.current.wind_degree));
this is making degree measurement from API (220 for now :D ) into corresponding radian value between -3.14 ~ 3.14.
wind = p5.Vector.fromAngle(angle);
'자료용 > HTML_CSS_JAVASCRIPT' 카테고리의 다른 글
| clean up JS + PI wall + RaspberryPI (0) | 2018.10.30 |
|---|---|
| font family (0) | 2018.10.27 |
| image responding to window size (0) | 2018.05.13 |
| JavaScript_p5.js_array (0) | 2018.02.02 |
