Stories on maker education and innovation 

formats

Real Impact – Women in STEAM Conference 2017

I wanted to give a shoutout to one of my favorite “hands on” learning organizations in Macon: Real Impact Center.   Real impact center focuses on helping to inspire the next generation of young ladies to consider careers as science and technology professionals.  Given that women are underrepresented in STEM career fields, Real Impact has an important mission in exposing girls to STEM careers, giving them ‘hands on’ maker experiences, and helping them see that STEAM careers are cool.   On April 29th, Real Impact organized the “Women in STEAM Conference” in Macon, GA serving more than 250 young ladies with inspiring speakers and hands-on learning experiences.    InspiredToEducate.NET had the honor of presenting a workshop on making electronic music using code.

Stephanie Espy, the author of STEM Gems, shared an empowering message to the ladies on becoming a successful science/technology leader.   Her book interviews 44 female STEM professionals and reviews patterns on their success.   I love books that explore the roots of innovative and creative thinking.   Her book seems to explore patterns of experiences of female STEM leaders like the roles parents play in learning, patterns in play, patterns in teaching, attitudes, and growth mindset.    It was a great keynote!

stem gems1

women in steam conf 2017

Our team had a great time sharing our workshop on Sonic-Pi, making cool electronic music through code.   Sonic-Pi, designed by Sam Aaron, provides a playful environment for writing techno or electronic music using simple coding patterns.   While it’s a great tool to engage students in code education, it’s primary objective is to engage students in exploring music theory.   It’s such a fun learning tool.   During this talk, we had the opportunity to share about the makers movement, our SparkMacon Makerspace, and the fun experiences of building stuff with code.   Given that we were serving girls during our workshop, I had the opportunity to share about the first computer programmer: Ada Lovelace.    Many were surprised to learn that the first computer programmer was a woman.   Additionally, she was one of the first to realize that computers would do more than just crunch math problems.   Hundreds of years ago before electronic computers, she theorized that computers could be used for creative experiences if you could symbolize the creative problem.  Since music theory provides a set of symbols and ideas for defining music, tools for creating music with computers became possible.   If you think about how many creative tasks we accomplish on computers today(creating graphics, music, engineering structures, etc),  this was a profound and visionary concept.

It was fun getting to share this workshop since I love music and building stuff with code.  Music people and coders go through the same emotional challenges when they start.  Both disciplines require practice, problem decomposition, building up of muscle memory, and social skills.  Some of the best programmers I’ve known were music people.   I also want to give a shout out to my friends Joey Allen and Isaiah who coached the workshop with me.   They did a great job inspiring the girls.   In the one hour workshop, almost everyone had the opportunity to sequence some sound samples and put them into a loop.   Some of the more advanced students started building drum patterns,melodies, and longer musical forms.

If you’re interested in learning more about Sonic Pi, check out http://sonic-pi.net/, my blog post and this free ebook.  Interested in teaching an extended course in Sonic-Pi? check out http://www.sonicpiliveandcoding.com/.   It has lesson plans covering 10+ weeks of material.

Special thanks to Real Impact for your leadership in growing the next generation of young makers in Macon, GA!   You are amazing!!  If you’re interested in learning more about Real Impact Center, providing financial support or volunteering, make sure to connect with their website: http://www.realimpactcenter.com/  .   They have some pretty awesome summer camps this summer!

Sonic-Pi

Sonic Pi Screen

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Making Chord Progressions using Sonic Pi

Music

I have to confess that I love music and code. When I get to share my two favorite things in one package, it gets me excited. In previous blog posts, I had talked about an amazing tool called Sonic-Pi for introducing music theory and computer science. While preparing this blog post, I had forgotten how much I enjoy generative music through code.

For the post today, we’re going to focus on making chord progressions and generating arpeggios. Let’s define a few terms before we dive into code.

  • Chords – In music theory, we define a chord as a named collection of notes.  In western music, there are two major flavors of chords. (Major and minor)  Major chords feel happy.   Minor chords are often used in movie scores to represent darker moments or points of anticipation.  For a more formal discussion of chords, check out this article from Wikipedia.  For the purpose of this blog post, keep in mind that a chord has three notes: the root, third, and fifth.
  • Chord progressions – Chord progressions define a sequence of chords that make up a song.    This sequence of chords represents a major component of the soul or emotional thread of a song.
  • Arpeggios – An arpeggio represents a way to play the notes of a chord over time.

We should note that chord progressions for the western ear follow patterns.   The human ear enjoys hearing chord changes according to the circle shown below.  To keep things simple, you can make small transitions between one area of this circle.   You can execute the following chord progression and your eye will believe that it’s pleasing: G,C,D,C.    If your song moves from a G major chord to a D flat major, your ear will not find this automatically pleasing.  It will probably sound weird.

 

Circle of fifths

Circle of fifths

 

With this brief overview of music theory, I wanted to share a small Sonic-Pi program I’m using to enable students to play with chords, chord progressions, and arpeggios. You can inspect the code here.

Let’s break down the major ideas:

In the following code, we configure Sonic-Pi to the tempo of 130 beats per minute(BPM). We also create a Ruby array to hold the list of chords. Sonic-Pi already has a function to generate major and minor chords. We add the chord to the array using a push method.

1
2
3
4
5
6
7
8
9
10
11
12
use_bpm(130)

chord_list = []

chord_list.push(chord(:D4,:minor))
chord_list.push(chord(:A4,:major))
chord_list.push(chord(:D4,:minor))
chord_list.push(chord(:c4,:major))
chord_list.push(chord(:F4,:major))
chord_list.push(chord(:c4,:major))
chord_list.push(chord(:D4,:minor))
chord_list.push(chord(:A4,:major))

We need some way to loop over the chord_list and play each of them. The following code accomplishes this. We place the loop in a thread so that this music idea can exist in parallel with other musical ideas. We configure Sonic-Pi to use the “dtri” synth because it’s cool. The “pick_pattern2” function is something I’ve written to render out our arpeggio.

1
2
3
4
5
6
7
8
in_thread do
  use_synth :dtri
  loop do
    for c in chord_list
      pick_pattern2(c)
    end
  end
end

Let’s define “pick_pattern2”. In the following Ruby function, we’re giving a small collection of code a name. We pass in a chord to be played. In Sonic-Pi, a chord is simply an array of notes. In the first part of the code, we generate 6 notes based on the chord. Element zero represents the root of the chord. Element 1 represents the third. Element 3 represents the fifth. We generate notes 4 to 6 to be one octave above the ones previously mentioned. The rest of the code plays out notes in a timed manner. In general, we’re placing each note a half beat away from each other. The sequence is more artistic than technical.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
def pick_pattern2(chord)
  note1 = chord[0]
  note2 = chord[1]
  note3 = chord[2]
  note4 = chord[0] + 12
  note5 = chord[1] + 12
  note6 = chord[2] + 12
 
  play(note1)
  sleep(0.5)
  play(note2)
  sleep(0.5)
 
  play(note3)
  sleep(0.5)
  play(note4)
  sleep(0.5)
 
  play(note5)
  sleep(0.5)
  play(note6)
  sleep(0.5)
 
  play(note3)
  sleep(0.5)
  play(note4)
  sleep(0.5)
 
end

There’s a few other functions for generating arpeggios. Feel free to play with them and edit them. If you make something cool, leave us a comment below. I’d love to hear what you’re making!!

Photo credit to Trey Jones.

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

7 Free Apps for 3D Design and Building Cool Stuff

Chess graphic

AutoDesk TinkerCAD – This web-based application has become my favorite way to introduce 3D design to makers of all ages.  It comes with accessible tutorials to help you understand the software quickly.  I have used TinkerCAD.com to engage students as early as 3rd grade due to the high usability of this product.   You can quickly export your 3D modeling content for 3D printing or online 3D printing services.   Students LOVE being able to export their work to Minecraft too!  Autodesk just added a “Minecraft” preview feature too!  We also export “obj” files that we can use in Unity 3D.

Shape Shifter – ShapeShifter.io enables you to build artistic 3D structures with just a few clicks.   While this app isn’t your traditional 3D modeling tool, some of the art forms that you can build are impressive.   You might find this application helpful in building a decorative cup holder, vase, or home decor.

Sketchup – This application has become a standard in 3D modeling for home decor and building structures.   Sketchup has content viewers for iOS, Android, and HoloLens. (not free)   This mature 3D building tool comes with a robust set of tutorials and support community.

Blender:  To be honest, I’m still in the process of learning Blender.  According to Wikipedia, Blender is a “professional free and open-source 3D computer graphics software product used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games.”  This open source software supports impressive features including soft body simulation, sculpting, rendering, and an integrated game engine.  While this is one of the most challenging 3D modeling tools to learn, you can leverage a robust community of YouTube tutorials for Blender or the Blender manual.

Onshape: This relatively new 3D modeling tool has become a favorite for adult makers and professionals.   Many of my maker space friends celebrate the robust tutorial system and standard parts collection.  The tool can model the movement of assemblies of 3D parts.  The OnShape team has designed their product to serve distributed professional teams who enjoy working an online cloud solution.  You can learn more about on their YouTube channel.

Sculptris: This application by Pixologic provides an introduction to CG 3D modeling especially for artists.   This product focuses on the “sculpture” metaphor of building 3D content.  It seems very appropriate for building organic 3D structures, animals, or characters.    Learn more at http://pixologic.com/sculptris/.

OpenJSCAD: I came across a tool called OpenJSCAD.org that empowers programmers to build 3D models using the popular JavaScript programming language or OpenSCAD language.  It’s pretty fun!   The tool enables you to export your creations to STL format for 3D printing or editing.   Code and build 3D stuff!  It’s that easy!

Keep in mind that this blog post only scratches the surface of free products.  AutoDesk offers free products for hobbyists, students, and educators.

This blog post outlines 20 additional free 3D modeling tools.

 

We enjoy hearing from you!  Let us know if you make anything cool.  Leave a comment below.

 

Photo credit: NoxicTonic – https://flic.kr/p/drEc9F

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Applications of HoloLens in Education and Training

HoloLens and a brain

The Microsoft HoloLens has become the leading device in heads-up augmented reality. You can think of the HoloLens as a Windows 10 computer that you wear on your head with amazing context awareness of your room, your location, and direction of focus. The location and mapping capabilities of this device enable users to place 3D content or holograms in your work environment. As you place holograms in your work environment, the objects feel like they are physically fixed, stable, and present. As I have had the opportunity to study this device, I have become interested in ways that trainers or educators might use this technology. At a price point of $3000, the Microsoft Hololens will not be showing up in your K-12 classroom anytime soon. I believe it’s interesting to anticipate how educators will use it. In this post, I believe that trainers and educators will use devices like HoloLens to engage their students with visualizations of complex structures and processes. I would hope that students someday use the device as a platform to learn through their creativity.

Hololens

It should be noted that the Microsoft HoloLens has a way to capture the point of view of the user. This feature, entitled Mixed Reality capture, enables HoloLens users to record videos or transmit a live video feed of their session. From a training point of view, the mixed reality capture enables a single teacher to explore holographic content while sharing the experience with the rest of the class. In the future, we will be able to transmit this mixed reality capture view in the classroom or over the Internet.

Enabling Students to Learn Through Building

I believe that students learn best when they can build stuff. As I have had the opportunity to build applications for the HoloLens, I built a ‘proof of concept’ application showing how students might build in a Minecraft environment using HoloLens.   This video was recorded using the HoloLens mixed reality capture.

The HoloLens already comes with Holo Studio which enables users to build playful 3D structures. While this scenario is exciting for students, the price of Windows Holographic devices will need to decline in order for this use case to become common. We are looking forward to Lenovo and Acer to ship Windows Holographic platforms at a price point closer to $300 to $400 later this year.

Visualization of Complex Structures and Processes

In the short term, I can imagine professors, teachers, and trainers using the HoloLens as a platform for student engagement.   Instead of showing students slides of complex structures or processes during a lecture, the holographic applications of the future will bring this content to life.   My wife teaches microbiology and biology at a local college.   She has become very curious about ways to use HoloLens to teach internal cell processes and biology structures.   You can check out an early cell exploration app here.   I have included a few tweets below to share other visions or use cases in medical education / digital health.  In the medical market, there’s great interest in using Microsoft HoloLens to practice or simulate medical procedures.

Providing Training and Education at a Distance

Given that the Microsoft HoloLens enables teachers to share their perspective in videos or video streaming, I predict there will be a new ecosystem of holographic apps for remote learning and teaching.   Suppose that a remotely located student needs support from a trainer, the student can initiate some form of video chat application to connect to the trainer.    For example, a biology professor needs to remotely support lab techs back at the campus research lab.   In this case, the research tech needs help to complete a procedure in the lab.    In the ideal case, the remote trainer should have the ability to place helpful annotations to focus attention and place 3D content/pictures to coach the student.    In this scenario, the HoloLens can transmit the view and perspective of student to the trainer.  The trainer can provide mentorship or coaching using a remote view.   In a similar fashion, teachers may use the Microsoft HoloLens in recording lectures for their classroom or transmit live video over the internet.

We enjoy hearing from our readers.   If you got an idea for a Windows HoloLens application, leave a comment below.   The possibility for Windows Holographic computing is out of this world.

 

 

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Celebrating SparkMacon Makerspace Community in 2016

SparkMacon 3D Print

Happy Holidays everyone!  We wanted to share a few memories and pictures from our community outreach in 2016 and workshops.   We’ve also included pictures from our road trip to Atlanta Maker Faire.  We’re very thankful to our team and community members who continue to grow Macon as a Maker City!

From my perspective, I enjoy seeing new relationships and friendships form through our coworking/makerspace.   Our team also enjoys seeing the growth of our maker businesses, our young makers, and creatives.   It’s a true joy to connect and support our Macon makers.   We want to thank Real Impact and our volunteer teams for their service to coach young makers to grow their creativity.   We also want to thank our team members who lead our start-up community events like Young Entrepreneurs Academy,  .NET users group,Creative Entrepreneur Meetups and other community networking events.

We’re looking forward to growing the Macon Makers movement together in 2017!

Merry Christmas to you and your family!

Onward and upward!

The SparkMacon Team

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Tiz the Season To Code a Christmas Song

Music

Hi, friends! Hope that you and your family have a very Merry Christmas. Last week, we celebrated National computer science week. In schools over the world, kids and adults had their first exposure to the fundamentals of computer science: putting commands in order, looping, breaking problems into smaller parts, and decision making.  Make sure to check out the great learning resources at Code.org .

I have to confess that Christmas is one of my favorite seasons because of the music.   Growing up, my parents provided me and my brother a precious gift of teaching us music.  I started playing violin at age five, learned cocktail piano with my mom in high school, and started coaching choirs in college.   Music is in my soul.   Christmas is just a wonderful time to be a music maker.

There’s a really fun tool by Sam Aaron and University of Cambridge Computer Laboratory that teaches music theory and computer science called Sonic Pi.  This tool does an amazing job of helping students understand music theory concepts by building songs with code.   The software uses the Ruby programming language and has brief and fun tutorials to inspire the student to make electronic music while coding.   You can learn more about Sonic Pi in our blog post here.   Sonic Pi runs on Mac, Windows, Linux, and Raspberry Pi.

There’s also a great ebook from our friends at MagPi on Sonic Pi.  MagPi is a great resource for students, makers, and parents who enjoy Raspberry Pi.

Here’s your mission if you choose to accept it

I wanted to offer a coding challenge to students, parents, and makers who follow our blog.  Try coding up a Christmas or Holiday song.   I found that it was a fun exercise since it requires you to think about melody line building, timing, and coding.

To help inspire your imagination, I have coded up the classic song: Silent Night.   Download Sonic Pi, copy the code from here into Sonic Pi, and listen.    There’s a track for the melody and the track for chords.

Hope you enjoy this challenge!  Make sure to share your creations in the comments below!

Silent Night using Sonic Pi / Ruby

Top Stories

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Import 3D Scenes Into Minecraft using MCEdit2 #makered #minecraft #minecraftedu

In our classes for young makers, we discuss how digital fabrication technology will be a game-changer.   In future work, more jobs will involve converting digital content into physical things through technologies like 3D printing, CNC, and other similar technologies.   Students love playing video games and enjoy the opportunity to learn how to make their own game worlds.   At the Museum of Aviation in Warner Robins, GA, I had the opportunity to teach a workshop on building amazing game worlds in Minecraft using TinkerCAD.com.   It’s so much fun to share these lessons with students!  After guiding the students through some of the basic operations of TinkerCAD.com, we encourage the students to play and build projects that they care about.   It was cool to see their finished work in Minecraft.   While the students think about “playing and building,” they are actually exposed to many engineering and math skills too.   The students learned how to displace objects in 3D space, rotate objects, scale objects, perform measurement, and many other mathematical ideas.

Some of the students attempted to build a Minecraft roller coaster structure.   In a secondary step, we added Minecraft train tracks and red stone power rails to power our Minecarts.  It turned out great!

Minecraft Roller coaster

One of our students decided to build a huge Minecraft creeper!  A friend of mine from Ampersand Arts in MaconMacon, helped build the huge snow man shown below.

Creeper, snowman, and friends

You can see a car, tie fighter, and rockets built by the students.

Car, Tie Fighter, Rockets

Very proud of the focus and work of our students.  I’m also thankful to my friend Jake who helped coach the class with me.

To support parents, students, and teachers, I wanted to share a few tips to enable you to build stuff like this in Minecraft.

What’s a schematic file?

A schematic file contains 3D model data to transfer content into Minecraft.    You can find schematic data files on web sites like http://www.minecraft-schematics.com/ .   You can also create 3D models and convert them to schematic files using TinkerCAD.com .

How do you import schematic files into Minecraft? 

I wanted to share a quick tutorial video on using MCEdit to import schematic content into Minecraft. Before doing the steps mentioned in this video, make sure to install Minecraft on your computer and create at least one world.

Steps:
1. Open your web browser and navigate to http://www.mcedit.net/ .
2. Click the “Download” menu option at the top.
3. You will want to download the latest version appropriate for your operating system. In this tutorial, we will download version 2 beta 6 for Windows. (64 bit version)
4. After the install program has been downloaded, execute the program and specify a location to store “mcedit.” For this demo, we will store MCEdit in “c:\games\mcedit.”  Using our file explorer, we will navigate to the MCEdit folder.
5. Open the “mcedit2-win64-2.0.0-beta6” folder.
6. Run MCEdit
7. In the panel on the left, MCEdit lists the minecraft game worlds saved by your current user account. For this demo, we’ll open the world called “demo.”
8. Select “demo”.
9. Click the button “edit.”
10. You can move around this gameworld using “WASD” navigation style.
11. You can change the direction the player is looking by holding the “right” mouse button and dragging the mouse.
12. To import a schematic file, click the “Import/Export > Import”
13. The system will open a file box enabling you to select a schematic. For this demo, we’ll select a small car created by one my students.
14. The XYZ numbers here enable you to adjust the location of the schematic content. In my case, I’ll edit the “y” coordinate to make sure to car connects to the ground.
15. Click the “confirm” button to accept the schematic content into the world.
16. Keep in mind, you’re not done yet. You need to save the session by clicking the “MCEdit” menu followed by “save world.”
17. You’re all done. Close MCEdit.
18. Open up Minecraft to test that your schematic file shows up correctly in your world!

 

We want to say thank you to the Museum of Aviation of Warner Robins, GA for enabling us to share this workshop.   Make sure to check out their fantastic STEM education workshops here.  We also want to give a shout out to the folks at TinkerCAD.com and MCEdit.NET.   Without their care and craft, we wouldn’t be able to inspire these students as makers of the future.  I really appreciate their work.

Make sure to check out our next workshop!!

Robotics: Building upon the programming skills introduced early in the program, students will have the opportunity to build robots from scratch using the mBot kit.   Students will love customizing their mBot using puzzle based programming and the easy to assemble construction experience.   Students take home their mbot to continue the tinkering fun at home.

Student registration includes a complete mBot robotics kit from Makeblock.cc.

http://www.makeblock.cc/mbot/

  • Workshop length: 3 hours
  • Cost: $20 + $75(cost of mBot kit)
  • Register for the workshop today!
  • Dates – Dec 3rd from 1pm to 4pm
  • Location – SparkMacon Makerspace – 557 Cherry St, Macon, GA (parking/directions)
  • All ages and experience levels are welcome and the workshops are a great activity for the entire family. Parents and kids can also both attend under the same registration fee!

 

Top Stories

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

How To Create Collaborative Digital Art using #JavaScript

Published on October 21, 2016 by in technology

loop / rotate / translate

In this tutorial, we’ll explore the process of building a digital drawing canvas where artists can simultaneously collaborate. You can test drive the collaborative drawing canvas below. To draw, just click and drag your mouse.

Open drawing area in another window.

Complete Code Sample

To explore building a collaborative digital art canvas, we’ll start with a very simple example. This code is based on the p5 processing js framework. You can download this sample code and other 3D art examples from my github repo. In general, this javascript code needs to setup a connection to my Firebase database, setup a list of colors, setup code to react to drawing events, and give the artist a way to contribute drawing events to the system. In the rest of this blog post, we’ll break this code down.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var database;
var colorOptions;

function setup() {
    createCanvas(1024, 768);

    // Initialize Firebase
    var config = {
    apiKey: "...",
    authDomain: "changeme.firebaseapp.com",
    databaseURL: "https://changeme.firebaseio.com",
    storageBucket: "",
    };
    firebase.initializeApp(config);
    database = firebase.database();

    //make a list of colors in an array....
        colorOptions = new Array();
    colorOptions[0] = "#faa916"
    colorOptions[1] = "#6d676e"
    colorOptions[2] = "#1b1b1e"
    colorOptions[3] = "#96031a"

    //pull points from firebase and draw them...
    var pointRef = firebase.database().ref('points');
    pointRef.on('child_added', function(data) {

        // So... a new point has been added. Get the data.
        var aPoint = data.val();

        //set the color based on point
        fill(aPoint.color);

        //draw the point
        ellipse(aPoint.x, aPoint.y, 10, 10);
    });



}

function draw() {
    if (mouseIsPressed) {      
        //get current time
        var date = new Date();
        var m = date.getMinutes();

        //select a color option based on the minutes
        var i = m % 4;
       
        // make a point capturing location(x,y) and color
        var aPoint = {}
        aPoint.x = mouseX;
        aPoint.y = mouseY;
        aPoint.color = colorOptions[i];

        //add point to firebase ...
        database.ref("points").push(aPoint);   
    }
}

Setting up our drawing space and Firebase connection

P5 is a easy 2D JavaScript framework for drawing stuff. In the “setup” function, p5 enables programmers to establish their workspace. In our case, we have 3 jobs: create a canvas, connect to our Firebase database, and tell the system how it should handle drawing events. In the following code, we create a drawing surface called a canvas that’s 1024 pixels by 768 pixels. The rest of the code establishes a connection to my firebase instance. Firebase is a real-time database in the Google family of products. From a JavaScript programmers point of view, it provides an easy way to capture data and push that new data to other users of your app or experience. In our case, the moment that one user starts drawing, all other users will see the result instantly with no refreshing. Experienced programmers will also notice that you don’t insert data using SQL, you just ask the system to store JSON.

Make sure to learn more about Google Firebase at https://firebase.google.com/. In my case, I established a database instance that’s writable to the public. This works great for public wikis or collaborative public art. You can also secure your database instance with authentication and login methods. Check out their documentation for details.

1
2
3
4
5
6
7
8
9
10
11
    createCanvas(1024, 768);

    // Initialize Firebase
    var config = {
    apiKey: "...",
    authDomain: "changeme.firebaseapp.com",
    databaseURL: "https://changeme.firebaseio.com",
    storageBucket: "",
    };
    firebase.initializeApp(config);
    database = firebase.database();

In this tutorial, let’s change the drawing colors of our collaborative canvas with time. In this case, we’ll provide 4 options in the code below.

1
2
3
4
5
        colorOptions = new Array();
    colorOptions[0] = "#faa916"
    colorOptions[1] = "#6d676e"
    colorOptions[2] = "#1b1b1e"
    colorOptions[3] = "#96031a"

Let’s draw something!

In the following code, we get the browser to listen for changes from our Firebase database. When changes occur to our points list, we draw stuff. When a child is added, we grab a single point, set the fill color, and draw a small circle at the location.

1
2
3
4
5
6
7
8
9
10
11
    var pointRef = firebase.database().ref('points');
    pointRef.on('child_added', function(data) {
        // So... a new point has been added. Get the data.
        var aPoint = data.val();

        //set the color based on point
        fill(aPoint.color);

        //draw the point
        ellipse(aPoint.x, aPoint.y, 10, 10);
    });

How do users draw?

For our simple collaborative canvas, artists draw on the canvas by simply clicking and dragging their mouse. In the following code, we detect mouse clicks, the location of the mouse click, and pick a color based on time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function draw() {
    if (mouseIsPressed) {      
        //get current time
        var date = new Date();
        var m = date.getMinutes();

        //select a color option based on the minutes
        var i = m % 4;
       
        // make a point capturing location(x,y) and color
        var aPoint = {}
        aPoint.x = mouseX;
        aPoint.y = mouseY;
        aPoint.color = colorOptions[i];

        //add point to firebase ...
        database.ref("points").push(aPoint);   
    }
}

If you enjoyed this tutorial, you’re going to LOVE the following art and code festival we’re organizing tomorrow. It’s an opportunity for artists, designers, and coders in Middle, GA to connect and invent new crowd sourced art experiences. It’s going to be a blast! Macon GDG has organized the content and teaching to be accessible to artists and designers interested in growing their coding skills. We’ll be building amazing 3D collaborative art experiences like the following:

This prototype piece was presented by Dr. Allen during our last Open Make night at SparkMacon Makerspace.

I want to give a shout out to our friends at Google Developer Group of Macon and Dr. Robert Allen from Mercer. It was a blast brainstorming and implementing Macon’s first Google DevFest together

  • Google DevFest: A festival for software developers, artists, and creative thinkers.
    Explore CrowdSourced Art using tools like ThreeJS and Firebase.com, an amazing realtime database framework.
  • Learn more at http://devfest.cs.mercer.edu/
  • When: October 22, 2016 – 9 a.m. – 5 p.m.
  • Where: Mercer University Science and Engineering Building

Join the community of SparkMacon Makerspace

Central GA’s first makerspace w/ art + tech tools & expertise to help you learn STEAM skills, collaborate w/ creatives & grow your creative business.

Join our Facebook Community at https://www.facebook.com/groups/sparkmacon/

Spark Macon

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

5 Powerful JavaScript Frameworks for 2D and 3D Graphics #javascript

three js

  • https://threejs.org/ – A 3D graphics library for HTML and JavaScript. Make sure to check out sample code here and at https://stemkoski.github.io/Three.js/.   Writing Google Cardboard apps?  Check out https://vr.chromeexperiments.com/.  This link has template code for building a Google Cardboard app using JavaScript.
  • http://p5js.org/ – “…a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today’s web.” This library looks like a great framework for getting started in 2D graphics.  Khan Academy uses a similar framework in their drawing tutorials to computer science.
  • http://www.babylonjs.com/ – 3D graphics library that abstracts the complexities of WebGL. They seem to have a focus of making it simple to get started while making it possible to build complex scenes. For a detailed review of this framework, check this interview from Scott Hanselman.  ( Check out the blog post too )
  • http://paperjs.org/ – “Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”
  • http://fabricjs.com/ – Another cool vector graphics library.

 

What’s your favorite JS library for computer graphics?   Let us know in the comments!

 

Make sure Macon’s Google DevFest!

  • Google DevFest: A festival for software developers, artists, and creative thinkers.
    Explore CrowdSourced Art using tools like ThreeJS and Firebase.com, an amazing realtime database framework.
  • Learn more at http://devfest.cs.mercer.edu/
  • When: October 22, 2016 – 9 a.m. – 5 p.m.
  • Where: Mercer University Science and Engineering Building

 

Top Stories

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Inspire Curiosity and Creativity in your Young Maker with SparkMacon’s Robotics Workshop

mBot

Through making and tinkering, students learn using their hands, grow their creativity, and become more curious about their world and testing the limits of what is possible. InspiredToEducate.NET and SparkMacon Makerspace have designed a series of workshops to connect students with the essential technology skills of inventing using computer programming, digital fabrication, and robotics.    

Parents and kids are invited to take this workshop together.  It’s a great family activity!

Robotics: This workshop makes a great gift for the young makers in your life to inspire their love of learning and practice their creative skills.   During this hands-on workshop, students will have the opportunity to build robots from scratch using the mBot kit.   Students will love customizing their mBot using puzzle based programming and the easy to assemble construction experience.   You can program and control the robot using a PC, IPad, or mobile phone.    Students take home their mbot to continue the tinkering fun at home.     

Student registration includes a complete mBot robotics kit from Makeblock.cc.

http://www.makeblock.cc/mbot/

  • Workshop length: 3 hours
  • Cost: $95
  • Workshop cost includes a MakeBlock mBlock kit the students take home.
  • This class serves students from age 9 or older.
  • Interested in registering the workshop?  Please register here.
  • Dates
    • Oct 8th from 1pm to 4pm
    • Dec 3rd from 1pm to 4pm

Location for workshops:

Our robotics workshop will be located at SparkMacon Makerspace.

557 Cherry Street, Macon, GA

Funds from these Maker Skills workshops help support the operation of SparkMacon Makerspace.  Parking and location information can be found here.

Hope to see you there!

 

Top Stories

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 

No tweets to display

© Inspired To Educate
credit